rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add course author to course page

Browse source
This commit is contained in:
swve 2023-10-13 18:37:37 +02:00
parent 3cfa49cccd
commit 18f54ce7b1
2 changed files with 45 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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>
<p className="py-3">{course.course.description}</p>
</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-5 px-5">{course.course.description}</p>
</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>

8
front/services/users/users.ts Normal file
View file

@ -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;
}