codeforlife 2.6.1

package/src/api/models.ts

@@ -0,0 +1,144 @@
+import type { Model } from "../utils/api"
+import type { CountryIsoCodes, UkCounties } from "../utils/general"
+
+// -----------------------------------------------------------------------------
+// User Models
+// -----------------------------------------------------------------------------
+
+type _UserTeacher<T extends Teacher> = Omit<T, "user">
+type _UserStudent<S extends Student> = Omit<S, "user" | "auto_gen_password">
+
+export type User = Model<
+  number,
+  {
+    password: string
+    last_login?: Date
+    first_name: string
+    last_name?: string
+    email?: string
+    is_staff: boolean
+    is_active: boolean
+    date_joined: Date
+    requesting_to_join_class?: Class["id"] | null
+    teacher?: _UserTeacher<Teacher>
+    student?: _UserStudent<Student>
+  }
+>
+
+export type TeacherUser<Fields = User> = Fields & {
+  email: string
+  last_name: string
+  teacher: _UserTeacher<Teacher>
+  student?: undefined
+}
+
+export type SchoolTeacherUser<Fields = User> = TeacherUser<Fields> & {
+  teacher: _UserTeacher<SchoolTeacher>
+}
+
+export type AdminSchoolTeacherUser<Fields = User> =
+  SchoolTeacherUser<Fields> & {
+    teacher: _UserTeacher<AdminSchoolTeacher>
+  }
+
+export type NonAdminSchoolTeacherUser<Fields = User> =
+  SchoolTeacherUser<Fields> & {
+    teacher: _UserTeacher<NonAdminSchoolTeacher>
+  }
+
+export type NonSchoolTeacherUser<Fields = User> = TeacherUser<Fields> & {
+  teacher: _UserTeacher<NonSchoolTeacher>
+}
+
+export type StudentUser<Fields = User> = Fields & {
+  email?: undefined
+  last_name?: undefined
+  teacher?: undefined
+  student: _UserStudent<Student>
+}
+
+export type IndependentUser<Fields = User> = Fields & {
+  email: string
+  last_name: string
+  teacher?: undefined
+  student?: undefined
+}
+
+// -----------------------------------------------------------------------------
+// Teacher Models
+// -----------------------------------------------------------------------------
+
+export type Teacher = Model<
+  number,
+  {
+    user: User["id"]
+    school?: School["id"]
+    is_admin: boolean
+  }
+>
+
+export type SchoolTeacher<Fields = Teacher> = Fields & {
+  school: School["id"]
+}
+
+export type AdminSchoolTeacher<Fields = Teacher> = SchoolTeacher<Fields> & {
+  is_admin: true
+}
+
+export type NonAdminSchoolTeacher<Fields = Teacher> = SchoolTeacher<Fields> & {
+  is_admin: false
+}
+
+export type NonSchoolTeacher<Fields = Teacher> = Fields & {
+  school?: undefined
+}
+
+// -----------------------------------------------------------------------------
+// Other Models
+// -----------------------------------------------------------------------------
+
+export type Student = Model<
+  number,
+  {
+    user: User["id"]
+    school: School["id"]
+    klass: Class["id"]
+    auto_gen_password: string
+  }
+>
+
+export type School = Model<
+  number,
+  {
+    name: string
+    country?: CountryIsoCodes
+    uk_county?: UkCounties
+  }
+>
+
+export type Class = Model<
+  string,
+  {
+    name: string
+    teacher: Teacher["id"]
+    school: School["id"]
+    read_classmates_data: boolean
+    receive_requests_until?: Date
+  }
+>
+
+export type AuthFactor = Model<
+  number,
+  {
+    user: User["id"]
+    type: "otp"
+  }
+>
+
+export type OtpBypassToken = Model<
+  number,
+  {
+    user: User["id"]
+    token: string
+  }
+>

package/src/api/tagTypes.ts

@@ -0,0 +1,12 @@
+const tagTypes = [
+  // These are the tags for the common models used throughout our system.
+  // https://github.com/ocadotechnology/codeforlife-package-python/tree/main/codeforlife/user/models
+  // NOTE: Don't use the "Teacher" and "Student" tags. Use "User" instead.
+  "User",
+  "School",
+  "Class",
+  "AuthFactor",
+] as const
+
+export default tagTypes
+export type TagTypes = (typeof tagTypes)[number]

package/src/api/urls.ts

@@ -0,0 +1,13 @@
+import { modelUrls } from "../utils/api"
+
+const urls = {
+  user: modelUrls("users/", "users/<id>/"),
+  teacher: modelUrls("users/teachers/", "users/teachers/<id>/"),
+  student: modelUrls("users/students/", "users/students/<id>/"),
+  school: modelUrls("schools/", "schools/<id>/"),
+  class: modelUrls("classes/", "classes/<id>/"),
+  otpBypassToken: modelUrls("otp-bypass-tokens/", "otp-bypass-tokens/<id>/"),
+  authFactor: modelUrls("auth-factors/", "auth-factors/<id>/"),
+}
+
+export default urls

