refactor: nav and search.

feat: use recoil to replace redux
feat: use react-native

THIS IS NOT FINISHED. DONT USE THIS

client/src/App.jsx

@@ -1,53 +1,52 @@
 import React, { useEffect, useState } from 'react';
-import Messages from './components/Messages';
-import Landing from './components/Main/Landing';
-import TextChat from './components/Main/TextChat';
-import Nav from './components/Nav';
-import MobileNav from './components/Nav/MobileNav';
-import useDocumentTitle from '~/hooks/useDocumentTitle';
-import { useSelector, useDispatch } from 'react-redux';
+import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
+import Root from './routes/Root';
+// import Chat from './routes/Chat';
+import store from './store';
 import userAuth from './utils/userAuth';
-import { setUser } from './store/userReducer';
-import { setSearchState } from './store/searchSlice';
+import { useRecoilState, useSetRecoilState } from 'recoil';
+
 import axios from 'axios';
 
-const App = () => {
-  const dispatch = useDispatch();
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Root />,
+    children: [
+      {
+        index: true,
+        element: (
+          <Navigate
+            to="/chat/new"
+            replace={true}
+          />
+        )
+      },
+      {
+        path: 'chat/:conversationId',
+        element: null //<Chat />
+      }
+    ]
+  }
+]);
 
-  const { messages, messageTree } = useSelector((state) => state.messages);
-  const { user } = useSelector((state) => state.user);
-  const { title } = useSelector((state) => state.convo);
-  const [navVisible, setNavVisible] = useState(false);
-  useDocumentTitle(title);
+const App = () => {
+  const [user, setUser] = useRecoilState(store.user);
+  const setIsSearchEnabled = useSetRecoilState(store.isSearchEnabled);
 
   useEffect(() => {
-    axios.get('/api/search/enable').then((res) => { console.log(res.data); dispatch(setSearchState(res.data))});
+    axios.get('/api/search/enable').then(res => {
+      setIsSearchEnabled(res.data);
+    });
     userAuth()
-      .then((user) => dispatch(setUser(user)))
-      .catch((err) => console.log(err));
+      .then(user => setUser(user))
+      .catch(err => console.log(err));
   }, []);
 
   if (user)
     return (
-      <div className="flex h-screen">
-        <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} />
-            {messages.length === 0 && title.toLowerCase() === 'chatgpt clone' ? (
-              <Landing title={title} />
-            ) : (
-              <Messages
-                messages={messages}
-                messageTree={messageTree}
-              />
-            )}
-            <TextChat messages={messages} />
-          </div>
-        </div>
+      <div>
+        <RouterProvider router={router} />
       </div>
     );
   else return <div className="flex h-screen"></div>;