Fix rendering

src/auth/queryClient.ts

@@ -4,6 +4,7 @@ export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
+      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
     },
   },
 })

src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx

@@ -1,28 +1,10 @@
-/* eslint-disable max-lines-per-function */
-import { useEffect, useState } from 'react'
+import { Button, Table, Typography } from '@equinor/eds-core-react'
 import { useParams } from 'react-router-dom'
 import { useAnalogueModels } from '../../../hooks/useAnalogueModels'
 
-import { Button, Table, Typography } from '@equinor/eds-core-react'
-import { ModelType } from '../../../pages/ModelPages/Model/Model'
-
 export const ModelMetadataView = () => {
-  const [model, setModel] = useState<ModelType>()
   const { id } = useParams()
-  const { fetchModel } = useAnalogueModels()
-
-  useEffect(() => {
-    async function getModel() {
-      return await fetchModel({
-        params: { path: { id: id ?? '' } },
-      })
-        .then((response) => response?.data)
-        .then((model) => model && setModel(model as ModelType))
-    }
-    if (!model) {
-      getModel()
-    }
-  }, [id, model, fetchModel])
+  const { model } = useAnalogueModels(id)
 
   if (!model) return <p>Loading ...</p>
 

src/features/ModelView/ModelNameFrame/ModelNameFrame.tsx

@@ -1,7 +1,6 @@
-import { ModelType } from '../../../pages/ModelPages/Model/Model'
 import * as Styled from './ModelNameFrame.styled'
 
-export const ModelNameFrame = ({ model }: { model: ModelType }) => {
+export const ModelNameFrame = ({ model }: { model: AnalogueModel }) => {
   return (
     <Styled.NameFrame className="metadata-name-frame">
       <h1>{model.name}</h1>

src/features/ModelView/ModelSourceView/ModelSourceView.tsx

@@ -1,27 +1,10 @@
-import { useEffect, useState } from 'react'
+import { Table, Typography } from '@equinor/eds-core-react'
 import { useParams } from 'react-router-dom'
 import { useAnalogueModels } from '../../../hooks/useAnalogueModels'
 
-import { Table, Typography } from '@equinor/eds-core-react'
-import { ModelType } from '../../../pages/ModelPages/Model/Model'
-
 export const ModelSourceView = () => {
-  const [model, setModel] = useState<ModelType>()
   const { id } = useParams()
-  const { fetchModel } = useAnalogueModels()
-
-  useEffect(() => {
-    async function getModel() {
-      return await fetchModel({
-        params: { path: { id: id ?? '' } },
-      })
-        .then((response) => response?.data)
-        .then((model) => model && setModel(model as ModelType))
-    }
-    if (!model) {
-      getModel()
-    }
-  }, [id, model, fetchModel])
+  const { model } = useAnalogueModels(id)
 
   if (!model) return <p>Loading ...</p>
 

src/hooks/useAnalogueModels.tsx

@@ -8,39 +8,24 @@ import { useAccessToken } from './useAccessToken'
 type UseQueryOptions<T> = ParamsOption<T> &
   RequestBodyOption<T> & {
     // custom options
-    params?: {
-      path: {
-        id: string
-      }
-    }
+    params?: { path: { id: string } }
   }
 
 const ANALOGUEMODELS_KEY = '/api/analogue-models'
-const ANALOGUEMODEL_KEY = '/api/analogue-models/{id}'
 const NC_FILE_KEY = '/api/analogue-models/{id}/input-models'
 
-export function useAnalogueModels() {
+export function useAnalogueModels(id?: string) {
   const apiClient = useApiClient()
   const token = useAccessToken()
   const headers = new Headers({ Authorization: `Bearer ${token}` })
 
-  async function fetchModels() {
+  async function fetchModels(): AnalogueModelResponse {
     const { data } = await apiClient.GET(ANALOGUEMODELS_KEY, {
       headers: headers,
     })
     return data
   }
 
-  async function fetchModel({
-    params,
-  }: UseQueryOptions<paths[typeof ANALOGUEMODEL_KEY]['get']>) {
-    const { data } = await apiClient.GET(ANALOGUEMODEL_KEY, {
-      params,
-      headers: new Headers({ Authorization: `Bearer ${token}` }),
-    })
-    return data
-  }
-
   async function createModel({
     body,
   }: UseQueryOptions<paths[typeof ANALOGUEMODELS_KEY]['post']>) {
@@ -68,7 +53,18 @@ export function useAnalogueModels() {
     return data
   }
 
-  const models = useQuery([ANALOGUEMODELS_KEY, token], fetchModels)
+  const models = useQuery(['models', token], fetchModels, { enabled: !!token })
+  // TODO: might want to add queryFn to this:
+  const model: AnalogueModel = useQuery([
+    'models',
+    token,
+    { analogueModelId: id },
+  ])
 
-  return { fetchModels, fetchModel, createModel, models, uploadNCFile }
+  return {
+    model,
+    createModel,
+    models,
+    uploadNCFile,
+  }
 }

src/models/types.d.ts

@@ -0,0 +1,5 @@
+type AnalogueModel = Partial<
+  components['schemas']['GetAnalogueModelQueryResponse']
+>
+
+type AnalogueModelResponse = AnalogueModel['data']

src/pages/ModelPages/Model/Model.tsx

@@ -1,35 +1,16 @@
-import { useEffect, useState } from 'react'
 import { Outlet, useParams } from 'react-router-dom'
-import { useAnalogueModels } from '../../../hooks/useAnalogueModels'
-import { components } from '../../../models/schema'
-import * as Styled from './Model.styled'
-
 import { ModelNameFrame } from '../../../features/ModelView/ModelNameFrame/ModelNameFrame'
 import { ModelNavigationBar } from '../../../features/ModelView/ModelNavigationBar/ModelNavigationBar'
-
-export type ModelType = Partial<
-  components['schemas']['GetAnalogueModelQueryResponse']['data']
->
+import { useAnalogueModels } from '../../../hooks/useAnalogueModels'
+import * as Styled from './Model.styled'
 
 export const Model = () => {
-  const [model, setModel] = useState<ModelType>()
-  const { id } = useParams()
-  const { fetchModel } = useAnalogueModels()
-
-  useEffect(() => {
-    async function getModel() {
-      return await fetchModel({
-        params: { path: { id: id ?? '' } },
-      }).then((response) => response?.data)
-    }
-    if (!model) {
-      getModel().then((model) => model && setModel(model as ModelType))
-    }
-  }, [id, model, fetchModel])
+  const { id } = useParams<{ id: string }>()
+  const { model } = useAnalogueModels(id)
 
   return (
     <>
-      {model && <ModelNameFrame model={model} />}
+      <ModelNameFrame model={model} />
       <Styled.Wrapper>
         <Styled.SidebarWrapper>
           <ModelNavigationBar />