feat : dynamic tutorial page

src/pages/tutorial/section/components/Leran.tsx

@@ -1,94 +1,83 @@
-import { SyntheticEvent, useEffect, useState } from "react";
 import { LearnProps } from "../../../../types/props";
-import { BiLoaderAlt } from "react-icons/bi";
+import { useQuery } from "@tanstack/react-query";
+import useAxios from "../../../../hooks/useAxios";
+import Alert from "../../../../components/alert/Alert";
+import { MdErrorOutline } from "react-icons/md";
 
-const Learn = ({ activeTutorial, tutorialList }: LearnProps) => {
-  const tutorialImages = [
-    {
-      id: 1,
-      images: [{ urlimg: "https://persain-game.com/front_end/img/v2ray.png" }],
+const Learn = ({ activeTutorial }: LearnProps) => {
+  const axios = useAxios();
+  const { data, isLoading, isFetching, error } = useQuery({
+    queryKey: ["learn", activeTutorial],
+    queryFn: () => {
+      return axios.get(`/home/category/learning/${activeTutorial}`);
     },
-    {
-      id: 2,
-      images: [
-        { urlimg: "https://persain-game.com/front_end/img/1-eshterki.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/2-eshteraki.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/3-eshteraki.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/4-eshteraki.jpg" },
-      ],
-    },
-    {
-      id: 3,
-      images: [
-        { urlimg: "https://persain-game.com/front_end/img/1-eshterki.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/2-eshteraki.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/3-eshteraki.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/4-eshteraki.jpg" },
-      ],
-    },
-    {
-      id: 4,
-      images: [
-        { urlimg: "https://persain-game.com/front_end/img/1-eshterki.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/2-eshteraki.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/3-eshteraki.jpg" },
-        { urlimg: "https://persain-game.com/front_end/img/4-eshteraki.jpg" },
-      ],
-    },
-  ];
-  const [loading, setLoading] = useState<boolean>(true);
-  const [list, setList] = useState(
-    tutorialList?.filter((id) => id.id === activeTutorial)
-  );
-  const [tutorialImagesState, setTutorialImagesState] = useState(
-    tutorialImages?.filter((id) => id.id === activeTutorial)
-  );
-  useEffect(() => {
-    setList(tutorialList?.filter((id) => id.id === activeTutorial));
-    setTutorialImagesState(
-      tutorialImages?.filter((id) => id.id === activeTutorial)
-    );
-    setLoading(true);
-  }, [activeTutorial]);
-  const handleLoadingImage = (e: SyntheticEvent<HTMLImageElement>) => {
-    if (e.type === "load") setLoading(false);
-  };
+  });
   return (
     <div className="w-full h-full border-4 flex flex-col justify-center items-center border-solid mt-4 p-4 rounded-md border-gray-800 border-spacing-1">
-      {list?.map((i) => {
-        return (
-          <div
-            key={i.id}
-            className="relative w-full h-full flex flex-col justify-center items-center"
+      {isLoading || isFetching ? (
+        <div className="w-full h-full p-5 flex justify-center items-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={100}
+            viewBox="0 0 300 150"
           >
-            <span className="p-2 bg-gray-800 rounded-md mb-4">{i.name}</span>
-            {loading && (
-              <div className="relative w-full h-60 flex justify-center items-center">
-                <BiLoaderAlt className="w-16 text-white h-16 animate-spin" />
+            <path
+              fill="none"
+              className="stroke-gray-600"
+              strokeWidth="15" // تغییر به camelCase
+              strokeLinecap="round" // تغییر به camelCase
+              strokeDasharray="300 385" // تغییر به camelCase
+              strokeDashoffset="0" // تغییر به camelCase
+              d="M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z"
+            >
+              <animate
+                attributeName="stroke-dashoffset"
+                calcMode="spline"
+                dur="2s" // برای مدت زمان، به 's' برای ثانیه نیاز داریم
+                values="685;-685"
+                keySplines="0 0 1 1"
+                repeatCount="indefinite"
+              ></animate>
+            </path>
+          </svg>
+        </div>
+      ) : error ? (
+        <Alert type="danger" message="خطایی با این موضوع رخ داد: ">
+          {error.message}
+        </Alert>
+      ) : data?.data?.result.length === 0 ? (
+        <div className="w-full h-full flex flex-col gap-3 justify-center items-center">
+          <MdErrorOutline className="w-[5rem] h-[5rem]" />
+          <p className="text-sm md:text-base"> اموزشی وجود ندارد </p>
+        </div>
+      ) : (
+        data?.data?.result.map(
+          (i: { id: string; title: string; medias: string[] }) => {
+            return (
+              <div
+                key={i.id}
+                className="relative w-full h-full flex flex-col justify-center items-center"
+              >
+                <span className="p-2 bg-gray-800 rounded-md mb-4">
+                  {i.title}
+                </span>
+                <div className="relative w-full h-full flex flex-col justify-center items-center">
+                  {i.medias.map((medias, index) => {
+                    return (
+                      <img
+                        className="w-full md:w-1/2 mb-3 rounded-lg mx-auto h-full"
+                        src={medias}
+                        alt="images"
+                        key={index}
+                      />
+                    );
+                  })}
+                </div>
               </div>
-            )}
-            <div className="relative w-full h-full flex flex-col justify-center items-center">
-              {tutorialImagesState?.map((i) => {
-                return (
-                  <div key={i.id}>
-                    {i.images?.map((item, index) => {
-                      return (
-                        <img
-                          className="w-full md:w-1/2 mb-3 rounded-lg mx-auto h-full"
-                          src={item.urlimg}
-                          alt="images"
-                          key={index}
-                          onLoad={(e) => handleLoadingImage(e)}
-                        />
-                      );
-                    })}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        );
-      })}
+            );
+          }
+        )
+      )}
     </div>
   );
 };