Refactor coding clubs page

[faucomte97]

This change is 

[SKairinos]

Make this a page component (like ) called . This will help readability - no single large components but components made of smaller components. Generally a good idea to make page sections a component. See home page as an example.

[SKairinos]

Make this a page component (like ) called . This will help readability - no single large components but components made of smaller components. Generally a good idea to make page sections a component. See home page as an example.

[SKairinos]

add an env variable starting with "VITE_LINK_". External links should be env vars so we don't need to redeploy if a link is updated. Then:

import.meta.env.VITE_LINK_EXAMPLE

[SKairinos]

see above comment about making this an env var

[SKairinos]

General rule. If we export a component, you must always export the props for the component. Even if the props are empty.

export interface CodingClubsProps {}

const CodingClubs: FC<CodingClubsProps> = () => {...}

export default CodingClubs

[SKairinos]

Sort imports. Unfortunately, prettiers import sorting works differently to isort in python (prettier's behaviour is worse IMO). Prettier sorts imports by group (not as a whole). The sort order I have been following so far is:

// {default and 3rd party imports on top}
// space here
// {codeforlife imports in the middle}
// space here
// {relative imports on the bottom}

If we want to change this order, we need to so everywhere.

[SKairinos]

see other comment about exporting props

[SKairinos]

see other comment about export props

[SKairinos]

merge in dev

[faucomte97]

Done.

Reviewable status: 0 of 7 files reviewed, 8 unresolved discussions (waiting on @SKairinos)

---

src/pages/codingClubs/CodingClubs.tsx line 13 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Sort imports. Unfortunately, prettiers import sorting works differently to isort in python (prettier's behaviour is worse IMO). Prettier sorts imports by group (not as a whole). The sort order I have been following so far is:

// {default and 3rd party imports on top}
// space here
// {codeforlife imports in the middle}
// space here
// {relative imports on the bottom}

If we want to change this order, we need to so everywhere.

I'm confused, how come the pipeline doesn't complain about the imports then?

---

src/pages/codingClubs/CodingClubs.tsx line 15 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

General rule. If we export a component, you must always export the props for the component. Even if the props are empty.

export interface CodingClubsProps {}

const CodingClubs: FC<CodingClubsProps> = () => {...}

export default CodingClubs

Done.

---

src/pages/codingClubs/CodingClubs.tsx line 59 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Make this a page component (like ) called . This will help readability - no single large components but components made of smaller components. Generally a good idea to make page sections a component. See home page as an example.

A page component like what called what?

---

src/pages/codingClubs/CodingClubs.tsx line 77 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

add an env variable starting with "VITE_LINK_". External links should be env vars so we don't need to redeploy if a link is updated. Then:

import.meta.env.VITE_LINK_EXAMPLE

Wasn't sure what the convention was here since the link to the Outlook outbox in OpenInEmailButtons is not an env var. Should I make it one?

[SKairinos]

Reviewed 4 of 7 files at r1, all commit messages.
Reviewable status: 4 of 7 files reviewed, 8 unresolved discussions (waiting on @faucomte97)

[SKairinos]

Reviewable status: 4 of 7 files reviewed, 8 unresolved discussions (waiting on @faucomte97)

---

src/pages/codingClubs/CodingClubs.tsx line 59 at r1 (raw file):

Previously, faucomte97 (Florian Aucomte) wrote…

A page component like what called what?

That's annoying - Don't know why these words were excluded.

Make a page component called <Primary /> (like <ClubAim />)

[SKairinos]

Reviewable status: 4 of 7 files reviewed, 8 unresolved discussions (waiting on @faucomte97)

---

src/pages/codingClubs/CodingClubs.tsx line 93 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Make this a page component (like ) called . This will help readability - no single large components but components made of smaller components. Generally a good idea to make page sections a component. See home page as an example.

Make a page component called <Python /> (like <ClubAim />)

[SKairinos]

Reviewable status: 4 of 7 files reviewed, 8 unresolved discussions (waiting on @faucomte97)

---

src/pages/codingClubs/CodingClubs.tsx line 77 at r1 (raw file):

Previously, faucomte97 (Florian Aucomte) wrote…

Wasn't sure what the convention was here since the link to the Outlook outbox in OpenInEmailButtons is not an env var. Should I make it one?

That's my bad. Yes, please do.

[faucomte97]

Reviewable status: 4 of 49 files reviewed, 8 unresolved discussions (waiting on @faucomte97 and @SKairinos)

---

src/components/Introduction.tsx line 17 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

see other comment about export props

Done.

---

src/pages/codingClubs/ClubAim.tsx line 4 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

see other comment about exporting props

Done.

---

src/pages/codingClubs/CodingClubs.tsx line 13 at r1 (raw file):

Previously, faucomte97 (Florian Aucomte) wrote…

I'm confused, how come the pipeline doesn't complain about the imports then?

Done.

---

src/pages/codingClubs/CodingClubs.tsx line 59 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

That's annoying - Don't know why these words were excluded.

Make a page component called <Primary /> (like <ClubAim />)

Done.

---

src/pages/codingClubs/CodingClubs.tsx line 77 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

That's my bad. Yes, please do.

Done.

---

src/pages/codingClubs/CodingClubs.tsx line 87 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

see above comment about making this an env var

Done.

---

src/pages/codingClubs/CodingClubs.tsx line 93 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Make a page component called <Python /> (like <ClubAim />)

Done.

[SKairinos]

Reviewed 2 of 48 files at r3, all commit messages.
Reviewable status: 6 of 52 files reviewed, 9 unresolved discussions (waiting on @faucomte97)

---

vite.config.ts line 2 at r4 (raw file):

import { defineConfig } from "vitest/config"
import path from "path"

should be in 1st group on it's own. path is a built-in module (see)

---

src/pages/codingClubs/CodingClubs.tsx line 13 at r1 (raw file):

Previously, faucomte97 (Florian Aucomte) wrote…

I'm confused, how come the pipeline doesn't complain about the imports then?

The way prettier work

[SKairinos]

Reviewed 1 of 48 files at r3.
Reviewable status: 7 of 52 files reviewed, 9 unresolved discussions (waiting on @faucomte97)

[SKairinos]

Reviewed 9 of 48 files at r3.
Reviewable status: 16 of 52 files reviewed, 9 unresolved discussions (waiting on @faucomte97)

[SKairinos]

Reviewed 3 of 48 files at r3.
Reviewable status: 19 of 52 files reviewed, 9 unresolved discussions (waiting on @faucomte97)

[SKairinos]

Reviewed 2 of 48 files at r3.
Reviewable status: 21 of 52 files reviewed, 9 unresolved discussions (waiting on @faucomte97)

[SKairinos]

Reviewed 2 of 48 files at r3.
Reviewable status: 23 of 52 files reviewed, 8 unresolved discussions (waiting on @faucomte97)

[SKairinos]

Reviewed 2 of 48 files at r3.
Reviewable status: 25 of 52 files reviewed, 5 unresolved discussions (waiting on @faucomte97)

[SKairinos]

Reviewed 1 of 48 files at r3.
Reviewable status: 26 of 52 files reviewed, 1 unresolved discussion (waiting on @faucomte97)

[SKairinos]

Reviewed 22 of 48 files at r3, 3 of 3 files at r4.
Reviewable status: 51 of 52 files reviewed, 3 unresolved discussions (waiting on @faucomte97)

---

src/pages/codingClubs/Primary.tsx line 15 at r4 (raw file):

    <Introduction
      header="Primary coding club"
      img={{ alt: "aboutUs", src: AboutUsImage }}

provide appropriate alt text that describes the image

---

src/pages/codingClubs/Python.tsx line 15 at r4 (raw file):

    <Introduction
      header="Python coding club"
      img={{ alt: "pythonCodingClub", src: PythonClubImage }}

provide appropriate alt text that describes the image

[SKairinos]

Reviewed 1 of 48 files at r3.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @faucomte97)

[faucomte97]

Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @SKairinos)

---

vite.config.ts line 2 at r4 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

should be in 1st group on it's own. path is a built-in module (see)

Done.

---

src/pages/codingClubs/Primary.tsx line 15 at r4 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

provide appropriate alt text that describes the image

Done.

---

src/pages/codingClubs/Python.tsx line 15 at r4 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

provide appropriate alt text that describes the image

Done.

[SKairinos]

Reviewed 3 of 3 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @faucomte97)