Contributor frontend 4 (#10)

* rename page

* new package version

* fix scope

* fix login flow

* sign latest agreement form

* add header

* flow fix

* fix header

* fix api calls

* fix sign latest agreement

* tidy up

* new cfl package

* fix date format

* redirect to home page if not found

* feedback

.env

@@ -2,5 +2,6 @@
 VITE_SERVICE_NAME=contributor
 
 # Links.
-VITE_LINK_GH_LOGIN=https://github.com/login/oauth/authorize?client_id=Ov23liBErSabQFqROeMg
+VITE_LINK_CFL=https://www.codeforlife.education
+VITE_LINK_GH_LOGIN=https://github.com/login/oauth/authorize?client_id=Ov23liBErSabQFqROeMg&scope=read%3Auser%20user%3Aemail
 VITE_LINK_GH_CONTRIBUTING=https://github.com/ocadotechnology/codeforlife-workspace/blob/{commitId}/CONTRIBUTING.md

package.json

@@ -26,7 +26,7 @@
     "type-check": "tsc --build tsconfig.json"
   },
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.0"
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/App.tsx

@@ -1,14 +1,15 @@
 import { type FC } from "react"
 import { App as _ } from "codeforlife/components"
 
+import { Header } from "./components"
 import routes from "./routes"
 import store from "./app/store"
 import theme from "./app/theme"
 
 export interface AppProps {}
 
 const App: FC<AppProps> = () => (
-  <_ store={store} theme={theme} routes={routes} />
+  <_ store={store} theme={theme} routes={routes} header={<Header />} />
 )
 
 export default App

src/api/agreementSignature.ts

@@ -16,7 +16,6 @@ import api from "."
 export type AgreementSignature = Model<
   number,
   {
-    contributor: number
     agreement_id: string
     signed_at: Date
   }
