fix: Portal frontend 52 (#61)

* fix: state param for link components

* add class filters

* fix: support tables

* cell stack

src/api/endpoints/klass.ts

@@ -56,7 +56,11 @@ export type ListClassesResult = _ListResult<
     }
   }
 >
-export type ListClassesArg = _ListArg<{ teacher: Teacher["id"] }>
+export type ListClassesArg = _ListArg<{
+  teacher: Teacher["id"]
+  _id: Class["id"] | Class["id"][]
+  id_or_name: string
+}>
 
 export default function getReadClassEndpoints<
   RetrieveResult extends _RetrieveResult<Class> = RetrieveClassResult,

src/components/router/Link.tsx

@@ -1,13 +1,20 @@
 import { Link as MuiLink, type LinkProps as MuiLinkProps } from "@mui/material"
-import type { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 
 import { type LinkProps as RouterLinkProps } from "../../utils/router"
 
-export type LinkProps = Omit<MuiLinkProps, "component"> & RouterLinkProps
+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: FC<LinkProps> = props => {
+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
   return <MuiLink component={RouterLink} {...props} />
 }

src/components/router/LinkButton.tsx

@@ -1,13 +1,20 @@
 import { Button, type ButtonProps } from "@mui/material"
-import type { FC } from "react"
 import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"
 
-export type LinkButtonProps = Omit<ButtonProps, "component"> & LinkProps
+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: FC<LinkButtonProps> = props => {
+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 }} />
 }
 

src/components/router/LinkIconButton.tsx

@@ -1,13 +1,20 @@
 import { IconButton, type IconButtonProps } from "@mui/material"
-import type { FC } from "react"
 import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"
 
-export type LinkIconButtonProps = Omit<IconButtonProps, "component"> & LinkProps
+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: FC<LinkIconButtonProps> = props => {
+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 }} />
 }
 

src/components/router/LinkListItem.tsx

@@ -1,13 +1,20 @@
 import { ListItem, type ListItemProps } from "@mui/material"
-import type { FC } from "react"
 import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"
 
-export type LinkListItemProps = Omit<ListItemProps, "component"> & LinkProps
+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: FC<LinkListItemProps> = props => {
+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 }} />
 }
 

src/components/router/LinkTab.tsx

@@ -1,13 +1,20 @@
 import { Tab, type TabProps } from "@mui/material"
-import type { FC } from "react"
 import { Link } from "react-router-dom"
 
 import { type LinkProps } from "../../utils/router"
 
-export type LinkTabProps = Omit<TabProps, "component"> & LinkProps
+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: FC<LinkTabProps> = props => {
+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 }} />
 }
 

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

src/components/table/Table.tsx

@@ -0,0 +1,53 @@
+import { type FC, type ReactNode } 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: ReactNode[]
+  children: ReactNode
+  containerProps?: TableContainerProps
+  headProps?: TableHeadProps
+  headCellProps?: TableCellProps
+  headRowProps?: TableRowProps
+  bodyProps?: TableBodyProps
+}
+
+const Table: FC<TableProps> = ({
+  headers,
+  children,
+  containerProps,
+  headProps,
+  headCellProps,
+  headRowProps,
+  bodyProps,
+  ...tableProps
+}) => (
+  <TableContainer {...containerProps}>
+    <MuiTable {...tableProps}>
+      <TableHead {...headProps}>
+        <TableRow {...headRowProps}>
+          {headers.map((header, index) => (
+            <TableCell {...headCellProps} key={`table-head-cell-${index}`}>
+              {header}
+            </TableCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody {...bodyProps}>{children}</TableBody>
+    </MuiTable>
+  </TableContainer>
+)
+
+export default Table

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"

src/theme/components/MuiTableHead.ts

@@ -1,4 +1,4 @@
-import { typographyClasses } from "@mui/material"
+import { typographyClasses, tableCellClasses } from "@mui/material"
 
 import { includesClassNames } from "../../utils/theme"
 import type Components from "./_components"
@@ -12,7 +12,11 @@ const MuiTableHead: Components["MuiTableHead"] = {
       }),
       [`.${typographyClasses.root}`]: {
         color: "white",
+        fontWeight: 600,
         marginBottom: 0,
+      },
+      [`.${tableCellClasses.head}`]: {
+        color: "white",
         fontWeight: 600,
       },
     }),

src/utils/router.ts

@@ -4,7 +4,15 @@ import {
   type To,
 } from "react-router-dom"
 
-export type LinkProps = Omit<_LinkProps, "to"> & { to: To | number }
+import { type PageState } from "../components/page/Page"
+
+export type LinkProps<
+  Override extends "delta" | "to",
+  State extends Record<string, any> = Record<string, any>,
+> = Omit<_LinkProps, "to" | "state"> &
+  (Override extends "delta"
+    ? { to: number }
+    : { to: To; state?: State & Partial<PageState> })
 
 export type ReadOnly<T> = {
   readonly [P in keyof T]: T[P]