deploy

client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx

@@ -2,19 +2,27 @@ import { useRef } from 'react'
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
+import Divider from '@mui/material/Divider'
 import IconButton from '@mui/material/IconButton'
 import Stack from '@mui/material/Stack'
 import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { fetchAdminCatalogSlider } from '@/entities/catalog-slider/api/catalog-slider-api'
 import { deleteGalleryImage, fetchAdminGallery } from '@/entities/gallery/api/gallery-api'
 import { uploadAdminProductImages } from '@/entities/product/api/product-api'
 import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
+import { GallerySliderSection } from './GallerySliderSection'
 
 export function AdminGalleryPage() {
   const queryClient = useQueryClient()
   const fileInputRef = useRef<HTMLInputElement>(null)
 
+  const sliderQuery = useQuery({
+    queryKey: ['admin', 'catalog-slider'],
+    queryFn: fetchAdminCatalogSlider,
+  })
+
   const galleryQuery = useQuery({
     queryKey: ['admin', 'gallery'],
     queryFn: fetchAdminGallery,
@@ -33,7 +41,7 @@ export function AdminGalleryPage() {
   const deleteMut = useMutation({
     mutationFn: (id: string) => deleteGalleryImage(id),
     onSuccess: () => {
-      void invalidateQueryKeys(queryClient, [['admin', 'gallery']])
+      void invalidateQueryKeys(queryClient, [['admin', 'gallery'], ['admin', 'catalog-slider'], ['catalog-slider']])
     },
   })
 
@@ -49,6 +57,29 @@ export function AdminGalleryPage() {
         галереи». Удаление из списка стирает файл с диска, если оно не используется в товаре.
       </Typography>
 
+      {sliderQuery.isError && (
+        <Typography color="error" sx={{ mb: 2 }}>
+          Не удалось загрузить настройки слайдера.
+        </Typography>
+      )}
+      {sliderQuery.isLoading && (
+        <Typography color="text.secondary" sx={{ mb: 2 }}>
+          Загрузка настроек слайдера…
+        </Typography>
+      )}
+      {sliderQuery.isSuccess && (
+        <GallerySliderSection
+          key={sliderQuery.dataUpdatedAt}
+          initialSlides={sliderQuery.data.slides.map((s) => ({
+            galleryImageId: s.galleryImageId,
+            caption: s.caption,
+          }))}
+          galleryItems={items}
+        />
+      )}
+
+      <Divider sx={{ mb: 3 }} />
+
       <Stack direction="row" spacing={2} sx={{ mb: 3, alignItems: 'center', flexWrap: 'wrap' }}>
         <Button variant="contained" component="label" disabled={uploadMut.isPending}>
           Загрузить файлы