feat: auth hooks

refactor: Routes and Layouts
refactor: useAppForm hook
feat: DevVIew

Author: karpolan

.env.sample

@@ -1,2 +1,9 @@
+
+# Debug mode 
+REACT_APP_DEBUG = true
+
+# API/Backend basic URL
+REACT_APP_URL_API = http://localhost:3030/api
+
+# Runtime helpers
 REACT_APP_VERSION = $npm_package_version
-REACT_APP_URL_API = http://localhost:3030/api

package.json

@@ -19,12 +19,13 @@
     "url": "put your repo url here..."
   },
   "scripts": {
+    "start": "react-scripts start",
     "build": "react-scripts build",
-    "dev": "npm i && react-scripts start",
+    "dev": "react-scripts start",
+    "dev:update": "npm i && react-scripts start",
     "format": "prettier ./src --write",
     "format:all": "prettier . --write",
     "lint": "eslint ./src --ext .js,.ts,.tsx",
-    "start": "react-scripts start",
     "type": "tsc",
     "test": "react-scripts test"
   },

src/App.tsx

@@ -1,27 +1,22 @@
-import { AppStore } from './store';
 import { AppThemeProvider } from './theme';
-import Routes from './routes';
-import Layout from './layout';
+import { AppStore } from './store';
 import { ErrorBoundary } from './components';
-import { BrowserRouter } from 'react-router-dom';
+import Routes from './routes';
 
 /**
  * Root Application Component
+ * @component MainApp
  */
-const App = () => {
+const MainApp = () => {
   return (
     <ErrorBoundary name="App">
       <AppStore>
         <AppThemeProvider>
-          <BrowserRouter>
-            <Layout>
-              <Routes />
-            </Layout>
-          </BrowserRouter>
+          <Routes />
         </AppThemeProvider>
       </AppStore>
     </ErrorBoundary>
   );
 };
 
-export default App;
+export default MainApp;

src/components/AppLoading/AppLoading.tsx

@@ -0,0 +1,36 @@
+import { FunctionComponent } from 'react';
+import { CircularProgress, CircularProgressProps, LinearProgress, Stack, StackProps } from '@mui/material';
+import { APP_LOADING_COLOR, APP_LOADING_SIZE, APP_LOADING_TYPE } from '../config';
+
+interface Props extends StackProps {
+  color?: CircularProgressProps['color'];
+  size?: number | string;
+  type?: 'circular' | 'linear';
+  value?: number;
+}
+
+/**
+ * Renders MI circular progress centered inside Stack
+ * @component AppLoading
+ * @prop {string} [size] - size of the progress component. Numbers means pixels, string can be '2.5rem'
+ */
+const AppLoading: FunctionComponent<Props> = ({
+  color = APP_LOADING_COLOR,
+  size = APP_LOADING_SIZE,
+  type = APP_LOADING_TYPE,
+  value,
+  ...restOfProps
+}) => {
+  const alignItems = type === 'linear' ? undefined : 'center';
+  return (
+    <Stack my={2} alignItems={alignItems} {...restOfProps}>
+      {type === 'linear' ? (
+        <LinearProgress color={color} value={value} />
+      ) : (
+        <CircularProgress color={color} size={size} value={value} />
+      )}
+    </Stack>
+  );
+};
+
+export default AppLoading;

src/components/AppLoading/index.tsx

@@ -0,0 +1,3 @@
+import AppLoading from './AppLoading';
+
+export { AppLoading as default, AppLoading };

src/components/AppView/AppView.tsx

@@ -0,0 +1,21 @@
+import { FunctionComponent, PropsWithChildren } from 'react';
+import { Stack, StackProps, useMediaQuery, useTheme } from '@mui/material';
+import { CONTENT_MAX_WIDTH, CONTENT_MIN_WIDTH } from '../config';
+
+/**
+ * Renders View container composition with limited width
+ * @component AppView
+ */
+const AppView: FunctionComponent<PropsWithChildren<StackProps>> = ({ children, minWidth, ...restOfProps }) => {
+  const theme = useTheme();
+  const onSmallScreens = useMediaQuery(theme.breakpoints.down('sm'));
+  const minWidthToRender = onSmallScreens ? '100%' : minWidth ?? CONTENT_MIN_WIDTH;
+
+  return (
+    <Stack alignSelf="center" gap={2} maxWidth={CONTENT_MAX_WIDTH} minWidth={minWidthToRender} {...restOfProps}>
+      {children}
+    </Stack>
+  );
+};
+
+export default AppView;

src/components/AppView/index.tsx

@@ -0,0 +1,3 @@
+import AppView from './AppView';
+
+export { AppView as default, AppView as ViewContainer };

src/components/config.ts

@@ -1,6 +1,8 @@
 /**
  * Components configuration
  */
+export const CONTENT_MAX_WIDTH = 800;
+export const CONTENT_MIN_WIDTH = 320; // CONTENT_MAX_WIDTH - Sidebar width
 
 /**
  * AppAlert and AppSnackBarAlert components
@@ -25,6 +27,13 @@ export const APP_ICON_SIZE = 24;
 export const APP_LINK_COLOR = 'textSecondary'; // 'primary' // 'secondary'
 export const APP_LINK_UNDERLINE = 'hover'; // 'always
 
+/**
+ * AppLoading component
+ */
+export const APP_LOADING_COLOR = 'primary'; // 'secondary'
+export const APP_LOADING_SIZE = '3rem'; // 40
+export const APP_LOADING_TYPE = 'circular'; // 'linear'; // 'circular'
+
 /**
  * AppSection component
  */

src/components/index.tsx

@@ -1,9 +1,11 @@
-import ErrorBoundary from './ErrorBoundary';
-import AppLink from './AppLink';
+import AppAlert from './AppAlert';
 import AppButton from './AppButton';
+import AppForm from './AppForm';
 import AppIcon from './AppIcon';
 import AppIconButton from './AppIconButton';
-import AppAlert from './AppAlert';
-import AppForm from './AppForm';
+import AppLink from './AppLink';
+import AppLoading from './AppLoading';
+import AppView from './AppView';
+import ErrorBoundary from './ErrorBoundary';
 
-export { ErrorBoundary, AppLink, AppButton, AppIcon, AppIconButton, AppAlert, AppForm };
+export { ErrorBoundary, AppAlert, AppForm, AppButton, AppIcon, AppIconButton, AppLink, AppLoading, AppView };

src/hooks/auth.ts

@@ -1,6 +1,24 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useAppStore } from '../store';
 
