Portal frontend 6

.env

@@ -22,18 +22,10 @@ VITE_LINK_PRIMARY_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-asset
 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
 VITE_LINK_IMPACT_REPORT_2023=https://storage.googleapis.com/codeforlife-assets/impact_reports/impact_report_2023.pdf
+VITE_LINK_IDEAS_BOX=https://docs.google.com/forms/d/e/1FAIpQLSclasSZCb7s26Yax3KZuXIFhLjMhGK591WPvht0BkfjSiQR1w/viewform
+VITE_LINK_HOME_LEARNING_BEGINNER=https://code-for-life.gitbook.io/independent-student-resources/beginner
+VITE_LINK_HOME_LEARNING_INTERMEDIATE=https://code-for-life.gitbook.io/independent-student-resources/intermediate
+VITE_LINK_HOME_LEARNING_ADVANCED=https://code-for-life.gitbook.io/independent-student-resources/advanced
 
-# TODO: determine which of these we need.
+# TODO: determine if this is needed.
 # REACT_APP_CONTAINER_MAX_WIDTH=lg
-# REACT_APP_IDEAS_BOX_HREF=https://docs.google.com/forms/d/e/1FAIpQLSclasSZCb7s26Yax3KZuXIFhLjMhGK591WPvht0BkfjSiQR1w/viewform
-# REACT_APP_INDEPENDENT_BEGINNER_HREF=https://code-for-life.gitbook.io/independent-student-resources/beginner/
-# REACT_APP_INDEPENDENT_INTERMEDIATE_HREF=https://code-for-life.gitbook.io/independent-student-resources/intermediate/
-# REACT_APP_INDEPENDENT_ADVANCED_HREF=https://code-for-life.gitbook.io/independent-student-resources/advanced/
-# REACT_APP_API_BASE_URL=http://localhost:8000/api/
-# REACT_APP_RAPID_ROUTER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/w0Pw_XikQSs
-# REACT_APP_BLOCKLY_GUIDE_SRC=https://docs.codeforlife.education/rapid-router/blockly-guide
-# REACT_APP_TEACHER_RESOURCES_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/tM5nKPYlz74
-# REACT_APP_RR_FOR_TEACHER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/hv0fM0twrOE
-# REACT_APP_INTRO_TO_CODING_ENGLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-england
-# REACT_APP_INTRO_TO_CODING_SCOTLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-scotland
-# REACT_APP_RR_TEACHING_RESOURCE=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/welcome-to-rapid-router

package.json

