codeforlife 2.8.2 → 2.9.0

package/src/components/page/Page.tsx

@@ -1,73 +0,0 @@
-import { Children, type JSX, useEffect } from "react"
-import { type Location, useLocation } from "react-router-dom"
-
-import Notification, { type NotificationProps } from "./Notification"
-import {
-  type SessionMetadata,
-  type UseSessionChildren,
-  type UseSessionChildrenFunction,
-  type UseSessionOptions,
-  useSession,
-} from "../../hooks/auth"
-
-export type PageState = {
-  notifications: Array<{
-    index?: number
-    props: NotificationProps
-  }>
-  scroll: { x: number; y: number }
-}
-
-export interface PageProps<
-  SessionUserType extends SessionMetadata["user_type"] | undefined,
-> {
-  children: UseSessionChildren<SessionUserType>
-  session?: UseSessionOptions<SessionUserType>
-}
-
-const Page = <
-  SessionUserType extends SessionMetadata["user_type"] | undefined = undefined,
->({
-  children,
-  session,
-}: PageProps<SessionUserType>): JSX.Element => {
-  const { state } = useLocation() as Location<null | Partial<PageState>>
-
-  let { scroll, notifications } = state || {}
-  scroll = scroll || { x: 0, y: 0 }
-  notifications = notifications || []
-
-  useEffect(() => {
-    window.scroll(scroll.x, scroll.y)
-  }, [scroll.x, scroll.y])
-
-  return (
-    <>
-      {useSession((metadata?: SessionMetadata) => {
-        if (typeof children === "function") {
-          children = metadata
-            ? (children as UseSessionChildrenFunction<true>)(metadata)
-            : (children as UseSessionChildrenFunction<false>)(metadata)
-        }
-
-        if (notifications.length) {
-          const childrenArray = Children.toArray(children)
-
-          notifications.forEach((notification, index) => {
-            void childrenArray.splice(
-              notification.index ?? index,
-              0,
-              <Notification {...notification.props} />,
-            )
-          })
-
-          return childrenArray
-        }
-
-        return children
-      }, session)}
-    </>
-  )
-}
-
-export default Page

package/src/components/page/Section.tsx

@@ -1,21 +0,0 @@
-import {
-  Box,
-  type BoxProps,
-  Container,
-  type ContainerProps,
-} from "@mui/material"
-import type { FC } from "react"
-
-export interface SectionProps extends ContainerProps {
-  boxProps?: Omit<BoxProps, "children">
-}
-
-const Section: FC<SectionProps> = ({ boxProps, ...containerProps }) => {
-  return (
-    <Box {...boxProps}>
-      <Container {...containerProps} />
-    </Box>
-  )
-}
-
-export default Section

package/src/components/page/TabBar.tsx

