Added Redux Store and login/logout feature

Author: whysosaket

web/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.5.1",
+    "@reduxjs/toolkit": "^1.9.5",
     "@tailwindcss/typography": "^0.5.9",
     "framer-motion": "^10.12.16",
     "react": "^18.2.0",

web/src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
+import type { RootState, AppDispatch } from "./store"
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

web/src/app/store.ts

@@ -0,0 +1,19 @@
+import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit"
+import counterReducer from "@/features/counter/CounterSlice"
+import userReducer from "@/features/user/UserSlice"
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+    user: userReducer,
+  },
+})
+
+export type AppDispatch = typeof store.dispatch
+export type RootState = ReturnType<typeof store.getState>
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>

web/src/components/Forms/LoginForm.tsx

@@ -1,16 +1,39 @@
-import {MouseEvent, useRef} from "react";
+import { MouseEvent, useRef } from "react";
 import Logo from "../../assets/logo";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
+import { login } from "@/features/user/UserSlice";
+import { useAppDispatch } from "@/app/hooks";
+import { useNavigate } from "react-router-dom";
 
 const LoginForm = () => {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
 
-  const emailRef:any = useRef();
-  const passwordRef:any = useRef();
+  const emailRef: any = useRef();
+  const passwordRef: any = useRef();
   const handleSubmit = (e: MouseEvent<HTMLElement>) => {
     e.preventDefault();
     const email = emailRef.current.value;
     const password = passwordRef.current.value;
-    console.log(email, password);
+    handleLogin(email, password);
+  };
+
+  const handleLogin = async (email: string, password: string) => {
+    const response = await fetch("http://localhost:9000/api/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email, password }),
+    });
+    const data = await response.json();
+    if (data.success) {
+      localStorage.setItem("auth-token", data.authtoken);
+      dispatch(login());
+      navigate("/profile");
+    } else {
+      alert(data.error);
+    }
   };
 
   return (
@@ -22,9 +45,7 @@ const LoginForm = () => {
             className="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"
           >
             <Logo />
-            <span className="text-2xl font-semibold text-blue-500">
-              Log
-            </span>
+            <span className="text-2xl font-semibold text-blue-500">Log</span>
             in
           </a>
           <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">

web/src/components/Navbar.tsx

@@ -1,12 +1,20 @@
 import { Link } from "react-router-dom";
 import Logo from "../assets/logo";
+import { useAppSelector, useAppDispatch } from "@/app/hooks";
+import { selectUser ,logout} from "@/features/user/UserSlice";
+import { useEffect } from "react";
 
 const Navbar = () => {
+  const user = useAppSelector(selectUser);
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    console.log(user.isLogged);
+  }, [user.isLogged]);
   return (
     <>
       <header className="header z-10 sticky top-0 bg-slate-100 dark:bg-dark1 dark:text-white shadow-md flex items-center justify-between px-8 py-02">
         {/* logo */}
-        <Link to="/" className="md:w-3/12 w-4/12 p-2 flex justify-start my-auto">
+        <Link to="/" className="md:w-3/12 w-6/12 p-2 flex justify-start my-auto">
           {/* <img className="fill-blue-400" height={50} width={30} src="/logo.svg" /> */}
           <Logo />
           <span
@@ -32,9 +40,15 @@ const Navbar = () => {
         </nav>
         {/* buttons -*/}
         <div className="w-6/12  md:w-3/12 flex justify-end">
+          {!user.isLogged ? (
           <Link to="/login" className="dark:bg-dark3 dark:hover:bg-dark4 bg-slate-200 hover:bg-slate-300 dark:text-white rounded-lg shadow-md px-4 py-2 font-semibold">
             Login
           </Link>
+          ) : (
+            <button onClick={()=> dispatch(logout())} className="dark:bg-dark3 dark:hover:bg-dark4 bg-slate-200 hover:bg-slate-300 dark:text-white rounded-lg shadow-md px-4 py-2 font-semibold">
+              Logout
+            </button>
+          )}
         </div>
       </header>
     </>

web/src/features/counter/CounterAPI.ts

@@ -0,0 +1,6 @@
+// A mock function to mimic making an async request for data
+export function fetchCount(amount = 1) {
+    return new Promise<{ data: number }>((resolve) =>
+      setTimeout(() => resolve({ data: amount }), 500),
+    )
+  }

web/src/features/counter/CounterSlice.ts

@@ -0,0 +1,85 @@
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { RootState, AppThunk } from "../../app/store"
+import { fetchCount } from "./CounterAPI"
+
+export interface CounterState {
+  value: number
+  status: "idle" | "loading" | "failed"
+}
+
+const initialState: CounterState = {
+  value: 0,
+  status: "idle",
+}
+
+// The function below is called a thunk and allows us to perform async logic. It
+// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
+// will call the thunk with the `dispatch` function as the first argument. Async
+// code can then be executed and other actions can be dispatched. Thunks are
+// typically used to make async requests.
+// export const incrementAsync = createAsyncThunk(
+//   "counter/fetchCount",
+//   async (amount: number) => {
+//     const response = await fetchCount(amount)
+//     // The value we return becomes the `fulfilled` action payload
+//     return response.data
+//   },
+// )
+
+export const counterSlice = createSlice({
+  name: "counter",
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: {
+    increment: (state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      console.log("increment");
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload
+    },
+  },
+  // The `extraReducers` field lets the slice handle actions defined elsewhere,
+  // including actions generated by createAsyncThunk or in other slices.
+//   extraReducers: (builder) => {
+//     builder
+//       .addCase(incrementAsync.pending, (state) => {
+//         state.status = "loading"
+//       })
+//       .addCase(incrementAsync.fulfilled, (state, action) => {
+//         state.status = "idle"
+//         state.value += action.payload
+//       })
+//       .addCase(incrementAsync.rejected, (state) => {
+//         state.status = "failed"
+//       })
+//   },
+})
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+// The function below is called a selector and allows us to select a value from
+// the state. Selectors can also be defined inline where they're used instead of
+// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
+export const selectCount = (state: RootState) => state.counter.value
+
+// We can also write thunks by hand, which may contain both sync and async logic.
+// Here's an example of conditionally dispatching actions based on current state.
+// export const incrementIfOdd =
+//   (amount: number): AppThunk =>
+//   (dispatch, getState) => {
+//     const currentValue = selectCount(getState())
+//     if (currentValue % 2 === 1) {
+//       dispatch(incrementByAmount(amount))
+//     }
+//   }
+
+export default counterSlice.reducer

web/src/features/user/UserAPI.ts

@@ -0,0 +1,16 @@
+const fetchUser = async () => {
+    const authToken = localStorage.getItem("auth-token");
+};
+
+const isLoggedin = () => {
+    const authToken = localStorage.getItem("auth-token");
+    if(authToken==null||authToken==undefined) {
+        return false;
+    }
+    if (authToken) {
+        return true;
+    }
+    return false;
+};
+
+export { fetchUser, isLoggedin };

web/src/features/user/UserSlice.ts

@@ -0,0 +1,40 @@
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState, AppThunk } from "../../app/store";
+import { User } from "@/models/user.type";
+import { isLoggedin } from "./UserAPI";
+
+const initialState: User = {
+    _id: "",
+    name: "",
+    email: "",
+    branch: "",
+    avatar: "",
+    registrationNumber: "",
+    sectionCode: "",
+    isLogged: isLoggedin(),
+};
+
+export const userSlice = createSlice({
+    name: "user",
+    initialState,
+    reducers: {
+        setUser: (state, action: PayloadAction<User>) => {
+            state = action.payload;
+        },
+        logout: (state) => {
+            localStorage.removeItem("auth-token");
+            state.isLogged = false;
+        },
+        login: (state) => {
+            state.isLogged = true;
+        },
+    },
+    extraReducers: (builder) => {
+    }
+});
+
+export const { setUser, logout, login } = userSlice.actions;
+
+export const selectUser = (state: RootState) => state.user;
+
+export default userSlice.reducer;

web/src/main.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import App from '@/App'
+import { store } from "@/app/store"
 import './index.css'
+import { Provider } from "react-redux"
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
 )