fix: auth flow improvements

src/App.jsx

@@ -1,7 +1,7 @@
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React from "react";
+import { Suspense } from "react";
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import { BacktoTop } from "./components/shared";
@@ -17,18 +17,20 @@ const App = () => {
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <div className="app">
           <ToastContainer />
-          <Router>
-            <Routes>
-              {routesConfig.map((route, index) => (
-                <Route
-                  key={index}
-                  exact
-                  path={route?.path}
-                  element={route?.element}
-                />
-              ))}
-            </Routes>
-          </Router>
+          <Suspense fallback={"Loading . . ."}>
+            <Router>
+              <Routes>
+                {routesConfig.map((route, index) => (
+                  <Route
+                    key={index}
+                    exact
+                    path={route?.path}
+                    element={route?.element}
+                  />
+                ))}
+              </Routes>
+            </Router>
+          </Suspense>
           <BacktoTop />
         </div>
       </LocalizationProvider>

src/components/private/events/create/CreateEvents.jsx

@@ -9,7 +9,7 @@ import Select from "@mui/material/Select";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { TimePicker } from "@mui/x-date-pickers/TimePicker";
 import dayjs from "dayjs";
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import "react-calendar/dist/Calendar.css";
 import "react-clock/dist/Clock.css";
 import { IoMdCloseCircleOutline } from "react-icons/io";
@@ -51,7 +51,6 @@ const CreateEvents = ({ setshowCreateModal }) => {
 
   const handleCreateBase64 = useCallback(async (e) => {
     const base64 = await convertToBase64(e);
-    console.log("🚀 ~ handleCreateBase64 ~ base64:", base64);
     setevent((prevEvent) => ({ ...prevEvent, coverImage: base64 }));
     e.target.value = "";
   }, []);
@@ -76,13 +75,7 @@ const CreateEvents = ({ setshowCreateModal }) => {
         />
 
         <div className="createevent_header">
-          <h1
-            onClick={() => {
-              console.log(Object.keys(errors).length);
-            }}
-          >
-            Create
-          </h1>
+          <h1>Create</h1>
         </div>
 
         <div className="createevent_form">

src/components/private/landing/Landing.jsx

@@ -1,5 +1,5 @@
 import Cookies from "js-cookie";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Vector from "../../../assets/pictures/Banner/Vector.png";
 import { Button } from "../../shared";
 import "./Landing.scss";
@@ -55,7 +55,7 @@ const Landing = () => {
               </Button>
             ) : (
               <Button to="/auth/signup" className="landing_signup">
-                <span>Intrested? Sign Up</span>
+                <span>Sign up Today !</span>
               </Button>
             )}
 

src/components/shared/navbar/Navbar.jsx

@@ -1,5 +1,5 @@
 import Cookies from "js-cookie";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { FaChevronRight } from "react-icons/fa6";
 import { GiHamburgerMenu } from "react-icons/gi";
 import { RxCross2 } from "react-icons/rx";
@@ -67,12 +67,14 @@ const Navbar = () => {
 
     if (data?.status === 200) {
       showSuccessToast(data?.data?.message);
-      setTimeout(() => {
-        navigate("/");
-        dispatch(resetUserData());
-        Cookies.remove("skipProfileCompletion");
-        localStorage.clear();
-      }, 1500);
+
+      navigate("/");
+      dispatch(resetUserData());
+      Cookies.remove("skipProfileCompletion");
+      localStorage.clear();
+      document
+        .querySelector(".nav_dropdown")
+        .classList.toggle("nav_dropdown_visible");
     } else {
       showErrorToast(data?.message);
     }
@@ -104,7 +106,7 @@ const Navbar = () => {
                 );
               })}
             </div>
