Merge pull request #225 from wkspower/224-case-portal-improve-react-a…

…pp-bundle-sizing-and-performance 224 case portal improve react app bundle sizing and performance
wkspower · Apr 26, 2024 · 5149ee6 · 5149ee6
2 parents f10fb67 + ff2c41f
commit 5149ee6
Show file tree

Hide file tree

Showing 10 changed files with 314 additions and 313 deletions.
diff --git a/apps/react/case-portal/.eslintrc.json b/apps/react/case-portal/.eslintrc.json
@@ -21,8 +21,6 @@
   "extends": ["eslint:recommended", "plugin:react/recommended"],
   "plugins": ["react"],
   "rules": {
-    "semi": ["error", "always"],
-    "quotes": ["error", "single"],
     "no-unused-vars": "error",
     "no-undef": "error",
     "react/react-in-jsx-scope": "off",

diff --git a/apps/react/case-portal/package.json b/apps/react/case-portal/package.json
@@ -9,16 +9,14 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@formio/react": "^5.3.0",
-    "@wkspower/camunda-web-modeler": "^0.0.5",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
-    "@mui/styles": "^5.15.15",
     "@mui/x-data-grid": "^7.1.1",
     "@novu/notification-center": "^0.24.0",
     "@reduxjs/toolkit": "^2.2.3",
     "@syncfusion/ej2-react-kanban": "^20.4.42",
     "@tabler/icons-react": "^3.2.0",
-    "babel-loader": "^9.1.3",
+    "@wkspower/camunda-web-modeler": "^0.0.5",
     "bpmn-js": "^10.0.0",
     "date-fns": "^3.6.0",
     "dompurify": "^3.1.0",
@@ -72,6 +70,7 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
+    "babel-loader": "^9.1.3",
     "css-loader": "^7.1.1",
     "dotenv-webpack": "^8.1.0",
     "eslint": "^8.57.0",

diff --git a/apps/react/case-portal/public/index.html b/apps/react/case-portal/public/index.html
@@ -21,11 +21,18 @@
     -->
 
     <link rel="preconnect" href="https://fonts.gstatic.com" />
+
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Open Sans:wght@400;500;700&display=swap"
       rel="stylesheet"
     />
 
+    <!-- syncfusion style -->
+      <link
+      href="https://cdn.syncfusion.com/ej2/22.1.34/bootstrap5.css"
+      rel="stylesheet"
+    />
+
     <!-- Form.io styles -->
     <link
       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

diff --git a/apps/react/case-portal/src/App.css b/apps/react/case-portal/src/App.css
@@ -1,12 +1,3 @@
-@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';
-@import '../node_modules/@syncfusion/ej2-layouts/styles/bootstrap5.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap5.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';
-@import '../node_modules/@syncfusion/ej2-react-kanban/styles/bootstrap5.css';
-
 legend {
   width: auto;
 }
diff --git a/apps/react/case-portal/src/App.js b/apps/react/case-portal/src/App.js
@@ -1,45 +1,46 @@
-import ScrollTop from './components/ScrollTop';
-import { useEffect, useState } from 'react';
-import { ThemeRoutes } from './routes';
-import ThemeCustomization from './themes';
-import { SessionStoreProvider } from './SessionStoreContext';
-import { CaseService, RecordService } from 'services';
-import menuItemsDefs from './menu';
-import { RegisterInjectUserSession, RegisteOptions } from './plugins';
-import { accountStore, sessionStore } from './store';
-import './App.css';
+import { useEffect, useState, lazy, Suspense } from 'react'
+import { ThemeRoutes } from './routes'
+import ThemeCustomization from './themes'
+import { SessionStoreProvider } from './SessionStoreContext'
+import { CaseService, RecordService } from 'services'
+import menuItemsDefs from './menu'
+import { RegisterInjectUserSession, RegisteOptions } from './plugins'
+import { accountStore, sessionStore } from './store'
+import './App.css'
+
+const ScrollTop = lazy(() => import('./components/ScrollTop'))
 
 const App = () => {
-  const [keycloak, setKeycloak] = useState({});
-  const [authenticated, setAuthenticated] = useState(null);
-  const [recordsTypes, setRecordsTypes] = useState([]);
-  const [casesDefinitions, setCasesDefinitions] = useState([]);
-  const [menu, setMenu] = useState({ items: [] });
+  const [keycloak, setKeycloak] = useState({})
+  const [authenticated, setAuthenticated] = useState(null)
+  const [recordsTypes, setRecordsTypes] = useState([])
+  const [casesDefinitions, setCasesDefinitions] = useState([])
+  const [menu, setMenu] = useState({ items: [] })
 
   useEffect(() => {
-    const { keycloak } = sessionStore.bootstrap();
+    const { keycloak } = sessionStore.bootstrap()
 
     keycloak.init({ onLoad: 'login-required' }).then((authenticated) => {
-      setKeycloak(keycloak);
-      setAuthenticated(authenticated);
-      buildMenuItems(keycloak);
-      RegisterInjectUserSession(keycloak);
-      RegisteOptions(keycloak);
-      forceLogoutIfUserNoMinimalRoleForSystem(keycloak);
-    });
+      setKeycloak(keycloak)
+      setAuthenticated(authenticated)
+      buildMenuItems(keycloak)
+      RegisterInjectUserSession(keycloak)
+      RegisteOptions(keycloak)
+      forceLogoutIfUserNoMinimalRoleForSystem(keycloak)
+    })
 
     keycloak.onAuthRefreshError = () => {
-      window.location.reload();
-    };
+      window.location.reload()
+    }
 
     keycloak.onTokenExpired = () => {
       keycloak
         .updateToken(70)
         .then((refreshed) => {
           if (refreshed) {
-            console.info('Token refreshed: ' + refreshed);
-            RegisterInjectUserSession(keycloak);
-            RegisteOptions(keycloak);
+            console.info('Token refreshed: ' + refreshed)
+            RegisterInjectUserSession(keycloak)
+            RegisteOptions(keycloak)
           } else {
             console.info(
               'Token not refreshed, valid for ' +
@@ -49,28 +50,28 @@ const App = () => {
                     new Date().getTime() / 1000,
                 ) +
                 ' seconds',
-            );
+            )
           }
         })
         .catch(() => {
-          console.error('Failed to refresh token');
-        });
-    };
-  }, []);
+          console.error('Failed to refresh token')
+        })
+    }
+  }, [])
 
   async function forceLogoutIfUserNoMinimalRoleForSystem(keycloak) {
     if (!accountStore.hasAnyRole(keycloak)) {
-      return keycloak.logout({ redirectUri: window.location.origin });
+      return keycloak.logout({ redirectUri: window.location.origin })
     }
   }
 
   async function buildMenuItems(keycloak) {
     const menu = {
       items: [...menuItemsDefs.items],
-    };
+    }
 
     await RecordService.getAllRecordTypes(keycloak).then((data) => {
-      setRecordsTypes(data);
+      setRecordsTypes(data)
 
       data.forEach((element) => {
         menu.items[1].children
@@ -81,12 +82,12 @@ const App = () => {
             type: 'item',
             url: '/record-list/' + element.id,
             breadcrumbs: true,
-          });
-      });
-    });
+          })
+      })
+    })
 
     await CaseService.getCaseDefinitions(keycloak).then((data) => {
-      setCasesDefinitions(data);
+      setCasesDefinitions(data)
 
       data.forEach((element) => {
         menu.items[1].children
@@ -97,34 +98,36 @@ const App = () => {
             type: 'item',
             url: '/case-list/' + element.id,
             breadcrumbs: true,
-          });
-      });
-    });
+          })
+      })
+    })
 
     if (!accountStore.isManagerUser(keycloak)) {
-      delete menu.items[2];
+      delete menu.items[2]
     }
 
