Contributor frontend 11 (#12)

* expose to host

* fix: auth state

* beautify

* rename env to settings

* new cfl package

* new cfl package

package.json

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

src/api/session.ts

@@ -1,19 +1,14 @@
+import { buildLoginEndpoint } from "codeforlife/api/endpoints"
+
 import { type SessionMetadata } from "../app/hooks"
+import api from "."
 
 export type LoginResult = SessionMetadata
 export type LoginArg = { code: string }
 
-import api from "."
-
 const sessionApi = api.injectEndpoints({
   endpoints: build => ({
-    login: build.mutation<LoginResult, LoginArg>({
-      query: body => ({
-        url: "session/login/",
-        method: "POST",
-        body,
-      }),
-    }),
+    login: buildLoginEndpoint<LoginResult, LoginArg>(build),
   }),
 })
 

src/app/hooks.tsx

@@ -8,6 +8,8 @@ import { type ReactNode, useEffect } from "react"
 import { createSearchParams, useLocation, useNavigate } from "react-router-dom"
 import { useDispatch, useSelector } from "react-redux"
 import Cookies from "js-cookie"
+import { SESSION_METADATA_COOKIE_NAME } from "codeforlife/settings"
+import { selectIsLoggedIn } from "codeforlife/slices/session"
 
 import type { AppDispatch, RootState } from "./store"
 import { paths } from "../routes"
@@ -21,10 +23,10 @@ export interface SessionMetadata {
 }
 
 export function useSessionMetadata(): SessionMetadata | undefined {
-  const sessionMetadata = Cookies.get("session_metadata")
-
-  return sessionMetadata
-    ? (JSON.parse(sessionMetadata) as SessionMetadata)
+  return useAppSelector(selectIsLoggedIn)
+    ? (JSON.parse(
+        Cookies.get(SESSION_METADATA_COOKIE_NAME)!,
+      ) as SessionMetadata)
     : undefined
 }
 

src/app/env.ts → src/app/settings.ts

@@ -1,6 +1,6 @@
-import env from "codeforlife/env"
+import env from "codeforlife/settings"
 
-export * from "codeforlife/env"
+export * from "codeforlife/settings"
 
 export const LINK_CFL = env.VITE_LINK_CFL
 export const LINK_GH_LOGIN = env.VITE_LINK_GH_LOGIN

src/app/store.ts

@@ -1,19 +1,24 @@
 import type { Action, ThunkAction } from "@reduxjs/toolkit"
 import { combineSlices } from "@reduxjs/toolkit"
+import { logoutMiddleware } from "codeforlife/middlewares"
 import { makeStore } from "codeforlife/utils/store"
+import { sessionSlice } from "codeforlife/slices"
 
 import api from "../api"
 
 // `combineSlices` automatically combines the reducers using
 // their `reducerPath`s, therefore we no longer need to call `combineReducers`.
-const reducer = combineSlices(api)
+const reducer = combineSlices(api, sessionSlice)
 
 // Infer the `RootState` type from the root reducer
 export type RootState = ReturnType<typeof reducer>
 
 // TODO: create middleware for api errors.
 // https://redux-toolkit.js.org/rtk-query/usage/error-handling#handling-errors-at-a-macro-level
-const store = makeStore({ reducer, middlewares: [api.middleware] })
+const store = makeStore({
+  reducer,
+  middlewares: [api.middleware, logoutMiddleware],
+})
 
 export default store
 export type AppStore = typeof store

src/components/Header.tsx

@@ -6,7 +6,7 @@ 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 { LINK_CFL } from "../app/settings"
 import { useLogoutMutation } from "../api"
 import { useRetrieveContributorQuery } from "../api/contributor"
 

src/pages/agreementSignatures/AgreementSignatureTable.tsx

@@ -15,7 +15,7 @@ import { LinkIconButton } from "codeforlife/components/router"
 import { OpenInNew as OpenInNewIcon } from "@mui/icons-material"
 import { TablePagination } from "codeforlife/components"
 
-import { LINK_GH_CONTRIBUTING } from "../../app/env"
+import { LINK_GH_CONTRIBUTING } from "../../app/settings"
 import { useLazyListAgreementSignaturesQuery } from "../../api/agreementSignature"
 
 export interface AgreementSignatureTableProps {}

src/pages/agreementSignatures/SignLatestAgreementForm.tsx

@@ -6,7 +6,7 @@ import { PriorityHigh as PriorityHighIcon } from "@mui/icons-material"
 import { submitForm } from "codeforlife/utils/form"
 
 import { type AgreementSignature } from "../../api/agreementSignature"
-import { LINK_GH_CONTRIBUTING } from "../../app/env"
+import { LINK_GH_CONTRIBUTING } from "../../app/settings"
 import { useCreateAgreementSignatureMutation } from "../../api/agreementSignature"
 
 export interface SignLatestAgreementFormProps {

src/pages/home/Home.tsx

@@ -11,8 +11,8 @@ import { GitHub as GitHubIcon } from "@mui/icons-material"
 import { Image } from "codeforlife/components"
 import { LinkButton } from "codeforlife/components/router"
 
+import { LINK_CFL, LINK_GH_LOGIN } from "../../app/settings"
 import CflLogoImage from "../../images/cfl_logo.png"
-import { LINK_GH_LOGIN } from "../../app/env"
 import { paths } from "../../routes"
 import { useLoginMutation } from "../../api/session"
 import { useSessionMetadata } from "../../app/hooks"
@@ -75,26 +75,32 @@ const Home: FC<HomeProps> = () => {
   return (
     <pages.Page>
       <pages.Section>
-        <Stack
-          spacing={10}
-          direction="column"
-          textAlign="center"
-          alignItems="center"
-        >
-          <Image src={CflLogoImage} alt="code for life logo" maxWidth="200px" />
-          <Typography variant="h1">
+        <Stack direction="column" textAlign="center" alignItems="center">
+          <Image
+            src={CflLogoImage}
+            alt="code for life logo"
+            maxWidth="200px"
+            href={LINK_CFL}
+            hrefInNewTab
+          />
+          <Typography my={10} variant="h1">
             Welcome to our Contributor Service!
           </Typography>
+          <Typography variant="h6">
+            🎉 We&apos;re excited to have you join the CFL community. 🎉
+          </Typography>
+          <Typography>
+            As a contributor, you have the opportunity to share your knowledge,
+            insights, and unique perspectives with a passionate audience. Dive
+            in, start contributing, and help us make a difference.
+          </Typography>
           <Typography>
-            We are excited to have you join the CFL community. As a contributor,
-            you have the opportunity to share your knowledge, insights, and
-            unique perspectives with a passionate audience. Dive in, start
-            contributing, and help us make a difference.
+            Log in with your GitHub account to start contributing.
           </Typography>
+          <Typography fontSize="40px !important">👇</Typography>
           <LinkButton
             to={LINK_GH_LOGIN}
             sx={({ spacing }) => ({
-              marginTop: spacing(20),
               padding: `${spacing(4)} ${spacing(5)}`,
               fontSize: "1.2rem",
               background: "black",

vite.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
   },
   server: {
     open: true,
+    host: true,
   },
   test: {
     globals: true,