feat: simple api call to enable search

client/src/App.jsx

@@ -6,42 +6,34 @@ import Nav from './components/Nav';
 import MobileNav from './components/Nav/MobileNav';
 import useDocumentTitle from '~/hooks/useDocumentTitle';
 import { useSelector, useDispatch } from 'react-redux';
+import userAuth from './utils/userAuth';
 import { setUser } from './store/userReducer';
+import { setSearchState } from './store/searchSlice';
 import axios from 'axios';
 
 const App = () => {
   const dispatch = useDispatch();
-  
+
   const { messages, messageTree } = useSelector((state) => state.messages);
   const { user } = useSelector((state) => state.user);
   const { title } = useSelector((state) => state.convo);
-  const [ navVisible, setNavVisible ]= useState(false)
+  const [navVisible, setNavVisible] = useState(false);
   useDocumentTitle(title);
 
-  useEffect(async () => {
-    try {
-      const response = await axios.get('/api/me', {
-        timeout: 1000,
-        withCredentials: true
-      });
-      const user = response.data;
-      if (user) {
-        dispatch(setUser(user));
-      } else {
-        console.log('Not login!');
-        window.location.href = '/auth/login';
-      }
-    } catch (error) {
-      console.error(error);
-      console.log('Not login!');
-      window.location.href = '/auth/login';
-    }
-  }, [])
+  useEffect(() => {
+    axios.get('/api/search/enable').then((res) => { console.log(res.data); dispatch(setSearchState(res.data))});
+    userAuth()
+      .then((user) => dispatch(setUser(user)))
+      .catch((err) => console.log(err));
+  }, []);
 
   if (user)
     return (
       <div className="flex h-screen">
-        <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
+        <Nav
+          navVisible={navVisible}
+          setNavVisible={setNavVisible}
+        />
         <div className="flex h-full w-full flex-1 flex-col bg-gray-50 md:pl-[260px]">
           <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white dark:bg-gray-800">
             <MobileNav setNavVisible={setNavVisible} />
@@ -58,12 +50,7 @@ const App = () => {
         </div>
       </div>
     );
-  else
-    return (
-      <div className="flex h-screen">
-        
-      </div>
-    )
+  else return <div className="flex h-screen"></div>;
 };
 
 export default App;

client/src/components/Nav/NavLinks.jsx

@@ -1,22 +1,18 @@
 import React from 'react';
-import NavLink from './NavLink';
-import LogOutIcon from '../svg/LogOutIcon';
 import SearchBar from './SearchBar';
 import ClearConvos from './ClearConvos';
 import DarkMode from './DarkMode';
 import Logout from './Logout';
+import { useSelector } from 'react-redux';
 
 export default function NavLinks({ fetch, onSearchSuccess, clearSearch }) {
+  const { searchEnabled } = useSelector((state) => state.search);
   return (
     <>
-      {/* <SearchBar fetch={fetch} onSuccess={onSearchSuccess} clearSearch={clearSearch}/> */}
+      { !!searchEnabled && <SearchBar fetch={fetch} onSuccess={onSearchSuccess} clearSearch={clearSearch}/>}
       <ClearConvos />
       <DarkMode />
       <Logout />
-      {/* <NavLink
-        svg={LogOutIcon}
-        text="Log out"
-      /> */}
     </>
   );
 }

client/src/store/searchSlice.js

@@ -1,6 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
+  searchEnabled: false,
   search: false,
   query: '',
 };
@@ -10,7 +11,7 @@ const currentSlice = createSlice({
   initialState,
   reducers: {
     setSearchState: (state, action) => {
-      state.search = action.payload;
+      state.searchEnabled = action.payload;
     },
     setQuery: (state, action) => {
       const q = action.payload;

client/src/utils/userAuth.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+export default async function fetchData() {
+  try {
+    const response = await axios.get('/api/me', {
+      timeout: 1000,
+      withCredentials: true
+    });
+    const user = response.data;
+    if (user) {
+      // dispatch(setUser(user));
+      // callback(user);
+      return user;
+    } else {
+      console.log('Not login!');
+      window.location.href = '/auth/login';
+    }
+  } catch (error) {
+    console.error(error);
+    console.log('Not login!');
+    window.location.href = '/auth/login';
+  }
+}