add agreement signature endpoints

src/api/agreementSignature.ts

@@ -0,0 +1,71 @@
+import {
+  type ListArg,
+  type ListResult,
+  type Model,
+  type RetrieveArg,
+  type RetrieveResult,
+  buildUrl,
+  modelUrls,
+  tagData,
+} from "codeforlife/utils/api"
+
+import api from "."
+
+export type AgreementSignature = Model<
+  number,
+  {
+    contributor: number
+    agreement_id: string
+    signed_at: string
+  }
+>
+
+const agreementSignatureUrls = modelUrls(
+  "agreement-signatures/",
+  "agreement-signatures/<id>/",
+)
+
+export type RetrieveAgreementSignatureResult = RetrieveResult<
+  AgreementSignature,
+  "contributor" | "agreement_id" | "signed_at"
+>
+export type RetrieveAgreementSignatureArg = RetrieveArg<AgreementSignature>
+
+export type ListAgreementSignaturesResult = ListResult<
+  AgreementSignature,
+  "contributor" | "agreement_id" | "signed_at"
+>
+export type ListAgreementSignaturesArg = ListArg
+
+const agreementSignatureApi = api.injectEndpoints({
+  endpoints: build => ({
+    retrieveAgreementSignature: build.query<
+      RetrieveAgreementSignatureResult,
+      RetrieveAgreementSignatureArg
+    >({
+      query: id => ({
+        url: buildUrl(agreementSignatureUrls.detail, { url: { id } }),
+        method: "GET",
+      }),
+      providesTags: tagData("AgreementSignature"),
+    }),
+    listAgreementSignatures: build.query<
+      ListAgreementSignaturesResult,
+      ListAgreementSignaturesArg
+    >({
+      query: search => ({
+        url: buildUrl(agreementSignatureUrls.list, { search }),
+        method: "GET",
+      }),
+      providesTags: tagData("AgreementSignature", { includeListTag: true }),
+    }),
+  }),
+})
+
+export default agreementSignatureApi
+export const {
+  useRetrieveAgreementSignatureQuery,
+  useLazyRetrieveAgreementSignatureQuery,
+  useListAgreementSignaturesQuery,
+  useLazyListAgreementSignaturesQuery,
+} = agreementSignatureApi

src/api/index.ts

@@ -1,7 +1,7 @@
 import { createApi } from "codeforlife/api"
 
 const api = createApi({
-  tagTypes: ["Contributor"],
+  tagTypes: ["Contributor", "AgreementSignature"],
 })
 
 export default api

src/pages/agreementSignatureDetails/AgreementSignatureDetails.tsx

@@ -0,0 +1,71 @@
+import * as pages from "codeforlife/components/page"
+import * as yup from "yup"
+import { Stack, Typography } from "@mui/material"
+// eslint-disable-next-line sort-imports
+import { type FC } from "react"
+import { Link } from "codeforlife/components/router"
+import { handleQueryState } from "codeforlife/utils/api"
+import { useParamsRequired } from "codeforlife/hooks"
+// eslint-disable-next-line sort-imports
+import { useLazyRetrieveAgreementSignatureQuery } from "../../api/agreementSignature"
+import { useRetrieveContributorQuery } from "../../api/contributor"
+// eslint-disable-next-line sort-imports
+import { paths } from "../../routes"
+
+export interface AgreementSignatureDetailProps {}
+
+const AgreementSignatureDetail: FC<AgreementSignatureDetailProps> = () => {
+  const [retrieveAgreementSignature, retrieveAgreementSignatureResult] =
+    useLazyRetrieveAgreementSignatureQuery()
+
+  const agreementSignature = retrieveAgreementSignatureResult.data
+  const contributorId = agreementSignature?.contributor
+  const { data: contributor } = useRetrieveContributorQuery(
+    contributorId as number,
+    { skip: !contributorId },
+  )
+
+  return useParamsRequired({
+    shape: { id: yup.number().required().min(1) },
+    children: () =>
+      handleQueryState(retrieveAgreementSignatureResult, agreementSignature => (
+        <pages.Page>
+          <pages.Section>
+            <Typography variant="h1">
+              {contributor?.name || "..."} signature details
+            </Typography>
+            <Stack spacing={2}>
+              <Typography variant="h6">
+                Contributor name: {contributor?.name || "..."}
+              </Typography>
+              <Typography variant="h6">
+                Agreement ID: {agreementSignature.agreement_id}
+              </Typography>
+              <Typography variant="h6">
+                signed at: {agreementSignature.signed_at}
+              </Typography>
+            </Stack>
+          </pages.Section>
+          <pages.Section>
+            <Link className="back-to" to={paths.agreementSignatures._}>
+              Agreement signature list
+            </Link>
+          </pages.Section>
+        </pages.Page>
+      )),
+    onValidationSuccess: params => {
+      void retrieveAgreementSignature(params.id, true)
+    },
+    onValidationError: navigate => {
+      navigate(paths.agreementSignatures._, {
+        state: {
+          notifications: [
+            { props: { error: true, children: "Failed to get params" } },
+          ],
+        },
+      })
+    },
+  })
+}
+
+export default AgreementSignatureDetail

