TopicsTable.tsx

import type { DataTableColumn } from 'mantine-datatable'
import { DataTable } from 'mantine-datatable'
import { formatDate } from '../../utils/format'
import { useTopicsContext } from '../../providers/TopicsProvider/hooks'
import type { ITopicOverview } from '../../requests/responses/topic'
import { TopicState } from '../../requests/responses/topic'
import { Link, useNavigate } from 'react-router'
import { Badge, Box, Center, Stack, Text } from '@mantine/core'
import AvatarUserList from '../AvatarUserList/AvatarUserList'
import ThesisTypeBadge from '../../pages/LandingPage/components/ThesisTypBadge/ThesisTypBadge'

type TopicColumn =
  | 'title'
  | 'types'
  | 'supervisor'
  | 'examiner'
  | 'researchGroup'
  | 'state'
  | 'createdAt'
  | string

interface ITopicOverviewsTableProps {
  columns?: TopicColumn[]
  extraColumns?: Record<string, DataTableColumn<ITopicOverview>>
  noBorder?: boolean
}

const TopicsTable = (props: ITopicOverviewsTableProps) => {
  const {
    extraColumns = {},
    columns = ['title', 'types', 'examiner', 'supervisor'],
    noBorder = false,
  } = props

  const navigate = useNavigate()

  const { topics, page, setPage, limit, isLoading } = useTopicsContext()

  const getTopicColor = (state: TopicState) => {
    switch (state) {
      case TopicState.OPEN:
        return 'green'
      case TopicState.CLOSED:
        return 'red'
      case TopicState.DRAFT:
        return 'yellow'
      case TopicState.EXPIRED:
        return 'orange'
      default:
        return 'gray'
    }
  }

  const columnConfig: Record<TopicColumn, DataTableColumn<ITopicOverview>> = {
    state: {
      accessor: 'state',
      title: 'State',
      textAlign: 'center',
      width: 100,
      render: (topic) => (
        <Center>
          <Badge color={getTopicColor(topic.state)} radius='sm'>
            {topic.state}
          </Badge>
        </Center>
      ),
    },
    title: {
      accessor: 'title',
      title: 'Title',
      cellsStyle: () => ({ minWidth: 200 }),
      render: (record) => (
        <Box
          component={Link}
          to={`/topics/${record.topicId}`}
          style={{ textDecoration: 'none', color: 'inherit' }}
        >
          <Box w={'100%'}>{record.title}</Box>
        </Box>
      ),
    },
    types: {
      accessor: 'thesisTypes',
      title: 'Thesis Types',
      width: 180,
      ellipsis: true,
      render: (topic) => (
        <Stack gap={2}>
          {topic.thesisTypes ? (
            topic.thesisTypes.map((type) => <ThesisTypeBadge type={type} key={type} />)
          ) : (
            <ThesisTypeBadge type='Any' key='any' />
          )}
        </Stack>
      ),
    },
    examiner: {
      accessor: 'examiner',
      title: 'Examiner',
      width: 180,
      ellipsis: true,
      render: (topic) => <AvatarUserList users={topic.examiners ?? []} />,
    },
    supervisor: {
      accessor: 'supervisor',
      title: 'Supervisor(s)',
      width: 180,
      ellipsis: true,
      render: (topic) => <AvatarUserList users={topic.supervisors ?? []} />,
    },
    researchGroup: {
      accessor: 'researchGroup.name',
      title: 'Research Group',
      width: 180,
      ellipsis: true,
      render: (topic) => (
        <Text size='sm' style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>
          {topic.researchGroup?.name ?? ''}
        </Text>
      ),
    },
    createdAt: {
      accessor: 'createdAt',
      title: 'Created At',
      width: 150,
      ellipsis: true,
      render: (record) => formatDate(record.createdAt),
    },
    ...extraColumns,
  }

  return (
    <DataTable
      fetching={isLoading}
      withTableBorder={!noBorder}
      minHeight={200}
      noRecordsText='No topics to show'
      borderRadius='sm'
      verticalSpacing='md'
      striped
      highlightOnHover
      totalRecords={topics?.totalElements ?? 0}
      recordsPerPage={limit}
      page={page + 1}
      onPageChange={(x) => setPage(x - 1)}
      records={topics?.content}
      idAccessor='topicId'
      columns={columns.map((column) => columnConfig[column])}
      onRowClick={({ record }) => {
        void navigate(`/topics/${record.topicId}`)
      }}
    />
  )
}

export default TopicsTable