Skip to content

Commit 03b9c57

Browse files
SKairinosSKairinos
authored
Portal frontend 6 (#67)
* initial page and route * page * release button * fix: duplicate ids * fix spacing * add initial page and route * add images * initial * add remaining components * levels * fix levels * merge from dev * new cfl package * new cfl package * python den updates * new cfl package * fix cards * feedback
1 parent 7a50db4 commit 03b9c57

20 files changed

+465
-124
lines changed

‎.env

+5-13
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,10 @@ VITE_LINK_PRIMARY_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-asset
2222
VITE_LINK_PYTHON_PACK_GITBOOK=https://code-for-life.gitbook.io/teaching-resources/v/rapid-introduction-to-python-code-club
2323
VITE_LINK_PYTHON_PACK_DOWNLOAD=https://storage.googleapis.com/codeforlife-assets/club_packs/PythonCodingClub.zip
2424
VITE_LINK_IMPACT_REPORT_2023=https://storage.googleapis.com/codeforlife-assets/impact_reports/impact_report_2023.pdf
25+
VITE_LINK_IDEAS_BOX=https://docs.google.com/forms/d/e/1FAIpQLSclasSZCb7s26Yax3KZuXIFhLjMhGK591WPvht0BkfjSiQR1w/viewform
26+
VITE_LINK_HOME_LEARNING_BEGINNER=https://code-for-life.gitbook.io/independent-student-resources/rapid-router-resources/beginner
27+
VITE_LINK_HOME_LEARNING_INTERMEDIATE=https://code-for-life.gitbook.io/independent-student-resources/rapid-router-resources/intermediate
28+
VITE_LINK_HOME_LEARNING_ADVANCED=https://code-for-life.gitbook.io/independent-student-resources/rapid-router-resources/advanced
2529

26-
# TODO: determine which of these we need.
30+
# TODO: determine if this is needed.
2731
# REACT_APP_CONTAINER_MAX_WIDTH=lg
28-
# REACT_APP_IDEAS_BOX_HREF=https://docs.google.com/forms/d/e/1FAIpQLSclasSZCb7s26Yax3KZuXIFhLjMhGK591WPvht0BkfjSiQR1w/viewform
29-
# REACT_APP_INDEPENDENT_BEGINNER_HREF=https://code-for-life.gitbook.io/independent-student-resources/beginner/
30-
# REACT_APP_INDEPENDENT_INTERMEDIATE_HREF=https://code-for-life.gitbook.io/independent-student-resources/intermediate/
31-
# REACT_APP_INDEPENDENT_ADVANCED_HREF=https://code-for-life.gitbook.io/independent-student-resources/advanced/
32-
# REACT_APP_API_BASE_URL=http://localhost:8000/api/
33-
# REACT_APP_RAPID_ROUTER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/w0Pw_XikQSs
34-
# REACT_APP_BLOCKLY_GUIDE_SRC=https://docs.codeforlife.education/rapid-router/blockly-guide
35-
# REACT_APP_TEACHER_RESOURCES_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/tM5nKPYlz74
36-
# REACT_APP_RR_FOR_TEACHER_YOUTUBE_VIDEO_SRC=https://www.youtube-nocookie.com/embed/hv0fM0twrOE
37-
# REACT_APP_INTRO_TO_CODING_ENGLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-england
38-
# REACT_APP_INTRO_TO_CODING_SCOTLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-scotland
39-
# REACT_APP_RR_TEACHING_RESOURCE=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/welcome-to-rapid-router

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package."
2424
],
2525
"dependencies": {
26-
"codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.8",
26+
"codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.10",
2727
"crypto-js": "^4.2.0"
2828
},
2929
"devDependencies": {

‎src/app/env.ts

+5
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,8 @@ export const LINK_PRIMARY_PACK_DOWNLOAD = env.VITE_LINK_PRIMARY_PACK_DOWNLOAD
2424
export const LINK_PYTHON_PACK_GITBOOK = env.VITE_LINK_PYTHON_PACK_GITBOOK
2525
export const LINK_PYTHON_PACK_DOWNLOAD = env.VITE_LINK_PYTHON_PACK_DOWNLOAD
2626
export const LINK_IMPACT_REPORT_2023 = env.VITE_LINK_IMPACT_REPORT_2023
27+
export const LINK_IDEAS_BOX = env.VITE_LINK_IDEAS_BOX
28+
export const LINK_HOME_LEARNING_BEGINNER = env.VITE_LINK_HOME_LEARNING_BEGINNER
29+
export const LINK_HOME_LEARNING_INTERMEDIATE =
30+
env.VITE_LINK_HOME_LEARNING_INTERMEDIATE
31+
export const LINK_HOME_LEARNING_ADVANCED = env.VITE_LINK_HOME_LEARNING_ADVANCED

‎src/components/Card.tsx

+16-9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import { type AnchorHTMLAttributes, type FC } from "react"
21
import {
3-
Button,
4-
type ButtonProps,
52
CardActions,
63
CardContent,
74
CardMedia,
@@ -10,25 +7,34 @@ import {
107
type CardProps as MuiCardProps,
118
Typography,
129
} from "@mui/material"
10+
import { LinkButton, type LinkButtonProps } from "codeforlife/components/router"
1311

14-
export interface CardProps extends MuiCardProps {
12+
export type CardProps<
13+
Override extends "delta" | "to",
14+
State extends Record<string, unknown> = Record<string, unknown>,
15+
> = MuiCardProps & {
1516
title: string
1617
description: string
1718
mediaProps: {
1819
image: NonNullable<CardMediaProps["image"]>
1920
title: NonNullable<CardMediaProps["title"]>
2021
}
21-
buttonProps: ButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>
22+
linkButtonProps: LinkButtonProps<Override, State>
2223
}
2324

24-
const Card: FC<CardProps> = ({
25+
const Card: {
26+
(props: CardProps<"delta">): JSX.Element
27+
<State extends Record<string, unknown> = Record<string, unknown>>(
28+
props: CardProps<"to", State>,
29+
): JSX.Element
30+
} = ({
2531
title,
2632
description,
2733
mediaProps,
28-
buttonProps,
34+
linkButtonProps,
2935
style,
3036
...otherCardProps
31-
}) => {
37+
}: CardProps<"delta"> | CardProps<"to">) => {
3238
return (
3339
<MuiCard
3440
style={{
@@ -46,7 +52,8 @@ const Card: FC<CardProps> = ({
4652
<Typography mb={0}>{description}</Typography>
4753
</CardContent>
4854
<CardActions>
49-
<Button {...buttonProps} />
55+
{/* @ts-expect-error props */}
56+
<LinkButton {...linkButtonProps} />
5057
</CardActions>
5158
</MuiCard>
5259
)

‎src/features/footer/RegisterToNewsletterForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const RegisterToNewsletterForm: FC<RegisterToNewsletterFormProps> = () => {
1515
const navigate = useNavigate()
1616

1717
return (
18-
<Stack>
18+
<Stack id="register-to-newsletter-form">
1919
<FormHelperText>
2020
Sign up to receive updates about Code for Life games and teaching
2121
resources.

‎src/images/home_learning_hero_hexagon.png

220 KB
Loading

‎src/images/rr_advanced.png

223 KB
Loading

‎src/images/rr_beginner.png

54.2 KB
Loading

‎src/images/rr_intermediate.png

88.4 KB
Loading

‎src/pages/getInvolved/GetInvolved.tsx

+59-67
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as page from "codeforlife/components/page"
22
import { ChevronRightRounded as ChevronRightRoundedIcon } from "@mui/icons-material"
33
import { type FC } from "react"
44
import { Unstable_Grid2 as Grid } from "@mui/material"
5-
import { useNavigate } from "react-router-dom"
65

76
import Card from "../../components/Card"
87
import ClubsImg from "../../images/clubs.png"
@@ -13,72 +12,65 @@ import { paths } from "../../routes"
1312

1413
export interface GetInvolvedProps {}
1514

16-
const GetInvolved: FC<GetInvolvedProps> = () => {
17-
const navigate = useNavigate()
18-
19-
return (
20-
<page.Page>
21-
<page.Banner
22-
header="Get involved"
23-
subheader="How you can get involved with the creation of Code for Life products and resources"
24-
imageProps={{
25-
title: "Adult teaching two children",
26-
alt: "Adult teaching two children",
27-
src: GetInvolvedHero,
28-
}}
29-
/>
30-
<page.Section>
31-
<Grid container spacing={4}>
32-
<Grid xs={12} md={6} lg={4}>
33-
<Card
34-
title="Starting a coding club of your own"
35-
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."
36-
mediaProps={{
37-
title: "Student showing their work to teacher",
38-
image: ClubsImg,
39-
}}
40-
buttonProps={{
41-
onClick: () => {
42-
navigate(paths.codingClubs._)
43-
},
44-
children: "Read more",
45-
endIcon: <ChevronRightRoundedIcon />,
46-
}}
47-
/>
48-
</Grid>
49-
<Grid xs={12} md={6} lg={4}>
50-
<Card
51-
title="Contribute through code"
52-
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."
53-
mediaProps={{ title: "Github repository page", image: GithubImg }}
54-
buttonProps={{
55-
onClick: () => {
56-
navigate(paths.contribute._)
57-
},
58-
children: "Read more",
59-
endIcon: <ChevronRightRoundedIcon />,
60-
}}
61-
/>
62-
</Grid>
63-
<Grid xs={12} md={6} lg={4}>
64-
<Card
65-
title="University partnerships"
66-
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."
67-
mediaProps={{
68-
title: "Three students looking at laptops",
69-
image: UniversitiesImg,
70-
}}
71-
buttonProps={{
72-
href: "mailto:[email protected]",
73-
children: "Get in touch",
74-
endIcon: <ChevronRightRoundedIcon />,
75-
}}
76-
/>
77-
</Grid>
15+
const GetInvolved: FC<GetInvolvedProps> = () => (
16+
<page.Page>
17+
<page.Banner
18+
header="Get involved"
19+
subheader="How you can get involved with the creation of Code for Life products and resources"
20+
imageProps={{
21+
title: "Adult teaching two children",
22+
alt: "Adult teaching two children",
23+
src: GetInvolvedHero,
24+
}}
25+
/>
26+
<page.Section>
27+
<Grid container spacing={4}>
28+
<Grid xs={12} md={6} lg={4}>
29+
<Card
30+
title="Starting a coding club of your own"
31+
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."
32+
mediaProps={{
33+
title: "Student showing their work to teacher",
34+
image: ClubsImg,
35+
}}
36+
linkButtonProps={{
37+
to: paths.codingClubs._,
38+
children: "Read more",
39+
endIcon: <ChevronRightRoundedIcon />,
40+
}}
41+
/>
42+
</Grid>
43+
<Grid xs={12} md={6} lg={4}>
44+
<Card
45+
title="Contribute through code"
46+
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."
47+
mediaProps={{ title: "Github repository page", image: GithubImg }}
48+
linkButtonProps={{
49+
to: paths.contribute._,
50+
children: "Read more",
51+
endIcon: <ChevronRightRoundedIcon />,
52+
}}
53+
/>
54+
</Grid>
55+
<Grid xs={12} md={6} lg={4}>
56+
<Card
57+
title="University partnerships"
58+
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."
59+
mediaProps={{
60+
title: "Three students looking at laptops",
61+
image: UniversitiesImg,
62+
}}
63+
linkButtonProps={{
64+
to: "mailto:[email protected]",
65+
target: "_blank",
66+
children: "Get in touch",
67+
endIcon: <ChevronRightRoundedIcon />,
68+
}}
69+
/>
7870
</Grid>
79-
</page.Section>
80-
</page.Page>
81-
)
82-
}
71+
</Grid>
72+
</page.Section>
73+
</page.Page>
74+
)
8375

8476
export default GetInvolved

‎src/pages/homeLearning/AboutRR.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Unstable_Grid2 as Grid, Typography } from "@mui/material"
2+
import { type FC } from "react"
3+
import { LinkButton } from "codeforlife/components/router"
4+
import { ScrollIntoViewLink } from "codeforlife/components"
5+
6+
import { paths } from "../../routes"
7+
8+
export interface AboutRRProps {}
9+
10+
const AboutRR: FC<AboutRRProps> = () => (
11+
<Grid container columnSpacing={4}>
12+
<Grid xs={12}>
13+
<Typography variant="h4" textAlign="center">
14+
About Rapid Router
15+
</Typography>
16+
</Grid>
17+
<Grid xs={12} md={6}>
18+
<Typography>
19+
Rapid Router is our shopping delivery game that teaches children aged
20+
5-14 to learn how to code using Blockly. The pupils can then progress to
21+
Python Den to continue to build up their skills.
22+
</Typography>
23+
<Typography>
24+
The game and lessons support the English National Curriculum Computing
25+
strand, and teachers across the world love them.
26+
</Typography>
27+
<Typography>
28+
Now, we&apos;ve made lessons available for parents and caregivers to
29+
teach at home, so we can #KeepKidsCoding. They&apos;re free and easy,
30+
but most of all, they&apos;re fun!
31+
</Typography>
32+
</Grid>
33+
<Grid xs={12} md={6}>
34+
<Typography>
35+
Read our learning guide and start at Level 1, unless your child has
36+
played before. To start playing, you need to first register as an
37+
independent student. This will ensure that the level progress is saved.
38+
</Typography>
39+
<Typography>
40+
If you would like to keep updated on our products and receive emails
41+
about Code for Life, please{" "}
42+
<ScrollIntoViewLink
43+
elementId="register-to-newsletter-form"
44+
options={{ behavior: "smooth" }}
45+
>
46+
sign up to our updates
47+
</ScrollIntoViewLink>
48+
.
49+
</Typography>
50+
</Grid>
51+
<Grid xs={12} className="flex-end-x">
52+
<LinkButton to={paths.register._}>Register now</LinkButton>
53+
</Grid>
54+
</Grid>
55+
)
56+
57+
export default AboutRR

‎src/pages/homeLearning/Advanced.tsx

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { type FC } from "react"
2+
3+
import { LINK_HOME_LEARNING_ADVANCED } from "../../app/env"
4+
import Levels from "./Levels"
5+
import { Link } from "codeforlife/components/router"
6+
import RRAdvancedImage from "../../images/rr_advanced.png"
7+
import { paths } from "../../routes"
8+
9+
export interface AdvancedProps {}
10+
11+
const Advanced: FC<AdvancedProps> = () => (
12+
<Levels
13+
banner={{
14+
difficulty: "Advanced",
15+
color: "White",
16+
bgcolor: "teacher.main",
17+
}}
18+
cardProps={{
19+
mediaProps: { title: "RR advanced image", image: RRAdvancedImage },
20+
title: "Advanced",
21+
description:
22+
"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.",
23+
linkButtonProps: { to: LINK_HOME_LEARNING_ADVANCED },
24+
}}
25+
text={{
26+
levels: "29-67",
27+
sessions: [
28+
{
29+
ids: [1],
30+
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.",
31+
},
32+
{
33+
ids: [2],
34+
body: "A video and printable resources support this lesson, which builds your child's understanding of loops with a new loop, repeat-until.",
35+
},
36+
{
37+
ids: [3, 4],
38+
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!",
39+
},
40+
{
41+
ids: [5],
42+
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.",
43+
},
44+
{
45+
ids: "Extended",
46+
body: (
47+
<>
48+
Build on everything learned so far with traffic lights, limited
49+
blocks, procedures and brain teasers. Older children might even
50+
like to start learning to program using the Python language using{" "}
51+
<Link to={paths.pythonDen._}>Python Den</Link>.
52+
</>
53+
),
54+
},
55+
],
56+
}}
57+
/>
58+
)
59+
60+
export default Advanced

0 commit comments

Comments
 (0)