refactor: use components for thumbnails

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

@@ -1,48 +0,0 @@
-'use client';
-
-import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
-import { AuthContext } from '@components/Security/AuthProvider';
-import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
-import { getUriWithOrg } from '@services/config/config';
-import { deleteCollection } from '@services/courses/collections';
-import { revalidateTags } from '@services/utils/ts/requests';
-import { Link, Trash, X } from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import React from 'react'
-
-const CollectionAdminEditsArea = (props: any) => {
-    const router = useRouter();
-
-    const deleteCollectionUI = async (collectionId: number) => {
-        await deleteCollection(collectionId);
-        await revalidateTags(["collections"], props.orgslug);
-        // reload the page
-        router.refresh();
-        router.push(getUriWithOrg(props.orgslug, "/collections"));
-
-        // refresh page (FIX for Next.js BUG)
-        //window.location.reload();
-    }
-
-    return (
-        <AuthenticatedClientElement orgId={props.org_id} checkMethod='roles'>
-            <div className="flex space-x-2 relative top-8 z-20 left-2">
-                <ConfirmationModal
-                    confirmationMessage="Are you sure you want to delete this collection?"
-                    confirmationButtonText="Delete Collection"
-                    dialogTitle={"Delete " + props.collection.name + " ?"}
-                    dialogTrigger={
-                        <div
-                            className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md"
-                            rel="noopener noreferrer">
-                            <X size={15} className="text-rose-200 font-bold" />
-                        </div>}
-                    functionToExecute={() => deleteCollectionUI(props.collection_id)}
-                    status='warning'
-                ></ConfirmationModal>
-            </div>
-        </AuthenticatedClientElement>
-    )
-}
-
-export default CollectionAdminEditsArea;

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

@@ -7,9 +7,9 @@ import { getOrganizationContextInfo } from "@services/organizations/orgs";
 import { Metadata } from "next";
 import { cookies } from "next/headers";
 import Link from "next/link";
-import CollectionAdminEditsArea from "./admin";
 import { getCourseThumbnailMediaDirectory } from "@services/media/media";
 import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from "@services/auth/auth";
+import CollectionThumbnail from "@components/Objects/Other/CollectionThumbnail";
 
 type MetadataProps = {
     params: { orgslug: string, courseid: string };
@@ -45,10 +45,6 @@ export async function generateMetadata(
     };
 }
 
