feat: add course author to course page

front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { removeCourse, startCourse } from "@services/courses/activity";
 import Link from "next/link";
-import React, { use } from "react";
+import React, { use, useEffect, useState } from "react";
 import { getUriWithOrg } from "@services/config/config";
 import PageLoading from "@components/Objects/Loaders/PageLoading";
 import { revalidateTags } from "@services/utils/ts/requests";
@@ -10,13 +10,25 @@ import { useRouter } from "next/navigation";
 import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
 import { getCourseThumbnailMediaDirectory } from "@services/media/media";
 import { ArrowRight, Check, File, Sparkles, Star, Video } from "lucide-react";
+import Avvvatars from "avvvatars-react";
+import { getUser } from "@services/users/users";
 
 const CourseClient = (props: any) => {
+  const [user, setUser] = useState<any>({});
   const courseid = props.courseid;
   const orgslug = props.orgslug;
   const course = props.course;
   const router = useRouter();
 
+
+
+  async function getUserUI() {
+    let user_id = course.course.authors[0];
+    const user = await getUser(user_id);
+    setUser(user);
+    console.log(user);
+  }
+
   async function startCourseUI() {
     // Create activity
     await startCourse("course_" + courseid, orgslug);
@@ -35,6 +47,10 @@ const CourseClient = (props: any) => {
     router.refresh();
   }
 
+    useEffect(() => {
+      getUserUI();
+    }
+    , []);
 
   return (
     <>
@@ -58,9 +74,9 @@ const CourseClient = (props: any) => {
           <div className="flex flex-row pt-10">
             <div className="course_metadata_left grow space-y-2">
               <h2 className="py-3 text-2xl font-bold">Description</h2>
-              <StyledBox>
+              <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
-                <p className="py-3">{course.course.description}</p>
+                <p className="py-5 px-5">{course.course.description}</p>
-              </StyledBox>
+              </div>
 
               <h2 className="py-3 text-2xl font-bold">What you will learn</h2>
               <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
@@ -101,7 +117,7 @@ const CourseClient = (props: any) => {
 
                             </p>
                             <div className="flex space-x-1 py-2 px-4 items-center">
-                              <div className="courseicon items-center flex space-x-2 text-slate-400">
+                              <div className="courseicon items-center flex space-x-2 text-neutral-400">
                                 {activity.type === "dynamic" &&
                                   <div className="bg-gray-100 px-2 py-2 rounded-full">
                                     <Sparkles className="text-gray-400" size={13} />
@@ -119,7 +135,7 @@ const CourseClient = (props: any) => {
                                 }
 
                               </div>
-                              <Link className="flex font-semibold grow pl-2 text-slate-500" href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
+                              <Link className="flex font-semibold grow pl-2 text-neutral-500" href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
                                 <p>{activity.name}</p>
                               </Link>
                               <div className="flex ">
@@ -161,13 +177,25 @@ const CourseClient = (props: any) => {
               </div>
 
             </div>
-            <div className="course_metadata_right w-64 flex items-center ml-10 h-28 p-3 bg-white shadow-sm justify-center ring-1 ring-inset ring-gray-400/10 rounded-lg transition-all">
+            <div className="course_metadata_right space-y-3 w-64 antialiased flex flex-col ml-10 h-fit p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
+              { user &&
+                <div className="flex mx-auto space-x-3 px-2 py-2 items-center">
+                <div className="">
+                  <Avvvatars border borderSize={5} borderColor="white" size={50} shadow value={course.course.authors[0]} style='shape' />
+                </div>
+                <div className="-space-y-2 ">
+                  <div className="text-[12px] text-neutral-400 font-semibold">Author</div>
+                  <div className="text-xl font-bold text-neutral-800">{user.full_name}</div>
+                </div>
+              </div>
+              }
+
               {course.trail.status == "ongoing" ? (
-                <button className="py-2 px-5 rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer" onClick={quitCourse}>
+                <button className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer" onClick={quitCourse}>
                   Quit Course
                 </button>
               ) : (
-                <button className="py-2 px-5 rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-black hover:bg-gray-900 hover:cursor-pointer" onClick={startCourseUI}>Start Course</button>
+                <button className="py-2 px-5 mx-auto rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-black hover:bg-gray-900 hover:cursor-pointer" onClick={startCourseUI}>Start Course</button>
               )}
             </div>
           </div>

front/services/users/users.ts

@@ -0,0 +1,8 @@
+import { getAPIUrl } from "@services/config/config";
+import { RequestBody, errorHandling } from "@services/utils/ts/requests";
+
+export async function getUser(user_id: string) {
+  const result = await fetch(`${getAPIUrl()}users/user_id/${user_id}`, RequestBody("GET", null, null));
+  const res = await errorHandling(result);
+  return res;
+}