ыввы

client/src/pages/admin-slider/ui/AdminSliderPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useMemo, useState } from 'react'
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'
@@ -21,36 +21,17 @@ import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
 
 type SlideDraft = { galleryImageId: string; caption: string; textColor: string }
 
-export function AdminSliderPage() {
+function SliderEditor({
+  initialSlides,
+  galleryItems,
+}: {
+  initialSlides: SlideDraft[]
+  galleryItems: GalleryImageItem[]
+}) {
   const queryClient = useQueryClient()
-
-  const sliderQuery = useQuery({
-    queryKey: ['admin', 'catalog-slider'],
-    queryFn: fetchAdminCatalogSlider,
-  })
-
-  const galleryQuery = useQuery({
-    queryKey: ['admin', 'gallery'],
-    queryFn: fetchAdminGallery,
-  })
-
-  const [sliderDraft, setSliderDraft] = useState<SlideDraft[]>([])
+  const [sliderDraft, setSliderDraft] = useState<SlideDraft[]>(initialSlides)
   const [pickOpen, setPickOpen] = useState(false)
 
-  useEffect(() => {
-    if (sliderQuery.isSuccess && sliderDraft.length === 0) {
-      setSliderDraft(
-        sliderQuery.data.slides.map((s) => ({
-          galleryImageId: s.galleryImageId,
-          caption: s.caption,
-          textColor: s.textColor || '#ffffff',
-        })),
-      )
-    }
-  }, [sliderQuery.isSuccess, sliderQuery.dataUpdatedAt])
-
-  const galleryItems: GalleryImageItem[] = galleryQuery.data?.items ?? []
-
   const usedIds = new Set(sliderDraft.map((s) => s.galleryImageId))
   const pickCandidates = galleryItems.filter((i) => !usedIds.has(i.id) && i.isResized)
 
@@ -88,24 +69,8 @@ export function AdminSliderPage() {
     })
   }
 
-  if (sliderQuery.isLoading || galleryQuery.isLoading) {
-    return <Typography color="text.secondary">Загрузка…</Typography>
-  }
-
-  if (sliderQuery.isError) {
-    return <Typography color="error">Не удалось загрузить слайдер.</Typography>
-  }
-
   return (
-    <Box>
-      <Typography variant="h4" gutterBottom>
-        Слайдер
-      </Typography>
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-        Изображения для карусели на главной странице. Сначала загрузите фото в Галерею и обработайте их (Resize), затем
-        добавьте в слайдер. Порядок строк = порядок показа.
-      </Typography>
-
+    <>
       <Paper variant="outlined" sx={{ p: 2, borderRadius: 2 }}>
         <Stack spacing={1.5} sx={{ mb: 2 }}>
           {sliderDraft.length === 0 && (
@@ -236,6 +201,51 @@ export function AdminSliderPage() {
           <Button onClick={() => setPickOpen(false)}>Закрыть</Button>
         </DialogActions>
       </Dialog>
+    </>
+  )
+}
+
+export function AdminSliderPage() {
+  const sliderQuery = useQuery({
+    queryKey: ['admin', 'catalog-slider'],
+    queryFn: fetchAdminCatalogSlider,
+  })
+
+  const galleryQuery = useQuery({
+    queryKey: ['admin', 'gallery'],
+    queryFn: fetchAdminGallery,
+  })
+
+  const galleryItems: GalleryImageItem[] = galleryQuery.data?.items ?? []
+
+  const initialSlides = useMemo<SlideDraft[]>(() => {
+    if (!sliderQuery.isSuccess) return []
+    return sliderQuery.data.slides.map((s) => ({
+      galleryImageId: s.galleryImageId,
+      caption: s.caption,
+      textColor: s.textColor || '#ffffff',
+    }))
+  }, [sliderQuery.isSuccess, sliderQuery.data?.slides])
+
+  if (sliderQuery.isLoading || galleryQuery.isLoading) {
+    return <Typography color="text.secondary">Загрузка…</Typography>
+  }
+
+  if (sliderQuery.isError) {
+    return <Typography color="error">Не удалось загрузить слайдер.</Typography>
+  }
+
+  return (
+    <Box>
+      <Typography variant="h4" gutterBottom>
+        Слайдер
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        Изображения для карусели на главной странице. Сначала загрузите фото в Галерею и обработайте их (Resize), затем
+        добавьте в слайдер. Порядок строк = порядок показа.
+      </Typography>
+
+      <SliderEditor key={sliderQuery.dataUpdatedAt} initialSlides={initialSlides} galleryItems={galleryItems} />
     </Box>
   )
 }