codeforlife 2.6.1

package/src/components/router/LinkListItem.tsx

@@ -0,0 +1,21 @@
+import { ListItem, type ListItemProps } from "@mui/material"
+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

@@ -0,0 +1,21 @@
+import { Tab, type TabProps } from "@mui/material"
+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

@@ -0,0 +1,33 @@
+import { useEffect } from "react"
+import { type To } from "react-router-dom"
+
+import { useNavigate, type NavigateOptions } 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

@@ -0,0 +1,12 @@
+export * from "./Link"
+export { default as Link } from "./Link"
+export * from "./LinkButton"
+export { default as LinkButton } from "./LinkButton"
+export * from "./LinkIconButton"
+export { default as LinkIconButton } from "./LinkIconButton"
+export * from "./LinkListItem"
+export { default as LinkListItem } from "./LinkListItem"
+export * from "./LinkTab"
+export { default as LinkTab } from "./LinkTab"
+export * from "./Navigate"
+export { default as Navigate } from "./Navigate"

package/src/components/table/CellStack.tsx

@@ -0,0 +1,19 @@
+import { type FC } from "react"
+import {
+  Stack,
+  TableCell,
+  type TableCellProps,
+  type StackProps,
+} from "@mui/material"
+
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,10 @@
+export { default as Table } from "./Table"
+export * from "./Table"
+export { default as CellStack } from "./CellStack"
+export * 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

@@ -0,0 +1,40 @@
+import type React from "react"
+import { Button, Dialog, Typography } from "@mui/material"
+
+import { Countdown } from "../components"
+
+export interface InactiveDialogProps {
+  open: boolean
+  onClose: () => void
+}
+
+const InactiveDialog: React.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

@@ -0,0 +1,33 @@
+import type React from "react"
+import { Button, Dialog, Typography } from "@mui/material"
+
+import { Image } from "../components"
+import BrainImage from "../public/images/brain.svg"
+
+export interface ScreenTimeDialogProps {
+  open: boolean
+  onClose: () => void
+}
+
+const ScreenTimeDialog: React.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

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

package/src/hooks/api.tsx

@@ -0,0 +1,37 @@
+import { useState, type Dispatch, type SetStateAction } 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 }) => {
+      let { page, limit } =
+        typeof value === "function"
+          ? value({ page: previousPage, limit: previousLimit })
+          : value
+
+      if (limit !== previousLimit) page = 0
+
+      return { page, limit, offset: page * limit }
+    })
+  }
+
+  return [pagination, setPagination]
+}

package/src/hooks/auth.tsx

@@ -0,0 +1,87 @@
+import Cookies from "js-cookie"
+import { useEffect, type ReactNode } from "react"
+import { createSearchParams, useLocation, useNavigate } from "react-router-dom"
+import { useSelector } from "react-redux"
+
+import { type AuthFactor, type User } from "../api"
+import { SESSION_METADATA_COOKIE_NAME } from "../settings"
+import { selectIsLoggedIn } from "../slices/session"
+
+export interface SessionMetadata {
+  user_id: User["id"]
+  user_type: "teacher" | "student" | "indy"
+  auth_factors: Array<AuthFactor["type"]>
+  otp_bypass_token_exists: boolean
+}
+
+export function useSessionMetadata(): SessionMetadata | undefined {
+  return useSelector(selectIsLoggedIn)
+    ? (JSON.parse(
+        Cookies.get(SESSION_METADATA_COOKIE_NAME)!,
+      ) as SessionMetadata)
+    : undefined
+}
+
+export type UseSessionChildrenFunction<Required extends boolean> = (
+  metadata: Required extends true
+    ? SessionMetadata
+    : SessionMetadata | undefined,
+) => ReactNode
+
+export type UseSessionChildren<
+  UserType extends SessionMetadata["user_type"] | undefined,
+> =
+  | ReactNode
+  | (UserType extends undefined
+      ? UseSessionChildrenFunction<false>
+      : UseSessionChildrenFunction<true>)
+
+export type UseSessionOptions<
+  UserType extends SessionMetadata["user_type"] | undefined,
+> = Partial<{
+  userType: UserType
+  next: boolean
+}>
+
+export function useSession<
+  UserType extends SessionMetadata["user_type"] | undefined = undefined,
+>(
+  children: UseSessionChildren<UserType>,
+  options: UseSessionOptions<UserType> = {},
+) {
+  const { userType, next = true } = options
+
+  const { pathname } = useLocation()
+  const navigate = useNavigate()
+  const sessionMetadata = useSessionMetadata()
+
+  const loginRequired =
+    userType && (!sessionMetadata || sessionMetadata.user_type !== userType)
+
+  useEffect(() => {
+    if (loginRequired) {
+      navigate({
+        pathname:
+          "/login" +
+          {
+            teacher: "/teacher",
+            student: "/student",
+            indy: "/independent",
+          }[userType],
+        search: next
+          ? createSearchParams({ next: pathname }).toString()
+          : undefined,
+      })
+    }
+  }, [navigate, loginRequired, userType, next, pathname])
+
+  if (loginRequired) return <></>
+
+  if (typeof children === "function") {
+    return sessionMetadata
+      ? (children as UseSessionChildrenFunction<true>)(sessionMetadata)
+      : (children as UseSessionChildrenFunction<false>)(sessionMetadata)
+  }
+
+  return children
+}

