feat: simple api call to enable search

api/.env.example

@@ -26,4 +26,5 @@ BING_TOKEN=
 # global enable/disable the sample user system.
 # this is not a ready to use user system.
 # dont't use it, unless you can write your own code.
+SEARCH=
 ENABLE_USER_SYSTEM=

api/server/routes/search.js

@@ -2,7 +2,7 @@ const express = require('express');
 const router = express.Router();
 const { Message } = require('../../models/Message');
 const { Conversation, getConvosQueried } = require('../../models/Conversation');
-const { reduceMessages, reduceHits } = require('../../lib/utils/reduceHits');
+const { reduceHits } = require('../../lib/utils/reduceHits');
 // const { MeiliSearch } = require('meilisearch');
 const cache = new Map();
 
@@ -53,7 +53,7 @@ router.get('/', async function (req, res) {
     const result = await getConvosQueried(user, sortedHits, pageNumber);
     cache.set(q, result.cache);
     delete result.cache;
-    result.messages = messages.filter((message) => !result.filter.has(message.conversationId));
+    result.messages = messages.filter(message => !result.filter.has(message.conversationId));
     // console.log(result, messages.length);
     res.status(200).send(result);
   } catch (error) {
@@ -78,4 +78,8 @@ router.get('/test', async function (req, res) {
   res.send(messages);
 });
 
+router.get('/enable', async function (req, res) {
+  res.send(!!process.env.SEARCH);
+});
+
 module.exports = router;

client/src/App.jsx

@@ -6,7 +6,9 @@ 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 = () => {
@@ -15,33 +17,23 @@ const App = () => {
   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 () => {
+  useEffect(() => {
-    try {
+    axios.get('/api/search/enable').then((res) => { console.log(res.data); dispatch(setSearchState(res.data))});
-      const response = await axios.get('/api/me', {
+    userAuth()
-        timeout: 1000,
+      .then((user) => dispatch(setUser(user)))
-        withCredentials: true
+      .catch((err) => console.log(err));
-      });
+  }, []);
-      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';
-    }
-  }, [])
 
   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
+  else return <div className="flex h-screen"></div>;
-    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';
+  }
+}