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

import {
    Button,
    Dialog,
    DialogContent,
    Divider,
    Grid,
    Paper,
    Stack,
    Typography,
} from '@mui/material'
import { Fragment, FunctionComponent, useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import axiosInstance from '../../api/api'
import { CatalogItemDto } from '../../swagger/data-contracts'
import ShowErrorIfPresent from '../Reusables/ShowErrorIfPresent'
import ContentLoading from '../Reusables/ContentLoading'
import CatalogItemMap from './CatalogItemMap'
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
import { Link as RouterLink } from 'react-router-dom'
import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'

const apiError =
    'Error while fetching data from the server, please try again later.'

export interface CatalogItemDetailProps {
    itemId: string
    showReturnToCatalogButton?: boolean
}

const CatalogItemDetail: FunctionComponent<CatalogItemDetailProps> = ({
    itemId,
    showReturnToCatalogButton,
}) => {
    const [item, setItem] = useState<CatalogItemDto | undefined>(undefined)
    const [isItemLoading, setIsItemLoading] = useState(true)
    const [err, setErr] = useState<string | undefined>(undefined)

    // Fetch the item from the api after mounting the component
    useEffect(() => {
        // Function to fetch the item from the api
        const fetchItem = async () => {
            try {
                const { data, status } = await axiosInstance.get(
                    `/catalog-items/${itemId}`
                )
                if (status !== 200) {
                    setErr(apiError)
                    return
                }

                setItem(data)
                setIsItemLoading(false)
            } catch (err: any) {
                setErr(apiError)
            }
        }

        fetchItem()
    }, [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 key={item}>
                            {formatHtmlStringToReactDom(item)}
                        </Typography>
                    ))}
                </Grid>
            </Grid>
        </Fragment>
    )

    // Catalog item rows
    const rows = [
        {
            rowName: 'Name',
            items: [item?.name],
        },
        {
            rowName: 'All Names',
            items: item?.allNames,
        },
        {
            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 ? `${item?.latitude}°, ${item?.longitude}°` : '-, -',
        },
        {
            rowName: 'Certainty',
            items: [item?.certainty],
        },
        {
            rowName: 'Bibliography',
            items: item?.bibliography,
        },
    ]

    return (
        <Fragment>
            {showReturnToCatalogButton && (
                <Stack
                    direction="row"
                    alignItems="flex-start"
                    spacing={2}
                    sx={{ mt: 1 }}
                >
                    <Button
                        startIcon={<ArrowBackIosIcon />}
                        variant="contained"
                        component={RouterLink}
                        to="/catalog"
                        color="primary"
                        sx={{ mb: 2 }}
                    >
                        Return To Catalog
                    </Button>
                </Stack>
            )}
            <ShowErrorIfPresent err={err} />

            <Paper style={{ minHeight: '100vh' }} variant="outlined">
                {isItemLoading && !err ? <ContentLoading /> : null}
                {!isItemLoading && item ? (
                    <Grid container justifyContent="space-around">
                        <Grid item xs={12} md={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 md={6} xs={12}>
                            <CatalogItemMap item={item} />
                        </Grid>
                    </Grid>
                ) : null}
            </Paper>
        </Fragment>
    )
}

export const RoutedCatalogItemDetail = () => {
    const { itemId } = useParams()
    return <CatalogItemDetail itemId={itemId ?? ''} />
}

export const DialogCatalogItemDetail: FunctionComponent<
    CatalogItemDetailProps
> = ({ itemId }) => {
    const [open, setOpen] = useState(false)
    return (
        <Fragment>
            <Button variant="contained" onClick={() => setOpen(true)}>
                Detail
            </Button>
            <Dialog
                open={open}
                onClose={() => setOpen(false)}
                fullWidth
                maxWidth="lg"
            >
                <DialogContent>
                    <CatalogItemDetail itemId={itemId} />
                </DialogContent>
            </Dialog>
        </Fragment>
    )
}

export default CatalogItemDetail