package/src/hooks/general.ts

@@ -0,0 +1,110 @@
+import {
+  useEffect,
+  useState,
+  type DependencyList,
+  type Dispatch,
+  type SetStateAction,
+} from "react"
+
+export function useExternalScript<EventType extends keyof HTMLElementEventMap>({
+  props,
+  attrs,
+  eventTypes,
+}: {
+  props: Partial<HTMLScriptElement> & { src: string }
+  attrs?: Record<string, string>
+  eventTypes?: EventType[]
+}): EventType | undefined {
+  const [eventType, setEventType] = useState<EventType>()
+
+  useEffect(() => {
+    if (
+      document.querySelector<HTMLScriptElement>(`script[src="${props.src}"]`)
+    ) {
+      throw Error("already exists")
+    }
+
+    const script = document.createElement("script")
+
+    Object.entries(props).forEach(([key, value]) => {
+      // @ts-expect-error
+      script[key] = value
+    })
+
+    if (attrs !== undefined) {
+      Object.entries(attrs).forEach(([key, value]) => {
+        script.setAttribute(key, value)
+      })
+    }
+
+    function eventListener(event: Event): void {
+      setEventType(event.type as EventType)
+    }
+
+    eventTypes?.forEach(eventType => {
+      script.addEventListener(eventType, eventListener)
+    })
+
+    document.head.appendChild(script)
+
+    return () => {
+      eventTypes?.forEach(eventType => {
+        script.removeEventListener(eventType, eventListener)
+      })
+
+      document.head.removeChild(script)
+    }
+  }, [eventTypes, attrs, props])
+
+  return eventType
+}
+
+export function useCountdown(
+  seconds: number,
+  interval: number = 1,
+): [number, Dispatch<SetStateAction<number>>] {
+  if (seconds <= 0) throw Error("seconds must be > 0")
+  if (interval <= 0) throw Error("interval must be > 0")
+
+  const [_seconds, _setSeconds] = useState(seconds)
+
+  useEffect(() => {
+    const countdown = setInterval(() => {
+      _setSeconds(seconds => {
+        seconds = seconds - interval
+        return seconds < 0 ? 0 : seconds
+      })
+    }, interval * 1000)
+
+    return () => {
+      clearInterval(countdown)
+    }
+  }, [interval])
+
+  return [_seconds, _setSeconds]
+}
+
+export function useEventListener<EventType extends keyof HTMLElementEventMap>(
+  element: HTMLElement,
+  type: EventType,
+  listener: (this: HTMLElement, ev: HTMLElementEventMap[EventType]) => any,
+  kwArgs: {
+    options?: boolean | AddEventListenerOptions
+    deps?: DependencyList
+  } = {},
+): void {
+  const { options, deps = [] } = kwArgs
+
+  useEffect(
+    () => {
+      element.addEventListener(type, listener, options)
+
+      return () => {
+        element.removeEventListener(type, listener, options)
+      }
+    },
+    // TODO: simplify this hook.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    deps,
+  )
+}

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from "./api"
+export * from "./auth"
+export * from "./general"
+export * from "./router"

package/src/hooks/router.tsx

