From ded831064c10e3ea7066a48613c5dc14c3a24af8 Mon Sep 17 00:00:00 2001 From: swve Date: Sun, 7 May 2023 19:32:03 +0000 Subject: [PATCH] feat: use server comp for courses page --- .../[orgslug]/(withmenu)/courses/courses.tsx | 102 +++++++++++++++ .../[orgslug]/(withmenu)/courses/page.tsx | 119 +++--------------- .../_orgs/[orgslug]/{ => (withmenu)}/page.tsx | 6 +- 3 files changed, 119 insertions(+), 108 deletions(-) create mode 100644 front/app/_orgs/[orgslug]/(withmenu)/courses/courses.tsx rename front/app/_orgs/[orgslug]/{ => (withmenu)}/page.tsx (96%) diff --git a/front/app/_orgs/[orgslug]/(withmenu)/courses/courses.tsx b/front/app/_orgs/[orgslug]/(withmenu)/courses/courses.tsx new file mode 100644 index 00000000..c9080c7f --- /dev/null +++ b/front/app/_orgs/[orgslug]/(withmenu)/courses/courses.tsx @@ -0,0 +1,102 @@ +'use client'; +import CreateCourseModal from '@components/Modals/Course/Create/CreateCourse'; +import Modal from '@components/UI/Modal/Modal'; +import { Edit2, Trash } from "lucide-react"; +import { getAPIUrl, getBackendUrl, getUriWithOrg } from '@services/config/config'; +import CoursesLogo from "public/svg/courses.svg"; +import CollectionsLogo from "public/svg/collections.svg"; +import { deleteCourseFromBackend } from '@services/courses/courses'; +import Link from 'next/link'; +import React from 'react' +import Image from 'next/image'; + +interface CourseProps { + orgslug: string; + courses: any; +} + +function Courses(props: CourseProps) { + const orgslug = props.orgslug; + const courses = props.courses; + const [newCourseModal, setNewCourseModal] = React.useState(false); + + async function deleteCourses(course_id: any) { + await deleteCourseFromBackend(course_id); + } + + async function closeNewCourseModal() { + setNewCourseModal(false); + } + + // function to remove "course_" from the course_id + function removeCoursePrefix(course_id: string) { + return course_id.replace("course_", ""); + } + + + return ( +
+
+
+ + <Modal + isDialogOpen={newCourseModal} + onOpenChange={setNewCourseModal} + minHeight="md" + dialogContent={<CreateCourseModal + closeModal={closeNewCourseModal} + orgslug={orgslug} + ></CreateCourseModal>} + dialogTitle="Create Course" + dialogDescription="Create a new course" + dialogTrigger={ + <button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-sm font-bold text-white drop-shadow-lg">Add Course + </button> + } + /> + </div> + + + + <div className="flex space-x-5"> + + {courses.map((course: any) => ( + <div key={course.course_id}> + <div className="flex space-x-2 py-2"> + <button className="rounded-md text-sm px-3 font-bold text-red-800 bg-red-200 w-16 flex justify-center items-center" onClick={() => deleteCourses(course.course_id)}> + Delete <Trash size={10}></Trash> + </button> + <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id) + "/edit")}> + <button className="rounded-md text-sm px-3 font-bold text-orange-800 bg-orange-200 w-16 flex justify-center items-center"> + Edit <Edit2 size={10}></Edit2> + </button> + </Link> + </div> + <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}> + <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})` }}> + + </div> + </Link> + <h2 className="font-bold text-lg w-[250px] py-2">{course.name}</h2> + </div> + ))} + </div> + + </div> + + + </div> + ) +} + +export const Title = (props: any) => { + return ( + <div className="home_category_title flex my-5"> + <div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4"> + <Image className="" src={props.type == "col" ? CollectionsLogo : CoursesLogo} alt="Courses logo" /> + </div> + <h1 className="font-bold text-lg">{props.title}</h1> + </div> + ) +} + +export default Courses \ No newline at end of file diff --git a/front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx index 5876a9df..831dc15e 100644 --- a/front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx +++ b/front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx @@ -1,113 +1,24 @@ -"use client"; -import Link from "next/link"; -import { useRouter } from "next/navigation"; + import React from "react"; -import styled from "styled-components"; -import { Title } from "@components/UI/Elements/Styles/Title"; -import { getAPIUrl, getBackendUrl, getSelfHostedOption, getUriWithOrg } from "@services/config/config"; -import { deleteCourseFromBackend } from "@services/courses/courses"; -import useSWR, { mutate } from "swr"; -import { swrFetcher } from "@services/utils/ts/requests"; -import { Edit2, Trash } from "lucide-react"; -import Modal from "@components/UI/Modal/Modal"; -import CreateCourseModal from "@components/Modals/Course/Create/CreateCourse"; +import Courses from "./courses"; +import { getOrgCourses } from "@services/courses/courses"; +import { Metadata } from "next"; -const CoursesIndexPage = (params: any) => { - const router = useRouter(); +export const metadata: Metadata = { + title: 'LearnHouse - Courses', + description: 'courses', +}; + +const CoursesPage = async (params: any) => { const orgslug = params.params.orgslug; - const [newCourseModal, setNewCourseModal] = React.useState(false); - - const { data: courses, error: error } = useSWR(`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`, swrFetcher); - - async function deleteCourses(course_id: any) { - await deleteCourseFromBackend(course_id); - mutate(`${getAPIUrl()}courses/org_slug/${orgslug}/page/1/limit/10`); - } - - async function closeNewCourseModal() { - setNewCourseModal(false); - } - - // function to remove "course_" from the course_id - function removeCoursePrefix(course_id: string) { - return course_id.replace("course_", ""); - } + const courses = await getOrgCourses(orgslug); return ( - <> - <Title> - Courses {" "} - <Modal - isDialogOpen={newCourseModal} - onOpenChange={setNewCourseModal} - minHeight="md" - dialogContent={<CreateCourseModal - closeModal={closeNewCourseModal} - orgslug={orgslug} - ></CreateCourseModal>} - dialogTitle="Create Course" - dialogDescription="Create a new course" - dialogTrigger={ - <button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 font text-sm font-bold text-white drop-shadow-lg">Add Course + </button> - } - /> - - {error &&

Failed to load

} - {!courses ? ( -
Loading...
- ) : ( - - {courses.map((course: any) => ( -
-
- - - - -
- - - - - -

{course.name}

-
- ))} - - )} - +
+ +
); }; -export default CoursesIndexPage; +export default CoursesPage; -const CourseThumbnail = styled.div` - display: flex; - - img { - width: 249px; - height: 131px; - - } -`; - -const CourseWrapper = styled.div` - margin: 0 auto; - max-width: 1500px; - div { - h2 { - margin: 0; - padding: 0; - margin-top: 10px; - font-size: 18px; - font-weight: 600; - width: 250px; - height: 50px; - color: #424242; - } - } -`; diff --git a/front/app/_orgs/[orgslug]/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/page.tsx similarity index 96% rename from front/app/_orgs/[orgslug]/page.tsx rename to front/app/_orgs/[orgslug]/(withmenu)/page.tsx index 2c1a6c0a..9250bdd7 100644 --- a/front/app/_orgs/[orgslug]/page.tsx +++ b/front/app/_orgs/[orgslug]/(withmenu)/page.tsx @@ -23,9 +23,7 @@ const OrgHomePage = async (params: any) => { return (
- - - +
{/* Collections */} @@ -68,7 +66,7 @@ const OrgHomePage = async (params: any) => { }; -const Title = (props: any) => { +export const Title = (props: any) => { return ( <div className="home_category_title flex my-5"> <div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4">