From e86fca650e1eb31e10a2317349771c944ccfb4dc Mon Sep 17 00:00:00 2001 From: swve Date: Sun, 7 May 2023 16:05:18 +0200 Subject: [PATCH] feat: initiate new home page --- front/app/_orgs/[orgslug]/layout.tsx | 6 +- front/app/_orgs/[orgslug]/page.tsx | 84 ++++++++++++++++--- front/app/_orgs/[orgslug]/settings/layout.tsx | 4 +- front/public/svg/collections.svg | 3 + front/public/svg/courses.svg | 3 + front/services/courses/collections.ts | 9 ++ front/services/courses/courses.ts | 3 +- front/services/utils/ts/requests.ts | 4 + src/services/users/schemas/users.py | 2 + 9 files changed, 99 insertions(+), 19 deletions(-) create mode 100644 front/public/svg/collections.svg create mode 100644 front/public/svg/courses.svg diff --git a/front/app/_orgs/[orgslug]/layout.tsx b/front/app/_orgs/[orgslug]/layout.tsx index 4cdf5644..d9d693ce 100644 --- a/front/app/_orgs/[orgslug]/layout.tsx +++ b/front/app/_orgs/[orgslug]/layout.tsx @@ -1,15 +1,11 @@ -"use client"; + import "@styles/globals.css"; -import { Menu } from "@components/UI/Elements/Menu"; -import AuthProvider from "@components/Security/AuthProvider"; export default function RootLayout({ children, params }: { children: React.ReactNode , params:any}) { return ( <> - {children} - ); } diff --git a/front/app/_orgs/[orgslug]/page.tsx b/front/app/_orgs/[orgslug]/page.tsx index aeb615d3..20345208 100644 --- a/front/app/_orgs/[orgslug]/page.tsx +++ b/front/app/_orgs/[orgslug]/page.tsx @@ -1,21 +1,83 @@ -"use client"; -import { Title } from "@components/UI/Elements/Styles/Title"; -import { getUriWithOrg } from "@services/config/config"; -import Link from "next/link"; -import { usePathname } from "next/navigation"; -const OrgHomePage = (params: any) => { +import { Menu } from "@components/UI/Elements/Menu"; +import { getBackendUrl, getUriWithOrg } from "@services/config/config"; +import { getOrgCourses } from "@services/courses/courses"; +import CoursesLogo from "public/svg/courses.svg"; +import CollectionsLogo from "public/svg/collections.svg"; +import Link from "next/link"; +import Image from "next/image"; +import { log } from "console"; +import AuthProvider from "@components/Security/AuthProvider"; +import { getOrgCollections } from "@services/courses/collections"; + +const OrgHomePage = async (params: any) => { const orgslug = params.params.orgslug; - const pathname = usePathname(); + const courses = await getOrgCourses(orgslug); + const collections = await getOrgCollections(); + + // function to remove "course_" from the course_id + function removeCoursePrefix(course_id: string) { + return course_id.replace("course_", ""); + } return (
- Welcome {orgslug} 👋🏻 - - - + + + + +
+ {/* Collections */} + + <div className="home_collections flex flex-wrap"> + {collections.map((collection: any) => ( + <div className="pr-8 flex flex-col" key={collection.collection_id}> + <Link href={getUriWithOrg(orgslug, "/collection/" + removeCoursePrefix(collection.collection_id))}> + <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" > + <h1 className="font-bold text-lg py-2 justify-center mb-2">{collection.name}</h1> + <div className="flex -space-x-4"> + {collection.courses.slice(0,3).map((course: any) => ( + <Link key={course.course_id} href={getUriWithOrg(orgslug, "/course/" + course.course_id.substring(7))}> + <img className="w-12 h-12 rounded-full flex items-center justify-center shadow-lg ring-2 ring-white z-50" key={course.course_id} src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt={course.name} /> + </Link> + ))} + </div> + </div> + </Link> + </div> + ))} + </div> + + {/* Courses */} + <Title title="Courses" type="cou" /> + <div className="home_courses flex flex-wrap"> + {courses.map((course: any) => ( + <div className="pr-8" key={course.course_id}> + <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> + ); }; + +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 OrgHomePage; diff --git a/front/app/_orgs/[orgslug]/settings/layout.tsx b/front/app/_orgs/[orgslug]/settings/layout.tsx index dfdb8154..10402e16 100644 --- a/front/app/_orgs/[orgslug]/settings/layout.tsx +++ b/front/app/_orgs/[orgslug]/settings/layout.tsx @@ -12,7 +12,7 @@ function SettingsLayout({ children, params }: { children: React.ReactNode, param return ( <> - <AuthProvider/> + <AuthProvider> <Main> <LeftWrapper> <LeftTopArea> @@ -37,7 +37,7 @@ function SettingsLayout({ children, params }: { children: React.ReactNode, param <RightWrapper> {children} </RightWrapper> - </Main> + </Main></AuthProvider> </> ) } diff --git a/front/public/svg/collections.svg b/front/public/svg/collections.svg new file mode 100644 index 00000000..c8c608f5 --- /dev/null +++ b/front/public/svg/collections.svg @@ -0,0 +1,3 @@ +<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M14.4997 5.22045C14.4997 5.22045 14.4997 5.22045 14.4997 5.16378L14.4572 5.05753C14.4424 5.03499 14.4259 5.01367 14.4076 4.99379C14.3887 4.9638 14.3674 4.93537 14.3439 4.90878L14.2801 4.8592L14.1668 4.80254L8.85431 1.52295C8.74173 1.45259 8.61165 1.41528 8.47889 1.41528C8.34614 1.41528 8.21605 1.45259 8.10348 1.52295L2.83348 4.80254L2.76973 4.8592L2.70598 4.90878C2.6825 4.93537 2.66118 4.9638 2.64223 4.99379C2.62402 5.01367 2.60744 5.03499 2.59264 5.05753L2.55014 5.16378C2.55014 5.16378 2.55014 5.16378 2.55014 5.22045C2.54318 5.28164 2.54318 5.34343 2.55014 5.40462V11.5955C2.5499 11.7158 2.58034 11.8343 2.63859 11.9396C2.69684 12.045 2.78098 12.1337 2.88306 12.1975L8.19556 15.4771C8.22826 15.4973 8.26421 15.5117 8.30181 15.5196C8.30181 15.5196 8.33723 15.5196 8.35848 15.5196C8.47831 15.5576 8.60697 15.5576 8.72681 15.5196C8.72681 15.5196 8.76223 15.5196 8.78348 15.5196C8.82108 15.5117 8.85703 15.4973 8.88973 15.4771V15.4771L14.1668 12.1975C14.2689 12.1337 14.353 12.045 14.4113 11.9396C14.4695 11.8343 14.5 11.7158 14.4997 11.5955V5.40462C14.5067 5.34343 14.5067 5.28164 14.4997 5.22045V5.22045ZM7.79181 13.6071L3.89598 11.1988V6.67962L7.79181 9.08087V13.6071ZM8.50014 7.85545L4.53348 5.40462L8.50014 2.96087L12.4668 5.40462L8.50014 7.85545ZM13.1043 11.1988L9.20848 13.6071V9.08087L13.1043 6.67962V11.1988Z" fill="#0F0F0F"/> +</svg> diff --git a/front/public/svg/courses.svg b/front/public/svg/courses.svg new file mode 100644 index 00000000..1fe47207 --- /dev/null +++ b/front/public/svg/courses.svg @@ -0,0 +1,3 @@ +<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M10.7507 0.416626H3.66732C2.91587 0.416626 2.1952 0.715137 1.66385 1.24649C1.1325 1.77784 0.833984 2.49851 0.833984 3.24996V11.75C0.833984 12.5014 1.1325 13.2221 1.66385 13.7534C2.1952 14.2848 2.91587 14.5833 3.66732 14.5833H10.7507C11.1264 14.5833 11.4867 14.434 11.7524 14.1684C12.0181 13.9027 12.1673 13.5423 12.1673 13.1666V1.83329C12.1673 1.45757 12.0181 1.09723 11.7524 0.831558C11.4867 0.565881 11.1264 0.416626 10.7507 0.416626ZM2.25065 3.24996C2.25065 2.87424 2.39991 2.5139 2.66558 2.24822C2.93126 1.98255 3.29159 1.83329 3.66732 1.83329H10.7507V8.91663H3.66732C3.16797 8.91872 2.67848 9.05578 2.25065 9.31329V3.24996ZM3.66732 13.1666C3.29159 13.1666 2.93126 13.0174 2.66558 12.7517C2.39991 12.486 2.25065 12.1257 2.25065 11.75C2.25065 11.3742 2.39991 11.0139 2.66558 10.7482C2.93126 10.4825 3.29159 10.3333 3.66732 10.3333H10.7507V13.1666H3.66732ZM5.08398 4.66663H7.91732C8.10518 4.66663 8.28535 4.592 8.41819 4.45916C8.55102 4.32632 8.62565 4.14615 8.62565 3.95829C8.62565 3.77043 8.55102 3.59026 8.41819 3.45743C8.28535 3.32459 8.10518 3.24996 7.91732 3.24996H5.08398C4.89612 3.24996 4.71596 3.32459 4.58312 3.45743C4.45028 3.59026 4.37565 3.77043 4.37565 3.95829C4.37565 4.14615 4.45028 4.32632 4.58312 4.45916C4.71596 4.592 4.89612 4.66663 5.08398 4.66663V4.66663Z" fill="black"/> +</svg> diff --git a/front/services/courses/collections.ts b/front/services/courses/collections.ts index 09ca1610..9228fbc2 100644 --- a/front/services/courses/collections.ts +++ b/front/services/courses/collections.ts @@ -18,3 +18,12 @@ export async function createCollection(collection: any) { const res = await errorHandling(result); return res; } + +// Get collections +// TODO : add per org filter +export async function getOrgCollections() { + const result: any = await fetch(`${getAPIUrl()}collections/page/1/limit/10`); + const res = await errorHandling(result); + return res; +} + diff --git a/front/services/courses/courses.ts b/front/services/courses/courses.ts index 13486429..f200f46b 100644 --- a/front/services/courses/courses.ts +++ b/front/services/courses/courses.ts @@ -7,8 +7,9 @@ import { RequestBody, RequestBodyForm, errorHandling } from "@services/utils/ts/ */ export async function getOrgCourses(org_id: number) { - const result: any = await fetch(`${getAPIUrl()}courses/${org_id}/page/1/limit/10`, RequestBody("GET", null)); + const result: any = await fetch(`${getAPIUrl()}courses/org_slug/${org_id}/page/1/limit/10`, RequestBody("GET", null)); const res = await errorHandling(result); + return res; } diff --git a/front/services/utils/ts/requests.ts b/front/services/utils/ts/requests.ts index 802f92ec..253675b5 100644 --- a/front/services/utils/ts/requests.ts +++ b/front/services/utils/ts/requests.ts @@ -8,6 +8,10 @@ export const RequestBody = (method: string, data: any) => { headers: HeadersConfig, redirect: "follow", credentials: "include", + // Next.js + next: { + revalidate: 1, + }, }; if (data) { options.body = JSON.stringify(data); diff --git a/src/services/users/schemas/users.py b/src/services/users/schemas/users.py index 7bb24865..4dc33490 100644 --- a/src/services/users/schemas/users.py +++ b/src/services/users/schemas/users.py @@ -8,6 +8,8 @@ class UserOrganization(BaseModel): def __getitem__(self, item): return getattr(self, item) + + class User(BaseModel):