@@ -0,0 +1,168 @@
+import { useEffect, type ReactNode } from "react"
+import {
+  useLocation as _useLocation,
+  useNavigate as _useNavigate,
+  useParams as _useParams,
+  useSearchParams as _useSearchParams,
+  type Location,
+  type NavigateOptions as _NavigateOptions,
+  type Params,
+  type To,
+} from "react-router-dom"
+import { object as objectSchema, type ObjectShape } from "yup"
+
+import { type PageState } from "../components/page"
+import { type ReadOnly } from "../utils/router"
+import {
+  tryValidateSync,
+  type ObjectSchemaFromShape,
+  type TryValidateSyncOnErrorRT,
+  type TryValidateSyncOptions,
+  type TryValidateSyncRT,
+} from "../utils/schema"
+
+export type NavigateOptions<
+  State extends Record<string, any> = Record<string, any>,
+> = Omit<_NavigateOptions, "state"> & {
+  state?: State & Partial<PageState>
+  next?: boolean
+}
+
+export type Navigate = {
+  <State extends Record<string, any> = Record<string, any>>(
+    to: To,
+    options?: NavigateOptions<State>,
+  ): void
+  (delta: number): void
+}
+
+export function useNavigate(): Navigate {
+  const navigate = _useNavigate()
+  const searchParams = useSearchParams()
+
+  return (
+    toOrDelta: To | number,
+    options: (NavigateOptions & { next?: boolean }) | undefined = undefined,
+  ) => {
+    if (typeof toOrDelta === "number") navigate(toOrDelta)
+    else {
+      const { next = true, ..._options } = options || {}
+
+      navigate(
+        next && "next" in searchParams ? searchParams.next : toOrDelta,
+        _options,
+      )
+    }
+  }
+}
+
+export function useLocation<State = {}>() {
+  return _useLocation() as Location<null | Partial<PageState & State>>
+}
+
+// -----------------------------------------------------------------------------
+// Use Search Params
+// -----------------------------------------------------------------------------
+
+export function useSearchParams(): { [k: string]: string }
+
+export function useSearchParams<
+  OnErrorRT extends TryValidateSyncOnErrorRT<ObjectSchemaFromShape<Shape>>,
+  Shape extends ObjectShape = {},
+>(
+  shape: Shape,
+  validateOptions?: TryValidateSyncOptions<
+    ObjectSchemaFromShape<Shape>,
+    OnErrorRT
+  >,
+): TryValidateSyncRT<ObjectSchemaFromShape<Shape>, OnErrorRT>
+
+export function useSearchParams<
+  OnErrorRT extends TryValidateSyncOnErrorRT<ObjectSchemaFromShape<Shape>>,
+  Shape extends ObjectShape = {},
+>(
+  shape?: Shape,
+  validateOptions?: TryValidateSyncOptions<
+    ObjectSchemaFromShape<Shape>,
+    OnErrorRT
+  >,
+) {
+  const searchParams = Object.fromEntries(_useSearchParams()[0].entries())
+  if (!shape) return searchParams
+
+  return tryValidateSync(searchParams, objectSchema(shape), validateOptions)
+}
+
+// -----------------------------------------------------------------------------
+// Use Params
+// -----------------------------------------------------------------------------
+
+export function useParams(): ReadOnly<Params<string>>
+
+export function useParams<
+  OnErrorRT extends TryValidateSyncOnErrorRT<ObjectSchemaFromShape<Shape>>,
+  Shape extends ObjectShape = {},
+>(
+  shape: Shape,
+  validateOptions?: TryValidateSyncOptions<
+    ObjectSchemaFromShape<Shape>,
+    OnErrorRT
+  >,
+): TryValidateSyncRT<ObjectSchemaFromShape<Shape>, OnErrorRT>
+
+export function useParams<
+  OnErrorRT extends TryValidateSyncOnErrorRT<ObjectSchemaFromShape<Shape>>,
+  Shape extends ObjectShape = {},
+>(
+  shape?: Shape,
+  validateOptions?: TryValidateSyncOptions<
+    ObjectSchemaFromShape<Shape>,
+    OnErrorRT
+  >,
+) {
+  const params = _useParams()
+  if (!shape) return params
+
+  return tryValidateSync(params, objectSchema(shape), validateOptions)
+}
+
+export function useParamsRequired<
+  OnErrorRT extends TryValidateSyncOnErrorRT<ObjectSchemaFromShape<Shape>>,
+  Shape extends ObjectShape = {},
+>({
+  shape,
+  children,
+  onValidationError,
+  onValidationSuccess = () => {},
+  validateOptions,
+}: {
+  shape: Shape
+  children: (
+    data: NonNullable<
+      TryValidateSyncRT<ObjectSchemaFromShape<Shape>, OnErrorRT>
+    >,
+  ) => ReactNode
+  onValidationError: (navigate: Navigate) => void
+  onValidationSuccess?: (
+    params: NonNullable<
+      TryValidateSyncRT<ObjectSchemaFromShape<Shape>, OnErrorRT>
+    >,
+  ) => void
+  validateOptions?: TryValidateSyncOptions<
+    ObjectSchemaFromShape<Shape>,
+    OnErrorRT
+  >
+}) {
+  const params = useParams(shape, validateOptions)
+  const navigate = useNavigate()
+
+  useEffect(
+    () => {
+      if (params) onValidationSuccess(params)
+      else onValidationError(navigate)
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  )
+
+  return params ? children(params) : <></>
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./theme"
+export { default as theme } from "./theme"

package/src/middlewares/index.ts

@@ -0,0 +1 @@
+export * from "./session"