package/src/components/App.css

@@ -0,0 +1,38 @@
+@font-face {
+  font-family: "SpaceGrotesk";
+  src:
+    local("SpaceGrotesk"),
+    url("../fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Inter";
+  src:
+    local("Inter"),
+    url("../fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
+}
+
+html,
+body {
+  box-sizing: border-box;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+#root {
+  box-sizing: border-box;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+#header,
+#footer {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+#body {
+  flex-grow: 1;
+}

package/src/components/App.tsx

@@ -0,0 +1,150 @@
+import { CssBaseline, ThemeProvider } from "@mui/material"
+import { type ThemeProviderProps } from "@mui/material/styles/ThemeProvider"
+import { type FC, type ReactNode } from "react"
+import { Provider, type ProviderProps } from "react-redux"
+import { BrowserRouter, Routes as RouterRoutes } from "react-router-dom"
+import { StaticRouter } from "react-router-dom/server"
+import { type Action } from "redux"
+
+import "./App.css"
+import { useLocation } from "../hooks"
+import { SSR } from "../settings"
+// import { InactiveDialog, ScreenTimeDialog } from "../features"
+// import { useCountdown, useEventListener } from "../hooks"
+// import "../scripts"
+// import {
+//   configureFreshworksWidget,
+//   toggleOneTrustInfoDisplay,
+// } from "../utils/window"
+
+export interface AppProps<A extends Action = Action, S = unknown> {
+  path?: string
+  theme: ThemeProviderProps["theme"]
+  store: ProviderProps<A, S>["store"]
+  routes: ReactNode
+  header?: ReactNode
+  footer?: ReactNode
+  headerExcludePaths?: string[]
+  footerExcludePaths?: string[]
+  maxIdleSeconds?: number
+  maxTotalSeconds?: number
+}
+
+type BaseRoutesProps = Pick<
+  AppProps,
+  "routes" | "header" | "footer" | "headerExcludePaths" | "footerExcludePaths"
+>
+
+const Routes: FC<BaseRoutesProps & { path: string }> = ({
+  path,
+  routes,
+  header = <></>, // TODO: "header = <Header />"
+  footer = <></>, // TODO: "footer = <Footer />"
+  headerExcludePaths = [],
+  footerExcludePaths = [],
+}) => (
+  <>
+    {!headerExcludePaths.includes(path) && header}
+    <RouterRoutes>{routes}</RouterRoutes>
+    {!footerExcludePaths.includes(path) && footer}
+  </>
+)
+
+const BrowserRoutes: FC<BaseRoutesProps> = props => {
+  const { pathname } = useLocation()
+
+  return <Routes path={pathname} {...props} />
+}
+
+const App = <A extends Action = Action, S = unknown>({
+  path,
+  theme,
+  store,
+  maxIdleSeconds = 60 * 60,
+  maxTotalSeconds = 60 * 60,
+  ...routesProps
+}: AppProps<A, S>): JSX.Element => {
+  // TODO: cannot use document during SSR
+  // const root = document.getElementById("root") as HTMLElement
+
+  // const [idleSeconds, setIdleSeconds] = useCountdown(maxIdleSeconds)
+  // const [totalSeconds, setTotalSeconds] = useCountdown(maxTotalSeconds)
+  // const resetIdleSeconds = useCallback(() => {
+  //   setIdleSeconds(maxIdleSeconds)
+  // }, [setIdleSeconds, maxIdleSeconds])
+
+  // const isIdle = idleSeconds === 0
+  // const tooMuchScreenTime = totalSeconds === 0
+
+  // useEventListener(root, "mousemove", resetIdleSeconds)
+  // useEventListener(root, "keypress", resetIdleSeconds)
+
+  // React.useEffect(() => {
+  //   configureFreshworksWidget("hide")
+  // }, [])
+
+  // if (import.meta.env.PROD) {
+  //   toggleOneTrustInfoDisplay()
+  // }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Provider store={store}>
+        {/* <InactiveDialog open={isIdle} onClose={resetIdleSeconds} />
+        <ScreenTimeDialog
+          open={!isIdle && tooMuchScreenTime}
+          onClose={() => {
+            setTotalSeconds(maxTotalSeconds)
+          }}
+        /> */}
+        {SSR ? (
+          <StaticRouter location={path as string}>
+            <Routes path={path as string} {...routesProps} />
+          </StaticRouter>
+        ) : (
+          <BrowserRouter>
+            <BrowserRoutes {...routesProps} />
+          </BrowserRouter>
+        )}
+      </Provider>
+    </ThemeProvider>
+  )
+}
+
+export default App
+
+// TODO: figure out what to do with this
+// function useOneTrustScripts(): void {
+//   const oneTrustEventTypes = [
+//     useExternalScript({
+//       props: {
+//         src: "https://cdn-ukwest.onetrust.com/consent/5da42396-cb12-4493-8d04-5179033cfbad/OtAutoBlock.js",
+//         type: "text/javascript",
+//       },
+//       eventTypes: ["load", "error"],
+//     }),
+//     useExternalScript({
+//       props: {
+//         src: "https://cdn-ukwest.onetrust.com/scripttemplates/otSDKStub.js",
+//         type: "text/javascript",
+//         charset: "UTF-8",
+//       },
+//       attrs: {
+//         "data-domain-script": "5da42396-cb12-4493-8d04-5179033cfbad",
+//       },
+//       eventTypes: ["load", "error"],
+//     }),
+//     useExternalScript({
+//       props: {
+//         src: "https://cdn-ukwest.onetrust.com/scripttemplates/202302.1.0/otBannerSdk.js",
+//         async: true,
+//         type: "text/javascript",
+//       },
+//       eventTypes: ["load", "error"],
+//     }),
+//   ]
+//   if (oneTrustEventTypes.some(t => t === "error")) {
+//     alert("OneTrust failed to load!")
+//   }
+// }

package/src/components/ClickableTooltip.tsx

@@ -0,0 +1,43 @@
+import { Tooltip, type TooltipProps } from "@mui/material"
+import React from "react"
+
+import { wrap } from "../utils/general"
+
+export interface ClickableTooltipProps extends TooltipProps {}
+
+const ClickableTooltip: React.FC<ClickableTooltipProps> = ({
+  open = false,
+  onClick,
+  ...otherTooltipProps
+}) => {
+  const [_open, _setOpen] = React.useState(open)
+
+  React.useEffect(() => {
+    _setOpen(open)
+  }, [open])
+
+  return (
+    <Tooltip
+      open={_open}
+      onMouseOver={() => {
+        if (!_open) {
+          _setOpen(true)
+        }
+      }}
+      onMouseLeave={() => {
+        _setOpen(false)
+      }}
+      onClick={wrap(
+        {
+          after: () => {
+            _setOpen(!_open)
+          },
+        },
+        onClick,
+      )}
+      {...otherTooltipProps}
+    />
+  )
+}
+
+export default ClickableTooltip

package/src/components/CopyIconButton.test.tsx

@@ -0,0 +1,16 @@
+import { screen } from "@testing-library/react"
+
+import { renderWithUser } from "../utils/test"
+import CopyIconButton from "./CopyIconButton"
+
+test("Clicking button should copy content", async () => {
+  const content = "Example string to be copied."
+
+  const { user } = renderWithUser(<CopyIconButton content={content} />)
+
+  expect(await navigator.clipboard.readText()).toEqual("")
+
+  await user.click(screen.getByTestId("copy-icon-button"))
+
+  expect(await navigator.clipboard.readText()).toEqual(content)
+})

package/src/components/CopyIconButton.tsx

@@ -0,0 +1,27 @@
+import { ContentCopy as ContentCopyIcon } from "@mui/icons-material"
+import { IconButton, type IconButtonProps } from "@mui/material"
+import type { FC } from "react"
+
+export interface CopyIconButtonProps extends Omit<IconButtonProps, "onClick"> {
+  content: string
+}
+
+const CopyIconButton: FC<CopyIconButtonProps> = ({
+  content,
+  children = <ContentCopyIcon />,
+  ...otherIconButtonProps
+}) => {
+  return (
+    <IconButton
+      data-testid="copy-icon-button"
+      onClick={() => {
+        navigator.clipboard.writeText(content)
+      }}
+      {...otherIconButtonProps}
+    >
+      {children}
+    </IconButton>
+  )
+}
+
+export default CopyIconButton

package/src/components/Countdown.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { Typography, type TypographyProps } from "@mui/material"
+
+import { useCountdown } from "../hooks"
+
+export interface CountdownProps extends Omit<TypographyProps, "children"> {
+  seconds: number
+  start?: boolean
+  onEnd: () => void
+}
+
+const Countdown: React.FC<CountdownProps> = ({
+  seconds,
+  start = true,
+  onEnd,
+  ...typographyProps
+}) => {
+  seconds = Math.floor(seconds)
+  const _seconds = useCountdown(seconds)[0]
+  const [end, setEnd] = React.useState(!start)
+
+  if (_seconds === 0 && !end) {
+    setEnd(true)
+    onEnd()
+  }
+
+  seconds = Math.floor(_seconds % 60)
+  const minutes = Math.floor(_seconds / 60)
+
+  return (
+    <>
+      {_seconds > 0 && (
+        <Typography {...typographyProps}>
+          {minutes > 0 && `${minutes} ${minutes > 1 ? "mins" : "min"} `}
+          {seconds > 0 && `${seconds} ${seconds > 1 ? "secs" : "sec"}`}
+        </Typography>
+      )}
+    </>
+  )
+}
+
+export default Countdown

package/src/components/ElevatedAppBar.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import {
+  AppBar,
+  type AppBarProps,
+  Toolbar,
+  type ToolbarProps,
+  useScrollTrigger,
+  Container,
+  type ContainerProps,
+} from "@mui/material"
+
+export interface ElevatedAppBarProps extends Omit<AppBarProps, "position"> {
+  containerProps: ContainerProps
+  toolbarProps?: ToolbarProps
+}
+
+const ElevatedAppBar: React.FC<ElevatedAppBarProps> = ({
+  containerProps,
+  toolbarProps,
+  elevation = 4,
+  children,
+  ...otherProps
+}) => {
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0,
+  })
+
+  return React.cloneElement(
+    <AppBar elevation={elevation} {...otherProps}>
+      <Container {...containerProps}>
+        <Toolbar {...toolbarProps}>{children}</Toolbar>
+      </Container>
+    </AppBar>,
+    {
+      position: trigger ? "fixed" : "sticky",
+    },
+  )
+}
+
+export default ElevatedAppBar