-const removeCollectionPrefix = (collectionid: string) => {
-    return collectionid.replace("collection_", "")
-}
-
 
 const CollectionsPage = async (params: any) => {
     const cookieStore = cookies();
@@ -71,19 +67,7 @@ const CollectionsPage = async (params: any) => {
             <div className="home_collections flex flex-wrap">
                 {collections.map((collection: any) => (
                     <div className="flex flex-col py-3 px-3" key={collection.collection_id}>
-                        <CollectionAdminEditsArea orgslug={orgslug} org_id={org_id} collection_id={collection.collection_id} collection={collection} />
+                        <CollectionThumbnail collection={collection} orgslug={orgslug} org_id={org_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">
-                                    {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={`${getCourseThumbnailMediaDirectory(course.org_id, course.course_id, course.thumbnail)}`} alt={course.name} />
-                                        </Link>
-                                    ))}
-                                </div>
-                            </div>
-                        </Link>
                     </div>
                 ))}
             </div>

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

@@ -17,6 +17,7 @@ import AuthenticatedClientElement from '@components/Security/AuthenticatedClient
 import { getCourseThumbnailMediaDirectory } from '@services/media/media';
 import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
 import { Pencil, X } from 'lucide-react';
+import CourseThumbnail from '@components/Objects/Other/CourseThumbnail';
 
 interface CourseProps {
     orgslug: string;
@@ -75,13 +76,7 @@ function Courses(props: CourseProps) {
                 <div className="flex flex-wrap">
                     {courses.map((course: any) => (
                         <div className="px-3" key={course.course_id}>
-                            <AdminEditsArea course={course} orgSlug={orgslug} courseId={course.course_id} deleteCourses={deleteCourses} />
+                            <CourseThumbnail course={course} orgslug={orgslug} />
-                            <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(${getCourseThumbnailMediaDirectory(course.org_id, course.course_id, course.thumbnail)})` }}>
-
-                                </div>
-                            </Link>
-                            <h2 className="font-bold text-lg w-[250px] py-2">{course.name}</h2>
                         </div>
                     ))}
                 </div>

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

@@ -13,6 +13,8 @@ import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWra
 import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle';
 import { getCourseThumbnailMediaDirectory } from '@services/media/media';
 import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from '@services/auth/auth';
+import CourseThumbnail from '@components/Objects/Other/CourseThumbnail';
+import CollectionThumbnail from '@components/Objects/Other/CollectionThumbnail';
 
 type MetadataProps = {
   params: { orgslug: string };
@@ -74,18 +76,7 @@ const OrgHomePage = async (params: any) => {
         <div className="home_collections flex flex-wrap">
           {collections.map((collection: any) => (
             <div className="flex flex-col py-3 px-3" key={collection.collection_id}>
-              <Link href={getUriWithOrg(orgslug, "/collection/" + removeCollectionPrefix(collection.collection_id))}>
+              <CollectionThumbnail collection={collection} orgslug={orgslug} org_id={org.org_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={`${getCourseThumbnailMediaDirectory(course.org_id, course.course_id, course.thumbnail)}`} alt={course.name} />
-                      </Link>
-                    ))}
-                  </div>
-                </div>
-              </Link>
             </div>
           ))}
         </div>
@@ -96,11 +87,7 @@ const OrgHomePage = async (params: any) => {
         <div className="home_courses flex flex-wrap">
           {courses.map((course: any) => (
             <div className="py-3 px-3" key={course.course_id}>
-              <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}>
+              <CourseThumbnail course={course} orgslug={orgslug} />
-                <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover transition-all hover:scale-102" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(course.org_id, course.course_id, course.thumbnail)})` }}>
-                </div>
-              </Link>
-              <h2 className="font-bold text-lg w-[250px] py-2">{course.name}</h2>
             </div>
           ))}
         </div>

front/components/Objects/Other/CollectionThumbnail.tsx

@@ -0,0 +1,81 @@
+"use client";
+import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
+import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal'
+import { getUriWithOrg } from '@services/config/config'
+import { deleteCollection } from '@services/courses/collections'
+import { getCourseThumbnailMediaDirectory } from '@services/media/media'
+import { revalidateTags } from '@services/utils/ts/requests'
+import { X } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+
+type PropsType = {
+    collection: any,
+    orgslug: string,
+    org_id: string
+}
+
+const removeCollectionPrefix = (collectionid: string) => {
+    return collectionid.replace("collection_", "")
+}
+
+function CollectionThumbnail(props: PropsType) {
+    return (
+        <div className='relative'>
+            <CollectionAdminEditsArea orgslug={props.orgslug} org_id={props.org_id} collection_id={props.collection.collection_id} collection={props.collection} />
+            <Link href={getUriWithOrg(props.orgslug, "/collection/" + removeCollectionPrefix(props.collection.collection_id))}>
+                <div className="space-y-2 inset-0 ring-1 ring-inset my-auto ring-black/10 rounded-xl shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
+                    <div className="flex -space-x-5">
+                        {props.collection.courses.slice(0, 3).map((course: any) => (
+                            <Link key={course.course_id} href={getUriWithOrg(props.orgslug, "/course/" + course.course_id.substring(7))}>
+
+                                <div className="inset-0 rounded-xl shadow-xl bg-cover w-24 h-12 justify-center ring-indigo-800 ring-4" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.collection.org_id, course.course_id, course.thumbnail)})` }}>
+
+                                </div>
+                            </Link>
+                        ))}
+                    </div>
+                    <h1 className="font-bold text-lg justify-center">{props.collection.name}</h1>
+                </div>
+            </Link>
+        </div>
+    )
+}
+
+const CollectionAdminEditsArea = (props: any) => {
+    const router = useRouter();
+
+    const deleteCollectionUI = async (collectionId: number) => {
+        await deleteCollection(collectionId);
+        await revalidateTags(["collections"], props.orgslug);
+        // reload the page
+        router.refresh();
+        router.push(getUriWithOrg(props.orgslug, "/collections"));
+
+        // refresh page (FIX for Next.js BUG)
+        //window.location.reload();
+    }
+
+    return (
+        <AuthenticatedClientElement orgId={props.org_id} checkMethod='roles'>
+            <div className="flex space-x-1 absolute justify-center mx-auto z-20 bottom-4 left-1/2 transform -translate-x-1/2">
+                <ConfirmationModal
+                    confirmationMessage="Are you sure you want to delete this collection?"
+                    confirmationButtonText="Delete Collection"
+                    dialogTitle={"Delete " + props.collection.name + " ?"}
+                    dialogTrigger={
+                        <div
+                            className="hover:cursor-pointer p-1 px-4 bg-red-600 rounded-xl items-center justify-center flex shadow-lg"
+                            rel="noopener noreferrer">
+                            <X size={15} className="text-rose-200 font-bold" />
+                        </div>}
+                    functionToExecute={() => deleteCollectionUI(props.collection_id)}
+                    status='warning'
+                ></ConfirmationModal>
+            </div>
+        </AuthenticatedClientElement>
+    )
+}
+
+export default CollectionThumbnail

front/components/Objects/Other/CourseThumbnail.tsx

@@ -0,0 +1,76 @@
+"use client";
+import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
+import ConfirmationModal from '@components/StyledElements/ConfirmationModal/ConfirmationModal';
+import { getUriWithOrg } from '@services/config/config';
+import { deleteCourseFromBackend } from '@services/courses/courses';
+import { getCourseThumbnailMediaDirectory } from '@services/media/media';
+import { revalidateTags } from '@services/utils/ts/requests';
+import { FileEdit, Pencil, X } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import React from 'react'
+
+type PropsType = {
+    course: any,
+    orgslug: string
+}
+
+// function to remove "course_" from the course_id
+function removeCoursePrefix(course_id: string) {
+    return course_id.replace("course_", "");
+}
+
+function CourseThumbnail(props: PropsType) {
+    const router = useRouter();
+
+    async function deleteCourses(course_id: any) {
+        await deleteCourseFromBackend(course_id);
+        await revalidateTags(['courses'], props.orgslug);
+
+        router.refresh();
+    }
+
+    return (
+        <div className='relative'>
+            <AdminEditsArea course={props.course} orgSlug={props.orgslug} courseId={props.course.course_id} deleteCourses={deleteCourses} />
+            <Link href={getUriWithOrg(props.orgslug, "/course/" + removeCoursePrefix(props.course.course_id))}>
+                <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-xl shadow-xl  w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getCourseThumbnailMediaDirectory(props.course.org_id, props.course.course_id, props.course.thumbnail)})` }}>
+
+                </div>
+            </Link>
+            <h2 className="font-bold text-lg w-[250px] py-2">{props.course.name}</h2>
+        </div>
+    )
+}
+
+const AdminEditsArea = (props: { orgSlug: string, courseId: string, course: any, deleteCourses: any }) => {
+    return (
+        <AuthenticatedClientElement checkMethod='roles' orgId={props.course.org_id}>
+            <div className="flex space-x-1 absolute justify-center mx-auto z-20 bottom-14 left-1/2 transform -translate-x-1/2">
+                <Link href={getUriWithOrg(props.orgSlug, "/course/" + removeCoursePrefix(props.courseId) + "/edit")}>
+                    <div
+                        className=" hover:cursor-pointer p-1 px-4 bg-orange-600 rounded-xl items-center justify-center flex shadow-lg"
+                        rel="noopener noreferrer">
+                        <FileEdit size={14} className="text-orange-200 font-bold" />
+                    </div>
+                </Link>
+                <ConfirmationModal
+                    confirmationButtonText='Delete Course'
+                    confirmationMessage='Are you sure you want to delete this course?'
+                    dialogTitle={'Delete ' + props.course.name + ' ?'}
+                    dialogTrigger={
+                        <div
+                            className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-xl items-center justify-center flex shadow-lg"
+                            rel="noopener noreferrer">
+                            <X size={14} className="text-rose-200 font-bold" />
+                        </div>}
+                    functionToExecute={() => props.deleteCourses(props.courseId)}
+                    status='warning'
+                ></ConfirmationModal>
+
+            </div>
+        </AuthenticatedClientElement>
+    )
+}
+
+export default CourseThumbnail