refactoring view profile

aliamerj · Mar 2, 2024 · 081a04e · 081a04e
1 parent 0078378
commit 081a04e
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 85 deletions.
diff --git a/app/(main)/profile/_components/_view_section/education/education.tsx b/app/(main)/profile/_components/_view_section/education/education.tsx
@@ -1,4 +1,5 @@
 import { databaseDrizzle } from "@/db/database";
+import { EducationSelection } from "@/db/schemes/profileSchema";
 import { formatDate } from "@/utils/helper_function";
 import { eq } from "drizzle-orm";
 import { notFound } from "next/navigation";
@@ -9,46 +10,40 @@ import { IoSchoolSharp } from "react-icons/io5";
  * param {number} props.profileId - The ID of the profile for which education data needs to be fetched.
  * returns {JSX.Element} - JSX code that displays the education data on a webpage.
  */
-export const Education = async ({ profileId }: { profileId: number }): Promise<JSX.Element> => {
-  try {
-    const educations = await databaseDrizzle.query.education.findMany({
-      where: (edu) => eq(edu.profileId, profileId),
-    });
-    if(educations.length ===0) return <div/>
-
-    return (
-      <section className="mt-32 px-4 md:px-12">
-        <h2 className="mb-8 text-center text-4xl font-bold text-gray-800 dark:text-white">
-          Education
-        </h2>
-        <div className="flex flex-wrap justify-center gap-4">
-          {educations.map((edu) => (
-            <div
-              key={edu.id}
-              className="mb-6 w-full rounded-lg bg-white p-5 shadow transition-shadow duration-300 ease-in-out hover:shadow-lg dark:bg-gray-800 md:w-1/3 lg:w-1/4 xl:w-1/5"
-            >
-              <div className="flex items-center">
-                <IoSchoolSharp className="mr-4 text-4xl" />
-                <div>
-                  <h3 className="text-xl font-semibold text-gray-700 dark:text-gray-300">
-                    {edu.school}
-                  </h3>
-                  <p className="text-md text-gray-600 dark:text-gray-400">
-                    {edu.degree}
-                  </p>
-                  <p className="text-sm text-gray-500 dark:text-gray-500">
-                    {formatDate(edu.startDate)} -{" "}
-                    {edu.endDate ? formatDate(edu.endDate) : "Current"}
-                  </p>
-                </div>
+export const Education = ({
+  educations,
+}: {
+  educations: EducationSelection[];
+}) => {
+  return (
+    <section className="mt-32 px-4 md:px-12">
+      <h2 className="mb-8 text-center text-4xl font-bold text-gray-800 dark:text-white">
+        Education
+      </h2>
+      <div className="flex flex-wrap justify-center gap-4">
+        {educations.map((edu) => (
+          <div
+            key={edu.id}
+            className="mb-6 w-full rounded-lg bg-white p-5 shadow transition-shadow duration-300 ease-in-out hover:shadow-lg dark:bg-gray-800 md:w-1/3 lg:w-1/4 xl:w-1/5"
+          >
+            <div className="flex items-center">
+              <IoSchoolSharp className="mr-4 text-4xl" />
+              <div>
+                <h3 className="text-xl font-semibold text-gray-700 dark:text-gray-300">
+                  {edu.school}
+                </h3>
+                <p className="text-md text-gray-600 dark:text-gray-400">
+                  {edu.degree}
+                </p>
+                <p className="text-sm text-gray-500 dark:text-gray-500">
+                  {formatDate(edu.startDate)} -{" "}
+                  {edu.endDate ? formatDate(edu.endDate) : "Current"}
+                </p>
               </div>
             </div>
-          ))}
-        </div>
-      </section>
-    );
-  } catch (error) {
-    return notFound();
-
-  }
+          </div>
+        ))}
+      </div>
+    </section>
+  );
 };
diff --git a/app/(main)/profile/_components/_view_section/experience/experience.tsx b/app/(main)/profile/_components/_view_section/experience/experience.tsx
@@ -1,14 +1,11 @@
 import { Slide } from "@/animation/Slide";
-import { databaseDrizzle } from "@/db/database";
+import { ExperienceSelection } from "@/db/schemes/profileSchema";
 import { formatDate } from "@/utils/helper_function";
 import DOMPurify from "isomorphic-dompurify";
 import { MdWork } from "react-icons/md";
 
-export const Experience = async ({ profileId }: { profileId: number }) => {
-  const jobs = await databaseDrizzle.query.experience.findMany({
-    where: (e, o) => o.eq(e.profileId, profileId),
-  });
-  if(!jobs || jobs.length === 0) return <div/>
+export const Experience = async ({ experiences }: { experiences: ExperienceSelection[]}) => {
+
 
   return (
     <section className="mx-12 mt-32">
@@ -22,7 +19,7 @@ export const Experience = async ({ profileId }: { profileId: number }) => {
 
       <Slide delay={0.18}>
         <div className="grid grid-cols-1 gap-x-12 gap-y-10 lg:grid-cols-2">
-          {jobs.map((data) => (
+          {experiences.map((data) => (
             <div
               key={data.id}
               className="relative flex max-w-2xl items-start gap-x-4 before:absolute before:bottom-0 before:left-9 before:top-[5rem] before:w-[1px] before:bg-secondary dark:before:bg-primary lg:gap-x-6"

diff --git a/app/(main)/profile/_components/_view_section/header/header.tsx b/app/(main)/profile/_components/_view_section/header/header.tsx
@@ -91,9 +91,10 @@ const Header: React.FC<IHeader> = ({
           <Image
             src={image ?? "/user_image.png"}
             alt="user Image"
-            layout="responsive"
-            width={140}
-            height={140}
+            priority
+            width={200}
+            height={200}
+            style={{ objectFit: "cover" }}
             className="rounded-full bg-foreground p-2"
           />
 

diff --git a/app/(main)/profile/_components/_view_section/section/section.tsx b/app/(main)/profile/_components/_view_section/section/section.tsx
@@ -1,10 +1,8 @@
-import { databaseDrizzle } from "@/db/database";
+import { SectionSelection } from "@/db/schemes/profileSchema";
 import { FaPen } from "react-icons/fa";
 
-const Sections = async ({ profileId }: { profileId: number }) => {
-  const sections = await databaseDrizzle.query.section.findMany({
-    where: (s, o) => o.eq(s.profileId, profileId),
-  });
+const Sections = async ({ sections }: { sections: SectionSelection[] }) => {
+
   return (
     <section className="my-32 px-4 md:px-12">
       {sections.map((section) => (

diff --git a/app/(main)/profile/_components/_view_section/skills/skills.tsx b/app/(main)/profile/_components/_view_section/skills/skills.tsx
@@ -20,7 +20,7 @@ const Skills = ({ skills }: { skills: string }) => {
   });
 
   const [imageErrors, setImageErrors] = useState<{ [key: string]: boolean }>(
-    {}
+    {},
   );
 
   /**
@@ -53,7 +53,8 @@ const Skills = ({ skills }: { skills: string }) => {
                 ) : (
                   <Image
                     src={iconURL}
-                    className="mb-2 h-12 w-12 object-contain"
+                    style={{ objectFit: "contain" }}
+                    className="max-h-full max-w-full"
                     alt={skill}
                     width={48}
                     height={48}
@@ -70,4 +71,5 @@ const Skills = ({ skills }: { skills: string }) => {
   );
 };
 
-export default Skills;
+export default Skills;
+
diff --git a/app/(main)/profile/view/[id]/page.tsx b/app/(main)/profile/view/[id]/page.tsx
@@ -1,12 +1,10 @@
 import { databaseDrizzle } from "@/db/database";
 import { notFound } from "next/navigation";
-import React, { Suspense } from "react";
+import React from "react";
 
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 
-import ShimmerLoading from "@/global-components/ShimmerLoading";
-import ErrorBoundary from "@/global-components/ErrorBoundary";
 import dynamic from "next/dynamic";
 import { Spinner } from "@nextui-org/react";
 import { ProfileSummary } from "../../_components/_view_section/profile_summary/profile_summary";
@@ -110,32 +108,17 @@ async function ViewProfile({ params }: Props) {
         />
       </Header>
       {user.id === session?.user.id && <EditProfileBtn />}
-      <ErrorBoundary>
-        <Suspense fallback={<ShimmerLoading count={4} />}>
-          <ProfileSummary
-            stars={starCount}
-            projects={projects.length}
-            userId={params.id}
-          />
-        </Suspense>
-      </ErrorBoundary>
-      <ErrorBoundary>
-        <Suspense fallback={<ShimmerLoading count={4} />}>
-          <Experience profileId={profile.id} />
-        </Suspense>
-      </ErrorBoundary>
+
+      <ProfileSummary
+        stars={starCount}
+        projects={projects.length}
+        userId={params.id}
+      />
+      <Experience experiences={profile.experiences} />
       {profile.skills && <Skills skills={profile.skills} />}
       {projects.length !== 0 && <Projects projects={projects} />}
-      <ErrorBoundary>
-        <Suspense fallback={<ShimmerLoading count={4} />}>
-          <Education profileId={profile.id} />
-        </Suspense>
-      </ErrorBoundary>
-      <ErrorBoundary>
-        <Suspense fallback={<ShimmerLoading count={4} />}>
-          <Sections profileId={profile.id} />
-        </Suspense>
-      </ErrorBoundary>
+      <Education educations={profile.educations} />
+      <Sections sections={profile.sections} />
     </>
   );
 }