package/src/components/Image.tsx

@@ -0,0 +1,41 @@
+import { Box, type BoxProps } from "@mui/material"
+import type React from "react"
+
+import { openInNewTab } from "../utils/general"
+
+export interface ImageProps extends Omit<BoxProps, "component"> {
+  alt: string
+  src: string
+  href?: string
+  hrefInNewTab?: boolean
+}
+
+const Image: React.FC<ImageProps> = ({
+  href,
+  hrefInNewTab = false,
+  ...props
+}) => {
+  let { onClick, style = {}, ...otherProps } = props
+
+  if (style.width === undefined) {
+    style.width = "100%"
+  }
+
+  // Override onClick if href provided.
+  if (href !== undefined) {
+    style = { ...style, cursor: "pointer" }
+    if (hrefInNewTab) {
+      onClick = () => {
+        openInNewTab(href)
+      }
+    } else {
+      onClick = () => {
+        window.location.replace(href)
+      }
+    }
+  }
+
+  return <Box component="img" onClick={onClick} style={style} {...otherProps} />
+}
+
+export default Image

package/src/components/InputFileButton.tsx

@@ -0,0 +1,27 @@
+import {
+  type FC,
+  type DetailedHTMLProps,
+  type InputHTMLAttributes,
+} from "react"
+import { Button, type ButtonProps } from "@mui/material"
+
+export interface InputFileButtonProps
+  extends Omit<ButtonProps<"label">, "component"> {
+  inputProps?: Omit<
+    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+    "type" | "hidden"
+  >
+}
+
+const InputFileButton: FC<InputFileButtonProps> = ({
+  children,
+  inputProps,
+  ...otherButtonProps
+}) => (
+  <Button component="label" {...otherButtonProps}>
+    {children}
+    <input type="file" hidden {...inputProps} />
+  </Button>
+)
+
+export default InputFileButton

