Refactor coding clubs page (#17)

* Add coding clubs page

* Prettier

* Minify images

* Merge branch 'development' into coding_clubs_page

* Feedback round 1

* Merge branch 'coding_clubs_page' of https://github.com/ocadotechnology/codeforlife-portal-frontend into coding_clubs_page

* Sort imports

* Merge branch 'teacher_student_accept' into coding_clubs_page

* Even more import sort

* Final feedback

* Prettier

* Reuncomment routes

* Feedback

.env

@@ -7,6 +7,11 @@ VITE_GMAIL_FILTERS_EMAIL_VERIFICATION="from:[email protected]
 
 # Links to external sites.
 VITE_LINK_FEMALE_GRADUATES_IN_CS=https://www.wisecampaign.org.uk/core-stem-graduates-2019/
+VITE_LINK_OUTLOOK_HOME=https://outlook.live.com/mail/
+VITE_LINK_PRIMARY_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/code-club-resources-primary
+VITE_LINK_PRIMARY_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-assets/club_packs/PrimaryCodingClub.zip
+VITE_LINK_PYTHON_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/rapid-introduction-to-python-code-club
+VITE_LINK_PYTHON_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-assets/club_packs/PythonCodingClub.zip
 
 # TODO: determine which of these we need.
 # REACT_APP_CONTAINER_MAX_WIDTH=lg

.eslintrc.json

@@ -18,6 +18,12 @@
     "dist"
   ],
   "rules": {
+    "sort-imports": [
+      "error",
+      {
+        "allowSeparatedGroups": true
+      }
+    ],
     "@typescript-eslint/consistent-type-imports": [
       2,
       {
@@ -65,4 +71,4 @@
       }
     }
   ]
-}
+}

src/App.tsx

@@ -1,8 +1,8 @@
 import { CssBaseline, ThemeProvider } from "@mui/material"
 import type { FC } from "react"
 
-import theme from "./app/theme"
 import Router from "./router"
