get pattenrs from api

src/pages/settings/components/DesignSettings.tsx

@@ -2,7 +2,7 @@ import ColorPicker from "@/components/ColorPicker";
 import Radio from "@/components/Radio";
 import { clx } from "@/helpers/utils";
 import DesignSlider from "@/pages/settings/components/DesignSlider";
-import { PATTERN_BACKGROUND_OPACITY, usePatterns } from "@/pages/settings/hooks/usePatterns";
+import { PATTERN_BACKGROUND_OPACITY, useBackgroundPatterns } from "@/pages/settings/hooks/usePatterns";
 import { DocumentUpload, Gallery, Trash } from "iconsax-react";
 import { useCallback, useEffect, useState, type FC } from "react";
 import { useDropzone } from "react-dropzone";
@@ -15,14 +15,20 @@ const UPLOAD_BOX_CLASS = "w-[200px] h-[362px] rounded-2xl border border-dashed b
 const DesignSettings: FC = () => {
   const [menuColor, setMenuColor] = useState("#000000");
   const [appliedColor, setAppliedColor] = useState("#000000");
-  const [selectedPatternId, setSelectedPatternId] = useState(1);
+  const [selectedPatternId, setSelectedPatternId] = useState<string | null>(null);
   const [backgroundType, setBackgroundType] = useState<BackgroundType>("pattern");
   const [customImage, setCustomImage] = useState<File | null>(null);
   const [customImagePreview, setCustomImagePreview] = useState<string | null>(null);
   const [imageOpacity, setImageOpacity] = useState(100);
   const [imageBlur, setImageBlur] = useState(0);
   const [overlayDarkness, setOverlayDarkness] = useState(0);
-  const patterns = usePatterns(appliedColor);
+  const { patterns, isLoading: isPatternsLoading, isError: isPatternsError } = useBackgroundPatterns(appliedColor);
+
+  useEffect(() => {
+    if (patterns[0]?.id) {
+      setSelectedPatternId((current) => current ?? patterns[0].id);
+    }
+  }, [patterns]);
 
   useEffect(() => {
     const timer = setTimeout(() => setAppliedColor(menuColor), COLOR_APPLY_DELAY_MS);
@@ -76,6 +82,16 @@ const DesignSettings: FC = () => {
 
             {backgroundType === "pattern" && (
               <div className="mt-2 flex gap-3 flex-wrap">
+                {isPatternsLoading &&
+                  Array.from({ length: 6 }).map((_, index) => (
+                    <div key={index} className="w-16 h-[139px] rounded-lg bg-secondary animate-pulse" />
+                  ))}
+                {!isPatternsLoading && isPatternsError && (
+                  <div className="text-sm text-description">خطا در بارگذاری پترن‌ها</div>
+                )}
+                {!isPatternsLoading && !isPatternsError && patterns.length === 0 && (
+                  <div className="text-sm text-description">پترنی یافت نشد</div>
+                )}
                 {patterns.map((pattern) => (
                   <button
                     key={pattern.id}
@@ -84,7 +100,7 @@ const DesignSettings: FC = () => {
                     className={clx("relative w-16 h-[139px] rounded-lg bg-white border overflow-hidden", selectedPatternId === pattern.id ? "border-black" : "border-border")}
                   >
                     <div className="absolute inset-0" style={{ backgroundColor: appliedColor, opacity: PATTERN_BACKGROUND_OPACITY }} />
-                    <img src={pattern.image} alt={pattern.name} className="relative scale-200 w-full h-full object-cover" />
+                    <img src={pattern.image} alt="" className="relative scale-200 w-full h-full object-cover" />
                   </button>
                 ))}
               </div>