created page router id for Mentor and shape mentor id on GRQL

apps/codac-community/src/components/community/Mentors.tsx → apps/codac-community/src/components/community/ListMentors.tsx

@@ -4,9 +4,7 @@ import { Card } from "codac-ui";
 
 import { useGetMentors } from "#/graphql/hooks";
 
-const Mentors = () => {
-  // const { data, loading, error } = useGetAllStaffsQuery();
-  // const mentors = data?.mentors?.data ?? [];
+const ListMentors = () => {
   const { mentors, loading, error } = useGetMentors();
   console.log(mentors);
 
@@ -26,7 +24,7 @@ const Mentors = () => {
                         mentor.attributes.user?.data.attributes.avatar?.data.attributes.url ?? ""
                       }
                       title={mentor.attributes.user?.data.attributes.username}
-                      href={`/mentor/${mentor.id}`}
+                      href={`/community/mentor/${mentor.id}`}
                     />
                   </div>
                 )}
@@ -38,4 +36,4 @@ const Mentors = () => {
   );
 };
 
-export default Mentors;
+export default ListMentors;

apps/codac-community/src/components/community/students.tsx → apps/codac-community/src/components/community/ListStudent.tsx

@@ -5,10 +5,9 @@ import { useGetCohorts } from "#/graphql/hooks";
 
 import { CardStudent } from "./CardStudent";
 
-function Students() {
-
+function ListStudent() {
   const { students, loading } = useGetCohorts();
-  console.log(students)
+  console.log(students);
   return (
     <>
       <div className="space-y-6">
@@ -17,13 +16,12 @@ function Students() {
         </div>
         {loading && <SkeletonCards number={3} isLoading={loading} />}
         <div className="grid grid-cols-4 gap-2">
-          {students && students.map((student) => (
-            <CardStudent key={student.id} student={student} />
-          ))}
+          {students &&
+            students.map((student) => <CardStudent key={student.id} student={student} />)}
         </div>
       </div>
     </>
   );
 }
 
-export default Students;
+export default ListStudent;

apps/codac-community/src/components/community/Mentor.tsx

@@ -0,0 +1,29 @@
+import { Card, SkeletonCards } from "codac-ui";
+
+import { useGetMentor } from "#/graphql/hooks";
+
+export const Mentor = ({ id }: { id: string }) => {
+  const { mentor, loading, error } = useGetMentor(id);
+  console.log(mentor);
+
+  return (
+    <div className="space-y-12">
+      {loading && <SkeletonCards number={3} isLoading={loading} />}
+      {error && <div>something is wrong</div>}
+      <div className="grid grid-cols-4 gap-4">
+        {mentor && (
+          <div key={mentor.id}>
+            {mentor.attributes && (
+              <div className="relative">
+                <Card
+                  image={mentor.attributes.user?.data.attributes.avatar?.data.attributes.url ?? ""}
+                  title={mentor.attributes.user?.data.attributes.username}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

apps/codac-community/src/graphql/hooks.tsx

@@ -1,13 +1,13 @@
 import { useQuery } from "@apollo/client";
-import { MentorEntity, StudentEntity, useGetAllStaffsQuery } from "codac-graphql-types";
+import { MentorEntity, StudentEntity } from "codac-graphql-types";
 
 import { GetStudentsByCohortDocument } from "./queries/cohort";
-import { GetMentorsAllDocument } from "./queries/mentors";
+import { GetMentorIdDocument, GetMentorsAllDocument } from "./queries/mentors";
 
 export const useGetCohorts = () => {
   const { data, error, loading } = useQuery(GetStudentsByCohortDocument);
   const students = data?.students?.data as StudentEntity[];
-  
+
   return { students, error, loading };
 };
 export const useGetMentors = () => {
@@ -17,5 +17,14 @@ export const useGetMentors = () => {
   return { mentors, error, loading };
 };
 
+export const useGetMentor = (id: string) => {
+  const { data, loading, error } = useQuery(GetMentorIdDocument, {
+    variables: {
+      id: id,
+    },
+  });
 
+  const mentor = data?.mentor?.data as MentorEntity
 
+  return { mentor, loading, error };
+};

apps/codac-community/src/graphql/queries/mentors.ts

@@ -29,3 +29,33 @@ export const GetMentorsAllDocument = gql`
     }
   }
 `;
+
+export const GetMentorIdDocument = gql`
+  query getStaffById($id: ID!) {
+    mentor(id: $id) {
+      data {
+        id
+        attributes {
+          github
+          linkedin
+          createdAt
+          user {
+            data {
+              attributes {
+                username
+                avatar {
+                  data {
+                    attributes {
+                      url
+                      previewUrl
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

apps/codac-community/src/pages/community/cohort/[id].tsx

@@ -1,12 +1,11 @@
-import React from "react";
-import Students from "#/components/community/Students";
 import { useRouter } from "next/router";
+import React from "react";
 
-export default function Cohort() {
+import ListStudent from "#/components/community/ListStudent";
 
+export default function Cohort() {
   const router = useRouter();
   const { id } = router.query;
 
-
-  return <Students cohortName={id} />
+  return <ListStudent cohortName={id} />;
 }

apps/codac-community/src/pages/community/index.tsx

@@ -2,7 +2,7 @@
 import { type CohortEntity, GetCohortsDocument, type GetCohortsQuery } from "codac-graphql-types";
 import { Card } from "codac-ui";
 
-import Mentors from "#/components/community/Mentors";
+import ListMentors from "#/components/community/ListMentors";
 import { initializeApollo } from "#/lib/apolloClient";
 
 function Community({ cohorts }: { cohorts: CohortEntity[] }) {
@@ -33,7 +33,7 @@ function Community({ cohorts }: { cohorts: CohortEntity[] }) {
         <div className="space-y-6 text-lg font-medium text-white">Staffs</div>
       </div>
       <div>
-        <Mentors />
+        <ListMentors />
       </div>
     </>
   );

apps/codac-community/src/pages/community/mentor/[id].tsx

@@ -0,0 +1,13 @@
+
+import { useRouter } from "next/router";
+
+import { Mentor } from "#/components/community/Mentor";
+
+export default function mentor() {
+  const router = useRouter();
+  const { id } = router.query;
+
+  return <Mentor id={id} />;
+}
+
+