From c43bce5de8c0b63c06850decd416fdc2b79edeb4 Mon Sep 17 00:00:00 2001
From: JeremiahUy <jeremiah.augie.uy@nav.no>
Date: Tue, 29 Oct 2024 10:23:38 +0100
Subject: [PATCH] UPDATE: api and approutes for new page and pvkdokument

---
 apps/frontend/src/AppRoutes.tsx             | 11 +++++--
 apps/frontend/src/api/PvkDokumentApi.ts     | 29 +++++++++++++++++-
 apps/frontend/src/pages/PvkDokumentPage.tsx | 33 +++++++++++++++++++++
 3 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 apps/frontend/src/pages/PvkDokumentPage.tsx

diff --git a/apps/frontend/src/AppRoutes.tsx b/apps/frontend/src/AppRoutes.tsx
index f14953127..c22fcdc6c 100644
--- a/apps/frontend/src/AppRoutes.tsx
+++ b/apps/frontend/src/AppRoutes.tsx
@@ -28,6 +28,7 @@ import { MainPage } from './pages/MainPage'
 import { MyEtterlevelseDokumentasjonerPage } from './pages/MyEtterlevelseDokumentasjonerPage'
 import NotFound from './pages/NotFound'
 import PvkBehovPage from './pages/PvkBehovPage'
+import PvkDokumentPage from './pages/PvkDokumentPage'
 import QuestionAndAnswerLogPage from './pages/QuestionAndAnswerLogPage'
 import { RelasjonsOversikt } from './pages/RelasjonsOversikt'
 import { TemaPage } from './pages/TemaPage'
@@ -147,6 +148,13 @@ const AppRoutes = (): JSX.Element => {
         element={<BehandlingensLivslopPage />}
         caseSensitive={true}
       />
+
+      <Route path="/dokumentasjon/:id/pvkbehov" element={<PvkBehovPage />} caseSensitive={true} />
+      <Route
+        path="/dokumentasjon/:id/pvkdokument/:pvkdokumentId"
+        element={<PvkDokumentPage />}
+        caseSensitive={true}
+      />
       <Route
         path="/dokumentasjon/relasjon/:id/"
         element={<RelasjonsOversikt />}
@@ -172,8 +180,7 @@ const AppRoutes = (): JSX.Element => {
         element={<GjenbrukEtterlevelseDokumentasjonPage />}
         caseSensitive={true}
       />
-      <Route path="/dokumentasjon/:id/pvkbehov" element={<PvkBehovPage />} caseSensitive={true} />
-      PvkBehovPage
+
       <Route
         path="/admin/codelist/:listname"
         element={<PrivateRoute component={<CodeListPage />} adminPage />}
diff --git a/apps/frontend/src/api/PvkDokumentApi.ts b/apps/frontend/src/api/PvkDokumentApi.ts
index cf3baed70..9c32d061b 100644
--- a/apps/frontend/src/api/PvkDokumentApi.ts
+++ b/apps/frontend/src/api/PvkDokumentApi.ts
@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { env } from 'process'
+import { useEffect, useState } from 'react'
 import { EPvkDokumentStatus, IPageResponse, IPvkDokument } from '../constants'
 
 export const getAllPvkDokument = async () => {
@@ -54,7 +55,33 @@ export const deletePvkDokument = async (id: string) => {
   return (await axios.delete<IPvkDokument>(`${env.backendBaseUrl}/pvkdokument/${id}`)).data
 }
 
-function pvkDokumentToPvkDokumentDto(pvkDokument: IPvkDokument) {
+export const usePvkDokument = (pvkDokumentId?: string) => {
+  const isCreateNew = pvkDokumentId === 'ny'
+  const [data, setData] = useState<IPvkDokument | undefined>(
+    isCreateNew ? mapPvkDokumentToFormValue({}) : undefined
+  )
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+
+  useEffect(() => {
+    setIsLoading(true)
+    if (pvkDokumentId && !isCreateNew) {
+      ;(async () => {
+        await getPvkDokument(pvkDokumentId).then(async (pvkDokument) => {
+          setData(pvkDokument)
+          setIsLoading(false)
+        })
+      })()
+    }
+  }, [pvkDokumentId])
+
+  return [data, setData, isLoading] as [
+    IPvkDokument | undefined,
+    (e: IPvkDokument) => void,
+    boolean,
+  ]
+}
+
+const pvkDokumentToPvkDokumentDto = (pvkDokument: IPvkDokument) => {
   const dto = {
     ...pvkDokument,
     ytterligereEgenskaper: pvkDokument.ytterligereEgenskaper.map((egenskap) => egenskap.code),
diff --git a/apps/frontend/src/pages/PvkDokumentPage.tsx b/apps/frontend/src/pages/PvkDokumentPage.tsx
new file mode 100644
index 000000000..a91376f6e
--- /dev/null
+++ b/apps/frontend/src/pages/PvkDokumentPage.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { useEtterlevelseDokumentasjon } from '../api/EtterlevelseDokumentasjonApi'
+import { usePvkDokument } from '../api/PvkDokumentApi'
+import { PageLayout } from '../components/scaffold/Page'
+import { IBreadCrumbPath } from '../constants'
+import { dokumentasjonerBreadCrumbPath } from './util/BreadCrumbPath'
+
+export const PvkDokumentPage = () => {
+  const params: Readonly<
+    Partial<{
+      id?: string
+      pvkdokumentId?: string
+    }>
+  > = useParams<{ id?: string }>()
+  const breadcrumbPaths: IBreadCrumbPath[] = [dokumentasjonerBreadCrumbPath]
+  const [currentPage] = useState<string>('Oversikt')
+  const [etterlevelseDokumentasjon] = useEtterlevelseDokumentasjon(params.id)
+  const [pvkDokument] = usePvkDokument(params.pvkdokumentId)
+
+  return (
+    <PageLayout
+      pageTitle="Pvk Dokument"
+      currentPage={currentPage}
+      breadcrumbPaths={breadcrumbPaths}
+      fullWidth
+    >
+      {etterlevelseDokumentasjon && pvkDokument && <div>WIP</div>}
+    </PageLayout>
+  )
+}
+
+export default PvkDokumentPage