M #~: Fix minors in fireedge login (#1261)

src/fireedge/src/client/apps/provision/_app.js

@@ -28,15 +28,13 @@ import { _APPS } from 'client/constants'
 const APP_NAME = _APPS.provision.name
 
 const ProvisionApp = () => {
-  const { jwt } = useAuth()
+  const { jwt, firstRender } = useAuth()
   const { getAuthUser, logout } = useAuthApi()
 
   const provisionTemplate = useProvisionTemplate()
   const { getProvisionsTemplates } = useProvisionApi()
   const { changeTitle } = useGeneralApi()
 
-  const [firstRender, setFirstRender] = React.useState(() => !!jwt)
-
   React.useEffect(() => {
     (async () => {
       try {
@@ -44,19 +42,17 @@ const ProvisionApp = () => {
           getAuthUser()
           !provisionTemplate?.length && await getProvisionsTemplates()
         }
-
-        firstRender && setFirstRender(false)
       } catch {
         logout()
       }
     })()
-  }, [firstRender, jwt])
+  }, [jwt])
 
   React.useEffect(() => {
     changeTitle(APP_NAME)
   }, [])
 
-  if (firstRender) {
+  if (jwt && firstRender) {
     return <LoadingScreen />
   }
 

src/fireedge/src/client/components/FormControl/SelectController.js

@@ -41,7 +41,9 @@ const SelectController = memo(
       />
     )
   },
-  (prevProps, nextProps) => prevProps.error === nextProps.error
+  (prevProps, nextProps) =>
+    prevProps.error === nextProps.error &&
+    prevProps.values.length === nextProps.values.length
 )
 
 SelectController.propTypes = {

src/fireedge/src/client/containers/Login/schema.js

@@ -77,21 +77,21 @@ export const GROUP = {
   values: () => {
     const { user, groups } = useAuth()
 
+    const sortedGroupsById = groups?.sort((a, b) => a.ID - b.ID)
+
+    const formatGroups = sortedGroupsById.map(({ ID, NAME }) => {
+      const markAsPrimary = user?.GID === ID ? (
+        <SelectedIcon style={{ fontSize: '1rem', marginLeft: 16 }} />
+      ) : null
+
+      return {
+        text: <>{`${ID} - ${String(NAME)}`}{markAsPrimary}</>,
+        value: String(ID)
+      }
+    })
+
     return [{ text: T.ShowAll, value: FILTER_POOL.ALL_RESOURCES }]
-      .concat([...groups]
-        .sort((a, b) => a.ID - b.ID)
-        .map(({ ID, NAME }) => ({
-          text: (
-            <>
-              {`${ID} - ${String(NAME)}`}
-              {user?.GID === ID && (
-                <SelectedIcon style={{ fontSize: '1rem', marginLeft: 16 }} />
-              )}
-            </>
-          ),
-          value: String(ID)
-        }))
-      )
+      .concat(formatGroups)
   },
   validation: yup
     .string()

src/fireedge/src/client/containers/Login/styles.js

@@ -1,62 +1,55 @@
 import { makeStyles } from '@material-ui/core'
 
-export default makeStyles(theme =>
-// const getColor = theme.palette.type === 'light' ? darken : lighten;
-// const getBackgroundColor = theme.palette.type === 'light' ? lighten : darken;
-// color: getColor(theme.palette.error.main, 0.6),
-// backgroundColor: getBackgroundColor(theme.palette.error.main, 0.9)
-
-  ({
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      height: '100vh'
-    },
-    progress: {
-      height: 4,
-      width: '100%',
-      [theme.breakpoints.only('xs')]: {
-        top: 0,
-        position: 'fixed'
-      }
-    },
-    paper: {
-      overflow: 'hidden',
-      padding: theme.spacing(2),
-      minHeight: 440,
-      [theme.breakpoints.up('xs')]: {
-        display: 'flex',
-        flexDirection: 'column'
-      },
-      [theme.breakpoints.only('xs')]: {
-        border: 'none',
-        height: 'calc(100vh - 4px)',
-        backgroundColor: 'transparent'
-      }
-    },
-    wrapperForm: {
-      padding: theme.spacing(),
-      display: 'flex',
-      overflow: 'hidden'
-    },
-    form: {
-      width: '100%',
-      flexShrink: 0,
-      display: 'flex',
-      flexDirection: 'column',
-      [theme.breakpoints.up('xs')]: {
-        justifyContent: 'center'
-      }
-    },
-    loading: {
-      opacity: 0.7
-    },
-    helper: {
-      animation: '1s ease-out 0s 1'
-    },
-    submit: {
-      margin: theme.spacing(3, 0, 2)
+export default makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    height: '100vh'
+  },
+  progress: {
+    height: 4,
+    width: '100%',
+    [theme.breakpoints.only('xs')]: {
+      top: 0,
+      position: 'fixed'
     }
-  })
-)
+  },
+  paper: {
+    overflow: 'hidden',
+    padding: theme.spacing(2),
+    minHeight: 440,
+    [theme.breakpoints.up('xs')]: {
+      display: 'flex',
+      flexDirection: 'column'
+    },
+    [theme.breakpoints.only('xs')]: {
+      border: 'none',
+      height: 'calc(100vh - 4px)',
+      backgroundColor: 'transparent'
+    }
+  },
+  wrapperForm: {
+    padding: theme.spacing(),
+    display: 'flex',
+    overflow: 'hidden'
+  },
+  form: {
+    width: '100%',
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    [theme.breakpoints.up('xs')]: {
+      justifyContent: 'center'
+    }
+  },
+  loading: {
+    opacity: 0.7
+  },
+  helper: {
+    animation: '1s ease-out 0s 1'
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2)
+  }
+}))

src/fireedge/src/client/features/Auth/slice.js

@@ -4,7 +4,7 @@ import { login, getUser, logout, changeFilter, changeGroup } from 'client/featur
 import { JWT_NAME, FILTER_POOL, DEFAULT_SCHEME, DEFAULT_LANGUAGE } from 'client/constants'
 import { isBackend } from 'client/utils'
 
-const initial = () => ({
+const initial = initialProps => ({
   jwt: !isBackend()
     ? window.localStorage.getItem(JWT_NAME) ??
       window.sessionStorage.getItem(JWT_NAME) ??
@@ -19,18 +19,16 @@ const initial = () => ({
     disableAnimations: 'NO'
   },
   isLoginInProgress: false,
-  isLoading: false
+  isLoading: false,
+  ...initialProps
 })
 
 const { actions, reducer } = createSlice({
   name: 'auth',
-  initialState: initial(),
+  initialState: initial({ firstRender: true }),
   extraReducers: builder => {
     builder
-      .addCase(
-        logout,
-        (_, { error }) => ({ ...initial(), error })
-      )
+      .addCase(logout, (_, { error }) => ({ ...initial(), error }))
       .addMatcher(
         ({ type }) => {
           return [
@@ -48,7 +46,7 @@ const { actions, reducer } = createSlice({
       )
       .addMatcher(
         ({ type }) => type.startsWith('auth/') && type.endsWith('/fulfilled'),
-        state => ({ ...state, isLoading: false })
+        state => ({ ...state, isLoading: false, firstRender: false })
       )
       .addMatcher(
         ({ type }) => type.startsWith('auth/') && type.endsWith('/rejected'),
@@ -57,6 +55,7 @@ const { actions, reducer } = createSlice({
           ...payload,
           isLoginInProgress: false,
           isLoading: false,
+          firstRender: false,
           jwt: null
         })
       )