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

import { Button, Divider, Grid, Paper, Typography } from '@mui/material'
import { Fragment, 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 DOMPurify from 'dompurify'
import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'

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

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

    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}>{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
        <Fragment>
            <Button
                startIcon={<ArrowBackIosIcon />}
                variant="contained"
                component={RouterLink}
                to="/catalog"
                color="primary"
                sx={{ mb: 2 }}
            >
                Return To Catalog
            </Button>
            <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 default CatalogItemDetail