Create & Setup Settings page

client/src/App.tsx

@@ -1,5 +1,4 @@
-import { memo, useEffect, useState, useMemo } from 'react';
-import { Provider } from 'jotai';
+import { memo, useEffect, useMemo } from 'react';
 import { setupTokenRefresh } from './shared/utils/api-interceptor';
 import { AppUnProtectedRoutes } from './modules/app/routes';
 import { AppProtectedRoutes } from './modules/app/routes/auth-routes';
@@ -8,18 +7,13 @@ import { useAuth } from './shared/hooks/use-auth';
 
 const App = memo(() => {
   const { GlobalScrollbar } = useScrollbar();
-  const [cacheKey, setCacheKey] = useState<string>('');
   const { token } = useAuth();
   const isAuth = useMemo(() => !!token, [token]);
 
   useEffect(() => {
     setupTokenRefresh();
   }, []);
 
-  useEffect(() => {
-    setCacheKey(Date.now().toString());
-  }, [isAuth]);
-
   if (!isAuth) {
     return (
       <>
@@ -30,10 +24,10 @@ const App = memo(() => {
   }
 
   return (
-    <Provider key={cacheKey}>
+    <>
       <GlobalScrollbar />
       <AppProtectedRoutes />
-    </Provider>
+    </>
   );
 });
 

client/src/infra/rest/apis/user/index.ts

@@ -1,5 +1,6 @@
 import { get, patch } from '../..';
 import { ApiResponse } from '../../typings';
+import { USER_DB_STATE } from '../../typings';
 import {
   getUserProfileResponse,
   searchUserResponse,
@@ -18,6 +19,10 @@ export const userProfile = async (username: string) => {
   );
 };
 
+export const getCurrentUser = async () => {
+  return get<undefined, ApiResponse<USER_DB_STATE>>(`/api/user/me`, true);
+};
+
 export const updateProfileImg = async (imageUrl: string) => {
   return patch<{ url: string }, ApiResponse<{ profile_img: string }>>(
     `/api/user/update-profile-img`,

client/src/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { Provider } from 'jotai';
 import App from './App';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
@@ -14,13 +15,15 @@ const cache = createCache({
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <CacheProvider value={cache}>
-      <MuiThemeProvider>
-        <BrowserRouter>
-          <A2ZNotifications />
-          <App />
-        </BrowserRouter>
-      </MuiThemeProvider>
-    </CacheProvider>
+    <Provider>
+      <CacheProvider value={cache}>
+        <MuiThemeProvider>
+          <BrowserRouter>
+            <A2ZNotifications />
+            <App />
+          </BrowserRouter>
+        </MuiThemeProvider>
+      </CacheProvider>
+    </Provider>
   </StrictMode>
 );

client/src/modules/app/routes/auth-routes/protected-route/index.tsx

@@ -0,0 +1,22 @@
+import { ComponentType, LazyExoticComponent, Suspense } from 'react';
+import Loader from '../../../../../shared/components/molecules/loader';
+import { LOADING } from '../../constants';
+import ProtectedPlaceholder from './protected';
+
+export const ProtectedRoute = ({
+  component: LazyComponent,
+  hasAccess,
+}: {
+  component: LazyExoticComponent<ComponentType<Record<string, unknown>>>;
+  hasAccess: boolean;
+}) => {
+  if (hasAccess) {
+    return (
+      <Suspense fallback={<Loader size={32} secondary={LOADING} />}>
+        <LazyComponent />
+      </Suspense>
+    );
+  }
+
+  return <ProtectedPlaceholder />;
+};

client/src/modules/app/routes/auth-routes/protected-route/protected.tsx

@@ -0,0 +1,108 @@
+import { FC } from 'react';
+import { Box, Typography, useTheme } from '@mui/material';
+import { useCustomNavigate } from '../../../../../shared/hooks/use-custom-navigate';
+import A2ZButton from '../../../../../shared/components/atoms/button';
+import { ROUTES_V1 } from '../../constants/routes';
+
+interface ProtectedPlaceholderProps {
+  onClick?: () => void;
+  heading?: string;
+  description?: string;
+  buttonText?: string;
+  showButton?: boolean;
+}
+
+const ProtectedPlaceholder: FC<ProtectedPlaceholderProps> = ({
+  heading = 'Access Denied',
+  description = 'You do not have access to this content.',
+  onClick,
+  buttonText = 'Go to Home',
+  showButton = true,
+}) => {
+  const theme = useTheme();
+  const navigate = useCustomNavigate();
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          flexDirection: 'column',
+          p: { xs: 3, sm: '36px 72px' },
+          borderRadius: 2,
+          bgcolor:
+            theme.palette.mode === 'dark'
+              ? 'background.paper'
+              : theme.palette.grey[50],
+          boxShadow: theme.shadows[2],
+          maxWidth: { xs: '90%', sm: 'auto' },
+        }}
+      >
+        <Typography
+          variant="h4"
+          component="h1"
+          sx={{
+            m: 0,
+            fontWeight: 600,
+            color: 'text.primary',
+            textAlign: 'center',
+          }}
+        >
+          {heading}
+        </Typography>
+        <Typography
+          variant="body1"
+          component="p"
+          sx={{
+            mt: 2,
+            color: 'text.secondary',
+            textAlign: 'center',
+            maxWidth: 400,
+          }}
+        >
+          {description}
+        </Typography>
+
+        {showButton && (
+          <A2ZButton
+            variant="contained"
+            sx={{
+              mt: 6,
+              px: 3,
+              py: 1.5,
+              fontSize: 16,
+              transition: 'all 0.2s ease-in-out',
+              bgcolor: 'primary.main',
+              color: 'primary.contrastText',
+              '&:hover': {
+                transform: 'scale(1.05)',
+                bgcolor: 'primary.dark',
+              },
+            }}
+            onClick={() => {
+              if (onClick) {
+                onClick();
+              } else {
+                navigate({ pathname: ROUTES_V1.HOME.replace('/*', '/') });
+              }
+            }}
+          >
+            {buttonText}
+          </A2ZButton>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default ProtectedPlaceholder;

client/src/modules/app/routes/auth-routes/v1/index.tsx

@@ -20,8 +20,8 @@ export default function getRoutesV1() {
       }
     />,
     <Route
-      key={ROUTES_V1.SETTINGS}
-      path={ROUTES_V1.SETTINGS}
+      key={`${ROUTES_V1.SETTINGS}/*`}
+      path={`${ROUTES_V1.SETTINGS}/*`}
       element={
         <Suspense fallback={<Loader size={32} secondary={LOADING} />}>
           <SettingsPageLazyComponent />

client/src/modules/app/routes/constants/routes.ts

@@ -1,6 +1,7 @@
 export enum ROUTES_V1 {
   HOME = '/v1/home',
   SETTINGS = '/v1/settings',
+  SETTINGS_PROFILE = '/profile',
 }
 
 export enum ROUTES_PAGE_V1 {