@@ -23,7 +23,7 @@
     "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package."
   ],
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.8",
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.9",
     "crypto-js": "^4.2.0"
   },
   "devDependencies": {

src/app/env.ts

@@ -24,3 +24,8 @@
 export const LINK_PYTHON_PACK_GITBOOK = env.VITE_LINK_PYTHON_PACK_GITBOOK
 export const LINK_PYTHON_PACK_DOWNLOAD = env.VITE_LINK_PYTHON_PACK_DOWNLOAD
 export const LINK_IMPACT_REPORT_2023 = env.VITE_LINK_IMPACT_REPORT_2023
+export const LINK_IDEAS_BOX = env.VITE_LINK_IDEAS_BOX
+export const LINK_HOME_LEARNING_BEGINNER = env.VITE_LINK_HOME_LEARNING_BEGINNER
+export const LINK_HOME_LEARNING_INTERMEDIATE =
+  env.VITE_LINK_HOME_LEARNING_INTERMEDIATE
+export const LINK_HOME_LEARNING_ADVANCED = env.VITE_LINK_HOME_LEARNING_ADVANCED

src/components/Card.tsx

@@ -1,7 +1,4 @@
-import { type AnchorHTMLAttributes, type FC } from "react"
 import {
-  Button,
-  type ButtonProps,
   CardActions,
   CardContent,
   CardMedia,
@@ -10,25 +7,34 @@
   type CardProps as MuiCardProps,
   Typography,
 } from "@mui/material"
+import { LinkButton, type LinkButtonProps } from "codeforlife/components/router"
 
-export interface CardProps extends MuiCardProps {
+export type CardProps<
+  Override extends "delta" | "to",
+  State extends Record<string, unknown> = Record<string, unknown>,
+> = MuiCardProps & {
   title: string
   description: string
   mediaProps: {
     image: NonNullable<CardMediaProps["image"]>
     title: NonNullable<CardMediaProps["title"]>
   }
-  buttonProps: ButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>
+  linkButtonProps: LinkButtonProps<Override, State>
 }
 
-const Card: FC<CardProps> = ({
+const Card: {
+  (props: CardProps<"delta">): JSX.Element
+  <State extends Record<string, unknown> = Record<string, unknown>>(
+    props: CardProps<"to", State>,
+  ): JSX.Element
+} = ({
   title,
   description,
   mediaProps,
-  buttonProps,
+  linkButtonProps,
   style,
   ...otherCardProps
-}) => {
+}: CardProps<"delta"> | CardProps<"to">) => {
   return (
     <MuiCard
       style={{
@@ -46,7 +52,8 @@
         <Typography mb={0}>{description}</Typography>
       </CardContent>
       <CardActions>
-        <Button {...buttonProps} />
+        {/* @ts-expect-error props */}
+        <LinkButton {...linkButtonProps} />
       </CardActions>
     </MuiCard>
   )

src/pages/getInvolved/GetInvolved.tsx

@@ -2,7 +2,6 @@
 import { ChevronRightRounded as ChevronRightRoundedIcon } from "@mui/icons-material"
 import { type FC } from "react"
 import { Unstable_Grid2 as Grid } from "@mui/material"
-import { useNavigate } from "react-router-dom"
 
 import Card from "../../components/Card"
 import ClubsImg from "../../images/clubs.png"
@@ -13,72 +12,65 @@
 
 export interface GetInvolvedProps {}
 
-const GetInvolved: FC<GetInvolvedProps> = () => {
-  const navigate = useNavigate()
-
-  return (
-    <page.Page>
-      <page.Banner
-        header="Get involved"
-        subheader="How you can get involved with the creation of Code for Life products and resources"
-        imageProps={{
-          title: "Adult teaching two children",
-          alt: "Adult teaching two children",
-          src: GetInvolvedHero,
-        }}
-      />
-      <page.Section>
-        <Grid container spacing={4}>
-          <Grid xs={12} md={6} lg={4}>
-            <Card
-              title="Starting a coding club of your own"
-              description="Become a Code for Life ambassador by starting up a coding club. Find out more about how you can get involved with this by visiting our coding club page."
-              mediaProps={{
-                title: "Student showing their work to teacher",
-                image: ClubsImg,
-              }}
-              buttonProps={{
-                onClick: () => {
-                  navigate(paths.codingClubs._)
-                },
-                children: "Read more",
-                endIcon: <ChevronRightRoundedIcon />,
-              }}
-            />
-          </Grid>
-          <Grid xs={12} md={6} lg={4}>
-            <Card
-              title="Contribute through code"
-              description="We welcome volunteers from all backgrounds to help us with our coding adventure. Take a look at our contribution guide to find out how to get involved in our open source projects."
-              mediaProps={{ title: "Github repository page", image: GithubImg }}
-              buttonProps={{
-                onClick: () => {
-                  navigate(paths.contribute._)
-                },
-                children: "Read more",
-                endIcon: <ChevronRightRoundedIcon />,
-              }}
-            />
-          </Grid>
-          <Grid xs={12} md={6} lg={4}>
-            <Card
-              title="University partnerships"
-              description="Please get in touch at [email protected] if you are interested in working on Code for Life projects with your students including coding, user experience, data analytics and new feature design."
-              mediaProps={{
-                title: "Three students looking at laptops",
-                image: UniversitiesImg,
-              }}
-              buttonProps={{
-                href: "mailto:[email protected]",
-                children: "Get in touch",
-                endIcon: <ChevronRightRoundedIcon />,
-              }}
-            />
-          </Grid>
+const GetInvolved: FC<GetInvolvedProps> = () => (
+  <page.Page>
+    <page.Banner
+      header="Get involved"
+      subheader="How you can get involved with the creation of Code for Life products and resources"
+      imageProps={{
+        title: "Adult teaching two children",
+        alt: "Adult teaching two children",
+        src: GetInvolvedHero,
+      }}
+    />
+    <page.Section>
+      <Grid container spacing={4}>
+        <Grid xs={12} md={6} lg={4}>
+          <Card
+            title="Starting a coding club of your own"
+            description="Become a Code for Life ambassador by starting up a coding club. Find out more about how you can get involved with this by visiting our coding club page."
+            mediaProps={{
+              title: "Student showing their work to teacher",
+              image: ClubsImg,
+            }}
+            linkButtonProps={{
+              to: paths.codingClubs._,
+              children: "Read more",
+              endIcon: <ChevronRightRoundedIcon />,
+            }}
+          />
+        </Grid>
+        <Grid xs={12} md={6} lg={4}>
+          <Card
+            title="Contribute through code"
+            description="We welcome volunteers from all backgrounds to help us with our coding adventure. Take a look at our contribution guide to find out how to get involved in our open source projects."
+            mediaProps={{ title: "Github repository page", image: GithubImg }}
+            linkButtonProps={{
+              to: paths.contribute._,
+              children: "Read more",
+              endIcon: <ChevronRightRoundedIcon />,
+            }}
+          />
+        </Grid>
+        <Grid xs={12} md={6} lg={4}>
+          <Card
+            title="University partnerships"
+            description="Please get in touch at [email protected] if you are interested in working on Code for Life projects with your students including coding, user experience, data analytics and new feature design."
+            mediaProps={{
+              title: "Three students looking at laptops",
+              image: UniversitiesImg,
+            }}
+            linkButtonProps={{
+              to: "mailto:[email protected]",
+              target: "_blank",
+              children: "Get in touch",
+              endIcon: <ChevronRightRoundedIcon />,
+            }}
+          />
         </Grid>
-      </page.Section>
-    </page.Page>
-  )
-}
+      </Grid>
+    </page.Section>
+  </page.Page>
+)
 
 export default GetInvolved

src/pages/homeLearning/AboutRR.tsx

@@ -0,0 +1,49 @@
+import { Unstable_Grid2 as Grid, Typography } from "@mui/material"
+import { type FC } from "react"
+import { LinkButton } from "codeforlife/components/router"
+
+import { paths } from "../../routes"
+
+export interface AboutRRProps {}
+
+const AboutRR: FC<AboutRRProps> = () => (
+  <Grid container columnSpacing={4}>
+    <Grid xs={12}>
+      <Typography variant="h4" textAlign="center">
+        About Rapid Router
+      </Typography>
+    </Grid>
+    <Grid xs={12} md={6}>
+      <Typography>
+        Rapid Router is our shopping delivery game that teaches children aged
+        5-14 to learn how to code using Blockly. The pupils can then progress to
+        Python Den to continue to build up their skills.
+      </Typography>
+      <Typography>
+        The game and lessons support the English National Curriculum Computing
+        strand, and Teachers across the world love them.
+      </Typography>
+      <Typography>
+        Now, we&apos;ve made lessons available for parents and caregivers to
+        teach at home, so we can #KeepKidsCoding. They&apos;re free and easy,
+        but most of all, they&apos;re fun!
+      </Typography>
+    </Grid>
+    <Grid xs={12} md={6}>
+      <Typography>
+        Read our learning guide and start at Level 1, unless your child has
+        played before. To start playing, you need to first register as an
+        independent student. This will ensure that the level progress is saved.
+      </Typography>
+      <Typography>
+        If you would like to keep updated on our products and receive emails
+        about Code for Life, please sign up to our updates.
+      </Typography>
+    </Grid>
+    <Grid xs={12} className="flex-end-x">
+      <LinkButton to={paths.register._}>Register now</LinkButton>
+    </Grid>
+  </Grid>
+)
+
+export default AboutRR

src/pages/homeLearning/Advanced.tsx

@@ -0,0 +1,60 @@
+import { type FC } from "react"
+
+import { LINK_HOME_LEARNING_ADVANCED } from "../../app/env"
+import Levels from "./Levels"
+import { Link } from "codeforlife/components/router"
+import RRAdvancedImage from "../../images/rr_advanced.png"
+import { paths } from "../../routes"
+
+export interface AdvancedProps {}
+
+const Advanced: FC<AdvancedProps> = () => (
+  <Levels
+    banner={{
+      difficulty: "Advanced",
+      color: "White",
+      bgcolor: "teacher.main",
+    }}
+    cardProps={{
+      mediaProps: { title: "RR advanced image", image: RRAdvancedImage },
+      title: "Advanced",
+      description:
+        "Let's get advanced! Learn about repeat loops and selection, variables, and how to create efficient code. Designed for children aged 12-14, but open to all.",
+      linkButtonProps: { to: LINK_HOME_LEARNING_ADVANCED },
+    }}
+    text={{
+      levels: "29-67",
+      sessions: [
+        {
+          ids: [1],
+          body: "Recap earlier levels before looking at repeat loops. Encourage your child to plan ahead on the printable worksheet before writing more complex programs. If they're unsure about using loops, ask them to write the code without loops and then look for repeating patterns.",
+        },
+        {
+          ids: [2],
+          body: "A video and printable resources support this lesson, which builds your child's understanding of loops with a new loop, repeat-until.",
+        },
+        {
+          ids: [3, 4],
+          body: "Extra tasks for children who want a challenge! Watch the if...do video to learn about selection statements. Ask your child to explain how their finished program works!",
+        },
+        {
+          ids: [5],
+          body: "Learn more about if...else through traffic lights. In the Traffic Lights levels in Rapid Router, traffic light is a variable that either contains red or green.",
+        },
+        {
+          ids: "Extended",
+          body: (
+            <>
+              Build on everything learned so far with traffic lights, limited
+              blocks, procedures and brain teasers. Older children might even
+              like to start learning to program using the Python language using{" "}
+              <Link to={paths.pythonDen._}>Python Den</Link>.
+            </>
+          ),
+        },
+      ],
+    }}
+  />
+)
+
+export default Advanced

src/pages/homeLearning/Beginner.tsx

@@ -0,0 +1,47 @@
+import { type FC } from "react"
+
+import { LINK_HOME_LEARNING_BEGINNER } from "../../app/env"
+import Levels from "./Levels"
+import RRBeginnerImage from "../../images/rr_beginner.png"
+
+export interface BeginnerProps {}
+
+const Beginner: FC<BeginnerProps> = () => (
+  <Levels
+    banner={{
+      difficulty: "Beginner",
+      color: "White",
+      bgcolor: "student.main",
+    }}
+    cardProps={{
+      mediaProps: { title: "RR beginner image", image: RRBeginnerImage },
+      title: "Beginner",
+      description:
+        "Teach your child about problem-solving and logical reasoning as they play. They'll explore algorithms, and learn how to create and debug simple programs. Designed for children aged 5-7, but start here if you've never played Rapid Router.",
+      linkButtonProps: { to: LINK_HOME_LEARNING_BEGINNER },
+    }}
+    text={{
+      levels: "1-16",
+      sessions: [
+        {
+          ids: [1],
+          body: "Print off the worksheets, and cut them out to play offline. This helps children see that they need to give the computer clear instructions so it can understand how to move the van.",
+        },
+        {
+          ids: [2],
+          body: "Explore Rapid Router online and learn how to play. Print the left-right van on page 6, to help avoid any confusion between left and right. Once a child has understood the basics, they can work on levels 1 to 5.",
+        },
+        {
+          ids: [3],
+          body: "Plan longer routes with more turns to learn how to create more complex algorithms. The direct drive buttons make things a little easier for younger children, or those with learning difficulties while they build confidence.",
+        },
+        {
+          ids: [4, 5],
+          body: "Print off worksheets focusing on efficient routes and planning using levels 13 and 14. Levels 15-16 include routes where there is more than one delivery to make and some complex and tangled routes.",
+        },
+      ],
+    }}
+  />
+)
+
+export default Beginner