⚡️ improve auth performence

frontend/src/app/HeaderContent/index.jsx

@@ -13,6 +13,7 @@ import {
   DeleteOutlined,
 } from '@ant-design/icons';
 import photo from '@/style/images/photo.png';
+import { checkImage } from '@/request';
 
 import { selectCurrentAdmin } from '@/redux/auth/selectors';
 import history from '@/utils/history';
@@ -22,15 +23,10 @@ import { BASE_URL } from '@/config/serverApiConfig';
 
 export default function HeaderContent() {
   const currentAdmin = useSelector(selectCurrentAdmin);
-  console.log('🚀 ~ file: index.jsx:23 ~ HeaderContent ~ currentAdmin:', currentAdmin);
 
-  const { SubMenu } = Menu;
-
-  const srcImgProfile = currentAdmin?.photo ? (
-    BASE_URL + currentAdmin?.photo
-  ) : (
-    <UserOutlined style={{ color: '#333', fontSize: 'inherit' }} />
-  );
+  const srcImgProfile = checkImage(BASE_URL + currentAdmin?.photo)
+    ? BASE_URL + currentAdmin?.photo
+    : photo;
 
   const profileDropdown = (
     <div className="profileDropdown whiteBox shadow" style={{ minWidth: '200px' }}>
@@ -39,8 +35,10 @@ export default function HeaderContent() {
           size="large"
           className="last"
           src={srcImgProfile}
-          style={{ float: 'left', fontSize: '32px' }}
-        />
+          style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
+        >
+          {currentAdmin?.name.charAt(0).toUpperCase()}
+        </Avatar>
         <div className="info">
           <p className="strong">
             {currentAdmin?.name} {currentAdmin?.surname}
@@ -86,7 +84,13 @@ export default function HeaderContent() {
     <div className="headerIcon" style={{ position: 'absolute', right: 0, zIndex: '99' }}>
       <Dropdown overlay={profileDropdown} trigger={['click']} placement="bottomRight">
         {/* <Badge dot> */}
-        <Avatar className="last" src={srcImgProfile} />
+        <Avatar
+          className="last"
+          src={srcImgProfile}
+          style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
+        >
+          {currentAdmin?.name.charAt(0).toUpperCase()}
+        </Avatar>
         {/* </Badge> */}
       </Dropdown>
 

frontend/src/modules/ProfileModule/components/AdminInfo.jsx

@@ -8,18 +8,17 @@ import history from '@/utils/history';
 import { selectCurrentItem, selectReadItem } from '@/redux/crud/selectors';
 import { selectCurrentAdmin } from '@/redux/auth/selectors';
 import { BASE_URL } from '@/config/serverApiConfig';
+import { checkImage } from '@/request';
 
 const AdminInfo = ({ config }) => {
   const { profileContextAction } = useProfileContext();
   const { modal, updatePanel } = profileContextAction;
   const { ENTITY_NAME } = config;
   const currentAdmin = useSelector(selectCurrentAdmin);
 
-  const srcImgProfile = currentAdmin?.photo ? (
-    BASE_URL + currentAdmin?.photo
-  ) : (
-    <UserOutlined style={{ color: '#333', fontSize: 'inherit' }} />
-  );
+  const srcImgProfile = checkImage(BASE_URL + currentAdmin?.photo)
+    ? BASE_URL + currentAdmin?.photo
+    : undefined;
 
   return (
     <>

frontend/src/redux/rootReducer.js

@@ -4,20 +4,16 @@ import { reducer as authReducer } from './auth';
 import { reducer as crudReducer } from './crud';
 import { reducer as erpReducer } from './erp';
 import { reducer as settingsReducer } from './settings';
-import { reducer as profileReducer } from './profile';
-import { reducer as notifyReducer } from './notify';
 
 import * as actionTypes from './auth/types';
 
 // Combine all reducers.
 
 const appReducer = combineReducers({
   auth: authReducer,
-  notify: notifyReducer,
   crud: crudReducer,
   erp: erpReducer,
   settings: settingsReducer,
-  profile: profileReducer,
 });
 
 const rootReducer = (state, action) => {

frontend/src/redux/store.js

@@ -6,6 +6,7 @@ import rootReducer from './rootReducer';
 import storePersist from './storePersist';
 
 const logger = createLogger();
+
 let middleware = [thunk];
 
 let configStore = applyMiddleware(...middleware);
@@ -18,7 +19,7 @@ if (process.env.NODE_ENV === 'development') {
 }
 
 const AUTH_INITIAL_STATE = {
-  current: storePersist.get('auth'),
+  current: storePersist.get('auth') ? storePersist.get('auth') : null,
   isLoggedIn: true,
   isLoading: false,
   isSuccess: false,

frontend/src/redux/storePersist.js

@@ -1,10 +1,50 @@
+function isJsonString(str) {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    console.error(e.message);
+    return false;
+  }
+  return true;
+}
+
+export const localStorageHealthCheck = () => {
+  for (var i = 0, len = localStorage.length; i < len; ++i) {
+    console.log(localStorage.getItem(localStorage.key(i)));
+    const result = window.localStorage.getItem(localStorage.key(i));
+    if (!isJsonString(result)) {
+      console.error('error parsing this localstorage key , removed  :', localStorage.key(i));
+      window.localStorage.removeItem(localStorage.key(i));
+    }
+  }
+};
+
 export const storePersist = {
   set: (key, state) => {
     window.localStorage.setItem(key, JSON.stringify(state));
   },
   get: (key) => {
+    // localStorageHealthCheck();
     const result = window.localStorage.getItem(key);
-    return JSON.parse(result);
+    if (!result) {
+      if (key === 'auth') {
+        window.localStorage.removeItem('isLoggedIn');
+      }
+      return false;
+    }
+    if (isJsonString(result)) {
+      return JSON.parse(result);
+    } else {
+      window.localStorage.removeItem(key);
+      if (key === 'auth') {
+        window.localStorage.removeItem('isLoggedIn');
+      }
+      console.error(
+        'error parsing in localStorage , all localstorage removed check this storage key :',
+        key
+      );
+      return false;
+    }
   },
   remove: (key) => {
     window.localStorage.removeItem(key);

frontend/src/request/checkImage.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+export default async function checkImage(path) {
+  axios
+    .get(path)
+    .then(() => {
+      return true;
+    })
+    .catch(() => {
+      return false;
+    });
+}

frontend/src/request/index.js

@@ -1 +1,2 @@
 export { default as request } from './request';
+export { default as checkImage } from './checkImage';