@@ -1,131 +0,0 @@
-import {
-  ChevronLeft as ChevronLeftIcon,
-  ChevronRight as ChevronRightIcon,
-} from "@mui/icons-material"
-import { type FC, type ReactNode, useEffect, useState } from "react"
-import {
-  IconButton,
-  Tab,
-  type TabScrollButtonProps,
-  Tabs,
-  Typography,
-} from "@mui/material"
-import { object as YupObject, string as YupString } from "yup"
-import { generatePath, useNavigate, useParams } from "react-router-dom"
-
-import Section from "./Section"
-import { primary } from "../../theme/colors"
-import { tryValidateSync } from "../../utils/schema"
-
-export interface TabBarProps {
-  header: string
-  tabs: Array<{
-    label: string
-    children: ReactNode
-    path: string
-  }>
-  originalPath: string
-  value?: number
-}
-
-const TabBar: FC<TabBarProps> = ({ header, tabs, originalPath, value = 0 }) => {
-  const params = useParams()
-  const navigate = useNavigate()
-  const [_value, _setValue] = useState(
-    value < 0 ? 0 : value >= tabs.length ? tabs.length - 1 : value,
-  )
-
-  const labels = tabs.map(tab => tab.label)
-  const children = tabs.map(tab => tab.children)
-  const paths = tabs.map(tab => tab.path)
-
-  useEffect(() => {
-    _setValue(value)
-  }, [value])
-
-  useEffect(() => {
-    const tab = tryValidateSync(
-      params,
-      YupObject({
-        tab: YupString().oneOf(paths).required(),
-      }),
-    )?.tab
-
-    if (tab !== undefined) {
-      _setValue(paths.indexOf(tab))
-    }
-  }, [params, paths])
-
-  return (
-    <>
-      <Section
-        boxProps={{ bgcolor: primary[500] }}
-        sx={{ paddingY: "100px" }}
-        className="flex-center"
-      >
-        <Typography
-          textAlign="center"
-          variant="h2"
-          style={{ color: "white" }}
-          mb={0}
-        >
-          {header}
-        </Typography>
-      </Section>
-      <Section
-        boxProps={{ bgcolor: primary[300] }}
-        sx={{ paddingY: "6px" }}
-        className="flex-center"
-      >
-        <Tabs
-          value={_value}
-          onChange={(_, value: number) => {
-            navigate(
-              generatePath(originalPath, {
-                tab: paths[value],
-              }),
-            )
-          }}
-          ScrollButtonComponent={({
-            disabled,
-            onClick,
-            direction,
-          }: TabScrollButtonProps) => {
-            return (
-              <>
-                {disabled === false && (
-                  <IconButton
-                    onClick={onClick}
-                    style={{
-                      padding: 0,
-                      [direction === "left" ? "marginRight" : "marginLeft"]:
-                        "15px",
-                      color: "white",
-                    }}
-                  >
-                    {direction === "left" ? (
-                      <>
-                        <ChevronLeftIcon />
-                      </>
-                    ) : (
-                      <>
-                        <ChevronRightIcon />
-                      </>
-                    )}
-                  </IconButton>
-                )}
-              </>
-            )
-          }}
-        >
-          {labels.map(label => (
-            <Tab disableRipple key={label} label={label} />
-          ))}
-        </Tabs>
-      </Section>
-      {children[_value]}
-    </>
-  )
-}
-
-export default TabBar

package/src/components/page/index.ts

@@ -1,10 +0,0 @@
-export * from "./Banner"
-export { default as Banner } from "./Banner"
-export * from "./Notification"
-export { default as Notification } from "./Notification"
-export * from "./Page"
-export { default as Page } from "./Page"
-export * from "./Section"
-export { default as Section } from "./Section"
-export * from "./TabBar"
-export { default as TabBar } from "./TabBar"

package/src/components/router/Link.tsx

@@ -1,23 +0,0 @@
-import { Link as MuiLink, type LinkProps as MuiLinkProps } from "@mui/material"
-import { type JSX } from "react"
-import { Link as RouterLink } from "react-router-dom"
-
-import { type LinkProps as RouterLinkProps } from "../../utils/router"
-
-export type LinkProps<
-  Override extends "delta" | "to",
-  State extends Record<string, any> = Record<string, any>,
-> = Omit<MuiLinkProps, "component"> & RouterLinkProps<Override, State>
-
-// https://mui.com/material-ui/integrations/routing/#link
-const Link: {
-  (props: LinkProps<"delta">): JSX.Element
-  <State extends Record<string, any> = Record<string, any>>(
-    props: LinkProps<"to", State>,
-  ): JSX.Element
-} = (props: LinkProps<"delta"> | LinkProps<"to">) => {
-  // @ts-expect-error props are assignable
-  return <MuiLink component={RouterLink} {...props} />
-}
-
-export default Link

package/src/components/router/LinkButton.tsx

