@campxdev/shared 1.8.49-alpha.3 → 1.8.49-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.8.49-alpha.3",
+  "version": "1.8.49-alpha.5",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Institutions/InsititutionsNotAssignedDialog .tsx

@@ -0,0 +1,12 @@
+import { Box, Typography } from '@mui/material'
+
+export default function InsititutionsNotAssignedDialog() {
+  return (
+    <Box padding="40px 10px">
+      <Typography variant="body2" textAlign="center">
+        You have not been assigned to any institutions. Please contact your
+        administrator.
+      </Typography>
+    </Box>
+  )
+}

package/src/components/Institutions/InstitutionsDropdown.tsx

@@ -8,6 +8,7 @@ export default function SchoolSwitch() {
   const { current, institutions } = InsititutionsStore.useState((s) => s)
 
   const handleChange = (e) => {
+    localStorage.setItem('institution_key', e.target.value)
     window.location.replace(
       `${window.location.origin}/${urlTenantKey}/${e.target.value}`,
     )

package/src/components/Layout/Header/AppsMenu.tsx

@@ -1,19 +1,18 @@
+import AppsOutageIcon from '@mui/icons-material/AppsOutage'
 import { Box, Menu, Typography, styled } from '@mui/material'
-import Cookies from 'js-cookie'
 import { useState } from 'react'
+import { campxTenantKey, instituitionKey } from '../../../contexts/Providers'
+import { PermissionsStore } from '../../../shared-state'
 import { applications } from './applications'
 import { AppsIcon } from './icons'
 import {
   StyledDescription,
   StyledIconButton,
+  StyledImageBox,
+  StyledLink,
   StyledMenuItem,
   StyledMenuItemContainer,
-  StyledLink,
-  StyledImageBox,
 } from './styles'
-import { PermissionsStore } from '../../../shared-state'
-import AppsOutageIcon from '@mui/icons-material/AppsOutage'
-export const campxTenantKey = Cookies.get('campx_tenant')
 
 const AppsMenu = () => {
   const permissionState = PermissionsStore.useState((s) => s)
@@ -74,7 +73,7 @@ const AppsMenu = () => {
               {applicationList.map((item, index) => {
                 return (
                   <StyledLink
-                    href={item.path + `/${campxTenantKey ?? ''}`}
+                    href={item.path + `/${campxTenantKey}/${instituitionKey}`}
                     key={index}
                   >
                     <StyledMenuItemContainer

package/src/contexts/RootModal.tsx

@@ -1,7 +1,8 @@
 import { Store } from 'pullstate'
 import { CustomDialog, LoginForm } from '../components'
-import InsititutionsDialog from '../components/Institutions'
 import { DialogProps } from '@mui/material'
+import InsititutionsDialog from '../components/Institutions'
+import InsititutionsNotAssignedDialog from '../components/Institutions/InsititutionsNotAssignedDialog '
 
 const getRootDialogContent = (
   key: string,
@@ -13,6 +14,8 @@ const getRootDialogContent = (
       )
     case 'institutions':
       return ({ close }) => <InsititutionsDialog close={close} />
+    case 'institutions-not-assigned':
+      return ({ close }) => <InsititutionsNotAssignedDialog />
     default:
       return () => <></>
   }

package/src/hooks/useAuth.ts

@@ -8,7 +8,6 @@ import { urlTenantKey } from '../contexts/Providers'
 import { openRootModal } from '../contexts/RootModal'
 import { AssetsStore, PermissionsStore, UserStore } from '../shared-state'
 import { InsititutionsStore } from '../shared-state/InstitutionsStore'
-import useInstitution from './useInstitution'
 
 const url = window.location.origin
 
@@ -65,6 +64,59 @@ const checkIsAdmin = (user) => {
   )
   return profile ? (profile.isAdmin == true ? 1 : 0) : 0
 }
+const getInstitutionKey = () => {
+  const instituitionKey = window.location.pathname.split('/')[2]
+  if (!instituitionKey) {
+    const localInstituitionKey = localStorage.getItem('institution_key')
+    if (localInstituitionKey) {
+      return localInstituitionKey
+    } else {
+      return null
+    }
+  } else {
+    return instituitionKey
+  }
+  return instituitionKey
+}
+
+function handleInstitutions(institutions) {
+  const insititutionKey = getInstitutionKey()
+  if (institutions?.length === 0) {
+    openRootModal({
+      key: 'institutions-not-assigned',
+      dialogProps: {
+        disableEscapeKeyDown: true,
+        onClose: () => {},
+      },
+    })
+  }
+  if (institutions?.length === 1) {
+    if (!insititutionKey) {
+      window.location.replace(
+        `${window.location.origin}/${urlTenantKey}/${institutions[0]?.code}`,
+      )
+    }
+    InsititutionsStore.update((s) => {
+      s.current = institutions[0]
+      s.institutions = institutions
+    })
+  }
+  if (institutions?.length > 1) {
+    if (!insititutionKey) {
+      openRootModal({
+        key: 'institutions',
+        dialogProps: {
+          disableEscapeKeyDown: true,
+          onClose: () => {},
+        },
+      })
+    }
+    InsititutionsStore.update((s) => {
+      s.institutions = institutions
+      s.current = institutions.find((item) => item.code === insititutionKey)
+    })
+  }
+}
 
 const loginErrorHandler = ({
   loginUrl,
@@ -75,7 +127,7 @@ const loginErrorHandler = ({
   setLoading?: any
   err: AxiosError
 }) => {
-  // setLoading && setLoading(false)
+  setLoading && setLoading(false)
   const origin = window.location.origin
   const isStaging = origin.split('campx')[1] === '.dev'
 
@@ -107,9 +159,7 @@ const loginErrorHandler = ({
 function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
   const [loading, setLoading] = useState<boolean>(false)
   const [data, setData] = useState(null)
-  const { current } = InsititutionsStore.useState((s) => s)
-
-  const { loading: loadingInstituition } = useInstitution()
+  const { current } = InsititutionsStore.useState()
 
   const appInit = async () => {
     setLoading(true)
@@ -119,7 +169,6 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
         const origin = window.location.origin
         const originSubdomain =
           window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
-
         const isStaging = origin.split('campx')[1] === '.dev'
 
         if (isDevelopment == false && isStaging == false) {
@@ -132,7 +181,10 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
           }
         }
 
-        setLoading(false)
+        if (res.data?.user?.institutions) {
+          handleInstitutions(res.data?.user?.institutions)
+        }
+
         setData(res.data)
         UserStore.update((s) => {
           s.username = res.data?.user?.username
@@ -158,6 +210,8 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
           s.logo = res.data?.assets.logo
           s.logo_square = res.data?.assets.logo_square
         })
+
+        setLoading(false)
       })
       .catch((err: AxiosError) => {
         loginErrorHandler({ loginUrl, setLoading, err })
@@ -169,7 +223,7 @@ function useAuth({ permissionsEndpoint, loginUrl }: AuthParams): AuthResponse {
   }, [])
 
   return {
-    loading: loading || !data?.permissions || !current || loadingInstituition,
+    loading: loading || !data?.permissions || !current,
     data,
   }
 }

package/src/hooks/useInstitution.ts

@@ -1,94 +0,0 @@
-import { useEffect, useState } from 'react'
-import { institutions } from '../components/Institutions/services'
-import { urlTenantKey } from '../contexts/Providers'
-import { openRootModal } from '../contexts/RootModal'
-import { InsititutionsStore } from '../shared-state/InstitutionsStore'
-
-const getInstitutionKey = () => {
-  const instituitionKey = window.location.pathname.split('/')[2]
-  // if (!instituitionKey) {
-  //   const localInstituitionKey = localStorage.getItem('institution_key')
-  //   if (localInstituitionKey) {
-  //     return localInstituitionKey
-  //   } else {
-  //     return null
-  //   }
-  // } else {
-  //   return instituitionKey
-  // }
-  return instituitionKey
-}
-
-const getInstitutions = async (startLoading, stopLoading) => {
-  const insititutionKey = getInstitutionKey()
-  try {
-    startLoading()
-    const data = await institutions.fetchInsititutions()
-    InsititutionsStore.update((s) => {
-      s.institutions = data?.institutions
-    })
-    if (data?.institutions?.length === 1 && !insititutionKey) {
-      window.location.replace(
-        `${window.location.origin}/${urlTenantKey}/${data?.institutions[0]?.code}`,
-      )
-    }
-    if (data?.institutions?.length > 1 && !insititutionKey) {
-      openRootModal({
-        key: 'institutions',
-        dialogProps: {
-          disableEscapeKeyDown: true,
-          onClose: () => {},
-        },
-      })
-    }
-    stopLoading()
-  } catch (error) {
-    stopLoading()
-  }
-}
-
-const getInstitutionsByCode = async (code, startLoading, stopLoading) => {
-  try {
-    startLoading()
-    const data = await institutions.fetchInsititutionByCode(code)
-    InsititutionsStore.update((s) => {
-      s.current = data
-    })
-    stopLoading()
-  } catch (error) {
-    stopLoading()
-    openRootModal({
-      key: 'institutions',
-      dialogProps: {
-        disableEscapeKeyDown: true,
-        onClose: () => {},
-      },
-    })
-  }
-}
-
-export default function useInstitution() {
-  const insititutionKey = getInstitutionKey()
-  const [loading, setLoading] = useState(false)
-
-  const startLoading = () => {
-    setLoading(true)
-  }
-  const stopLoading = () => {
-    setLoading(false)
-  }
-
-  useEffect(() => {
-    getInstitutions(startLoading, stopLoading)
-  }, [insititutionKey])
-
-  useEffect(() => {
-    if (insititutionKey) {
-      getInstitutionsByCode(insititutionKey, startLoading, stopLoading)
-    }
-  }, [insititutionKey])
-
-  return {
-    loading: loading,
-  }
-}