Add footer

[faucomte97]

This change is 

[SKairinos]

src/features/footer/Footer.tsx line 22 at r1 (raw file):

export interface FooterProps {}

const Footer: FC<FooterProps> = () => {

In src/App.tsx, set the footer prop to be this component.

footer={<Footer />}

[SKairinos]

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

---

src/api/user.ts line 70 at r1 (raw file):

export type RegisterToNewsletterResult = null
export type RegisterToNewsletterArg = { email: string }

Arg<User, "email">

Code quote:

{ email: string }

---

src/features/footer/Links.tsx line 13 at r1 (raw file):

const FooterLink: FC<{
  href: string

rename prop to to

---

src/features/footer/Links.tsx line 14 at r1 (raw file):

const FooterLink: FC<{
  href: string
  text: string

rename prop to children

---

src/features/footer/Links.tsx line 15 at r1 (raw file):

  href: string
  text: string
  external?: boolean

rename this prop to newTab. You're using this to open links in new browser tabs.

---

src/features/footer/Links.tsx line 21 at r1 (raw file):

      to={href}
      target={external ? "_blank" : "_self"}
      sx={{

create a global var

import { SxProps } from "@mui/material"
...
const LINK_STYLE: SxProps = {...}
...
sx={LINK_STYLE}

---

src/features/footer/Links.tsx line 47 at r1 (raw file):

      <Grid xs={12} sm={4}>
        <Stack spacing={1}>
          <FooterLink href={paths.aboutUs._} text={"About us"} />

About us

Code quote:

<FooterLink href={paths.aboutUs._} text={"About us"} />

---

src/features/footer/Links.tsx line 50 at r1 (raw file):

          {/*TODO: Use Freshdesk hook*/}
          <MuiLink
            sx={{

sx={LINK_STYLE}

---

src/features/footer/Links.tsx line 72 at r1 (raw file):

          {/*TODO: Use OneTrust banner hook*/}
          <MuiLink
            sx={{

sx={LINK_STYLE}

---

src/features/footer/NewsletterSignUp.tsx line 11 at r1 (raw file):

export interface NewsletterSignUpProps {}

const NewsletterSignUp: FC<NewsletterSignUpProps> = () => {

rename to RegisterToNewsletterForm

Code quote:

 NewsletterSignUp

---

src/features/footer/NewsletterSignUp.tsx line 12 at r1 (raw file):

const NewsletterSignUp: FC<NewsletterSignUpProps> = () => {
  const theme = useTheme()

delete this

---

src/features/footer/NewsletterSignUp.tsx line 13 at r1 (raw file):

const NewsletterSignUp: FC<NewsletterSignUpProps> = () => {
  const theme = useTheme()
  const onlyXS = useMediaQuery(theme.breakpoints.only("xs"))

delete this

---

src/features/footer/NewsletterSignUp.tsx line 77 at r1 (raw file):

              }}
            />
            <forms.SubmitButton sx={{ width: onlyXS ? "100%" : undefined }}>

sx={theme => ({ width: useMediaQuery(theme.breakpoints.only("xs")) ? "100%" : undefined })}

---

src/features/footer/SocialMediaIcons.tsx line 30 at r1 (raw file):

}> = ({ href, children }) => {
  return (
    <IconButton href={href} target="_blank" sx={{ padding: 0 }}>

use this component instead

import {LinkIconButton} from "codeforlife/components/router"

---

src/features/footer/SocialMediaIcons.tsx line 30 at r1 (raw file):

}> = ({ href, children }) => {
  return (
    <IconButton href={href} target="_blank" sx={{ padding: 0 }}>

to={to}

Code quote:

 href={href}

---

src/features/footer/SocialMediaIcons.tsx line 45 at r1 (raw file):

const SocialMediaIcons: FC<SocialMediaIconsProps> = () => {
  return (
    <Grid container xs={12} order={{ xs: 1, md: 2 }}>

Delete this Grid. Also, the children of a grid container must always be a grid [item] (a grid that's not a container is an item). See

[faucomte97]

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

---

src/api/user.ts line 70 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Arg<User, "email">

Done.

---

src/features/footer/Footer.tsx line 22 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

In src/App.tsx, set the footer prop to be this component.

footer={<Footer />}

Done.

---

src/features/footer/Links.tsx line 13 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

rename prop to to

Done.

---

src/features/footer/Links.tsx line 14 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

rename prop to children

Done.

---

src/features/footer/Links.tsx line 15 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

rename this prop to newTab. You're using this to open links in new browser tabs.

Done.

---

src/features/footer/Links.tsx line 21 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

create a global var

import { SxProps } from "@mui/material"
...
const LINK_STYLE: SxProps = {...}
...
sx={LINK_STYLE}

Done.

---

src/features/footer/Links.tsx line 47 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

About us

Done.

---

src/features/footer/Links.tsx line 50 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

sx={LINK_STYLE}

Done.

---

src/features/footer/Links.tsx line 72 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

sx={LINK_STYLE}

Done.

---

src/features/footer/SocialMediaIcons.tsx line 30 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

use this component instead

import {LinkIconButton} from "codeforlife/components/router"

Done.

---

src/features/footer/SocialMediaIcons.tsx line 30 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

to={to}

Done.

---

src/features/footer/SocialMediaIcons.tsx line 45 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

Delete this Grid. Also, the children of a grid container must always be a grid [item] (a grid that's not a container is an item). See

Done.

---

src/features/footer/NewsletterSignUp.tsx line 11 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

rename to RegisterToNewsletterForm

Done.

---

src/features/footer/NewsletterSignUp.tsx line 12 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

delete this

cf comment below

---

src/features/footer/NewsletterSignUp.tsx line 13 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

delete this

cf comment below

---

src/features/footer/NewsletterSignUp.tsx line 77 at r1 (raw file):

Previously, SKairinos (Stefan Kairinos) wrote…

sx={theme => ({ width: useMediaQuery(theme.breakpoints.only("xs")) ? "100%" : undefined })}

Couldn't do that, something about hooks not being callable from inside a callback.

ESLint: React Hook "useMediaQuery" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.(react-hooks/ rules-of-hooks)

[SKairinos]

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