Refactor coding clubs page

.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,39 @@
+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"
+
+const Introduction: FC<{
+  header: string
+  img: { alt: string; src: string }
+  children: ReactNode
+  direction?: ResponsiveStyleValue<GridDirection>
+}> = ({ 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

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,27 @@
+import { Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+
+const ClubAim: FC = () => {
+  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,99 @@
+import * as page from "codeforlife/components/page"
+import { Link, LinkButton } from "codeforlife/components/router"
+import { Typography, useTheme } from "@mui/material"
+import { Download as DownloadIcon } from "@mui/icons-material"
+import { type FC } from "react"
+
+import AboutUsImage from "../../images/about_us.jpg"
+import ClubAim from "./ClubAim"
+import CodeClubHeroImage from "../../images/coding_club_hero_hexagon.png"
+import Introduction from "../../components/Introduction"
+import PythonClubImage from "../../images/coding_club_python_pack.png"
+
+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 }}>
+        <Introduction
+          header="Primary coding club"
+          img={{ alt: "aboutUs", src: AboutUsImage }}
+        >
+          <Typography>
+            Download your FREE coding club pack for students aged 7-11. This
+            pack introduces students to the first principles of Python at a
+            faster pace than the regular lesson plans. It is aimed at students
+            already interested in learning coding and can be used in clubs, at
+            home or in school, on or offline.
+          </Typography>
+          <Typography>
+            View the resources{" "}
+            <Link
+              to="https://code-for-life.gitbook.io/teaching-resources/v/code-club-resources-primary"
+              target="_blank"
+            >
+              online here
+            </Link>
+            .
+          </Typography>
+          {/*TODO: Link to GTM for analytics*/}
+          <LinkButton
+            sx={{ marginTop: "auto" }}
+            to="https://storage.googleapis.com/codeforlife-assets/club_packs/PrimaryCodingClub.zip"
+            target="_blank"
+            endIcon={<DownloadIcon />}
+          >
+            Download the Primary coding club pack
+          </LinkButton>
+        </Introduction>
+      </page.Section>
+      <page.Section>
+        <Introduction
+          header="Python coding club"
+          img={{ alt: "pythonCodingClub", src: PythonClubImage }}
+          direction="row-reverse"
+        >
+          <Typography>
+            Download your FREE coding club pack for students aged 12 and above.
+            This pack is a fast paced introduction to Python. It is aimed at
+            students already interested in learning coding, individuals looking
+            to learn and run their own club, or adults wanting to try coding
+            out. It is designed to be used in face-to-face or online clubs.
+          </Typography>
+          <Typography>
+            View the resources{" "}
+            <Link
+              to="https://code-for-life.gitbook.io/teaching-resources/v/rapid-introduction-to-python-code-club"
+              target="_blank"
+            >
+              online here
+            </Link>
+            .
+          </Typography>
+          {/*TODO: Link to GTM for analytics*/}
+          <LinkButton
+            sx={{ marginTop: "auto" }}
+            to="https://storage.googleapis.com/codeforlife-assets/club_packs/PythonCodingClub.zip"
+            target="_blank"
+            endIcon={<DownloadIcon />}
+          >
+            Download the Python coding club pack
+          </LinkButton>
+        </Introduction>
+      </page.Section>
+    </page.Page>
+  )
+}
+
+export default CodingClubs