feat: adding navsearchcontext for searching players

packages/web/components/MegaMenu.tsx

@@ -64,8 +64,8 @@ import { getPlayerImage, getPlayerName } from 'utils/playerHelpers';
 import SearchIcon from '../assets/search-icon.svg';
 import SeedMarket from '../assets/seed-icon.svg';
 import XPStar from '../assets/xp-star.svg';
+import { useNavSearch } from '../contexts/NavSearchContext';
 import { useUser, useWeb3 } from '../lib/hooks';
-import { usePlayerFilter } from '../lib/hooks/players';
 import {
   MenuLinkItem,
   MenuLinkSet,
@@ -319,11 +319,13 @@ const DesktopNavLinks = () => {
 // Search -- not working yet
 const Search = () => {
   // const { queryVariables, setQueryVariable, players } = usePlayerFilter();
-  const [search, setSearch] = React.useState('');
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const { search, setSearch, clearSearch } = useNavSearch();
 
   const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
-    // setQueryVariable('search', `%${search}%`);
+    setSearch(searchQuery);
+    setSearchQuery('');
   };
 
   return (
@@ -353,8 +355,8 @@ const Search = () => {
             alignSelf="center"
             placeholder="Find anything"
             _placeholder={{ color: 'whiteAlpha.500' }}
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
             size="sm"
             fontSize="md"
           />

packages/web/contexts/NavSearchContext.tsx

@@ -0,0 +1,69 @@
+import { useRouter } from 'next/router';
+import React, { useContext, useReducer } from 'react';
+
+enum ActionKind {
+  SET_SEARCH = 'SET_SEARCH',
+  CLEAR_SEARCH = 'CLEAR_SEARCH',
+}
+
+const INITIAL_STATE = {
+  search: '',
+};
+
+type NavSearchContextType = {
+  search: string;
+  setSearch: (search: string) => void;
+  clearSearch: () => void;
+};
+
+type State = {
+  search: string;
+};
+
+interface Action {
+  type: string;
+  payload: string;
+}
+
+function searchReducer(state: State, action: Action) {
+  switch (action.type) {
+    case ActionKind.SET_SEARCH:
+      return {
+        ...state,
+        search: action.payload,
+      };
+    default:
+      return state;
+  }
+}
+
+export const NavSearchContext = React.createContext<NavSearchContextType>({
+  search: '',
+  setSearch: (search) => {},
+  clearSearch: () => {},
+});
+
+export const NavSearchContextProvider: React.FC = ({ children }) => {
+  const [state, dispatch] = useReducer(searchReducer, INITIAL_STATE);
+  const router = useRouter();
+
+  const setSearch = (search: string) => {
+    dispatch({ type: ActionKind.SET_SEARCH, payload: search });
+    router.push('/players');
+  };
+
+  const clearSearch = () => {
+    dispatch({ type: ActionKind.SET_SEARCH, payload: '' });
+  };
+
+  return (
+    <NavSearchContext.Provider
+      value={{ search: state.search, setSearch, clearSearch }}
+    >
+      {children}
+    </NavSearchContext.Provider>
+  );
+};
+
+export const useNavSearch = (): NavSearchContextType =>
+  useContext(NavSearchContext);

packages/web/pages/_app.tsx

@@ -7,6 +7,7 @@ import Head from 'next/head';
 import { WithUrqlProps } from 'next-urql';
 import React from 'react';
 
+import { NavSearchContextProvider } from '../contexts/NavSearchContext';
 import { wrapUrqlClient } from '../graphql/client';
 
 const App: React.FC<WithUrqlProps> = ({
@@ -54,11 +55,13 @@ const App: React.FC<WithUrqlProps> = ({
       )}
     </Head>
     <Web3ContextProvider resetUrqlClient={resetUrqlClient}>
-      <>
-        {!pageProps.hideTopMenu && <MegaMenu />}
-        {!pageProps.hideTopMenu && <PlayerStatsBar />}
-        <Component {...pageProps} />
-      </>
+      <NavSearchContextProvider>
+        <>
+          {!pageProps.hideTopMenu && <MegaMenu />}
+          {!pageProps.hideTopMenu && <PlayerStatsBar />}
+          <Component {...pageProps} />
+        </>
+      </NavSearchContextProvider>
     </Web3ContextProvider>
   </ChakraProvider>
 );

packages/web/pages/community/players.tsx

@@ -17,6 +17,8 @@ import { useOnScreen } from 'lib/hooks/useOnScreen';
 import { InferGetStaticPropsType } from 'next';
 import React, { useEffect, useMemo, useRef } from 'react';
 
+import { useNavSearch } from '../contexts/NavSearchContext';
+
 type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
 export const getStaticProps = async () => {
@@ -53,6 +55,15 @@ const Players: React.FC<Props> = () => {
     moreAvailable,
   } = usePlayerFilter();
 
+  const { search, clearSearch } = useNavSearch();
+
+  useEffect(() => {
+    if (search !== '' && setQueryVariable) {
+      setQueryVariable('search', `%${search}%`);
+      clearSearch();
+    }
+  }, [search, setQueryVariable, clearSearch]);
+
   const moreRef = useRef<HTMLDivElement>(null);
 
   const onScreen = useOnScreen(moreRef);