add contributor routes

src/api/contributor.tsx

@@ -1,15 +1,9 @@
 import {
-  type CreateArg,
-  type CreateResult,
-  type DestroyArg,
-  type DestroyResult,
   type ListArg,
   type ListResult,
   type Model,
   type RetrieveArg,
   type RetrieveResult,
-  type UpdateArg,
-  type UpdateResult,
   buildUrl,
   modelUrls,
   tagData,
@@ -25,7 +19,7 @@ export type Contributor = Model<
     location: string
     html_url: string
     avatar_url: string
-    last_login: string
+    last_login: Date
   }
 >
 
@@ -43,28 +37,6 @@ export type ListContributorsResult = ListResult<
 >
 export type ListContributorsArg = ListArg
 
-export type CreateContributorResult = CreateResult<
-  Contributor,
-  "email" | "name" | "location" | "html_url" | "avatar_url" | "last_login"
->
-export type CreateContributorArg = CreateArg<
-  Contributor,
-  "email" | "name" | "location" | "html_url" | "avatar_url" | "last_login"
->
-
-export type UpdateContributorResult = UpdateResult<
-  Contributor,
-  "email" | "name" | "location" | "html_url" | "avatar_url" | "last_login"
->
-export type UpdateContributorArg = UpdateArg<
-  Contributor,
-  never,
-  "email" | "name" | "location" | "html_url" | "avatar_url" | "last_login"
->
-
-export type DestroyContributorResult = DestroyResult
-export type DestroyContributorArg = DestroyArg<Contributor>
-
 const contributorApi = api.injectEndpoints({
   endpoints: build => ({
     retrieveContributor: build.query<
@@ -84,38 +56,6 @@ const contributorApi = api.injectEndpoints({
       }),
       providesTags: tagData("Contributor", { includeListTag: true }),
     }),
-    createContributor: build.mutation<
-      CreateContributorResult,
-      CreateContributorArg
-    >({
-      query: body => ({
-        url: contributorUrls.list,
-        method: "POST",
-        body,
-      }),
-      invalidatesTags: tagData("Contributor", { includeListTag: true }),
-    }),
-    updateContributor: build.mutation<
-      UpdateContributorResult,
-      UpdateContributorArg
-    >({
-      query: ({ id, ...body }) => ({
-        url: buildUrl(contributorUrls.detail, { url: { id } }),
-        method: "PATCH",
-        body,
-      }),
-      invalidatesTags: tagData("Contributor"),
-    }),
-    destroyContributor: build.mutation<
-      DestroyContributorResult,
-      DestroyContributorArg
-    >({
-      query: id => ({
-        url: buildUrl(contributorUrls.detail, { url: { id } }),
-        method: "DELETE",
-      }),
-      invalidatesTags: tagData("Contributor", { includeListTag: true }),
-    }),
   }),
 })
 
@@ -125,7 +65,4 @@ export const {
   useLazyRetrieveContributorQuery,
   useListContributorsQuery,
   useLazyListContributorsQuery,
-  useCreateContributorMutation,
-  useUpdateContributorMutation,
-  useDestroyContributorMutation,
 } = contributorApi

src/pages/contributorDetail/ContributorDetail.tsx

@@ -0,0 +1,55 @@
+import * as forms from "codeforlife/components/form"
+import * as pages from "codeforlife/components/page"
+import * as yup from "yup"
+import { 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 { useLazyRetrieveContributorQuery } from "../../api/contributor"
+// eslint-disable-next-line sort-imports
+import { paths } from "../../routes"
+
+export interface ContributorDetailProps {}
+
+const ContributorDetail: FC<ContributorDetailProps> = () => {
+  const [retrieveContributor, retrieveContributorResult] =
+    useLazyRetrieveContributorQuery()
+
+  return useParamsRequired({
+    shape: { id: yup.number().required().min(1) },
+    children: () =>
+      handleQueryState(retrieveContributorResult, contributor => (
+        <pages.Page>
+          <pages.Section>
+            <Typography variant="h1">Update fruit</Typography>
+            <forms.Form
+              initialValues={contributor}
+              onSubmit={alert}
+            ></forms.Form>
+          </pages.Section>
+          <pages.Section>
+            <Link className="back-to" to={paths.contributors._}>
+              Contributor list
+            </Link>
+          </pages.Section>
+        </pages.Page>
+      )),
+    onValidationSuccess: params => {
+      void retrieveContributor(params.id, true)
+    },
+    onValidationError: navigate => {
+      navigate(paths.contributors._, {
+        state: {
+          notifications: [
+            { props: { error: true, children: "Failed to get params" } },
+          ],
+        },
+      })
+    },
+  })
+}
+
+export default ContributorDetail

src/pages/contributorList/ContributorList.tsx

@@ -0,0 +1,43 @@
+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 { useLazyListContributorsQuery } from "../../api/contributor"
+
+export interface ContributorListProps {}
+
+const ContributorList: FC<ContributorListProps> = () => {
+  return (
+    <pages.Page>
+      <pages.Section>
+        <Typography fontWeight="bold">Helllllloooo </Typography>
+        <TablePagination
+          useLazyListQuery={useLazyListContributorsQuery}
+          preferCacheValue
+        >
+          {contributors =>
+            contributors.map(contributor => (
+              <Stack direction="row" key={contributor.id} gap={5}>
+                <Typography fontWeight="bold">{contributor.id}</Typography>
+                <Typography>
+                  {contributor.name} ({contributor.email})
+                </Typography>
+
+                <LinkIconButton
+                  to={generatePath(paths.contributors.id._, {
+                    id: contributor.id,
+                  })}
+                ></LinkIconButton>
+              </Stack>
+            ))
+          }
+        </TablePagination>
+      </pages.Section>
+    </pages.Page>
+  )
+}
+
+export default ContributorList

src/routes/contributor.tsx

@@ -0,0 +1,14 @@
+import { Route } from "react-router-dom"
+
+import ContributorDetail from "../pages/contributorDetail/ContributorDetail"
+import ContributorList from "../pages/contributorList/ContributorList"
+import paths from "./paths"
+
+const fruit = (
+  <>
+    <Route path={paths.contributors.id._} element={<ContributorDetail />} />
+    <Route path={paths.contributors._} element={<ContributorList />} />
+  </>
+)
+
+export default fruit

src/routes/index.tsx

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