@@ -1,22 +0,0 @@
-import { Button, type ButtonProps } from "@mui/material"
-import { type JSX } from "react"
-import { Link } from "react-router-dom"
-
-import { type LinkProps } from "../../utils/router"
-
-export type LinkButtonProps<
-  Override extends "delta" | "to",
-  State extends Record<string, any> = Record<string, any>,
-> = Omit<ButtonProps, "component"> & LinkProps<Override, State>
-
-// https://mui.com/material-ui/integrations/routing/#button
-const LinkButton: {
-  (props: LinkButtonProps<"delta">): JSX.Element
-  <State extends Record<string, any> = Record<string, any>>(
-    props: LinkButtonProps<"to", State>,
-  ): JSX.Element
-} = (props: LinkButtonProps<"delta"> | LinkButtonProps<"to">) => {
-  return <Button {...{ ...props, component: Link }} />
-}
-
-export default LinkButton

package/src/components/router/LinkIconButton.tsx

@@ -1,22 +0,0 @@
-import { IconButton, type IconButtonProps } from "@mui/material"
-import { type JSX } from "react"
-import { Link } from "react-router-dom"
-
-import { type LinkProps } from "../../utils/router"
-
-export type LinkIconButtonProps<
-  Override extends "delta" | "to",
-  State extends Record<string, any> = Record<string, any>,
-> = Omit<IconButtonProps, "component"> & LinkProps<Override, State>
-
-// https://mui.com/material-ui/integrations/routing/#button
-const LinkIconButton: {
-  (props: LinkIconButtonProps<"delta">): JSX.Element
-  <State extends Record<string, any> = Record<string, any>>(
-    props: LinkIconButtonProps<"to", State>,
-  ): JSX.Element
-} = (props: LinkIconButtonProps<"delta"> | LinkIconButtonProps<"to">) => {
-  return <IconButton {...{ ...props, component: Link }} />
-}
-
-export default LinkIconButton

package/src/components/router/LinkListItem.tsx

@@ -1,22 +0,0 @@
-import { ListItem, type ListItemProps } from "@mui/material"
-import { type JSX } from "react"
-import { Link } from "react-router-dom"
-
-import { type LinkProps } from "../../utils/router"
-
-export type LinkListItemProps<
-  Override extends "delta" | "to",
-  State extends Record<string, any> = Record<string, any>,
-> = Omit<ListItemProps, "component"> & LinkProps<Override, State>
-
-// https://mui.com/material-ui/integrations/routing/#list
-const LinkListItem: {
-  (props: LinkListItemProps<"delta">): JSX.Element
-  <State extends Record<string, any> = Record<string, any>>(
-    props: LinkListItemProps<"to", State>,
-  ): JSX.Element
-} = (props: LinkListItemProps<"delta"> | LinkListItemProps<"to">) => {
-  return <ListItem {...{ ...props, component: Link }} />
-}
-
-export default LinkListItem

package/src/components/router/LinkTab.tsx

@@ -1,22 +0,0 @@
-import { Tab, type TabProps } from "@mui/material"
-import { type JSX } from "react"
-import { Link } from "react-router-dom"
-
-import { type LinkProps } from "../../utils/router"
-
-export type LinkTabProps<
-  Override extends "delta" | "to",
-  State extends Record<string, any> = Record<string, any>,
-> = Omit<TabProps, "component"> & LinkProps<Override, State>
-
-// https://mui.com/material-ui/integrations/routing/#tabs
-const LinkTab: {
-  (props: LinkTabProps<"delta">): JSX.Element
-  <State extends Record<string, any> = Record<string, any>>(
-    props: LinkTabProps<"to", State>,
-  ): JSX.Element
-} = (props: LinkTabProps<"delta"> | LinkTabProps<"to">) => {
-  return <Tab {...{ ...props, component: Link }} />
-}
-
-export default LinkTab

package/src/components/router/Navigate.tsx

