From c75853ce884fcf2501d17e3c44f6a0e647bb753a Mon Sep 17 00:00:00 2001 From: maxim Date: Thu, 13 Feb 2025 18:34:47 +0300 Subject: [PATCH] add `media` data to `/article/show` page --- package.json | 23 +++++------ pnpm-lock.yaml | 3 ++ src/App.tsx | 4 +- src/lib/constants.ts | 1 + src/pages/article/show.tsx | 80 +++++++++++++++++++++++++++++++++++++- 5 files changed, 96 insertions(+), 15 deletions(-) create mode 100644 src/lib/constants.ts diff --git a/package.json b/package.json index 6adc7ad..c0c1641 100644 --- a/package.json +++ b/package.json @@ -4,24 +4,25 @@ "private": true, "type": "module", "dependencies": { + "@emotion/react": "^11.8.2", + "@emotion/styled": "^11.8.1", + "@mui/icons-material": "^6.1.6", + "@mui/lab": "^6.0.0-beta.14", + "@mui/material": "^6.1.7", + "@mui/x-data-grid": "^7.22.2", "@refinedev/cli": "^2.16.21", "@refinedev/core": "^4.47.1", "@refinedev/devtools": "^1.1.32", "@refinedev/kbar": "^1.3.6", - "react": "^18.0.0", - "react-dom": "^18.0.0", - "react-router": "^7.0.2", - "@refinedev/simple-rest": "^5.0.1", "@refinedev/mui": "^6.0.0", "@refinedev/react-hook-form": "^4.8.14", - "@mui/icons-material": "^6.1.6", - "@emotion/react": "^11.8.2", - "@emotion/styled": "^11.8.1", - "@mui/lab": "^6.0.0-beta.14", - "@mui/material": "^6.1.7", - "@mui/x-data-grid": "^7.22.2", + "@refinedev/react-router": "^1.0.0", + "@refinedev/simple-rest": "^5.0.1", + "axios": "^1.7.9", + "react": "^18.0.0", + "react-dom": "^18.0.0", "react-hook-form": "^7.30.0", - "@refinedev/react-router": "^1.0.0" + "react-router": "^7.0.2" }, "devDependencies": { "@types/node": "^18.16.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3330398..bc57bdd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -50,6 +50,9 @@ importers: '@refinedev/simple-rest': specifier: ^5.0.1 version: 5.0.10(@refinedev/core@4.57.5(@tanstack/react-query@4.36.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) + axios: + specifier: ^1.7.9 + version: 1.7.9 react: specifier: ^18.0.0 version: 18.3.1 diff --git a/src/App.tsx b/src/App.tsx index 2e60045..13ea90b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,6 +27,7 @@ import {VehicleList, VehicleCreate, VehicleEdit} from './pages/vehicle' import {RouteList, RouteCreate, RouteEdit} from './pages/route' import {CountryIcon, CityIcon, CarrierIcon, MediaIcon, ArticleIcon, SightIcon, StationIcon, VehicleIcon, RouteIcon} from './components/ui/Icons' +import {BACKEND_URL} from './lib/constants' function App() { return ( @@ -38,7 +39,7 @@ function App() { media (https://wn.krbl.ru/article/2/media) meta: { canDelete: true, label: 'Статьи', diff --git a/src/lib/constants.ts b/src/lib/constants.ts new file mode 100644 index 0000000..d50da64 --- /dev/null +++ b/src/lib/constants.ts @@ -0,0 +1 @@ +export const BACKEND_URL = 'https://wn.krbl.ru' diff --git a/src/pages/article/show.tsx b/src/pages/article/show.tsx index 441910c..df61cd9 100644 --- a/src/pages/article/show.tsx +++ b/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([]) + 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 ( @@ -25,6 +53,54 @@ export const ArticleShow = () => { ))} + + + + Media + + + + {mediaLoading ? ( + Loading media... + ) : media.length > 0 ? ( + media.map((mediaItem, index) => ( + + {record && ( + + {mediaItem?.filename} + + )} + + + {mediaFields.map(({label, data}) => ( + + {label}: {mediaItem?.[data]} + + ))} + + + )) + ) : ( + No media found + )} + + )