src/pages/agreementSignatureList/AgreementSignatureList.tsx

@@ -0,0 +1,55 @@
+import * as pages from "codeforlife/components/page"
+import { Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+import { LinkIconButton } from "codeforlife/components/router"
+import { TablePagination } from "codeforlife/components"
+import { generatePath } from "react-router"
+import { paths } from "../../routes"
+import { useLazyListAgreementSignaturesQuery } from "../../api/agreementSignature"
+
+export interface AgreementSignatureListProps {}
+
+const AgreementSignatureList: FC<AgreementSignatureListProps> = () => {
+  return (
+    <pages.Page>
+      <pages.Section>
+        <Typography variant="h1">Agreement Signature List</Typography>
+        <TablePagination
+          useLazyListQuery={useLazyListAgreementSignaturesQuery}
+          preferCacheValue
+        >
+          {agreementSignatures => (
+            <>
+              <Stack direction="row" gap={5}>
+                <Typography fontWeight="bold">ID</Typography>
+                <Typography fontWeight="bold">
+                  Contributor (Agreement ID)
+                </Typography>
+              </Stack>
+              {agreementSignatures.map(agreementSignature => (
+                <Stack direction="row" key={agreementSignature.id} gap={5}>
+                  <Typography fontWeight="bold">
+                    {agreementSignature.id}
+                  </Typography>
+                  <Typography>
+                    {agreementSignature.contributor} (
+                    {agreementSignature.agreement_id})
+                  </Typography>
+                  <LinkIconButton
+                    to={generatePath(paths.agreementSignatures.id._, {
+                      id: agreementSignature.id,
+                    })}
+                  >
+                    <Typography>View</Typography>
+                  </LinkIconButton>
+                </Stack>
+              ))}
+            </>
+          )}
+        </TablePagination>
+      </pages.Section>
+    </pages.Page>
+  )
+}
+
+export default AgreementSignatureList

src/pages/home/Home.tsx

@@ -19,7 +19,9 @@ const Home: FC<HomeProps> = () => {
           This is an example of how you can create a web page. This example
           consumes the backend-template&apos;s API.
         </Typography>
-        <Link to={paths.contributors._}>Contributor list</Link>
+        <Link to={paths.contributors._}>Contributors list </Link>
+        <br></br>
+        <Link to={paths.agreementSignatures._}> Agreement signatures list</Link>
       </pages.Section>
     </pages.Page>
   )

src/routes/agreementSignature.tsx

@@ -0,0 +1,20 @@
+import { Route } from "react-router-dom"
+
+import AgreementSignatureDetails from "../pages/agreementSignatureDetails/AgreementSignatureDetails"
+import AgreementSignatureList from "../pages/agreementSignatureList/AgreementSignatureList"
+import paths from "./paths"
+
+const agreementSignature = (
+  <>
+    <Route
+      path={paths.agreementSignatures.id._}
+      element={<AgreementSignatureDetails />}
+    />
+    <Route
+      path={paths.agreementSignatures._}
+      element={<AgreementSignatureList />}
+    />
+  </>
+)
+
+export default agreementSignature

src/routes/index.tsx

@@ -1,3 +1,4 @@
+import agreementSignature from "./agreementSignature"
 import contributor from "./contributor"
 import general from "./general"
 import paths from "./paths"
@@ -6,6 +7,7 @@ const routes = (
   <>
     {general}
     {contributor}
+    {agreementSignature}
   </>
 )
 

src/routes/paths.ts

@@ -4,6 +4,9 @@ const paths = _("", {
   contributors: _("/contributors", {
     id: _("/:id"),
   }),
+  agreementSignatures: _("/agreement-signatures", {
+    id: _("/:id"),
+  }),
 })
 
 export default paths