homePage services component updated for Clean Code

src/app/(routes)/(website)/components/services/services.tsx

@@ -1,17 +1,10 @@
 "use client";
 
+import { Service } from "@/app/types/types";
 import { useEffect, useState } from "react";
 import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 
-type Service = {
-  id: number;
-  title: string;
-  description: string;
-  imageSrc: string;
-  altText: string;
-};
-
 interface ServicesProps {
   dict: {
     homePage: {
@@ -31,9 +24,7 @@ export default function Services({ dict }: ServicesProps) {
   useEffect(() => {
     const fetchServices = async () => {
       try {
-        const response = await fetch("/api/website/services", {
-          cache: "no-store",
-        });
+        const response = await fetch("/api/website/services");
 
         if (!response.ok) {
           throw new Error("Failed to fetch services");
@@ -55,7 +46,6 @@ export default function Services({ dict }: ServicesProps) {
     fetchServices();
   }, []);
 
-  // تابع برای رندر کردن کارت سرویس
   const renderServiceCard = (service?: Service, index?: number) => (
     <div
       key={service?.id || index}
@@ -63,21 +53,21 @@ export default function Services({ dict }: ServicesProps) {
     >
       <div className="my-5 flex w-full justify-center">
         {loading ? (
-          <Skeleton containerClassName={"w-[100px]"} height={120} />
+          <Skeleton containerClassName="w-[100px]" height={120} />
         ) : (
           <img src={service!.imageSrc} alt={service!.altText} />
         )}
       </div>
       <h3 className="w-full text-[18px] font-[700] text-black xl:text-[32px]">
         {loading ? (
-          <Skeleton containerClassName={"w-full"} height={32} />
+          <Skeleton containerClassName="w-full" height={32} />
         ) : (
           service!.title
         )}
       </h3>
       <p className="w-full text-justify text-[14px] font-[400] text-black xl:text-[20px]">
         {loading ? (
-          <Skeleton containerClassName={"w-full"} height={60} />
+          <Skeleton containerClassName="w-full" height={60} />
         ) : (
           service!.description
         )}

src/app/types/types.ts

@@ -192,3 +192,11 @@ export type AboutMeDataType = {
   updated_at: string;
   skills: SkillType[];
 };
+
+export type Service = {
+  id: number;
+  title: string;
+  description: string;
+  imageSrc: string;
+  altText: string;
+};