mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: refactor + home improvements
This commit is contained in:
swve
parent
832394777e
commit
ebb8c64fd7
8 changed files with 187 additions and 115 deletions
|
|
@ -1,15 +1,15 @@
|
|||
import AuthenticatedClientElement from "@components/Security/AuthenticatedClientElement";
|
||||
import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle";
|
||||
import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
|
||||
import { getBackendUrl, getUriWithOrg } from "@services/config/config";
|
||||
import { deleteCollection, getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
|
||||
import { getUriWithOrg } from "@services/config/config";
|
||||
import { getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
|
||||
import { getOrganizationContextInfo } from "@services/organizations/orgs";
|
||||
import { Metadata } from "next";
|
||||
import { cookies } from "next/headers";
|
||||
import Link from "next/link";
|
||||
import { getCourseThumbnailMediaDirectory } from "@services/media/media";
|
||||
import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from "@services/auth/auth";
|
||||
import { getAccessTokenFromRefreshTokenCookie } from "@services/auth/auth";
|
||||
import CollectionThumbnail from "@components/Objects/Other/CollectionThumbnail";
|
||||
import NewCollectionButton from "@components/StyledElements/Buttons/NewCollectionButton";
|
||||
|
||||
type MetadataProps = {
|
||||
params: { orgslug: string, courseid: string };
|
||||
|
|
@ -19,7 +19,6 @@ type MetadataProps = {
|
|||
export async function generateMetadata(
|
||||
{ params }: MetadataProps,
|
||||
): Promise<Metadata> {
|
||||
const cookieStore = cookies();
|
||||
// Get Org context information
|
||||
const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });
|
||||
|
||||
|
|
@ -45,7 +44,6 @@ export async function generateMetadata(
|
|||
};
|
||||
}
|
||||
|
||||
|
||||
const CollectionsPage = async (params: any) => {
|
||||
const cookieStore = cookies();
|
||||
const access_token = await getAccessTokenFromRefreshTokenCookie(cookieStore)
|
||||
|
|
@ -60,16 +58,37 @@ const CollectionsPage = async (params: any) => {
|
|||
<TypeOfContentTitle title="Collections" type="col" />
|
||||
<AuthenticatedClientElement checkMethod='roles' orgId={org_id}>
|
||||
<Link className="flex justify-center" href={getUriWithOrg(orgslug, "/collections/new")}>
|
||||
<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 Collection + </button>
|
||||
<NewCollectionButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="home_collections flex flex-wrap">
|
||||
{collections.map((collection: any) => (
|
||||
<div className="flex flex-col py-3 px-3" key={collection.collection_id}>
|
||||
<div className="flex flex-col py-1 px-3" key={collection.collection_id}>
|
||||
<CollectionThumbnail collection={collection} orgslug={orgslug} org_id={org_id} />
|
||||
</div>
|
||||
))}
|
||||
{collections.length == 0 &&
|
||||
<div className="flex mx-auto h-[400px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-5">
|
||||
<div className='mx-auto'>
|
||||
<svg width="120" height="120" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.51" x="10" y="10" width="275" height="275" rx="75" stroke="#4B5564" stroke-opacity="0.15" stroke-width="20" />
|
||||
<path d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z" fill="#4B5564" fill-opacity="0.08" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-3xl font-bold text-gray-600">No collections yet</h1>
|
||||
<p className="text-lg text-gray-400">Create a collection to group courses together</p>
|
||||
</div>
|
||||
<AuthenticatedClientElement checkMethod='roles' orgId={org_id}>
|
||||
<Link href={getUriWithOrg(orgslug, "/collections/new")}>
|
||||
<NewCollectionButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,23 +1,13 @@
|
|||
'use client';
|
||||
import CreateCourseModal from '@components/Objects/Modals/Course/Create/CreateCourse';
|
||||
import Modal from '@components/StyledElements/Modal/Modal';
|
||||
import { 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';
|
||||
import { AuthContext } from '@components/Security/AuthProvider';
|
||||
import { revalidateTags } from '@services/utils/ts/requests';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper';
|
||||
import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle';
|
||||
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
|
||||
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';
|
||||
import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton';
|
||||
|
||||
interface CourseProps {
|
||||
orgslug: string;
|
||||
|
|
@ -25,23 +15,12 @@ interface CourseProps {
|
|||
org_id: string;
|
||||
}
|
||||
|
||||
// function to remove "course_" from the course_id
|
||||
function removeCoursePrefix(course_id: string) {
|
||||
return course_id.replace("course_", "");
|
||||
}
|
||||
|
||||
function Courses(props: CourseProps) {
|
||||
const orgslug = props.orgslug;
|
||||
const courses = props.courses;
|
||||
const [newCourseModal, setNewCourseModal] = React.useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
async function deleteCourses(course_id: any) {
|
||||
await deleteCourseFromBackend(course_id);
|
||||
await revalidateTags(['courses'], orgslug);
|
||||
|
||||
router.refresh();
|
||||
}
|
||||
const searchParams = useSearchParams();
|
||||
const isCreatingCourse = searchParams.get('new') ? true : false;
|
||||
const [newCourseModal, setNewCourseModal] = React.useState(isCreatingCourse);
|
||||
|
||||
async function closeNewCourseModal() {
|
||||
setNewCourseModal(false);
|
||||
|
|
@ -65,8 +44,10 @@ function Courses(props: CourseProps) {
|
|||
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>
|
||||
}
|
||||
|
||||
<button>
|
||||
<NewCourseButton />
|
||||
</button>}
|
||||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
|
|
@ -79,39 +60,48 @@ function Courses(props: CourseProps) {
|
|||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
{courses.length == 0 &&
|
||||
<div className="flex mx-auto h-[400px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-5">
|
||||
<div className='mx-auto'>
|
||||
<svg width="120" height="120" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.51" x="10" y="10" width="275" height="275" rx="75" stroke="#4B5564" stroke-opacity="0.15" stroke-width="20" />
|
||||
<path d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z" fill="#4B5564" fill-opacity="0.08" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-3xl font-bold text-gray-600">No courses yet</h1>
|
||||
<p className="text-lg text-gray-400">Create a course to add content</p>
|
||||
</div>
|
||||
<AuthenticatedClientElement checkMethod='roles' orgId={props.org_id}>
|
||||
<Modal
|
||||
isDialogOpen={newCourseModal}
|
||||
onOpenChange={setNewCourseModal}
|
||||
minHeight="md"
|
||||
dialogContent={<CreateCourseModal
|
||||
closeModal={closeNewCourseModal}
|
||||
orgslug={orgslug}
|
||||
></CreateCourseModal>}
|
||||
dialogTitle="Create Course"
|
||||
dialogDescription="Create a new course"
|
||||
dialogTrigger={
|
||||
<button>
|
||||
<NewCourseButton />
|
||||
</button>}
|
||||
/>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
</GeneralWrapperStyled>
|
||||
</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 relative top-8 z-20 left-2">
|
||||
<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-md"
|
||||
rel="noopener noreferrer">
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
</div>}
|
||||
functionToExecute={() => props.deleteCourses(props.courseId)}
|
||||
status='warning'
|
||||
></ConfirmationModal>
|
||||
<Link href={getUriWithOrg(props.orgSlug, "/course/" + removeCoursePrefix(props.courseId) + "/edit")}>
|
||||
<div
|
||||
className=" hover:cursor-pointer p-1 px-4 bg-orange-600 rounded-md"
|
||||
rel="noopener noreferrer">
|
||||
<Pencil size={15} className="text-orange-200 font-bold" />
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</AuthenticatedClientElement>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default Courses
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
export const dynamic = 'force-dynamic';
|
||||
import { Metadata, ResolvingMetadata } from 'next';
|
||||
import { getBackendUrl, getUriWithOrg } from "@services/config/config";
|
||||
import { getCourse, getOrgCourses, getOrgCoursesWithAuthHeader } from "@services/courses/courses";
|
||||
|
||||
import { Metadata } from 'next';
|
||||
import { getUriWithOrg } from "@services/config/config";
|
||||
import { getOrgCoursesWithAuthHeader } from "@services/courses/courses";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { getOrgCollections, getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
|
||||
import { getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
|
||||
import { getOrganizationContextInfo } from '@services/organizations/orgs';
|
||||
|
||||
import { cookies } from 'next/headers';
|
||||
import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper';
|
||||
import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle';
|
||||
import { getCourseThumbnailMediaDirectory } from '@services/media/media';
|
||||
import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from '@services/auth/auth';
|
||||
import { getAccessTokenFromRefreshTokenCookie } from '@services/auth/auth';
|
||||
import CourseThumbnail from '@components/Objects/Other/CourseThumbnail';
|
||||
import CollectionThumbnail from '@components/Objects/Other/CollectionThumbnail';
|
||||
import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement';
|
||||
import { Plus, PlusCircle } from 'lucide-react';
|
||||
import NewCourseButton from '@components/StyledElements/Buttons/NewCourseButton';
|
||||
import NewCollectionButton from '@components/StyledElements/Buttons/NewCollectionButton';
|
||||
|
||||
type MetadataProps = {
|
||||
params: { orgslug: string };
|
||||
|
|
@ -56,40 +56,85 @@ const OrgHomePage = async (params: any) => {
|
|||
const access_token = await getAccessTokenFromRefreshTokenCookie(cookieStore)
|
||||
const courses = await getOrgCoursesWithAuthHeader(orgslug, { revalidate: 0, tags: ['courses'] }, access_token ? access_token : null);
|
||||
const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
|
||||
const org_id = org.org_id;
|
||||
const collections = await getOrgCollectionsWithAuthHeader(org.org_id, access_token ? access_token : null, { revalidate: 0, tags: ['courses'] });
|
||||
|
||||
|
||||
// function to remove "course_" from the course_id
|
||||
function removeCoursePrefix(course_id: string) {
|
||||
return course_id.replace("course_", "");
|
||||
}
|
||||
|
||||
function removeCollectionPrefix(collection_id: string) {
|
||||
return collection_id.replace("collection_", "");
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<GeneralWrapperStyled>
|
||||
{/* Collections */}
|
||||
<TypeOfContentTitle title="Collections" type="col" />
|
||||
<div className='flex items-center '>
|
||||
<div className='flex grow'>
|
||||
<TypeOfContentTitle title="Collections" type="col" />
|
||||
</div>
|
||||
<AuthenticatedClientElement checkMethod='roles' orgId={org_id}>
|
||||
<Link href={getUriWithOrg(orgslug, "/collections/new")}>
|
||||
<NewCollectionButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="home_collections flex flex-wrap">
|
||||
{collections.map((collection: any) => (
|
||||
<div className="flex flex-col py-3 px-3" key={collection.collection_id}>
|
||||
<CollectionThumbnail collection={collection} orgslug={orgslug} org_id={org.org_id} />
|
||||
</div>
|
||||
))}
|
||||
{collections.length == 0 &&
|
||||
<div className="flex mx-auto h-[100px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-3">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className='mx-auto'>
|
||||
<svg width="50" height="50" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.51" x="10" y="10" width="275" height="275" rx="75" stroke="#4B5564" stroke-opacity="0.15" stroke-width="20" />
|
||||
<path d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z" fill="#4B5564" fill-opacity="0.08" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-xl font-bold text-gray-600">No collections yet</h1>
|
||||
<p className="text-md text-gray-400">Create a collection to group courses together</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* Courses */}
|
||||
<div className='h-5'></div>
|
||||
<TypeOfContentTitle title="Courses" type="cou" />
|
||||
<div className='flex items-center '>
|
||||
<div className='flex grow'>
|
||||
<TypeOfContentTitle title="Courses" type="cou" />
|
||||
</div>
|
||||
<AuthenticatedClientElement checkMethod='roles' orgId={org_id}>
|
||||
<Link href={getUriWithOrg(orgslug, "/courses?new=true")}>
|
||||
<NewCourseButton />
|
||||
</Link>
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
<div className="home_courses flex flex-wrap">
|
||||
{courses.map((course: any) => (
|
||||
<div className="py-3 px-3" key={course.course_id}>
|
||||
<CourseThumbnail course={course} orgslug={orgslug} />
|
||||
</div>
|
||||
))}
|
||||
{courses.length == 0 &&
|
||||
<div className="flex mx-auto h-[300px]">
|
||||
<div className="flex flex-col justify-center text-center items-center space-y-3">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className='mx-auto'>
|
||||
<svg width="50" height="50" viewBox="0 0 295 295" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.51" x="10" y="10" width="275" height="275" rx="75" stroke="#4B5564" stroke-opacity="0.15" stroke-width="20" />
|
||||
<path d="M135.8 200.8V130L122.2 114.6L135.8 110.4V102.8L122.2 87.4L159.8 76V200.8L174.6 218H121L135.8 200.8Z" fill="#4B5564" fill-opacity="0.08" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="space-y-0">
|
||||
<h1 className="text-xl font-bold text-gray-600">No courses yet</h1>
|
||||
<p className="text-md text-gray-400">Create a course to add content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue