From e411122cbf7bcb729587725c6c416a95d747eb0c Mon Sep 17 00:00:00 2001
From: Remy van der Wereld <r.van.der.wereld@amsterdam.nl>
Date: Fri, 2 Aug 2024 13:56:44 +0200
Subject: [PATCH] 121129

---
 package-lock.json                             | 17 +++++
 package.json                                  |  1 +
 .../components/PageHeading/PageHeading.tsx    | 28 ++++++++
 src/app/components/index.ts                   |  1 +
 .../CaseCreatePage/CaseCreatePage copy.tsx    | 68 ++++++++++++++++++
 .../pages/CaseCreatePage/CaseCreatePage.tsx   | 70 +++++++++++++++++++
 src/app/pages/CasesPage/CasesPage.tsx         | 13 ++--
 .../pages/SearchPage/SearchResultsTable.tsx   |  4 +-
 src/app/pages/TasksPage/TaskPage.tsx          |  6 +-
 src/app/pages/index.ts                        |  1 +
 src/app/routing/router.tsx                    |  4 +-
 src/app/state/rest/cases.ts                   |  3 +-
 src/app/utils/withExceptionCapturing.ts       | 11 +++
 13 files changed, 211 insertions(+), 16 deletions(-)
 create mode 100644 src/app/components/PageHeading/PageHeading.tsx
 create mode 100644 src/app/pages/CaseCreatePage/CaseCreatePage copy.tsx
 create mode 100644 src/app/pages/CaseCreatePage/CaseCreatePage.tsx
 create mode 100644 src/app/utils/withExceptionCapturing.ts

diff --git a/package-lock.json b/package-lock.json
index 3c70327..9ed0b16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "oidc-client-ts": "^3.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-hook-form": "^7.52.1",
         "react-oidc-context": "^3.1.0",
         "react-router-dom": "^6.25.1",
         "styled-components": "^6.1.12",
@@ -4339,6 +4340,22 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.52.1",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.1.tgz",
+      "integrity": "sha512-uNKIhaoICJ5KQALYZ4TOaOLElyM+xipord+Ha3crEFhTntdLvWZqVY49Wqd/0GiVCA/f9NjemLeiNPjG7Hpurg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 86b617e..c59e04d 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "oidc-client-ts": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.1",
     "react-oidc-context": "^3.1.0",
     "react-router-dom": "^6.25.1",
     "styled-components": "^6.1.12",
diff --git a/src/app/components/PageHeading/PageHeading.tsx b/src/app/components/PageHeading/PageHeading.tsx
new file mode 100644
index 0000000..9425711
--- /dev/null
+++ b/src/app/components/PageHeading/PageHeading.tsx
@@ -0,0 +1,28 @@
+import { Heading, Icon, IconProps } from "@amsterdam/design-system-react"
+import styled from "styled-components"
+
+type Props = {
+  label: string
+  icon?: IconProps["svg"]
+}
+
+const LEVEL = 4
+
+const Wrapper = styled.span`
+  display: flex;  
+`
+
+const StyledIcon = styled(Icon)`
+  margin-right: 0.5rem;
+`
+
+export const PageHeading: React.FC<Props> = ({ label, icon }) =>  (
+  <Wrapper>
+    { icon && <StyledIcon svg={icon} /> }
+    <Heading level={ LEVEL } >
+      { label }
+    </Heading>
+  </Wrapper>
+)
+
+export default PageHeading
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index 6d0c0ef..e7f0186 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -1,5 +1,6 @@
 export * from "./DefaultLayout/DefaultLayout"
 export * from "./NavMenu/NavMenu"
+export * from "./PageHeading/PageHeading"
 export * from "./RouterLink/RouterLink"
 export * from "./SmallSkeleton/SmallSkeleton"
 export * from "./Spinner/Spinner"