@@ -29,29 +28,31 @@ const agreementSignatureUrls = modelUrls(
 
 export type RetrieveAgreementSignatureResult = RetrieveResult<
   AgreementSignature,
-  "contributor" | "agreement_id" | "signed_at"
+  "agreement_id" | "signed_at"
 >
 export type RetrieveAgreementSignatureArg = RetrieveArg<AgreementSignature>
 
 export type ListAgreementSignaturesResult = ListResult<
   AgreementSignature,
-  "contributor" | "agreement_id" | "signed_at"
+  "agreement_id" | "signed_at"
 >
 export type ListAgreementSignaturesArg = ListArg
 
 export type CreateAgreementSignatureResult = CreateResult<
   AgreementSignature,
-  "contributor" | "agreement_id" | "signed_at"
+  "agreement_id" | "signed_at"
 >
 export type CreateAgreementSignatureArg = CreateArg<
   AgreementSignature,
-  "contributor" | "agreement_id" | "signed_at"
+  "agreement_id" | "signed_at"
 >
 
-export type CheckSignedAgreementSignatureResult =
-  | { latest_commit_id: string; status: 404 | 451 }
-  | { status: 200 }
-export type CheckSignedAgreementSignatureArg = { contributor_pk: number }
+export type CheckSignedLatestAgreementSignatureResult = {
+  latest_commit_id: string
+  is_signed: boolean
+  reason: "" | "no_agreement_signatures" | "old_agreement_signatures"
+}
+export type CheckSignedLatestAgreementSignatureArg = null
 
 const agreementSignatureApi = api.injectEndpoints({
   endpoints: build => ({
@@ -86,17 +87,12 @@ const agreementSignatureApi = api.injectEndpoints({
       }),
       invalidatesTags: tagData("AgreementSignature", { includeListTag: true }),
     }),
-    checkSignedAgreementSignature: build.query<
-      CheckSignedAgreementSignatureResult,
-      CheckSignedAgreementSignatureArg
+    checkSignedLatestAgreementSignature: build.query<
+      CheckSignedLatestAgreementSignatureResult,
+      CheckSignedLatestAgreementSignatureArg
     >({
-      query: ({ contributor_pk }) => ({
-        url: buildUrl(
-          agreementSignatureUrls.list + `check-signed/${contributor_pk}`,
-          {
-            url: { contributor_pk },
-          },
-        ),
+      query: () => ({
+        url: agreementSignatureUrls.list + "check-signed-latest/",
         method: "GET",
       }),
     }),
@@ -110,5 +106,6 @@ export const {
   useListAgreementSignaturesQuery,
   useLazyListAgreementSignaturesQuery,
   useCreateAgreementSignatureMutation,
-  useCheckSignedAgreementSignatureQuery,
+  useCheckSignedLatestAgreementSignatureQuery,
+  useLazyCheckSignedLatestAgreementSignatureQuery,
 } = agreementSignatureApi

src/api/contributor.ts

@@ -14,26 +14,24 @@ import api from "."
 export type Contributor = Model<
   number,
   {
-    email: string
     name: string
     location?: string
     html_url: string
     avatar_url: string
-    last_login?: Date
   }
 >
 
 const contributorUrls = modelUrls("contributors/", "contributors/<id>/")
 
 export type RetrieveContributorResult = RetrieveResult<
   Contributor,
-  "email" | "name" | "location" | "html_url" | "avatar_url" | "last_login"
+  "name" | "location" | "html_url" | "avatar_url"
 >
 export type RetrieveContributorArg = RetrieveArg<Contributor>
 
 export type ListContributorsResult = ListResult<
   Contributor,
-  "email" | "name" | "location" | "html_url" | "avatar_url" | "last_login"
+  "name" | "location" | "html_url" | "avatar_url"
 >
 export type ListContributorsArg = ListArg
 

src/app/env.ts

@@ -2,5 +2,6 @@ import env from "codeforlife/env"
 
 export * from "codeforlife/env"
 
+export const LINK_CFL = env.VITE_LINK_CFL
 export const LINK_GH_LOGIN = env.VITE_LINK_GH_LOGIN
 export const LINK_GH_CONTRIBUTING = env.VITE_LINK_GH_CONTRIBUTING

src/components/Header.tsx

@@ -0,0 +1,83 @@
+import { Avatar, Link, Paper, Stack } from "@mui/material"
+import { type FC } from "react"
+import { Image } from "codeforlife/components"
+import { LinkButton } from "codeforlife/components/router"
+import { handleResultState } from "codeforlife/utils/api"
+
+import { type SessionMetadata, useSessionMetadata } from "../app/hooks"
+import CflLogoImage from "../images/cfl_logo.png"
+import { LINK_CFL } from "../app/env"
+import { useLogoutMutation } from "../api"
+import { useRetrieveContributorQuery } from "../api/contributor"
+
+const Profile: FC<SessionMetadata> = ({ contributor_id }) => {
+  const avatarSize = 50
+
+  return handleResultState(
+    useRetrieveContributorQuery(contributor_id),
+    contributor => (
+      <LinkButton
+        to={contributor.html_url}
+        target="_blank"
+        endIcon={
+          <Avatar
+            alt={contributor.name}
+            src={contributor.avatar_url}
+            sx={{ width: avatarSize, height: avatarSize }}
+          />
+        }
+        sx={{
+          height: avatarSize + 5,
+          fontSize: 20,
+          margin: "0 auto",
+          backgroundColor: "transparent",
+          "&:hover": { backgroundColor: "transparent" },
+        }}
+      >
+        {contributor.name}
+      </LinkButton>
+    ),
+  )
+}
+
+export interface HeaderProps {}
+
+const Header: FC<HeaderProps> = () => {
+  const [logout] = useLogoutMutation()
+  const sessionMetadata = useSessionMetadata()
+
+  return (
+    <Paper sx={{ position: "sticky", top: 0, borderRadius: 0 }}>
+      <Stack
+        direction="row"
+        marginTop={1}
+        marginBottom={1}
+        marginLeft={2}
+        marginRight={2}
+        alignItems="center"
+      >
+        <Image
+          src={CflLogoImage}
+          alt="code for life logo"
+          maxWidth={{ xs: "65px", lg: "80px" }}
+          href={LINK_CFL}
+          hrefInNewTab
+        />
+        {sessionMetadata && (
+          <Stack direction="row" gap={2} alignItems="center" marginLeft="auto">
+            <Link
+              onClick={() => {
+                void logout(null)
+              }}
+            >
+              Log out
+            </Link>
+            <Profile {...sessionMetadata} />
+          </Stack>
+        )}
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Header

src/components/index.tsx

@@ -0,0 +1,2 @@
+export { default as Header } from "./Header"
+export * from "./Header"