feat: init collectionid page

front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/error.tsx

@@ -0,0 +1,23 @@
+'use client'; // Error components must be Client Components
+
+import ErrorUI from '@components/UI/Error/Error';
+import { useEffect } from 'react';
+ 
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+ 
+  return (
+    <div>
+      <ErrorUI></ErrorUI>
+    </div>
+  );
+}

front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/loading.tsx

@@ -0,0 +1,8 @@
+import PageLoading from "@components/Pages/PageLoading";
+
+export default function Loading() {
+    return (
+        <PageLoading></PageLoading>
+    )
+
+}

front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/page.tsx

@@ -0,0 +1,62 @@
+import { getBackendUrl, getUriWithOrg } from "@services/config/config";
+import { getCollectionByIdWithAuthHeader } from "@services/courses/collections";
+import { getOrganizationContextInfo } from "@services/organizations/orgs";
+import { Metadata } from "next";
+import { cookies } from "next/headers";
+import Link from "next/link";
+
+type MetadataProps = {
+  params: { orgslug: string, courseid: string, collectionid: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata(
+  { params }: MetadataProps,
+): Promise<Metadata> {
+  const cookieStore = cookies();
+  const access_token_cookie: any = cookieStore.get('access_token_cookie');
+  // Get Org context information 
+  const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });
+  const col = await getCollectionByIdWithAuthHeader(params.collectionid, access_token_cookie ? access_token_cookie.value : null, { revalidate: 0, tags: ['collections'] });
+
+  console.log(col)
+
+  return {
+    title: `Collection : ${col.name}  — ${org.name}`,
+    description: `${col.description} `,
+  };
+}
+
+const CollectionPage = async (params: any) => {
+  const cookieStore = cookies();
+  const access_token_cookie: any = cookieStore.get('access_token_cookie');
+  const orgslug = params.params.orgslug;
+  const col = await getCollectionByIdWithAuthHeader(params.params.collectionid, access_token_cookie ? access_token_cookie.value : null, { revalidate: 0, tags: ['collections'] });
+
+  const removeCoursePrefix = (courseid: string) => {
+    return courseid.replace("course_", "")
+  }
+
+
+  return <div className="max-w-7xl mx-auto px-4 py-10" >
+    <h2 className="text-sm font-bold text-gray-400">Collection</h2>
+    <h1 className="text-3xl font-bold">{col.name}</h1>
+    <br />
+    <div className="home_courses flex flex-wrap">
+      {col.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>;
+};
+
+export default CollectionPage;

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

@@ -15,6 +15,7 @@ export async function generateMetadata(
 ): Promise<Metadata> {
     const cookieStore = cookies();
     const access_token_cookie: any = cookieStore.get('access_token_cookie');
+   
 
     // Get Org context information 
     const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });

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

@@ -43,6 +43,10 @@ const OrgHomePage = async (params: any) => {
     return course_id.replace("course_", "");
   }
 
+  function removeCollectionPrefix(collection_id: string) {
+    return collection_id.replace("collection_", "");
+  }
+
   return (
     <div>
       <div className="max-w-7xl mx-auto px-4 py-10">
@@ -51,7 +55,7 @@ const OrgHomePage = async (params: any) => {
         <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))}>
+              <Link href={getUriWithOrg(orgslug, "/collection/" + removeCollectionPrefix(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">

front/services/courses/collections.ts

@@ -19,6 +19,20 @@ export async function createCollection(collection: any) {
   return res;
 }
 
+
+// Get a colletion by id
+export async function getCollectionById(collection_id: any) {
+  const result: any = await fetch(`${getAPIUrl()}collections/${collection_id}`, { next: { revalidate: 10 } });
+  const res = await errorHandling(result);
+  return res;
+}
+
+export async function getCollectionByIdWithAuthHeader(collection_id: any, access_token: string, next: any) {
+  const result: any = await fetch(`${getAPIUrl()}collections/collection_${collection_id}`, RequestBodyWithAuthHeader("GET", null, next, access_token));
+  const res = await errorHandling(result);
+  return res;
+}
+
 // Get collections
 // TODO : add per org filter
 export async function getOrgCollections() {

front/services/utils/ts/requests.ts

@@ -78,7 +78,7 @@ export const swrFetcher = async (url: string, body: any, router?: AppRouterInsta
 
 export const errorHandling = (res: any) => {
   if (!res.ok) {
-    const error: any = new Error(`Error ${res.status}: ${res.statusText}`, {});
+    const error: any = new Error(`${res.status}: ${res.statusText}`, {});
     error.status = res.status;
     throw error;
   }

src/services/courses/collections.py

@@ -38,6 +38,18 @@ async def get_collection(request: Request,collection_id: str, current_user: Publ
             status_code=status.HTTP_409_CONFLICT, detail="Collection does not exist")
 
     collection = Collection(**collection)
+
+    # add courses to collection
+    courses = request.app.db["courses"]
+    courseids = [course for course in collection.courses]
+
+    collection.courses = []
+    collection.courses = courses.find(
+        {"course_id": {"$in": courseids}}, {'_id': 0})
+    
+    collection.courses = [course for course in await collection.courses.to_list(length=100)]
+
+
     return collection