added react-router

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+

acm-member-dashboard/package.json

@@ -1,24 +1,30 @@
 {
   "name": "dashboard",
   "version": "0.1.0",
+  "proxy": "http://127.0.0.1:5000",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@iconscout/react-unicons": "^1.1.6",
     "@mui/material": "^5.6.0",
+    "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
     "apexcharts": "^3.35.0",
+    "axios": "^0.27.2",
     "framer-motion": "^6.2.9",
+    "js-cookie": "^3.0.1",
     "react": "^18.0.0",
     "react-apexcharts": "^1.4.0",
     "react-circular-progressbar": "^2.0.4",
     "react-dom": "^18.0.0",
     "react-github-calendar": "^3.3.1",
     "react-github-cards": "^1.1.1",
     "react-github-contributions-component": "^0.2.0",
+    "react-redux": "^8.0.2",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "react-social-icons": "^5.14.0",
     "sass": "^1.54.4",

acm-member-dashboard/src/App.js

@@ -1,19 +1,32 @@
+import Cookies from 'js-cookie';
+import { Route, Routes } from 'react-router-dom';
 import './App.css'
 import MainDash from './components/MainDash/MainDash';
 import RightSide from './components/RigtSide/RightSide';
 import Sidebar from './components/Sidebar';
-// import Logins from './pages/login/Login';
+import Logins from './pages/login/Login';
 
 function App() {
   return (
-    // <Logins />
-    <div className="App">
+    <>
+
+        <Routes>
+          <Route exact path="/login" element={<Logins/>}  />
+        </Routes>
+
+      <div className="App">
       <div className="AppGlass">
-        <Sidebar/>
-        <MainDash/>
-        <RightSide/>
-      </div>
-    </div>
+        {Cookies.get('JWT') && <Sidebar/>}
+        <Routes>
+          <Route path='/' element={<MainDash/>} exact />
+        </Routes>
+        {Cookies.get('JWT') && <RightSide/>}
+        </div>
+        </div>
+
+
+
+    </>
   );
 }
 

acm-member-dashboard/src/components/MainDash/MainDash.jsx

@@ -9,6 +9,7 @@ import "./MainDash.css";
 
 const MainDash = () => {
   return (
+
     <div className="MainDash">
       <h1 className="name">Hello Tushar</h1>
       <h1 className="announcements">Announcements</h1>
@@ -20,6 +21,7 @@ const MainDash = () => {
       <FourCards />
       <TwoCards />
     </div>
+
   );
 };
 

acm-member-dashboard/src/components/RigtSide/RightSide.jsx

@@ -3,17 +3,25 @@ import Updates from "../Updates/Updates";
 import { RepoCard } from 'react-github-cards/dist/medium';
 import 'react-github-cards/dist/medium.css';
 import "./RightSide.css";
+import Cookies from "js-cookie";
 // <RepoCard username="ACM-Thapar" repo="CS_COURSE_GUIDE" />
 const RightSide = () => {
+
   return (
+
+    <>
+
     <div className="RightSide">
       <div className="rightbar">
         <Updates />
       </div>
       <div className="csCourse">
 
       </div>
+
     </div>
+
+    </>
   );
 };
 

acm-member-dashboard/src/components/Sidebar.jsx

@@ -5,12 +5,11 @@ import { UilSignOutAlt } from "@iconscout/react-unicons";
 import { SidebarData } from "../Data/Data";
 import { UilBars } from "@iconscout/react-unicons";
 import { motion } from "framer-motion";
+import Cookies from "js-cookie";
 
 const Sidebar = () => {
-  const [selected, setSelected] = useState(0);
-
   const [expanded, setExpaned] = useState(true)
-
+  const [selected, setSelected] = useState(0);
   const sidebarVariants = {
     true: {
       left : '0'
@@ -20,8 +19,12 @@ const Sidebar = () => {
     }
   }
   console.log(window.innerWidth)
+
   return (
     <>
+
+
+
       <div className="bars" style={expanded?{left: '60%'}:{left: '5%'}} onClick={()=>setExpaned(!expanded)}>
         <UilBars />
       </div>
@@ -36,7 +39,7 @@ const Sidebar = () => {
         {SidebarData.map((item, index) => {
           return (
             <div
-              className={selected === index ? "menuItem active" : "menuItem"}
+            className={selected === index ? "menuItem active" : "menuItem"}
               key={index}
               onClick={() => setSelected(index)}
             >
@@ -51,6 +54,7 @@ const Sidebar = () => {
         </div>
       </div>
     </motion.div>
+
     </>
   );
 };

acm-member-dashboard/src/index.js

@@ -1,9 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-
+import {BrowserRouter} from 'react-router-dom'
+import {Provider} from 'react-redux'
+import {store} from './redux/store'
 ReactDOM.render(
-    <App />,
+  <Provider store={store} >
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+  </Provider>,
   document.getElementById('root')
 );
 

acm-member-dashboard/src/pages/login/Login.jsx

@@ -1,8 +1,35 @@
 import './Login.css';
 import acmlogo from "../../imgs/acmlogo.png";
+import axios from 'axios';
+import { useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { getUser } from '../../redux/user';
+import {  Navigate, useNavigate } from 'react-router-dom';
+import Cookies from 'js-cookie';
 
 function Logins() {
+  const email = useRef('')
+  const password=useRef('')
+
+  const dispatch = useDispatch()
+  const navigate = useNavigate()
+  const handleSubmit= async(e)=>{
+    e.preventDefault();
+    try {
+      const {data} = await axios.post('/auth/login',{
+        email:email.current.value,
+        password:password.current.value
+      })
+      dispatch(getUser(data))
+      navigate('/')
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
   return (
+    <>
+    {Cookies.get('JWT') && <Navigate to="/" /> }
     <div className="main">
      <div className="sub-main">
        <div>
@@ -18,14 +45,14 @@ function Logins() {
            <h1>Login Page</h1>
            <div className = "inputs">
 
-             <input type="email" placeholder="Email id" className="name"/>
+             <input ref={email} type="email" placeholder="Email id" className="name"/>
            </div>
            <div className="second-input inputs">
 
-             <input type="password" placeholder="Password" className="name"/>
+             <input ref={password} type="password" placeholder="Password" className="name"/>
            </div>
           <div className="login-button">
-          <button>Login</button>
+          <button onClick={handleSubmit} >Login</button>
           </div>
 
             <p className="link">
@@ -39,6 +66,7 @@ function Logins() {
 
      </div>
     </div>
+    </>
   );
 }
 

acm-member-dashboard/src/redux/store.js

@@ -0,0 +1,7 @@
+import { configureStore } from '@reduxjs/toolkit'
+import userReducer from './user'
+export const store = configureStore({
+  reducer: {
+    user:userReducer
+  },
+})

acm-member-dashboard/src/redux/user.js

@@ -0,0 +1,24 @@
+import {createSlice} from '@reduxjs/toolkit' 
+
+
+const userFromStorage = localStorage.getItem('user')?JSON.parse(localStorage.getItem('user')):{}
+
+export const userSlice = createSlice({
+
+    name:'user',
+    initialState:{
+        user:userFromStorage,
+    },
+    reducers:{
+        getUser:(state,{payload})=>{
+            state.user = payload;
+            localStorage.setItem('user',JSON.stringify(state.user))
+        },
+        removeUser:(state)=>{
+            state.user = {}
+        }
+    }
+})
+
+export const {getUser,removeUser} = userSlice.actions
+export default userSlice.reducer;