package/src/components/ItemizedList.tsx

@@ -0,0 +1,61 @@
+import type React from "react"
+import {
+  List,
+  type ListProps,
+  type ListItem,
+  type ListItemText,
+} from "@mui/material"
+
+type ListItemElement = React.ReactElement<typeof ListItem | typeof ListItemText>
+
+export interface ItemizedListProps {
+  styleType:
+    | "unset"
+    | "initial"
+    | "inherit"
+    | "upper-roman"
+    | "upper-latin"
+    | "upper-alpha"
+    | "square"
+    | "none"
+    | "lower-roman"
+    | "lower-latin"
+    | "lower-greek"
+    | "lower-alpha"
+    | "georgian"
+    | "disc"
+    | "decimal-leading-zero"
+    | "decimal"
+    | "armenian"
+    | "circle"
+  listProps?: ListProps
+  pl?: number
+  children: ListItemElement | ListItemElement[]
+}
+
+const ItemizedList: React.FC<ItemizedListProps> = ({
+  styleType,
+  listProps = {},
+  pl = 4,
+  children,
+}) => {
+  const { sx, ...otherProps } = listProps
+  const listItemProps = { display: "list-item" }
+
+  return (
+    <List
+      sx={{
+        listStyleType: styleType,
+        pl,
+        ".MuiListItem-root": listItemProps,
+        ".MuiListItemText-root": listItemProps,
+        ...sx,
+      }}
+      {...otherProps}
+    >
+      {children}
+    </List>
+  )
+}
+
+export default ItemizedList