From 9f75edf36c8cebfd7181ac2f708f4b15314ebde6 Mon Sep 17 00:00:00 2001 From: Prakash Maity Date: Wed, 7 Aug 2024 18:36:17 +0530 Subject: [PATCH 1/2] fix(route) --- constant/route.constant.ts | 4 ++++ src/app/(auth)/{log-in => login}/layout.tsx | 0 src/app/(auth)/{log-in => login}/loginPage.module.scss | 0 src/app/(auth)/{log-in => login}/page.tsx | 3 ++- src/app/(dashboard)/{home => products}/page.tsx | 0 src/app/layout.tsx | 5 +++-- src/components/wrapper/dashboardWrapper.tsx | 3 ++- src/hoc/authGuard/authGuard.tsx | 3 ++- src/services/axios/axiosInstance.ts | 5 +++-- 9 files changed, 16 insertions(+), 7 deletions(-) create mode 100644 constant/route.constant.ts rename src/app/(auth)/{log-in => login}/layout.tsx (100%) rename src/app/(auth)/{log-in => login}/loginPage.module.scss (100%) rename src/app/(auth)/{log-in => login}/page.tsx (98%) rename src/app/(dashboard)/{home => products}/page.tsx (100%) diff --git a/constant/route.constant.ts b/constant/route.constant.ts new file mode 100644 index 0000000..37e11a0 --- /dev/null +++ b/constant/route.constant.ts @@ -0,0 +1,4 @@ +export const routes = { + LOGIN: '/login', + PRODUCTS: '/products', +}; diff --git a/src/app/(auth)/log-in/layout.tsx b/src/app/(auth)/login/layout.tsx similarity index 100% rename from src/app/(auth)/log-in/layout.tsx rename to src/app/(auth)/login/layout.tsx diff --git a/src/app/(auth)/log-in/loginPage.module.scss b/src/app/(auth)/login/loginPage.module.scss similarity index 100% rename from src/app/(auth)/log-in/loginPage.module.scss rename to src/app/(auth)/login/loginPage.module.scss diff --git a/src/app/(auth)/log-in/page.tsx b/src/app/(auth)/login/page.tsx similarity index 98% rename from src/app/(auth)/log-in/page.tsx rename to src/app/(auth)/login/page.tsx index 0e3a05c..b43f488 100644 --- a/src/app/(auth)/log-in/page.tsx +++ b/src/app/(auth)/login/page.tsx @@ -19,6 +19,7 @@ import { useRouter } from "next/navigation"; import { useDispatch, useSelector } from "react-redux"; import { RootState } from "@/services/store"; import { setAuthTokens, setUserDetails } from "@/services/store/authSlice"; +import { routes } from "constant/route.constant"; const loginSchema = z.object({ username: z.string(), @@ -49,7 +50,7 @@ export default function LoginPage() { ); dispatch(setUserDetails(response)); setLoader(false) - router.push('/home'); + router.push(routes.PRODUCTS); } catch (err) { setLoader(false) setError('Invalid credentials'); diff --git a/src/app/(dashboard)/home/page.tsx b/src/app/(dashboard)/products/page.tsx similarity index 100% rename from src/app/(dashboard)/home/page.tsx rename to src/app/(dashboard)/products/page.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a2554b8..977e82e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -8,6 +8,7 @@ import store from "@/services/store"; import AuthGuard from "@/hoc/authGuard/authGuard"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; +import { routes } from "constant/route.constant"; interface RootLayoutProps { children: React.ReactNode; @@ -21,9 +22,9 @@ function RootLayout(props: RootLayoutProps): JSX.Element { const token = localStorage.getItem('token'); if (!token) { - router.push('/log-in'); + router.push(routes.LOGIN); } else { - router.replace('/home'); + router.replace(routes.PRODUCTS); } }, [router]) return ( diff --git a/src/components/wrapper/dashboardWrapper.tsx b/src/components/wrapper/dashboardWrapper.tsx index 53aaac8..fe0488c 100644 --- a/src/components/wrapper/dashboardWrapper.tsx +++ b/src/components/wrapper/dashboardWrapper.tsx @@ -22,6 +22,7 @@ import { BUILDING, GEAR } from "@/utilities/svgConstant"; import LogoutIcon from "@mui/icons-material/Logout"; import { useRouter } from "next/navigation"; import { useSelector } from "react-redux"; +import { routes } from "constant/route.constant"; const drawerWidth = 260; @@ -133,7 +134,7 @@ export default function DashboardWrapper(props: Props) { const logoutHandler = () => { localStorage.removeItem("token"); localStorage.removeItem("refreshToken"); - router.push("/log-in"); + router.push(routes.LOGIN); }; return ( diff --git a/src/hoc/authGuard/authGuard.tsx b/src/hoc/authGuard/authGuard.tsx index e575a16..20f53fe 100644 --- a/src/hoc/authGuard/authGuard.tsx +++ b/src/hoc/authGuard/authGuard.tsx @@ -1,4 +1,5 @@ "use client" +import { routes } from 'constant/route.constant'; // hoc/withAuth.tsx import { useRouter } from 'next/navigation'; import { useEffect } from 'react'; @@ -10,7 +11,7 @@ const AuthGuard = (WrappedComponent: any) => { useEffect(() => { const token = localStorage.getItem('token'); if (!token) { - router.push('/log-in'); + router.push(routes.LOGIN); } }, [router]); diff --git a/src/services/axios/axiosInstance.ts b/src/services/axios/axiosInstance.ts index 3fe3d38..540a886 100644 --- a/src/services/axios/axiosInstance.ts +++ b/src/services/axios/axiosInstance.ts @@ -1,5 +1,6 @@ // axiosInstance.ts import axios from 'axios'; +import { routes } from 'constant/route.constant'; const axiosInstance = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_URL, @@ -55,7 +56,7 @@ axiosInstance.interceptors.response.use( const refreshToken = localStorage.getItem('refreshToken'); if (!refreshToken) { - window.location.href = '/log-in'; + window.location.href = routes.LOGIN; return Promise.reject(error); } @@ -74,7 +75,7 @@ axiosInstance.interceptors.response.use( processQueue(err, null); localStorage.removeItem('token'); localStorage.removeItem('refreshToken'); - window.location.href = '/login'; + window.location.href = routes.LOGIN; return Promise.reject(err); } finally { isRefreshing = false; From e13cef605a576964b9b9b2d0a66f28f7d77588e6 Mon Sep 17 00:00:00 2001 From: Prakash Maity Date: Wed, 7 Aug 2024 18:57:27 +0530 Subject: [PATCH 2/2] fix(reduxLocalStorageConnect) --- package.json | 1 + src/app/layout.tsx | 11 +++++++---- src/services/store/index.tsx | 27 ++++++++++++++++++++------- yarn.lock | 7 ++++++- 4 files changed, 34 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index eadb499..30d4e32 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react-dom": "^18", "react-hook-form": "^7.52.2", "react-redux": "^9.1.2", + "redux-persist": "^6.0.0", "sass": "^1.77.8", "zod": "^3.23.8" }, diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 977e82e..21b9b8f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,7 +4,8 @@ import { ThemeProvider } from "@mui/material/styles"; import theme from "../theme"; import "./globals.scss"; import { Provider } from 'react-redux'; -import store from "@/services/store"; +import { PersistGate } from 'redux-persist/integration/react'; +import { store, persistor } from '.././services/store'; import AuthGuard from "@/hoc/authGuard/authGuard"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; @@ -31,9 +32,11 @@ function RootLayout(props: RootLayoutProps): JSX.Element { - - {children} - + + + {children} + + diff --git a/src/services/store/index.tsx b/src/services/store/index.tsx index b3f906d..5f37f81 100644 --- a/src/services/store/index.tsx +++ b/src/services/store/index.tsx @@ -1,15 +1,28 @@ - // store/index.ts -import { configureStore } from '@reduxjs/toolkit'; +import { configureStore, combineReducers } from '@reduxjs/toolkit'; +import { persistStore, persistReducer } from 'redux-persist'; +import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web import authReducer from './authSlice'; +const rootReducer = combineReducers({ + auth: authReducer, +}); + +const persistConfig = { + key: 'root', + storage, + whitelist: ['auth'], // only auth will be persisted +}; + +const persistedReducer = persistReducer(persistConfig, rootReducer); + const store = configureStore({ - reducer: { - auth: authReducer, - }, + reducer: persistedReducer, }); -export type RootState = ReturnType; +const persistor = persistStore(store); + +export type RootState = ReturnType; export type AppDispatch = typeof store.dispatch; -export default store; +export { store, persistor }; diff --git a/yarn.lock b/yarn.lock index 2c1625a..e50f994 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4013,12 +4013,17 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux-persist@^6.0.0: + version "6.0.0" + resolved "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz" + integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ== + redux-thunk@^3.1.0: version "3.1.0" resolved "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz" integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw== -redux@^5.0.0, redux@^5.0.1: +redux@^5.0.0, redux@^5.0.1, redux@>4.0.0: version "5.0.1" resolved "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz" integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==