Merge pull request CodingCatDev#224 from CodingCatDev/main

codercatdev · web-flow · commit a7566eda801f · 2021-10-07T09:30:36.000-04:00
add algolia searchmodale to dev
diff --git a/frontend/main/src/components/algolia/SearchModal.tsx b/frontend/main/src/components/algolia/SearchModal.tsx
@@ -1,8 +1,11 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import useOnClickOutside from '@/hooks/useOnClickOutside';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import AlgoliaInstantSearch from './algoliaInstantSearch';
 
 export default function SearchModal(): JSX.Element {
   const [show, setShow] = useState(false);
+  const ref = useRef(null);
+  useOnClickOutside(ref, () => setShow(false));
 
   const showModal = () => {
     setShow(true);
@@ -51,7 +54,10 @@ export default function SearchModal(): JSX.Element {
                 'scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both',
             }}
           >
-            <section className="absolute grid w-full h-full gap-4 p-4 grid-rows-search">
+            <section
+              className="absolute grid w-full h-full gap-4 p-4 grid-rows-search"
+              ref={ref}
+            >
               <AlgoliaInstantSearch show={show}></AlgoliaInstantSearch>
               <button
                 className="absolute top-0 right-0 p-5 text-2xl transition-colors rounded-full text-primary-900 hover:text-secondary-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-900"
diff --git a/frontend/main/src/components/algolia/algoliaInstantSearch.tsx b/frontend/main/src/components/algolia/algoliaInstantSearch.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createRef } from 'react';
+import React, { useState } from 'react';
 
 import algoliasearch from 'algoliasearch/lite';
 import {
@@ -7,28 +7,11 @@ import {
   Index,
   connectStateResults,
   PoweredBy,
+  MenuSelect,
 } from 'react-instantsearch-dom';
 import CustomSearchBox from './customSearchBox';
 import * as hitComps from './customHitComponents';
 
-const useClickOutside = (
-  ref: { current: { contains: (arg0: any) => any } },
-  handler: () => any,
-  events: string[]
-) => {
-  if (!events) events = [`mousedown`, `touchstart`];
-  const detectClickOutside = (event: { target: any }) =>
-    !ref.current.contains(event.target) && handler();
-  useEffect(() => {
-    for (const event of events)
-      document.addEventListener(event, detectClickOutside);
-    return () => {
-      for (const event of events)
-        document.removeEventListener(event, detectClickOutside);
-    };
-  });
-};
-
 const algoliaClient = algoliasearch(
   process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || '',
   process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || ''
@@ -56,9 +39,8 @@ const Stats = connectStateResults(({ searchResults: res }: any) => {
   );
 });
 
-const HitList = (show: any) => {
-  const [query, setQuery] = useState(``);
-  const [focus, setFocus] = useState(false);
+const HitList = ({ show }: { show: boolean }): JSX.Element => {
+  const [, setFocus] = useState(false);
 
   const searchClient = {
     search(requests: any) {
@@ -99,8 +81,9 @@ const HitList = (show: any) => {
           ))}
           <footer>
             <hr className="mb-2 opacity-20 text-primary-900" />
-            <div className="justify-self-end">
+            <div className="flex justify-between">
               <PoweredBy />
+              <MenuSelect attribute="type" />
             </div>
           </footer>
         </InstantSearch>
diff --git a/frontend/main/src/hooks/useOnClickOutside.tsx b/frontend/main/src/hooks/useOnClickOutside.tsx
@@ -0,0 +1,41 @@
+import { RefObject, useEffect } from 'react';
+const MOUSEDOWN = 'mousedown';
+const TOUCHSTART = 'touchstart';
+
+type HandledEvents = [typeof MOUSEDOWN, typeof TOUCHSTART];
+type HandledEventsType = HandledEvents[number];
+type PossibleEvent = {
+  [Type in HandledEventsType]: HTMLElementEventMap[Type];
+}[HandledEventsType];
+type Handler = (event: PossibleEvent) => void;
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export default function useOnClickOutside(
+  ref: RefObject<HTMLElement>,
+  handler: Handler
+) {
+  useEffect(
+    () => {
+      const listener = (event: PossibleEvent) => {
+        // Do nothing if clicking ref's element or descendent elements
+        if (!ref.current || ref.current.contains(event.target as Node)) {
+          return;
+        }
+        handler(event);
+      };
+      document.addEventListener('mousedown', listener);
+      document.addEventListener('touchstart', listener);
+      return () => {
+        document.removeEventListener('mousedown', listener);
+        document.removeEventListener('touchstart', listener);
+      };
+    },
+    // Add ref and handler to effect dependencies
+    // It's worth noting that because passed in handler is a new ...
+    // ... function on every render that will cause this effect ...
+    // ... callback/cleanup to run every render. It's not a big deal ...
+    // ... but to optimize you can wrap handler in useCallback before ...
+    // ... passing it into this hook.
+    [ref, handler]
+  );
+}