@@ -1,33 +0,0 @@
-import { type JSX, useEffect } from "react"
-import { type To } from "react-router-dom"
-
-import { type NavigateOptions, useNavigate } from "../../hooks"
-
-export type NavigateProps<
-  Override extends "delta" | "to",
-  State extends Record<string, any> = Record<string, any>,
-> = Override extends "delta"
-  ? { delta: number; to?: undefined }
-  : { delta?: undefined; to: To } & NavigateOptions<State>
-
-const Navigate: {
-  (props: NavigateProps<"delta">): JSX.Element
-  <State extends Record<string, any> = Record<string, any>>(
-    props: NavigateProps<"to", State>,
-  ): JSX.Element
-} = ({
-  delta,
-  to,
-  ...options
-}: NavigateProps<"delta"> | NavigateProps<"to">) => {
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    if (typeof delta === "number") navigate(delta)
-    else navigate(to, options)
-  }, [navigate, delta, to, options])
-
-  return <></>
-}
-
-export default Navigate

package/src/components/router/index.tsx

@@ -1,9 +0,0 @@
-export { default as Link, type LinkProps } from "./Link"
-export { default as LinkButton, type LinkButtonProps } from "./LinkButton"
-export {
-  default as LinkIconButton,
-  type LinkIconButtonProps,
-} from "./LinkIconButton"
-export { default as LinkListItem, type LinkListItemProps } from "./LinkListItem"
-export { default as LinkTab, type LinkTabProps } from "./LinkTab"
-export { default as Navigate, type NavigateProps } from "./Navigate"

package/src/components/table/CellStack.tsx

@@ -1,19 +0,0 @@
-import {
-  Stack,
-  type StackProps,
-  TableCell,
-  type TableCellProps,
-} from "@mui/material"
-import { type FC } from "react"
-
-export interface CellStackProps extends StackProps {
-  cellProps?: TableCellProps
-}
-
-const CellStack: FC<CellStackProps> = ({ cellProps, ...stackProps }) => (
-  <TableCell {...cellProps}>
-    <Stack {...stackProps} />
-  </TableCell>
-)
-
-export default CellStack

package/src/components/table/Table.tsx

@@ -1,55 +0,0 @@
-import { type FC, type ReactNode, isValidElement } from "react"
-import {
-  Table as MuiTable,
-  type TableProps as MuiTableProps,
-  TableBody,
-  type TableBodyProps,
-  TableCell,
-  type TableCellProps,
-  TableContainer,
-  type TableContainerProps,
-  TableHead,
-  type TableHeadProps,
-  TableRow,
-  type TableRowProps,
-} from "@mui/material"
-
-export interface TableProps extends MuiTableProps {
-  headers: Array<ReactNode | TableCellProps>
-  children: ReactNode
-  containerProps?: TableContainerProps
-  headProps?: TableHeadProps
-  headRowProps?: TableRowProps
-  bodyProps?: TableBodyProps
-}
-
-const Table: FC<TableProps> = ({
-  headers,
-  children,
-  containerProps,
-  headProps,
-  headRowProps,
-  bodyProps,
-  ...tableProps
-}) => (
-  <TableContainer {...containerProps}>
-    <MuiTable {...tableProps}>
-      <TableHead {...headProps}>
-        <TableRow {...headRowProps}>
-          {headers.map((header, index) => {
-            const key = `table-head-cell-${index}`
-
-            return typeof header === "string" || isValidElement(header) ? (
-              <TableCell key={key}>{header}</TableCell>
-            ) : (
-              <TableCell key={key} {...(header as TableCellProps)} />
-            )
-          })}
-        </TableRow>
-      </TableHead>
-      <TableBody {...bodyProps}>{children}</TableBody>
-    </MuiTable>
-  </TableContainer>
-)
-
-export default Table

package/src/components/table/index.tsx

@@ -1,8 +0,0 @@
-export { default as Table, type TableProps } from "./Table"
-export { default as CellStack, type CellStackProps } from "./CellStack"
-export {
-  TableCell as Cell,
-  type TableCellProps as CellProps,
-  TableRow as BodyRow,
-  type TableRowProps as BodyRowProps,
-} from "@mui/material"