+import theme from "./app/theme"
 
 const App: FC = () => {
   return (

src/api/authFactor.ts

@@ -1,15 +1,15 @@
 import {
+  type AuthFactor,
   getReadAuthFactorEndpoints,
   urls,
-  type AuthFactor,
 } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type CreateArg,
   type CreateResult,
   type DestroyArg,
   type DestroyResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
 
 import api from "."

src/api/klass.ts

@@ -1,13 +1,13 @@
-import { getReadClassEndpoints, urls, type Class } from "codeforlife/api"
+import { type Class, getReadClassEndpoints, urls } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type CreateArg,
   type CreateResult,
   type DestroyArg,
   type DestroyResult,
   type UpdateArg,
   type UpdateResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
 
 import api from "."

src/api/school.ts

@@ -1,12 +1,12 @@
-import { getReadSchoolEndpoints, urls, type School } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type CreateArg,
   type CreateResult,
   type UpdateArg,
   type UpdateResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
+import { type School, getReadSchoolEndpoints, urls } from "codeforlife/api"
 
 import api from "."
 

src/api/schoolTeacherInvitation.ts

@@ -1,7 +1,4 @@
-import { type User } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type Arg,
   type CreateArg,
   type CreateResult,
@@ -14,7 +11,10 @@ import {
   type RetrieveResult,
   type UpdateArg,
   type UpdateResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
+import { type User } from "codeforlife/api"
 
 import api from "."
 

src/api/sso.ts

@@ -6,8 +6,8 @@ import {
   type Student,
   type User,
 } from "codeforlife/api"
-import { type SessionMetadata } from "codeforlife/hooks"
 import { type Arg } from "codeforlife/utils/api"
+import { type SessionMetadata } from "codeforlife/hooks"
 
 import api from "."
 

src/api/student.ts

@@ -1,14 +1,14 @@
-import { urls, type Student, type User } from "codeforlife/api"
 import {
-  tagData,
   type Arg,
   type BulkCreateArg,
   type BulkCreateResult,
   type BulkDestroyArg,
   type BulkDestroyResult,
   type BulkUpdateArg,
   type BulkUpdateResult,
+  tagData,
 } from "codeforlife/utils/api"
+import { type Student, type User, urls } from "codeforlife/api"
 
 import api from "."
 

src/api/teacher.ts

@@ -1,14 +1,14 @@
-import { urls, type Teacher, type User } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type Arg,
   type CreateResult,
   type DestroyArg,
   type DestroyResult,
   type UpdateArg,
   type UpdateResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
+import { type Teacher, type User, urls } from "codeforlife/api"
 
 import api from "."
 

src/api/user.ts

@@ -1,15 +1,15 @@
-import { getReadUserEndpoints, urls, type User } from "codeforlife/api"
 import {
-  buildUrl,
-  tagData,
   type Arg,
   type CreateArg,
   type CreateResult,
   type DestroyArg,
   type DestroyResult,
   type UpdateArg,
   type UpdateResult,
+  buildUrl,
+  tagData,
 } from "codeforlife/utils/api"
+import { type User, getReadUserEndpoints, urls } from "codeforlife/api"
 
 import api from "."
 

src/app/hooks.ts

@@ -5,6 +5,7 @@
 // for importing and re-exporting the typed versions of hooks.
 /* eslint-disable @typescript-eslint/no-restricted-imports */
 import { useDispatch, useSelector } from "react-redux"
+
 import type { AppDispatch, RootState } from "./store"
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`

src/app/schemas.ts

@@ -1,5 +1,5 @@
+import { type Schema, type StringSchema, string as YupString } from "yup"
 import CryptoJS from "crypto-js"
-import { string as YupString, type Schema, type StringSchema } from "yup"
 
 type Options<S extends Schema, Extras = {}> = Partial<{ schema: S } & Extras>
 

src/app/store.ts

@@ -1,6 +1,5 @@
 import type { Action, ThunkAction } from "@reduxjs/toolkit"
 import { combineSlices } from "@reduxjs/toolkit"
-
 import { makeStore } from "codeforlife/utils/store"
 
 import api from "../api"

src/app/theme.ts

@@ -1,9 +1,8 @@
 import {
+  type ThemeOptions,
   createTheme,
   responsiveFontSizes,
-  type ThemeOptions,
 } from "@mui/material"
-
 import { themeOptions as cflThemeOptions } from "codeforlife/theme"
 
 // Unpack the base options to extend the theme

src/components/Introduction.tsx

@@ -0,0 +1,46 @@
+import type { FC, ReactNode } from "react"
+import {
+  Unstable_Grid2 as Grid,
+  type GridDirection,
+  Stack,
+  Typography,
+} from "@mui/material"
+import { Image } from "codeforlife/components"
+import type { ResponsiveStyleValue } from "@mui/system"
+
+export interface IntroductionProps {
+  header: string
+  img: { alt: string; src: string }
+  children: ReactNode
+  direction?: ResponsiveStyleValue<GridDirection>
+}
+
+const Introduction: FC<IntroductionProps> = ({
+  header,
+  img,
+  children,
+  direction = "row",
+}) => {
+  return (
+    <>
+      <Grid
+        container
+        spacing={{ xs: 2, lg: 3 }}
+        display="flex"
+        direction={direction}
+      >
+        <Grid xs={12} md={6}>
+          <Stack sx={{ height: "100%" }}>
+            <Typography variant="h5">{header}</Typography>
+            {children}
+          </Stack>
+        </Grid>
+        <Grid xs={12} md={6} className="flex-center">
+          <Image alt={img.alt} src={img.src} />
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default Introduction

src/components/OpenInEmailButtons.tsx

@@ -1,8 +1,7 @@
-import { MailOutline as MailOutlineIcon } from "@mui/icons-material"
-import { Stack } from "@mui/material"
 import { type FC } from "react"
-
 import { LinkButton } from "codeforlife/components/router"
+import { MailOutline as MailOutlineIcon } from "@mui/icons-material"
+import { Stack } from "@mui/material"
 
 export interface OpenInEmailButtonsProps {
   gmailFilters: string
@@ -19,7 +18,7 @@ const OpenInEmailButtons: FC<OpenInEmailButtonsProps> = ({ gmailFilters }) => {
         Open in Gmail
       </LinkButton>
       <LinkButton
-        to="https://outlook.live.com/mail/"
+        to={import.meta.env.VITE_LINK_OUTLOOK_HOME}
         target="_blank"
         endIcon={<MailOutlineIcon />}
       >

src/components/form/LastNameField.tsx

@@ -1,8 +1,7 @@
+import { TextField, type TextFieldProps } from "codeforlife/components/form"
 import { type FC } from "react"
 import { string as YupString } from "yup"
 
-import { TextField, type TextFieldProps } from "codeforlife/components/form"
-
 export type LastNameFieldProps = Omit<
   TextFieldProps,
   "type" | "name" | "schema"

src/main.tsx

@@ -1,6 +1,6 @@
+import { Provider } from "react-redux"
 import React from "react"
 import { createRoot } from "react-dom/client"
-import { Provider } from "react-redux"
 
 import App from "./App"
 import store from "./app/store"

src/pages/codingClubs/ClubAim.tsx

@@ -0,0 +1,29 @@
+import { Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+
+export interface ClubAimProps {}
+
+const ClubAim: FC<ClubAimProps> = () => {
+  return (
+    <>
+      <Stack>
+        <Typography variant="h4" textAlign="center">
+          Who are the club packs aimed at?
+        </Typography>
+        <Typography>
+          The FREE resource packs are aimed at two different groups, the first
+          is aimed at students ages between 7-11yrs with an interest in learning
+          Python. The second pack is aimed at students 12yrs and up, including
+          adults. This moves at a much faster pace and also introduces students
+          to setting up an environment on their own computer.
+        </Typography>
+        <Typography mb={0}>
+          Both packs are a condensed learning pathway using our game Rapid
+          Router alongside suggested session plan and slides.
+        </Typography>
+      </Stack>
+    </>
+  )
+}
+
+export default ClubAim

src/pages/codingClubs/CodingClubs.tsx

@@ -0,0 +1,35 @@
+import * as page from "codeforlife/components/page"
+import { type FC } from "react"
+import { useTheme } from "@mui/material"
+
+import ClubAim from "./ClubAim"
+import CodeClubHeroImage from "../../images/coding_club_hero_hexagon.png"
+import Primary from "./Primary"
+import Python from "./Python"
+
+export interface CodingClubProps {}
+
+const CodingClubs: FC<CodingClubProps> = () => {
+  const theme = useTheme()
+
+  return (
+    <page.Page>
+      <page.Banner
+        imageProps={{ alt: "codeClubHero", src: CodeClubHeroImage }}
+        header="Coding clubs"
+        subheader="A FREE set of slides and guides to run your own coding clubs"
+      />
+      <page.Section>
+        <ClubAim />
+      </page.Section>
+      <page.Section boxProps={{ bgcolor: theme.palette.info.main }}>
+        <Primary />
+      </page.Section>
+      <page.Section>
+        <Python />
+      </page.Section>
+    </page.Page>
+  )
+}
+
+export default CodingClubs