refactor: better file structure

client/src/App.jsx

@@ -1,44 +1,44 @@
-import { changeIsLogged } from './redux/Reducers/isLogged';
+import { changeIsLogged } from './context/redux/Reducers/isLogged';
 import { useDispatch, useSelector } from 'react-redux';
-import { SocketContext, socket } from './Context';
+import { SocketContext, socket } from './context/Context';
 
 // Components
-import Login from './components/Login/Login';
-import RoutesComponent from './components/Routes';
+import Login from './pages/Login/Login';
+import RoutesComponent from './components/Navigation/Routes';
 import { useEffect } from 'react';
 
 function App() {
-  const dispatch = useDispatch();
-  const isLogged = useSelector((state) => state.isLogged);
-  const isUserLoggedIn = useSelector((state) => {
-    const { isLogged } = state;
+    const dispatch = useDispatch();
+    const isLogged = useSelector((state) => state.isLogged);
+    const isUserLoggedIn = useSelector((state) => {
+        const { isLogged } = state;
 
-    return isLogged.isLoggedIn && isLogged.loginId !== null;
-  });
+        return isLogged.isLoggedIn && isLogged.loginId !== null;
+    });
 
-  useEffect(() => {
-    // We need to convert the JSON string we saved to localStorage
-    // back to the original state object first before dispatching
-    // NOTE: Using try...catch here to prevent blank page on first visit
-    //       (previous issue that was solved)
-    try {
-      dispatch(changeIsLogged(JSON.parse(window.localStorage.isLogged)));
-    } catch {
-      dispatch(changeIsLogged({}));
-    }
-  }, []);
+    useEffect(() => {
+        // We need to convert the JSON string we saved to localStorage
+        // back to the original state object first before dispatching
+        // NOTE: Using try...catch here to prevent blank page on first visit
+        //       (previous issue that was solved)
+        try {
+            dispatch(changeIsLogged(JSON.parse(window.localStorage.isLogged)));
+        } catch {
+            dispatch(changeIsLogged({}));
+        }
+    }, []);
 
-  useEffect(() => {
-    // `localStorage` only accepts strings so have to convert the state to
-    // JSON format first
-    window.localStorage.setItem('isLogged', JSON.stringify(isLogged));
-  }, [isLogged]);
+    useEffect(() => {
+        // `localStorage` only accepts strings so have to convert the state to
+        // JSON format first
+        window.localStorage.setItem('isLogged', JSON.stringify(isLogged));
+    }, [isLogged]);
 
-  return (
-    <SocketContext.Provider value={socket}>
-      <div>{isUserLoggedIn ? <RoutesComponent /> : <Login />}</div>
-    </SocketContext.Provider>
-  );
+    return (
+        <SocketContext.Provider value={socket}>
+            <div>{isUserLoggedIn ? <RoutesComponent /> : <Login />}</div>
+        </SocketContext.Provider>
+    );
 }
 
 export default App;

client/src/components/Chat/Chat.jsx