-            {Cookies.get("isLoggedIn") || isLoggedIn ? (
+            {Cookies.get("Token") && isLoggedIn ? (
               <img
                 src="https://www.thetechies.org/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fuser3.04b79840.webp&w=640&q=75"
                 alt=""
@@ -131,7 +133,7 @@ const Navbar = () => {
         )}
 
         {!isNavbarOpen &&
-          (Cookies.get("isLoggedIn") ? (
+          (Cookies.get("Token") ? (
             <img
               src="https://www.thetechies.org/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fuser3.04b79840.webp&w=640&q=75"
               alt=""

src/components/shared/profileCompletion/ProfileCompletion.jsx

@@ -1,20 +1,18 @@
 /* eslint-disable no-unused-vars */
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 
 import getProfileFields from "../../../utils/getProfileFields";
 import Button from "../buttons/globalbutton/Button";
 import "./ProfileCompletion.scss";
 
 const ProfileCompletion = ({ editProfile }) => {
-  console.log("🚀 ~ ProfileCompletion ~ editProfile:", editProfile);
   const [part, setPart] = useState(editProfile ? 2 : 1);
   const [currentStep, setcurrentStep] = useState(2);
   const [currentIndex, setcurrentIndex] = useState(0);
   const [formData, setFormData] = useState({});
   const [errors, setErrors] = useState({});
   const user = useSelector((state) => state.user);
-  console.log("🚀 ~ user:", user);
 
   useEffect(() => {
     if (editProfile) {
@@ -50,7 +48,7 @@ const ProfileCompletion = ({ editProfile }) => {
 
     //  formData is an object
     // lenght of an object
-    console.log(Object.keys(formData).length);
+
     // const response = await UpdateUser(formData);
     // if (response?.status !== 200) {
     //   showErrorToast(response?.data?.message);

src/hooks/useAuth.js

@@ -47,7 +47,7 @@ export function useAuth(authType) {
 
     if (response?.status === 201 || response?.status === 200) {
       showSuccessToast(response?.data?.message);
-      dispatch(updateUserData(response.data.user));
+      dispatch(updateUserData({ ...response.data.user, isLoggedIn: true }));
 
       setTimeout(() => {
         navigate("/");

src/hooks/useEvent.js

@@ -1,7 +1,6 @@
 import { useDispatch } from "react-redux";
 import { useSWRConfig } from "swr";
 import { eventEndpoints } from "../integrations/ApiEndpoints";
-import { updateCreatedEvents } from "../redux/slice/eventSlice";
 import { CreateEvent } from "../service/MilanApi";
 import { showErrorToast, showSuccessToast } from "../utils/Toasts";
 
@@ -68,7 +67,7 @@ export function useEvent(event) {
       if (response.status === 201) {
         showSuccessToast(response.data.message);
         setshowCreateModal(false);
-        dispatch(updateCreatedEvents(response.data.savedEvent));
+
         mutate(eventEndpoints.all);
       } else {
         showErrorToast(response.response.data.message);

src/pages/auth/SignIn.jsx

@@ -18,11 +18,9 @@ const SignIn = () => {
   });
   const [errors, setErrors] = useState({});
 
-  // Auth functions
   const { authenticateUser, loading } = useAuth("signin");
   const [showPassword, setshowPassword] = useState(false);
 
-  // Handlers
   const handleGoogle = async () => {
     const response = await GoogleAuth();
     window.location.href = response;

src/redux/slice/userSlice.js

@@ -1,6 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit";
 
-const initialState = {};
+const initialState = { isLoggedIn: false, user: {} };
 
 const userSlice = createSlice({
   name: "user",
@@ -26,6 +26,8 @@ const userSlice = createSlice({
   },
 });
 
+export const selectIsLoggedIn = (state) => state.user.isLoggedIn;
+
 export const { updateUserData, resetUserData, toggleUserLogin } =
   userSlice.actions;
 export default userSlice.reducer;

src/redux/store.js

@@ -1,14 +1,10 @@
 import { combineReducers, configureStore } from "@reduxjs/toolkit";
 import { persistReducer, persistStore } from "redux-persist";
 import storage from "redux-persist/lib/storage";
-import authReducer from "./slice/authSlice";
-import eventReducer from "./slice/eventSlice";
 import userReducer from "./slice/userSlice";
 
 const rootReducer = combineReducers({
   user: userReducer,
-  auth: authReducer,
-  event: eventReducer,
 });
 
 const persistConfig = {

src/utils/Auth/DonotRenderWhenLoggedIn.jsx

@@ -0,0 +1,25 @@
+import { selectIsLoggedIn } from "@redux/slice/userSlice";
+import Cookies from "js-cookie";
+import { useSelector } from "react-redux";
+import { Navigate } from "react-router-dom";
+
+const DonotRenderWhenLoggedIn = (Component) => {
+  const WrappedComponent = (props) => {
+    const token = Cookies.get("Token");
+    const isLoggedIn = useSelector(selectIsLoggedIn);
+
+    if (token && isLoggedIn) {
+      return <Navigate to={`/`} />;
+    }
+
+    return <Component {...props} />;
+  };
+
+  WrappedComponent.displayName = `WithUserLoggedInRoute(${
+    Component.displayName || Component.name || "Component"
+  })`;
+
+  return WrappedComponent;
+};
+
+export default DonotRenderWhenLoggedIn;

src/utils/Auth/RenderErrorMessage.jsx

@@ -1,5 +1,4 @@
 export const renderErrorMessage = (fieldName, formState) => {
-  console.log(formState);
   return (
     formState?.errors?.length > 0 && (
       <div className="authpage_error-div">

src/utils/checkMissingFields.js

@@ -15,15 +15,13 @@
  */
 
 export function checkMissingFields(info) {
-  console.log("🚀 ~ checkMissingFields ~ info:", info);
   if (
     info?.city === undefined ||
     info?.state === undefined ||
     info?.address === undefined ||
     info?.country === undefined ||
     info?.pincode === undefined
   ) {
-    console.log("🚀 ~ checkMissingFields ~ info", info);
     return true;
   } else if (
     (info?.userType === "club" && info?.tagLine === undefined) ||

src/utils/getProfileFields.js

@@ -1,5 +1,4 @@
 function getMissingElements(info) {
-  console.log("🚀 ~ getMissingElements ~ info:", info);
   const missing = [];
 
   if (info?.userType === "club") {

src/utils/routesConfig.jsx

@@ -1,29 +1,39 @@
-import SignIn from "@pages/auth/SignIn";
-import Test from "../pages/Test";
-import Trending from "../pages/Trending";
+import Home from "@pages/Home";
 import {
   Clubs,
   Dashboard,
   Error404,
   Events,
-  Home,
   Profile,
   Shop,
-  SignUp,
-} from "../pages/route";
+} from "@pages/route";
+import Trending from "@pages/Trending";
+import { lazy } from "react";
+import { default as DonotRenderWhenLoggedIn } from "./Auth/DonotRenderWhenLoggedIn";
+
+const SignIn = lazy(() => import("@pages/auth/SignIn"));
+const SignUp = lazy(() => import("@pages/auth/SignUp"));
+
+const ProtectedSignIn = DonotRenderWhenLoggedIn(SignIn);
+const ProtectedSignUp = DonotRenderWhenLoggedIn(SignUp);
 
 const routesConfig = [
   { path: "/", element: <Home /> },
-  { path: "/auth/signup", element: <SignUp /> },
-  { path: "/auth/signin", element: <SignIn /> },
+  {
+    path: "/auth/signup",
+    element: <ProtectedSignUp />,
+  },
+  {
+    path: "/auth/signin",
+    element: <ProtectedSignIn />,
+  },
   { path: "/user/:userName", element: <Profile /> },
   { path: "/clubs", element: <Clubs /> },
   { path: "/club/:userName", element: <Profile /> },
   { path: "/dashboard", element: <Dashboard /> },
   { path: "/events", element: <Events /> },
   { path: "/shop", element: <Shop /> },
   { path: "/trending", element: <Trending /> },
-  { path: "/test", element: <Test /> },
   { path: "*", element: <Error404 /> },
 ];