diff --git a/src/app/pages/CaseCreatePage/CaseCreatePage copy.tsx b/src/app/pages/CaseCreatePage/CaseCreatePage copy.tsx
new file mode 100644
index 0000000..c2a2a96
--- /dev/null
+++ b/src/app/pages/CaseCreatePage/CaseCreatePage copy.tsx	
@@ -0,0 +1,68 @@
+import { Button, Field, Grid, Label, Paragraph, TextArea } from "@amsterdam/design-system-react"
+import { EditDocumentIcon } from "@amsterdam/design-system-react-icons"
+import { SubmitHandler, useForm } from "react-hook-form"
+import { PageHeading } from "app/components"
+import { useCases } from "app/state/rest"
+import styled from "styled-components"
+
+
+type IFormInput = {
+  description?: Components.Schemas.CaseCreate["description"]
+}
+
+const StyledGrid = styled(Grid)`
+  padding-left: 0; // Overwrite the default padding of the Grid.
+`
+
+export const CaseCreatePage: React.FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm()
+  const [ ,{ execPost } ] = useCases()
+
+  const onSubmit: SubmitHandler<IFormInput> = (data) => {
+    console.log("DATA", data)
+    const values: Components.Schemas.CaseCreate = {
+      description: data?.description as string
+    }
+    execPost(values as Components.Schemas.Case)
+      .then((resp) => {
+        console.log("SUCCES", resp)
+      }).catch((err) => {
+        console.log("Error", err)
+      })
+  }
+
+  console.log("errors", errors)
+  console.log("!errors.description", !errors.description)
+  console.log("!!errors.description", !!errors.description)
+  return (
+    <>
+      <PageHeading label="Nieuwe zaak aanmaken" icon={ EditDocumentIcon } />
+      <StyledGrid paddingTop="small" paddingBottom="medium">
+        <Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={ 1 }>
+          <form className="ams-gap--md" id="main" onSubmit={ void handleSubmit(onSubmit)}>
+            <Field>
+              <Label htmlFor="body">Toelichting</Label>
+              <Paragraph id="bodyDescription" size="small">
+                Geef een toelichting voor deze VVE (niet verplicht). 
+              </Paragraph>
+              <TextArea
+                aria-describedby="bodyDescription"
+                id="body"
+                rows={4}
+                // invalid={ !!errors.description }
+                {...register("description", { required: true, maxLength: 1000 })}
+              />
+            </Field>
+            <div>
+              <Button type="submit">Zaak aanmaken</Button>
+            </div>
+          </form>
+        </Grid.Cell>
+      </StyledGrid>
+    </>
+  )
+}
diff --git a/src/app/pages/CaseCreatePage/CaseCreatePage.tsx b/src/app/pages/CaseCreatePage/CaseCreatePage.tsx
new file mode 100644
index 0000000..145bc0e
--- /dev/null
+++ b/src/app/pages/CaseCreatePage/CaseCreatePage.tsx
@@ -0,0 +1,70 @@
+import { Button, ErrorMessage, Field, Grid, Label, Paragraph, TextArea } from "@amsterdam/design-system-react"
+import { EditDocumentIcon } from "@amsterdam/design-system-react-icons"
+import { useForm } from "react-hook-form"
+import { PageHeading } from "app/components"
+import { useCases } from "app/state/rest"
+import styled from "styled-components"
+import withExceptionCapturing from "app/utils/withExceptionCapturing"
+
+type FormData  = {
+  description?: Components.Schemas.CaseCreate["description"]
+}
+
+const StyledGrid = styled(Grid)`
+  padding-left: 0; // Overwrite the default padding of the Grid.
+`
+
+export const CaseCreatePage: React.FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid }
+  } = useForm<FormData>()
+  const [ ,{ execPost } ] = useCases()
+
+  const onSubmit = handleSubmit((data) => {
+    const values: Components.Schemas.CaseCreate = {
+      description: data?.description as string
+    }
+    execPost(values as Components.Schemas.Case)
+      .then((resp) => {
+        console.log("SUCCES", resp)
+      }).catch((err) => {
+        console.log("Error", err)
+      })
+  })
+
+
+  return (
+    <>
+      <PageHeading label="Nieuwe zaak aanmaken" icon={ EditDocumentIcon } />
+      <StyledGrid paddingTop="small" paddingBottom="medium">
+        <Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={ 1 }>
+          <form className="ams-gap--md" id="main" onSubmit={withExceptionCapturing(onSubmit)}>
+            <Field>
+              <Label htmlFor="body">Toelichting</Label>
+              <Paragraph id="bodyDescription" size="small">
+                Geef een toelichting voor deze VVE (niet verplicht). 
+              </Paragraph>
+              <TextArea
+                aria-describedby="bodyDescription"
+                id="body"
+                rows={4}
+                invalid={ !!errors.description }
+                {...register("description", { required: true, maxLength: 1000 })}
+              />
+              { errors.description && (
+                <ErrorMessage>
+                  Dit is een verplicht veld!
+                </ErrorMessage>
+              )}
+            </Field>
+            <div>
+              <Button type="submit" disabled={ !isValid  }>Zaak aanmaken</Button>
+            </div>
+          </form>
+        </Grid.Cell>
+      </StyledGrid>
+    </>
+  )
+}
diff --git a/src/app/pages/CasesPage/CasesPage.tsx b/src/app/pages/CasesPage/CasesPage.tsx
index ec7e889..bfb7ede 100644
--- a/src/app/pages/CasesPage/CasesPage.tsx
+++ b/src/app/pages/CasesPage/CasesPage.tsx
@@ -1,6 +1,5 @@
-import { Heading } from "@amsterdam/design-system-react"
 import { useCases } from "app/state/rest"