@@ -1,13 +1,13 @@
-import React, { useState, useEffect, useRef, useContext } from 'react';
+import { useState, useEffect, useRef, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { SocketContext } from '../../Context';
+import { SocketContext } from '../../context/Context';
 
-import './Chat.css';
+import '../../assets/css/Chat.css'
 
 import ScrollToBottom from 'react-scroll-to-bottom';
 import { IoSend } from 'react-icons/io5';
 
-import { addMessages } from '../../redux/Reducers/messageSlice';
+import { addMessages } from '../../context/redux/Reducers/messageSlice';
 
 let senderId;
 const Chat = () => {

client/src/components/Navigation/NavBar.jsx

@@ -0,0 +1,54 @@
+import { NavLink } from 'react-router-dom';
+// Icons
+
+import { BsChatDots } from 'react-icons/bs';
+import { RiUserSearchLine } from 'react-icons/ri';
+import { BiUserCircle } from 'react-icons/bi';
+
+const linkStyle = `h-[80px] w-[100%] flex items-center justify-center hover:bg-primary p-6 rounded-[15px] `;
+const activeStyle = linkStyle + 'bg-primary shadow-2xl';
+const iconStyle = 'fill-[#f5f5f5] scale-[2]';
+
+const NavBar = () => {
+
+
+
+    return (
+        <div
+            className="
+    navContainer bg-secondary 
+    w-[120px] min-h-[100vh]
+    flex items-center flex-col
+    justify-center shadow-[0_0_100px_0_rgba(0,0,0,1)] p-5"
+        >
+            <div className="justify-between flex items-center flex-col h-[35%] w-[100%]">
+                <NavLink
+                    to="/"
+                    className={({ isActive }) =>
+                        (isActive ? activeStyle : linkStyle)
+                    }
+                >
+                    <RiUserSearchLine className={iconStyle} />
+                </NavLink>
+                <NavLink
+                    to="/friends"
+                    className={({ isActive }) =>
+                        (isActive ? activeStyle : linkStyle)
+                    }
+                >
+                    <BsChatDots className={iconStyle} />
+                </NavLink>
+                <NavLink
+                    to="/profile"
+                    className={({ isActive }) =>
+                        (isActive ? activeStyle : linkStyle)
+                    }
+                >
+                    <BiUserCircle className={iconStyle} />
+                </NavLink>
+            </div>
+        </div>
+    );
+};
+
+export default NavBar;

client/src/components/Routes.jsx → client/src/components/Navigation/Routes.jsx

@@ -1,18 +1,18 @@
 import { Route, Routes } from 'react-router-dom';
-import ComingSoon from './ComingSoon';
+import ComingSoon from '../../pages/ComingSoon/ComingSoon';
 
 // Components
-import NavBar from './NavBar/NavBar';
-import OnClickOnStart from './SearchUser/OnClickOnStart/OnClickOnStart';
-import SearchUser from './SearchUser/SearchUser';
+import NavBar from './NavBar';
+import Searching from '../../pages/Searching';
+import Start from '../../pages/Start';
 
 const RoutesComponent = () => {
     return (
         <div className="flex">
             <NavBar />
             <Routes>
-                <Route path="/" element={<SearchUser />} />
-                <Route path="/founduser" element={<OnClickOnStart />} />
+                <Route path="/" element={<Start />} />
+                <Route path="/founduser" element={<Searching />} />
                 <Route path="/friends" element={<ComingSoon />} />
                 <Route path="/profile" element={<ComingSoon />} />
             </Routes>

client/src/components/SearchUser/FoundUser/FoundUser.jsx → client/src/pages/Anonymous/index.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { BiDotsVerticalRounded } from 'react-icons/bi';
-import Chat from '../../Chat/Chat';
+import Chat from '../../components/Chat/Chat'
 
 const centerItems = `flex items-center justify-center`;
 
-const FoundUser = () => {
+const Anonymous = () => {
     return (
         <div
             className={`bg-[#011627] min-w-[calc(100%-120px)] ${centerItems} flex-col max-h-[100vh] text-[#FFF]`}
@@ -21,4 +21,4 @@ const FoundUser = () => {
     );
 };
 
-export default FoundUser;
+export default Anonymous;

client/src/components/Login/Login.jsx → client/src/pages/Login/Login.jsx

@@ -3,8 +3,8 @@ import axios from 'axios';
 import MojoAuth from 'mojoauth-web-sdk';
 
 // Redux
-import { changeIsLogged } from '../../redux/Reducers/isLogged';
-import { addID } from '../../redux/Reducers/idSlice';
+import { changeIsLogged } from '../../context/redux/Reducers/isLogged';
+import { addID } from '../../context/redux/Reducers/idSlice';
 import { useDispatch } from 'react-redux';
 
 const centerStuffs = `flex flex-col justify-center items-center`;

client/src/components/SearchUser/OnClickOnStart/OnClickOnStart.jsx → client/src/pages/Searching/index.jsx

@@ -1,10 +1,10 @@
-import React, { useState, useContext, useEffect } from 'react';
+import { useState, useContext, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { SocketContext } from '../../../Context';
 
-import FoundUser from '../FoundUser/FoundUser';
+import Anonymous from '../Anonymous';
 
-const OnClickOnStart = () => {
+const Searching = () => {
     // eslint-disable-next-line no-unused-vars
     const [isFound, setIsFound] = useState(false);
     const socket = useContext(SocketContext);
@@ -23,7 +23,7 @@ const OnClickOnStart = () => {
         });
     }, [socket, userID]);
 
-    return isFound ? <FoundUser /> : <div>Searching.....</div>;
+    return isFound ? <Anonymous /> : <div>Searching.....</div>;
 };
 
-export default OnClickOnStart;
+export default Searching;

client/src/components/SearchUser/SearchUser.jsx → client/src/pages/Start/index.jsx

@@ -1,11 +1,9 @@
-import React from 'react';
-
 import { RiUserSearchLine } from 'react-icons/ri';
 import { Link } from 'react-router-dom';
 
 const centerElement = ' flex flex-col items-center justify-center';
 
-const SearchUser = () => {
+const Start = () => {
     return (
         <div
             className={
@@ -31,4 +29,4 @@ const SearchUser = () => {
     );
 };
 
-export default SearchUser;
+export default Start;