-    return setMenu(menu);
+    return setMenu(menu)
   }
 
   return (
     keycloak &&
     authenticated && (
       <ThemeCustomization>
-        <ScrollTop>
-          <SessionStoreProvider value={{ keycloak, menu }}>
-            <ThemeRoutes
-              keycloak={keycloak}
-              authenticated={authenticated}
-              recordsTypes={recordsTypes}
-              casesDefinitions={casesDefinitions}
-            />
-          </SessionStoreProvider>
-        </ScrollTop>
+        <Suspense fallback={<div>Loading...</div>}>
+          <ScrollTop>
+            <SessionStoreProvider value={{ keycloak, menu }}>
+              <ThemeRoutes
+                keycloak={keycloak}
+                authenticated={authenticated}
+                recordsTypes={recordsTypes}
+                casesDefinitions={casesDefinitions}
+              />
+            </SessionStoreProvider>
+          </ScrollTop>
+        </Suspense>
       </ThemeCustomization>
     )
-  );
-};
+  )
+}
 
-export default App;
+export default App
diff --git a/apps/react/case-portal/src/views/caseEmail/emailForm.js b/apps/react/case-portal/src/views/caseEmail/emailForm.js
@@ -1,39 +1,28 @@
-import { useState } from 'react';
-import { TextField, Button, Grid, Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import { useTranslation } from 'react-i18next';
-
-const useStyles = makeStyles(() => ({
-  form: {
-    width: '100%',
-  },
-  submitButton: {
-    marginTop: '16px',
-  },
-}));
+import { useState } from 'react'
+import { TextField, Button, Grid, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
 
 export const EmailForm = ({ onSubmit }) => {
-  const [recipient, setRecipient] = useState('');
-  const [subject, setSubject] = useState('');
-  const [body, setBody] = useState('');
-  const { t } = useTranslation();
-  const classes = useStyles();
+  const [recipient, setRecipient] = useState('')
+  const [subject, setSubject] = useState('')
+  const [body, setBody] = useState('')
+  const { t } = useTranslation()
 
   const handleSubmit = (e) => {
-    e.preventDefault();
-    onSubmit({ to: recipient, subject, body });
+    e.preventDefault()
+    onSubmit({ to: recipient, subject, body })
     // Clear the form after submission
-    setRecipient('');
-    setSubject('');
-    setBody('');
-  };
+    setRecipient('')
+    setSubject('')
+    setBody('')
+  }
 
   return (
     <>
       <Typography variant='h5' gutterBottom>
         {t('pages.emails.form.title')}
       </Typography>
-      <form onSubmit={handleSubmit}>
+      <form style={{ width: '100%' }} onSubmit={handleSubmit}>
         <Grid container spacing={2}>
           <Grid item xs={12}>
             <TextField
@@ -69,13 +58,13 @@ export const EmailForm = ({ onSubmit }) => {
               type='submit'
               variant='contained'
               color='primary'
-              className={classes.submitButton}
+              style={{ marginTop: '16px' }}
             >
               {t('pages.emails.form.send')}
             </Button>
           </Grid>
         </Grid>
       </form>
     </>
-  );
-};
+  )
+}