add media data to /article/show page

src/pages/article/show.tsx

@@ -1,19 +1,47 @@
-import {Stack, Typography} from '@mui/material'
+import {Stack, Typography, Box, Grid2 as Grid} 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'
+
 export const ArticleShow = () => {
   const {query} = useShow({})
   const {data, isLoading} = query
-
   const record = data?.data
 
+  const [media, setMedia] = useState<any[]>([])
+  const [mediaLoading, setMediaLoading] = useState(true)
+
+  useEffect(() => {
+    if (record?.id) {
+      axios
+        .get(`${BACKEND_URL}/article/${record.id}/media`)
+        .then((response) => {
+          setMedia(response?.data || [])
+          setMediaLoading(false)
+        })
+        .catch(() => {
+          setMedia([])
+          setMediaLoading(false)
+        })
+    }
+  }, [record?.id])
+
   const fields = [
     {label: 'ID', data: 'id'},
     {label: 'Heading', data: 'heading'},
     {label: 'Body', data: 'body'},
   ]
 
+  const mediaFields = [
+    {label: 'ID', data: 'id'},
+    {label: 'Filename', data: 'filename'},
+    {label: 'Media Type', data: 'media_type'},
+  ]
+
   return (
     <Show isLoading={isLoading}>
       <Stack gap={4}>
@@ -25,6 +53,54 @@ export const ArticleShow = () => {
             <TextField value={record?.[data]} />
           </Stack>
         ))}
+
+        <Stack gap={2}>
+          <Typography variant="body1" fontWeight="bold">
+            Media
+          </Typography>
+
+          <Grid container gap={2}>
+            {mediaLoading ? (
+              <Typography>Loading media...</Typography>
+            ) : media.length > 0 ? (
+              media.map((mediaItem, index) => (
+                <Box key={index} sx={{border: '2px solid #dddddd25', padding: '20px', marginBottom: '8px'}}>
+                  {record && (
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        marginBottom: '20px',
+                      }}
+                    >
+                      <img
+                        src={`${BACKEND_URL}/media/${mediaItem?.id}/download`}
+                        alt={mediaItem?.filename}
+                        style={{
+                          maxWidth: '100%',
+                          height: '20vh',
+                          objectFit: 'contain',
+                          borderRadius: 8,
+                        }}
+                      />
+                    </Box>
+                  )}
+
+                  <Stack gap={0.5}>
+                    {mediaFields.map(({label, data}) => (
+                      <Typography key={data}>
+                        <strong>{label}:</strong> {mediaItem?.[data]}
+                      </Typography>
+                    ))}
+                  </Stack>
+                </Box>
+              ))
+            ) : (
+              <Typography>No media found</Typography>
+            )}
+          </Grid>
+        </Stack>
       </Stack>
     </Show>
   )