fix: auth state

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#contributor-frontend-11"
   },
   "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/env"
+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/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/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/env"
 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"
@@ -81,7 +81,13 @@ const Home: FC<HomeProps> = () => {
           textAlign="center"
           alignItems="center"
         >
-          <Image src={CflLogoImage} alt="code for life logo" maxWidth="200px" />
+          <Image
+            src={CflLogoImage}
+            alt="code for life logo"
+            maxWidth="200px"
+            href={LINK_CFL}
+            hrefInNewTab
+          />
           <Typography variant="h1">
             Welcome to our Contributor Service!
           </Typography>