From 343a0e93c915121e4fcdddea9dd2e493535e6c58 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Sun, 20 Oct 2024 17:44:16 +0330
Subject: [PATCH] homePage aboutMe component updated for Clean Code

---
 .../(website)/components/aboutMe/aboutMe.tsx  | 67 +++++--------------
 src/app/types/types.ts                        | 22 ++++++
 2 files changed, 37 insertions(+), 52 deletions(-)

diff --git a/src/app/(routes)/(website)/components/aboutMe/aboutMe.tsx b/src/app/(routes)/(website)/components/aboutMe/aboutMe.tsx
index 283c633..4cb40a2 100644
--- a/src/app/(routes)/(website)/components/aboutMe/aboutMe.tsx
+++ b/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}>
-                <h3 className="mb-2 text-[18px] font-[700]">{skill.title}</h3>
-                <div className="h relative h-[12px] w-full rounded-lg bg-[#EDECEC]">
-                  <span
-                    className="progress 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} />
-            </>
-          )}
+          {aboutMeData.skills.map((skill, index) => (
+            <li key={index}>
+              <h3 className="mb-2 text-[18px] font-[700]">{skill.title}</h3>
+              <div className="relative h-[12px] w-full rounded-lg bg-[#EDECEC]">
+                <span
+                  className="absolute h-[12px] rounded-lg bg-[#FD6F00]"
+                  style={{ width: `${skill.percentage}%` }}
+                ></span>
+              </div>
+            </li>
+          ))}
         </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 className="flex w-full max-w-[90%] items-center justify-center md:w-[40%]">
+        <img src={aboutMeData.image} alt="profile picture" className="" />
+      </div>
     </div>
   );
 }
diff --git a/src/app/types/types.ts b/src/app/types/types.ts
index b017e90..cbdc58a 100644
--- a/src/app/types/types.ts
+++ b/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[];
+};