aswi2022code-of-duty-gitlab/frontend/src/features/Catalog/CatalogItemDetail.tsx @ f2db3e05

import {
    Box,
    Divider,
    Grid,
    Paper,
    Skeleton,
    Stack,
    Typography,
} from '@mui/material'
import { Fragment, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import { RootState } from '../redux/store'
import ConsumeLastError from '../Reusables/ConsumeLastError'
import ContentLoading from '../Reusables/ContentLoading'
import { consumeCatalogItemLastErr, setItemLoading } from './catalogSlice'
import { getCatalogItem } from './catalogThunks'

const CatalogItemDetail = () => {
    // itemId from query params
    const { itemId } = useParams()

    // Loaded item
    const item = useSelector((state: RootState) => state.catalog.catalogItem)

    // Whether the item is loading
    const isItemLoading = useSelector(
        (state: RootState) => state.catalog.isItemLoading
    )

    // Redux dispatch
    const dispatch = useDispatch()

    const lastErr = useSelector(
        (state: RootState) => state.catalog.catalogItemLastErr
    )

    // Fetch the item from the api after mounting the component
    useEffect(() => {
        dispatch(setItemLoading(true))
        dispatch(getCatalogItem(itemId as string))
    }, [dispatch, itemId])

    // Maps catalogItem property to corresponding table row
    const mapToRow = (rowName: string, items: string[]) => (
        <Fragment>
            <Grid sx={{ my: 2 }} container justifyContent="space-around">
                <Grid item xs={8} sx={{ px: 1 }}>
                    <Typography fontWeight={500}>{rowName}</Typography>
                </Grid>
                <Grid item xs={4} sx={{ ml: 'auto' }}>
                    {items.map((item) => (
                        <Typography>{item}</Typography>
                    ))}
                </Grid>
            </Grid>
        </Fragment>
    )

    // Catalog item rows
    const rows = [
        {
            rowName: 'Name',
            items: [item?.name],
        },
        {
            rowName: 'Alternative Names',
            items: item?.alternativeNames,
        },
        {
            rowName: 'Written Forms',
            items: item?.writtenForms,
        },
        {
            rowName: 'Type',
            items: item?.types,
        },
        {
            rowName: 'State or Territory',
            items: item?.countries,
        },
        {
            rowName: 'Coordinates',
            items: [`${item?.longitude}°, ${item?.latitude}°`],
        },
        {
            rowName: 'Certainty',
            items: [item?.certainty],
        },
        {
            rowName: 'Bibliography',
            items: item?.bibliography,
        },
    ]

    return (
        // TODO remove min height
        <Paper style={{ minHeight: '100vh', borderRadius: 0 }} elevation={2}>
            <ConsumeLastError
                consumeFn={consumeCatalogItemLastErr}
                err={lastErr}
            />

            {isItemLoading ? <ContentLoading /> : null}
            {!isItemLoading && item ? (
                <Grid container justifyContent="space-around">
                    <Grid item xs={6} sx={{ px: 2 }}>
                        {rows.map((row, idx) => {
                            const maxIdx = rows.length - 1
                            return (
                                <Fragment>
                                    {mapToRow(
                                        row.rowName as string,
                                        row.items as string[]
                                    )}
                                    {idx === maxIdx ? null : <Divider />}
                                </Fragment>
                            )
                        })}
                    </Grid>

                    <Grid item xs={6}>
                        <Box sx={{ px: 2, py: 4 }}>
                            <Typography
                                variant="h4"
                                sx={{ mb: 4 }}
                                fontWeight="bold"
                            >
                                Map
                            </Typography>

                            <Skeleton
                                animation="pulse"
                                variant="rectangular"
                                width="100%"
                                height={400}
                            />
                        </Box>
                    </Grid>
                </Grid>
            ) : null}
        </Paper>
    )
}

export default CatalogItemDetail