+type CurrentUser = {
+  id?: string;
+  email?: string;
+  phone?: string;
+  avatar?: string;
+  name?: string;
+};
+
+/**
+ * Hook to get currently logged user
+ * @returns {object | undefined} user data as object or undefined if user is not logged in
+ */
+export function useCurrentUser(): CurrentUser | undefined {
+  const [state] = useAppStore();
+  return state.currentUser;
+}
+
 /**
  * Hook to detect is current user authenticated or not
  * @returns {boolean} true if user is authenticated, false otherwise
@@ -20,12 +38,31 @@ export function useIsAuthenticated() {
  * @returns {function} calling this event logs out current user
  */
 export function useEventLogout() {
+  const navigate = useNavigate();
   const [, dispatch] = useAppStore();
 
   return useCallback(() => {
     // TODO: AUTH: add auth and tokens cleanup here
     // sessionStorageDelete('access_token');
 
     dispatch({ type: 'LOG_OUT' });
-  }, [dispatch]);
+    navigate('/', { replace: true }); // Redirect to home page by reloading the App
+  }, [dispatch, navigate]);
+}
+
+/**
+ * Adds watchdog and calls different callbacks on user login and logout
+ * @param {function} afterLogin callback to call after user login
+ * @param {function} afterLogout callback to call after user logout
+ */
+export function useAuthWatchdog(afterLogin: () => void, afterLogout: () => void) {
+  const [state, dispatch] = useAppStore();
+
+  useEffect(() => {
+    if (state.isAuthenticated) {
+      afterLogin?.();
+    } else {
+      afterLogout?.();
+    }
+  }, [state.isAuthenticated, dispatch, afterLogin, afterLogout]);
 }