package/src/features/InactiveDialog.tsx

@@ -1,40 +0,0 @@
-import { Button, Dialog, Typography } from "@mui/material"
-import { type FC } from "react"
-
-import { Countdown } from "../components"
-
-export interface InactiveDialogProps {
-  open: boolean
-  onClose: () => void
-}
-
-const InactiveDialog: FC<InactiveDialogProps> = ({ open, onClose }) => {
-  return (
-    <Dialog open={open} onClose={onClose}>
-      <Typography variant="h5" textAlign="center">
-        Where did you go? 👀
-      </Typography>
-      <Typography textAlign="center">
-        We noticed that you have been inactive for a while. Are you still there?
-        For your online safety we will log you out in:
-      </Typography>
-      <Countdown
-        textAlign="center"
-        variant="h5"
-        seconds={60 * 2}
-        onEnd={() => {
-          onClose()
-          alert("TODO: call logout endpoint")
-        }}
-      />
-      <Typography textAlign="center">
-        You may lose progress unless you continue or save.
-      </Typography>
-      <Button onClick={onClose} autoFocus>
-        Wait, I&apos;m still here!
-      </Button>
-    </Dialog>
-  )
-}
-
-export default InactiveDialog

package/src/features/ScreenTimeDialog.tsx

@@ -1,30 +0,0 @@
-import { Button, Dialog, Typography } from "@mui/material"
-import { type FC } from "react"
-
-import BrainImage from "../images/svg/brain.svg"
-import { Image } from "../components"
-
-export interface ScreenTimeDialogProps {
-  open: boolean
-  onClose: () => void
-}
-
-const ScreenTimeDialog: FC<ScreenTimeDialogProps> = ({ open, onClose }) => {
-  return (
-    <Dialog open={open} onClose={onClose} maxWidth="sm">
-      <Image src={BrainImage} alt="brain" maxWidth={100} marginY={3} />
-      <Typography variant="h5" textAlign="center">
-        Time for a break?
-      </Typography>
-      <Typography textAlign="center">
-        You have been using the Code for Life website for a while. Remember to
-        take regular screen breaks to recharge those brain cells!
-      </Typography>
-      <Button onClick={onClose} autoFocus>
-        Continue
-      </Button>
-    </Dialog>
-  )
-}
-
-export default ScreenTimeDialog

package/src/features/index.ts

@@ -1,4 +0,0 @@
-export * from "./InactiveDialog"
-export { default as InactiveDialog } from "./InactiveDialog"
-export * from "./ScreenTimeDialog"
-export { default as ScreenTimeDialog } from "./ScreenTimeDialog"

package/src/hooks/api.tsx

@@ -1,39 +0,0 @@
-import { type Dispatch, type SetStateAction, useState } from "react"
-
-export type Pagination = { page: number; limit: number; offset: number }
-export type SetPagination = Dispatch<
-  SetStateAction<{ page: number; limit: number }>
->
-export type UsePaginationOptions = Partial<{
-  page: number
-  limit: number
-}>
-
-export function usePagination(
-  options?: UsePaginationOptions,
-): [Pagination, SetPagination] {
-  const { page = 0, limit = 150 } = options || {}
-
-  const [pagination, _setPagination] = useState<Pagination>({
-    page,
-    limit,
-    offset: page * limit,
-  })
-
-  const setPagination: SetPagination = value => {
-    _setPagination(({ page: previousPage, limit: previousLimit }) => {
-      const pagination =
-        typeof value === "function"
-          ? value({ page: previousPage, limit: previousLimit })
-          : value
-      let page = pagination.page
-      const limit = pagination.limit
-
-      if (limit !== previousLimit) page = 0
-
-      return { page, limit, offset: page * limit }
-    })
-  }
-
-  return [pagination, setPagination]
-}