Address review comments

Author: GCHQDeveloper36

frontend/pages/model/[modelId]/access-request/schema.tsx

@@ -1,17 +1,28 @@
+import { useGetModel } from 'actions/model'
 import _ from 'lodash-es'
 import { useRouter } from 'next/router'
+import Loading from 'src/common/Loading'
 import Title from 'src/common/Title'
+import MultipleErrorWrapper from 'src/errors/MultipleErrorWrapper'
 import SchemaSelect from 'src/schemas/SchemaSelect'
-import { SchemaKind } from 'types/types'
+import { EntryKind, SchemaKind } from 'types/types'
 
 export default function AccessRequestSchema() {
   const router = useRouter()
   const { modelId }: { modelId?: string } = router.query
+  const { model, isModelLoading, isModelError } = useGetModel(modelId, EntryKind.MODEL)
+
+  const error = MultipleErrorWrapper(`Unable to load schema page`, {
+    isModelError,
+  })
+
+  if (error) return error
 
   return (
     <>
       <Title text='Select a schema' />
-      {<SchemaSelect schemaKind={SchemaKind.ACCESS_REQUEST} id={modelId} />}
+      {isModelLoading && <Loading />}
+      {model && <SchemaSelect schemaKind={SchemaKind.ACCESS_REQUEST} entry={model} />}
     </>
   )
 }

frontend/src/schemas/SchemaSelect.tsx

@@ -12,23 +12,30 @@ import Loading from 'src/common/Loading'
 import Link from 'src/Link'
 import MessageAlert from 'src/MessageAlert'
 import SchemaButton from 'src/schemas/SchemaButton'
-import { EntryInterface, EntryKind, SchemaInterface, SchemaKind, SchemaKindKeys, SchemaKindLabel } from 'types/types'
+import {
+  EntryInterface,
+  EntryKind,
+  EntryKindLabel,
+  SchemaInterface,
+  SchemaKind,
+  SchemaKindKeys,
+  SchemaKindLabel,
+} from 'types/types'
 
 type SchemaSelectProps = {
   schemaKind: SchemaKindKeys
-  entry?: EntryInterface
-  id?: string
+  entry: EntryInterface
 }
 
-export default function SchemaSelect({ schemaKind, entry, id }: SchemaSelectProps) {
+export default function SchemaSelect({ schemaKind, entry }: SchemaSelectProps) {
   const router = useRouter()
   const [loading, setLoading] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
 
   const { schemas, isSchemasLoading, isSchemasError } = useGetSchemas(schemaKind)
   const { currentUser, isCurrentUserLoading, isCurrentUserError } = useGetCurrentUser()
 
-  const { mutateModel: mutateEntry } = useGetModel(id, EntryKind[schemaKind])
+  const { mutateModel: mutateEntry } = useGetModel(entry.id, EntryKind[schemaKind])
 
   const isLoadingData = useMemo(
     () => isSchemasLoading || isCurrentUserLoading,
@@ -41,9 +48,9 @@ export default function SchemaSelect({ schemaKind, entry, id }: SchemaSelectProp
   const accessRequestCallback = useCallback(
     async (newSchema: SchemaInterface) => {
       setLoading(true)
-      router.push(`/model/${id}/access-request/new?schemaId=${newSchema.id}`)
+      router.push(`/model/${entry.id}/access-request/new?schemaId=${newSchema.id}`)
     },
-    [id, router],
+    [entry.id, router],
   )
 
   const entryCallback = useCallback(
@@ -66,11 +73,10 @@ export default function SchemaSelect({ schemaKind, entry, id }: SchemaSelectProp
     [currentUser, entry, mutateEntry, router],
   )
 
-  let selectionCallback = entryCallback
-
-  if (schemaKind === SchemaKind.ACCESS_REQUEST) {
-    selectionCallback = accessRequestCallback
-  }
+  const selectionCallback = useMemo(
+    () => (schemaKind === SchemaKind.ACCESS_REQUEST ? accessRequestCallback : entryCallback),
+    [schemaKind, accessRequestCallback, entryCallback],
+  )
 
   const activeSchemaButtons = useMemo(
     () =>
@@ -106,8 +112,6 @@ export default function SchemaSelect({ schemaKind, entry, id }: SchemaSelectProp
     [inactiveSchemas, selectionCallback, loading],
   )
 
-  const link = schemaKind === SchemaKind.ACCESS_REQUEST ? `/model/${id}` : `/${schemaKind}/${id}`
-
   if (isSchemasError) {
     return <MessageAlert message={isSchemasError.info.message} severity='error' />
   }
@@ -122,9 +126,9 @@ export default function SchemaSelect({ schemaKind, entry, id }: SchemaSelectProp
       {!isLoadingData && (
         <Container maxWidth='md'>
           <Card sx={{ mx: 'auto', my: 4, p: 4 }}>
-            <Link href={link}>
+            <Link href={`/${entry.kind}/${entry.id}`}>
               <Button sx={{ width: 'fit-content' }} startIcon={<ArrowBack />}>
-                {`Back to ${SchemaKindLabel[schemaKind]}`}
+                {`Back to ${EntryKindLabel[entry.kind]}`}
               </Button>
             </Link>
             <Stack spacing={2} justifyContent='center' alignItems='center'>