homePage aboutMe component updated for Clean Code

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

@@ -1,35 +1,11 @@
+import { AboutMeDataType } from "@/app/types/types";
 import React from "react";
 import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 
-type SkillType = {
-  id: 1;
-  title: string;
-  image: string;
-  description: string;
-  link: string;
-  percentage: number;
-  about_me_id: number;
-  created_at: string;
-  updated_at: string;
-};
-
-type AboutMeDataType = {
-  id: number;
-  title: string;
-  description: string;
-  image: string;
-  created_at: string;
-  updated_at: string;
-  skills: SkillType[];
-};
-
 export default async function AboutMe() {
   const aboutMeData: AboutMeDataType = await fetch(
     `${process.env.NEXT_PUBLIC_FRONT_URL}/api/website/about-me`,
-    {
-      cache: "no-store",
-    },
   ).then((res) => res.json());
 
   return (
@@ -45,35 +21,22 @@ export default async function AboutMe() {
           {aboutMeData?.description || <Skeleton width={350} height={30} />}
         </p>
         <ul className="mt-10 flex w-full flex-col gap-10">
-          {aboutMeData?.skills ? (
-            aboutMeData?.skills.map((skill, key) => (
-              <li key={key}>
+          {aboutMeData.skills.map((skill, index) => (
+            <li key={index}>
               <h3 className="mb-2 text-[18px] font-[700]">{skill.title}</h3>
-                <div className="h relative h-[12px] w-full rounded-lg bg-[#EDECEC]">
+              <div className="relative h-[12px] w-full rounded-lg bg-[#EDECEC]">
                 <span
-                    className="progress absolute h-[12px] rounded-lg bg-[#FD6F00]"
+                  className="absolute h-[12px] rounded-lg bg-[#FD6F00]"
                   style={{ width: `${skill.percentage}%` }}
                 ></span>
               </div>
             </li>
-            ))
-          ) : (
-            <>
-              <Skeleton width={"100%"} height={50} />
-              <Skeleton width={"100%"} height={50} />
-              <Skeleton width={"100%"} height={50} />
-              <Skeleton width={"100%"} height={50} />
-            </>
-          )}
+          ))}
         </ul>
       </div>
-      {aboutMeData?.image ? (
       <div className="flex w-full max-w-[90%] items-center justify-center md:w-[40%]">
         <img src={aboutMeData.image} alt="profile picture" className="" />
       </div>
-      ) : (
-        <Skeleton circle={true} width={360} height={360} />
-      )}
     </div>
   );
 }

src/app/types/types.ts

@@ -170,3 +170,25 @@ export type Dictionary = {
     CopyRight: string;
   };
 };
+
+export type SkillType = {
+  id: 1;
+  title: string;
+  image: string;
+  description: string;
+  link: string;
+  percentage: number;
+  about_me_id: number;
+  created_at: string;
+  updated_at: string;
+};
+
+export type AboutMeDataType = {
+  id: number;
+  title: string;
+  description: string;
+  image: string;
+  created_at: string;
+  updated_at: string;
+  skills: SkillType[];
+};