created a api for when reload web page then check user token valid or…

… not

src/App.js

@@ -1,5 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { useDispatch } from "react-redux";
 import { Route, Routes } from "react-router-dom";
+import { adminLoggedOut } from "./features/auth/authSlice";
+import { useUserLoggedInQuery } from "./features/auth/userAuthApi";
+import { userLoggedOut } from "./features/auth/userAuthSlice";
 import { useAdminAuthChecked } from "./hooks/useAdminAuthChecked";
 import { useUserAuthChecked } from "./hooks/userUserAuthChecked";
 import { AdminLayout } from "./layouts/AdminLayout";
@@ -17,22 +21,26 @@ import { CheckOut } from "./pages/User/CheckOut/CheckOut";
 import { Home } from "./pages/User/Home/Home";
 import { Order } from "./pages/User/Order/Order";
 import { ProductDetails } from "./pages/User/ProductDetails/ProductDetails";
+import { Search } from "./pages/User/Search/Search";
 import { UserLogin } from "./pages/User/UserLogin";
 import { UserRegister } from "./pages/User/UserRegister";
 import { PrivateRoute } from "./routes/admin/PrivateRoute";
 import { PublicRoute } from "./routes/admin/PublicRoute";
-import { Search } from "./pages/User/Search/Search";
 
 function App() {
   const adminAuthChecked = useAdminAuthChecked();
   const userAuthChecked = useUserAuthChecked();
+  const dispatch = useDispatch();
+
+  const {} = useUserLoggedInQuery();
 
   if (!userAuthChecked) {
     return <p className="relative top-1/2 left-1/2">Loading...</p>;
   }
   if (!adminAuthChecked) {
     return <p>Loading...</p>;
   }
+
   return (
     <Routes>
       <Route

src/components/user/Headers/MainHeader.js

@@ -42,8 +42,6 @@ export const MainHeader = () => {
     }
   };
 
-  console.log(userInfo);
-
   return (
     <div className="w-full h-14 bg-[#f85606] text-gray-100  px-1 sm:px-0 sticky top-0 z-40 shadow-md shadow-gray-400 ">
       <div className="container mx-auto flex w-full h-full items-center justify-between space-x-3">

src/features/api/apiSlice.js

@@ -1,11 +1,13 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import { adminLoggedOut } from "../auth/authSlice";
+import { userLoggedOut } from "../auth/userAuthSlice";
 
 const baseQuery = fetchBaseQuery({
   baseUrl: process.env.REACT_APP_BASE_URL,
   prepareHeaders: async (headers, { getState, endpoint }) => {
     const adminToken = getState()?.adminAuth?.accessToken;
     const userToken = getState()?.userAuth?.accessToken;
+
     if (adminToken) {
       headers.set("Authorization", `Bearer ${adminToken}`);
     }
@@ -20,9 +22,10 @@ export const apiSlice = createApi({
   reducerPath: "api",
   baseQuery: async (args, api, extraOptions) => {
     let result = await baseQuery(args, api, extraOptions);
-    if (result?.error?.status === 500) {
+    if (result?.error?.status === 401) {
+      // call refresh token Api
       api.dispatch(adminLoggedOut());
-      localStorage.clear();
+      api.dispatch(userLoggedOut());
     }
     return result;
   },

src/features/auth/userAuthApi.js

@@ -35,7 +35,21 @@ export const userAuthApi = apiSlice.injectEndpoints({
         } catch (err) {}
       },
     }),
+    userLoggedIn: builder.query({
+      query: () => ({
+        url: "/user/me",
+        headers: {
+          Authorization: `Bearer ${
+            localStorage.getItem("userAuth")?.accessToken
+          }`,
+        },
+      }),
+    }),
   }),
 });
 
-export const { useUserRegisterMutation, useUserLoginMutation } = userAuthApi;
+export const {
+  useUserRegisterMutation,
+  useUserLoginMutation,
+  useUserLoggedInQuery,
+} = userAuthApi;

src/hooks/userUserAuthChecked.js

@@ -1,17 +1,21 @@
+import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { userLoggedIn } from "../features/auth/userAuthSlice";
-import { useEffect, useState } from "react";
 
 export const useUserAuthChecked = () => {
   const [userAuth, setUserAuth] = useState(false);
   const dispatch = useDispatch();
+
   useEffect(() => {
     const localUserAuth = JSON.parse(localStorage.getItem("userAuth"));
+
     if (localUserAuth?.user && localUserAuth?.accessToken) {
       dispatch(userLoggedIn(localUserAuth));
       setUserAuth(true);
     }
+
     setUserAuth(true);
   }, [dispatch]);
+
   return userAuth;
 };