aswi2022code-of-duty-gitlab/frontend/src/features/Catalog/CatalogTable.tsx @ 41a11178

import {
    Link,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TablePagination,
    TableRow,
    Typography,
} from '@mui/material'
import { Fragment, useEffect, useState } from 'react'
import { Link as RouterLink } from 'react-router-dom'
import { CatalogItemDto } from '../../swagger/data-contracts'
import ShowErrorIfPresent from '../Reusables/ShowErrorIfPresent'
import ContentLoading from '../Reusables/ContentLoading'
import { RootState } from '../redux/store'
import { useDispatch, useSelector } from 'react-redux'
import {
    consumeError,
    setLoading,
    setRowsPerPage,
    ShowAllItemsOption,
} from './catalogSlice'
import { fetchItems } from './catalogThunks'

// Catalog table component
const CatalogTable = () => {
    const [page, setPage] = useState(0) // currently shown page

    const dispatch = useDispatch()

    // Rows per page
    const rowsPerPageOptions = useSelector(
        (state: RootState) => state.catalog.rowsPerPageOptions
    )
    const rowsPerPage = useSelector(
        (state: RootState) => state.catalog.rowsPerPage
    )

    // Items, loading and error from api
    const items = useSelector((state: RootState) => state.catalog.items)
    const loading = useSelector((state: RootState) => state.catalog.loading)
    const apiError = useSelector((state: RootState) => state.catalog.error)

    // Local state to display any error relevant error
    const [displayError, setDisplayError] = useState<string | undefined>(
        undefined
    )
    const [unload, setUnload] = useState(true)

    // When changing rows per page set the selected number and reset to the first page
    const onRowsPerPageChange = (
        event: React.ChangeEvent<HTMLInputElement>
    ) => {
        dispatch(setRowsPerPage(Number(event.target.value)))
        setPage(0)
    }

    useEffect(() => {
        // Fetch items when the component is mounted
        // This will automatically search whenever the filter changes
        dispatch(fetchItems())

        return () => {
            // Invalidate the state when unmounting so that the old list is not rerendered when the user returns to the page
            dispatch(setLoading())
        }
    }, [dispatch])

    // Use effect to read the error and consume it
    useEffect(() => {
        if (apiError) {
            setDisplayError(apiError)
            dispatch(consumeError())
        }
    }, [apiError, dispatch])

    // Name of columns in the header
    const columns = [
        'Name',
        'Alternative Names',
        'Written form',
        'Type',
        'State or Territory',
        'Coordinates',
        'Certainty',
    ]

    const mapValueOrDefault = (value?: string, textStyle?: any) => (
        <TableCell align="center">
            <Typography
                sx={{
                    ...textStyle,
                }}
            >
                {value || 'N/A'}
            </Typography>
        </TableCell>
    )

    // Maps catalogItem to corresponding table row
    const mapItemColumnValues = (item: CatalogItemDto) => (
        <Fragment>
            {/* {mapValueOrDefault(item.name)} */}
            <TableCell align="center">
                <Link
                    component={RouterLink}
                    to={`/catalog/${item.id as string}`}
                    onClick={() => setUnload(false)}
                >
                    {item.name}
                </Link>
            </TableCell>
            {mapValueOrDefault(item.alternativeNames?.join(', '), {
                display: '-webkit-box',
                overflow: 'hidden',
                WebkitBoxOrient: 'vertical',
                wordBreak: 'break-all',
                WebkitLineClamp: 2,
            })}
            {mapValueOrDefault(item.writtenForms?.join(', '))}
            {mapValueOrDefault(item.types?.join(', '))}
            {mapValueOrDefault(item.countries?.join(', '))}
            {mapValueOrDefault(
                item.latitude && item.longitude
                    ? `${item.latitude.toFixed(2)}, ${item.longitude.toFixed(
                          2
                      )}`
                    : undefined
            )}
            {mapValueOrDefault(
                item.certainty ? `${item.certainty}` : undefined
            )}
        </Fragment>
    )

    return (
        <Fragment>
            <ShowErrorIfPresent err={displayError} />
            {loading && !displayError ? <ContentLoading /> : null}
            {!loading && !displayError ? (
                <Fragment>
                    <TableContainer sx={{ minHeight: '65vh', maxHeight: '65vh' }}>
                        <Table
                            stickyHeader
                            sx={{ minWidth: 400 }}
                            aria-label="catalogTable"
                        >
                            <TableHead>
                                <TableRow>
                                    {columns.map((col, idx) => (
                                        <TableCell key={idx} align="center">
                                            {col}
                                        </TableCell>
                                    ))}
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {items
                                    .slice(
                                        page * rowsPerPage,
                                        page * rowsPerPage + rowsPerPage
                                    )
                                    .map((row, idx) => (
                                        <TableRow hover tabIndex={-1} key={idx}>
                                            {mapItemColumnValues(row)}
                                        </TableRow>
                                    ))}
                            </TableBody>
                        </Table>
                    </TableContainer>
                    <TablePagination
                        rowsPerPageOptions={rowsPerPageOptions.map((item) => ({
                            value:
                                item === ShowAllItemsOption
                                    ? items.length
                                    : item,
                            label: item as string,
                        }))}
                        component="div"
                        count={items.length}
                        rowsPerPage={rowsPerPage}
                        page={page}
                        onPageChange={(_, newPage) => setPage(newPage)}
                        onRowsPerPageChange={onRowsPerPageChange}
                    />
                </Fragment>
            ) : null}
        </Fragment>
    )
}

export default CatalogTable