-import { ColumnType, Table } from "app/components"
+import { ColumnType, Table, PageHeading } from "app/components"
 
 const columns: ColumnType<Components.Schemas.Case>[] = [
   {
@@ -10,7 +9,9 @@ const columns: ColumnType<Components.Schemas.Case>[] = [
   }, {
     header: "Description",
     dataIndex: "description",
-    sorter: (a: Components.Schemas.Case, b: Components.Schemas.Case) => a.description.localeCompare(b.description),    
+    sorter: (a: Components.Schemas.Case, b: Components.Schemas.Case) => (
+      a?.description && b?.description ? a.description.localeCompare(b.description) : -1
+    ),    
     defaultSortOrder: "DESCEND"
   }
 ]
@@ -20,12 +21,10 @@ export const CasesPage: React.FC = () => {
 
   return (
     <>
-      <Heading level={ 3 } >
-        Zakenoverzicht
-      </Heading>
+      <PageHeading label="Zakenoverzicht" />
       <Table 
         columns={ columns } 
-        data={ data } 
+        data={ data as Components.Schemas.Case[] } 
         loading={ isBusy }
       />
     </>
diff --git a/src/app/pages/SearchPage/SearchResultsTable.tsx b/src/app/pages/SearchPage/SearchResultsTable.tsx
index 2fc8ea6..f59b9c0 100644
--- a/src/app/pages/SearchPage/SearchResultsTable.tsx
+++ b/src/app/pages/SearchPage/SearchResultsTable.tsx
@@ -18,8 +18,8 @@ const columns: ColumnType<Vve>[] = [
   }, {
     header: "",
     dataIndex: "id",
-    minWidth: 125,
-    render: () => <RouterLink label="Start traject" path="" />
+    minWidth: 170,
+    render: () => <RouterLink label="Zaak aanmaken" path="" />
   }
 ]
 
diff --git a/src/app/pages/TasksPage/TaskPage.tsx b/src/app/pages/TasksPage/TaskPage.tsx
index 53b444f..d72da75 100644
--- a/src/app/pages/TasksPage/TaskPage.tsx
+++ b/src/app/pages/TasksPage/TaskPage.tsx
@@ -1,10 +1,8 @@
-import { Heading } from "@amsterdam/design-system-react"
+import { PageHeading } from "app/components"
 
 export const TasksPage: React.FC = () => (
   <>
-    <Heading level={ 3 } >
-      Takenoverzicht
-    </Heading>
+    <PageHeading label="Takenoverzicht" />
   </>
 )
 
diff --git a/src/app/pages/index.ts b/src/app/pages/index.ts
index d78a0c7..1199903 100644
--- a/src/app/pages/index.ts
+++ b/src/app/pages/index.ts
@@ -1,4 +1,5 @@
 export * from "./AuthPage/AuthPage"
+export * from "./CaseCreatePage/CaseCreatePage"
 export * from "./CasesPage/CasesPage"
 export * from "./NotFoundPage/NotFoundPage"
 export * from "./SearchPage/SearchPage"
diff --git a/src/app/routing/router.tsx b/src/app/routing/router.tsx
index d98f102..d0a6e07 100644
--- a/src/app/routing/router.tsx
+++ b/src/app/routing/router.tsx
@@ -1,6 +1,6 @@
 import { DefaultLayout } from "app/components"
 import { 
-  CasesPage, NotFoundPage, SearchPage, TasksPage, AuthPage 
+  CasesPage, NotFoundPage, SearchPage, TasksPage, AuthPage, CaseCreatePage 
 } from "app/pages"
 import { createBrowserRouter } from "react-router-dom"
 
@@ -28,7 +28,7 @@ const router = createBrowserRouter([
       },
       {
         path: "vve/:vveId/zaken/nieuw",
-        element: <TasksPage />
+        element: <CaseCreatePage />
       }
     ]
   },
diff --git a/src/app/state/rest/cases.ts b/src/app/state/rest/cases.ts
index e1f9883..1048ad1 100644
--- a/src/app/state/rest/cases.ts
+++ b/src/app/state/rest/cases.ts
@@ -2,10 +2,11 @@ import type { Options } from "./"
 import { makeApiUrl, useErrorHandler } from "./hooks/utils"
 import useApiRequest from "./hooks/useApiRequest"
 
+type CaseApiResponse = Components.Schemas.Case[] | Components.Schemas.Case;
 
 export const useCases = (options?: Options) => {
   const handleError = useErrorHandler()
-  return useApiRequest<Components.Schemas.Case[]>({
+  return useApiRequest<CaseApiResponse>({
     ...options,
     url: `${ makeApiUrl("cases") }`,
     groupName: "cases",
diff --git a/src/app/utils/withExceptionCapturing.ts b/src/app/utils/withExceptionCapturing.ts
new file mode 100644
index 0000000..6341b0d
--- /dev/null
+++ b/src/app/utils/withExceptionCapturing.ts
@@ -0,0 +1,11 @@
+import { SyntheticEvent } from "react"
+
+export const withExceptionCapturing = <T>(handler: (event: SyntheticEvent) => Promise<T>) => (event: SyntheticEvent) => {
+  if (handler) {
+    handler(event).catch((error) => {
+      console.log("Unexpected error:", error)
+    })
+  }
+}
+
+export default withExceptionCapturing