WhiteNightsAdminPanel/src/pages/station/show.tsx

import {Stack, Typography, Box, Grid2 as Grid, Button, MenuItem, Select, FormControl, InputLabel} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'

import {useEffect, useState} from 'react'
import axios from 'axios'

import {BACKEND_URL} from '../../lib/constants'

type SightItem = {
  id: number
  name: string
  latitude: number
  longitude: number
  city_id: number
}

export const StationShow = () => {
  const {query} = useShow({})
  const {data, isLoading} = query
  const record = data?.data

  const [sights, setSights] = useState<SightItem[]>([])
  const [linkedSights, setLinkedSights] = useState<SightItem[]>([])
  const [selectedSightId, setSelectedSightId] = useState<number | ''>('')
  const [sightsLoading, setSightsLoading] = useState<boolean>(true)

  useEffect(() => {
    if (record?.id) {
      axios
        .get(`${BACKEND_URL}/station/${record.id}/sight`)
        .then((response) => {
          setLinkedSights(response?.data || [])
        })
        .catch(() => {
          setLinkedSights([])
        })
    }
  }, [record?.id])

  useEffect(() => {
    axios
      .get(`${BACKEND_URL}/sight/`) // without "/" throws CORS error
      .then((response) => {
        setSights(response?.data || [])
        setSightsLoading(false)
      })
      .catch(() => {
        setSights([])
        setSightsLoading(false)
      })
  }, [])

  const availableSights = sights.filter((sight) => !linkedSights.some((linked) => linked.id === sight.id))

  const linkSight = () => {
    if (selectedSightId) {
      axios
        .post(
          `${BACKEND_URL}/station/${record?.id}/sight`,
          {sight_id: selectedSightId},
          {
            headers: {
              accept: 'application/json',
              'Content-Type': 'application/json',
            },
          },
        )
        .then(() => {
          axios
            .get(`${BACKEND_URL}/station/${record?.id}/sight`)
            .then((response) => {
              setLinkedSights(response?.data || [])
            })
            .catch(() => {
              setLinkedSights([])
            })
        })
        .catch((error) => {
          console.error('Error linking sight:', error)
        })
    }
  }

  const deleteSight = (sightId: number) => {
    axios
      .delete(`${BACKEND_URL}/station/${record?.id}/sight`, {
        data: {sight_id: sightId},
      })
      .then(() => {
        setLinkedSights((prevSights) => prevSights.filter((item) => item.id !== sightId))
      })
      .catch((error) => {
        console.error('Error deleting sight:', error)
      })
  }

  const fields = [
    {label: 'ID', data: 'id'},
    {label: 'Name', data: 'name'},
    {label: 'Latitude', data: 'latitude'},
    {label: 'Longitude', data: 'longitude'},
    {label: 'Description', data: 'description'},
  ]

  const sightFields = [
    {label: 'ID', data: 'id' as keyof SightItem},
    {label: 'Name', data: 'name' as keyof SightItem},
    {label: 'Latitude', data: 'latitude' as keyof SightItem},
    {label: 'Longitude', data: 'longitude' as keyof SightItem},
    {label: 'City ID', data: 'city_id' as keyof SightItem},
  ]

  return (
    <Show isLoading={isLoading}>
      <Stack gap={4}>
        {fields.map(({label, data}) => (
          <Stack key={data} gap={1}>
            <Typography variant="body1" fontWeight="bold">
              {label}
            </Typography>
            <TextField value={record?.[data] || ''} />
          </Stack>
        ))}

        <Stack gap={2}>
          <Typography variant="body1" fontWeight="bold">
            Linked Sights
          </Typography>

          <Grid container gap={2}>
            {sightsLoading ? (
              <Typography>Loading sights...</Typography>
            ) : linkedSights.length > 0 ? (
              linkedSights.map((sight, index) => (
                <Box key={index} sx={{border: '2px solid #dddddd25', padding: '20px', marginBottom: '8px'}}>
                  <Stack gap={0.5}>
                    {sightFields.map(({label, data}) => (
                      <Typography key={data}>
                        <strong>{label}:</strong> {sight?.[data]}
                      </Typography>
                    ))}

                    <Button variant="outlined" color="error" onClick={() => deleteSight(sight?.id)} sx={{mt: 2}}>
                      Delete
                    </Button>
                  </Stack>
                </Box>
              ))
            ) : (
              <Typography>No sights found</Typography>
            )}
          </Grid>

          <Stack gap={2}>
            <Typography variant="body1" fontWeight="bold">
              Link Sight
            </Typography>

            <FormControl fullWidth>
              <InputLabel>Sight</InputLabel>
              <Select value={selectedSightId} onChange={(e) => setSelectedSightId(Number(e.target.value))} label="Sight" fullWidth>
                {availableSights.map((sight) => (
                  <MenuItem key={sight.id} value={sight.id}>
                    {sight.name}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>

            <Button variant="contained" onClick={linkSight} disabled={!selectedSightId}>
              Link Sight
            </Button>
          </Stack>
        </Stack>
      </Stack>
    </Show>
  )
}