rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: activitiy issues

Browse source
This commit is contained in:
swve 2023-12-14 00:10:15 +01:00
parent 669270441b
commit 53f40f3f34
20 changed files with 138 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

0
apps/web/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx → apps/web/app/editor/course/[courseid]/activity/[activityuuid]/edit/loading.tsx
View file

18
apps/web/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx → apps/web/app/editor/course/[courseid]/activity/[activityuuid]/edit/page.tsx
View file

@ -6,7 +6,7 @@ import { cookies } from "next/headers";
import { Metadata } from "next";
import { getActivityWithAuthHeader } from "@services/courses/activities";
import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshTokenServer } from "@services/auth/auth";
import { getOrganizationContextInfo } from "@services/organizations/orgs";
import { getOrganizationContextInfo, getOrganizationContextInfoWithId } from "@services/organizations/orgs";
type MetadataProps = {
params: { orgslug: string, courseid: string, activityid: string };
@ -22,27 +22,25 @@ export async function generateMetadata(
const course_meta = await getCourseMetadataWithAuthHeader(params.courseid, { revalidate: 0, tags: ['courses'] }, access_token ? access_token : null)
return {
title: `Edit - ${course_meta.course.name} Activity`,
description: course_meta.course.mini_description,
title: `Edit - ${course_meta.name} Activity`,
description: course_meta.mini_description,
};
}
const EditActivity = async (params: any) => {
const cookieStore = cookies();
const access_token = await getAccessTokenFromRefreshTokenCookie(cookieStore)
const activityid = params.params.activityid;
const activityuuid = params.params.activityuuid;
const courseid = params.params.courseid;
const orgslug = params.params.orgslug;
const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
const courseInfo = await getCourseMetadataWithAuthHeader(courseid, { revalidate: 0, tags: ['courses'] }, access_token ? access_token : null)
const activity = await getActivityWithAuthHeader(activityid, { revalidate: 0, tags: ['activities'] }, access_token ? access_token : null)
const activity = await getActivityWithAuthHeader(activityuuid, { revalidate: 0, tags: ['activities'] }, access_token ? access_token : null)
const org = await getOrganizationContextInfoWithId(courseInfo.org_id, { revalidate: 1800, tags: ['organizations'] });
console.log('courseInfo', courseInfo )
return (
<div>
<AuthProvider>
<EditorWrapper org={org} orgslug={orgslug} course={courseInfo} activity={activity} content={activity.content}></EditorWrapper>
<EditorWrapper org={org} course={courseInfo} activity={activity} content={activity.content}></EditorWrapper>
</AuthProvider>
</div>
);

24
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
View file

@ -15,7 +15,7 @@ import { useOrg } from "@components/Contexts/OrgContext";
interface ActivityClientProps {
activityid: string;
courseid: string;
courseuuid: string;
orgslug: string;
activity: any;
course: any;
@ -24,7 +24,7 @@ interface ActivityClientProps {
function ActivityClient(props: ActivityClientProps) {
const activityid = props.activityid;
const courseid = props.courseid;
const courseuuid = props.courseuuid;
const orgslug = props.orgslug;
const activity = props.activity;
const course = props.course;
@ -35,7 +35,7 @@ function ActivityClient(props: ActivityClientProps) {
course.chapters.forEach((chapter: any) => {
if (chapter.id === chapterId) {
chapterName = chapter.name;
}
}
});
return chapterName;
}
@ -48,16 +48,16 @@ function ActivityClient(props: ActivityClientProps) {
<div className="space-y-4 pt-4">
<div className="flex space-x-6">
<div className="flex">
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}`}>
<img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, course.course.course_uuid, course.course.thumbnail_image)}`} alt="" />
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseuuid}`}>
<img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)}`} alt="" />
</Link>
</div>
<div className="flex flex-col -space-y-1">
<p className="font-bold text-gray-700 text-md">Course </p>
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.course.name}</h1>
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.name}</h1>
</div>
</div>
<ActivityIndicators course_uuid={courseid} current_activity={activityid} orgslug={orgslug} course={course} />
<ActivityIndicators course_uuid={courseuuid} current_activity={activityid} orgslug={orgslug} course={course} />
<div className="flex justify-between items-center">
<div className="flex flex-col -space-y-1">
@ -66,19 +66,19 @@ function ActivityClient(props: ActivityClientProps) {
</div>
<div className="flex space-x-2">
<AuthenticatedClientElement checkMethod="authentication">
<MarkStatus activityid={activityid} course={course} orgslug={orgslug} courseid={courseid} />
<MarkStatus activityid={activityid} course={course} orgslug={orgslug} courseid={courseuuid} />
</AuthenticatedClientElement>
</div>
</div>
{activity ? (
<div className={`p-7 pt-4 drop-shadow-sm rounded-lg ${activity.type == 'dynamic' ? 'bg-white' : 'bg-zinc-950'}`}>
<div className={`p-7 pt-4 drop-shadow-sm rounded-lg ${activity.activity_type == 'TYPE_DYNAMIC' ? 'bg-white' : 'bg-zinc-950'}`}>
<div>
{activity.type == "dynamic" && <Canva content={activity.content} activity={activity} />}
{activity.activity_type == "TYPE_DYNAMIC" && <Canva content={activity.content} activity={activity} />}
{/* todo : use apis & streams instead of this */}
{activity.type == "video" && <VideoActivity course={course} activity={activity} />}
{activity.type == "documentpdf" && <DocumentPdfActivity course={course} activity={activity} />}
{activity.activity_type == "TYPE_VIDEO" && <VideoActivity course={course} activity={activity} />}
{activity.activity_type == "TYPE_DOCUMENT" && <DocumentPdfActivity course={course} activity={activity} />}
</div>
</div>
) : (<div></div>)}

24
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx
View file

@ -8,7 +8,7 @@ import { getAccessTokenFromRefreshTokenCookie, getNewAccessTokenUsingRefreshToke
type MetadataProps = {
params: { orgslug: string, courseid: string, activityid: string };
params: { orgslug: string, courseuuid: string, activityid: string };
searchParams: { [key: string]: string | string[] | undefined };
};
@ -20,14 +20,14 @@ export async function generateMetadata(
// Get Org context information
const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });
const course_meta = await getCourseMetadataWithAuthHeader(params.courseid, { revalidate: 0, tags: ['courses'] }, access_token ? access_token : null)
const course_meta = await getCourseMetadataWithAuthHeader(params.courseuuid, { revalidate: 0, tags: ['courses'] }, access_token ? access_token : null)
const activity = await getActivityWithAuthHeader(params.activityid, { revalidate: 0, tags: ['activities'] }, access_token ? access_token : null)
// SEO
return {
title: activity.name + ` — ${course_meta.course.name} Course`,
description: course_meta.course.mini_description,
keywords: course_meta.course.learnings,
title: activity.name + ` — ${course_meta.name} Course`,
description: course_meta.description,
keywords: course_meta.learnings,
robots: {
index: true,
follow: true,
@ -39,11 +39,11 @@ export async function generateMetadata(
}
},
openGraph: {
title: activity.name + ` — ${course_meta.course.name} Course`,
description: course_meta.course.mini_description,
title: activity.name + ` — ${course_meta.name} Course`,
description: course_meta.description,
type: activity.type === 'video' ? 'video.other' : 'article',
publishedTime: course_meta.course.creationDate,
tags: course_meta.course.learnings,
publishedTime: course_meta.creation_date,
tags: course_meta.learnings,
},
};
}
@ -52,16 +52,16 @@ const ActivityPage = async (params: any) => {
const cookieStore = cookies();
const access_token = await getAccessTokenFromRefreshTokenCookie(cookieStore)
const activityid = params.params.activityid;
const courseid = params.params.courseid;
const courseuuid = params.params.courseuuid;
const orgslug = params.params.orgslug;
const course_meta = await getCourseMetadataWithAuthHeader(courseid, { revalidate: 0, tags: ['courses'] }, access_token ? access_token : null)
const course_meta = await getCourseMetadataWithAuthHeader(courseuuid, { revalidate: 0, tags: ['courses'] }, access_token ? access_token : null)
const activity = await getActivityWithAuthHeader(activityid, { revalidate: 0, tags: ['activities'] }, access_token ? access_token : null)
return (
<>
<ActivityClient
activityid={activityid}
courseid={courseid}
courseuuid={courseuuid}
orgslug={orgslug}
activity={activity}
course={course_meta}

2
apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx
View file

@ -22,7 +22,7 @@ export type CourseOverviewParams = {
subpage: string
}
export const CourseStructureContext = createContext({}) as any;
function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {

6
apps/web/components/Dashboard/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
View file

@ -27,7 +27,7 @@ function ActivityElement(props: ActivitiyElementProps) {
const [selectedActivity, setSelectedActivity] = React.useState<string | undefined>(undefined);
async function deleteActivityUI() {
await deleteActivity(props.activity.id);
await deleteActivity(props.activity.activity_uuid);
mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`);
await revalidateTags(['courses'], props.orgslug);
router.refresh();
@ -80,14 +80,14 @@ function ActivityElement(props: ActivitiyElementProps) {
<div className="flex flex-row space-x-2">
{props.activity.activity_type === "TYPE_DYNAMIC" && <>
<Link
href={''}
href={getUriWithOrg(props.orgslug, "") + `/course/${props.course_uuid.replace("course_", "")}/activity/${props.activity.activity_uuid.replace("activity_", "")}/edit`}
className=" hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md items-center"
rel="noopener noreferrer">
<div className="text-sky-100 font-bold text-xs" >Edit </div>
</Link>
</>}
<Link
href={''}
href={getUriWithOrg(props.orgslug, "") + `/course/${props.course_uuid.replace("course_", "")}/activity/${props.activity.activity_uuid.replace("activity_", "")}`}
className=" hover:cursor-pointer p-1 px-3 bg-gray-200 rounded-md"
rel="noopener noreferrer">
<Eye strokeWidth={2} size={15} className="text-gray-600" />

1
apps/web/components/Dashboard/Course/EditCourseStructure/EditCourseStructure.tsx
View file

@ -8,7 +8,6 @@ import ChapterElement from './DraggableElements/ChapterElement';
import PageLoading from '@components/Objects/Loaders/PageLoading';
import { createChapter, updateCourseOrderStructure } from '@services/courses/chapters';
import { useRouter } from 'next/navigation';
import { CourseStructureContext } from 'app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page';
import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext';
import { Hexagon } from 'lucide-react';
import Modal from '@components/StyledElements/Modal/Modal';

8
apps/web/components/Objects/Activities/DocumentPdf/DocumentPdf.tsx
View file

@ -1,14 +1,20 @@
import { useOrg } from "@components/Contexts/OrgContext";
import { getBackendUrl } from "@services/config/config";
import { getActivityMediaDirectory } from "@services/media/media";
import React from "react";
function DocumentPdfActivity({ activity, course }: { activity: any; course: any }) {
const org = useOrg() as any;
React.useEffect(() => {
console.log(activity);
}, [activity, org]);
return (
<div className="m-8 bg-zinc-900 rounded-md mt-14">
<iframe
className="rounded-lg w-full h-[900px]"
src={getActivityMediaDirectory(activity.org_id, activity.course_uuid, activity.activity_id, activity.content.documentpdf.filename, 'documentpdf')}
src={getActivityMediaDirectory(org?.org_uuid, course?.course_uuid, activity.activity_uuid, activity.content.filename, 'documentpdf')}
/>
</div>
);

61
apps/web/components/Objects/Activities/Video/Video.tsx
View file

@ -3,10 +3,11 @@ import React from "react";
import styled from "styled-components";
import YouTube from 'react-youtube';
import { getActivityMediaDirectory } from "@services/media/media";
import { useOrg } from "@components/Contexts/OrgContext";
function VideoActivity({ activity, course }: { activity: any; course: any }) {
const org = useOrg() as any;
const [videoId, setVideoId] = React.useState('');
const [videoType, setVideoType] = React.useState('');
function getYouTubeEmbed(url: any) {
// Extract video ID from the YouTube URL
@ -24,42 +25,38 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
React.useEffect(() => {
if (activity.content.video) {
setVideoType('video');
}
if (activity.content.external_video) {
setVideoType('external_video');
setVideoId(getYouTubeEmbed(activity.content.external_video.uri).videoId);
}
}, [activity]);
console.log(activity);
}, [activity, org]);
return (
<div>
{videoType === 'video' && (
<div className="m-8 bg-zinc-900 rounded-md mt-14">
<video className="rounded-lg w-full h-[500px]" controls
src={getActivityMediaDirectory(activity.org_id, activity.course_uuid, activity.activity_id, activity.content.video.filename, 'video')}
></video>
{activity &&
<>
{activity.activity_sub_type === 'SUBTYPE_VIDEO_HOSTED' && (
<div className="m-8 bg-zinc-900 rounded-md mt-14">
<video className="rounded-lg w-full h-[500px]" controls
src={getActivityMediaDirectory(org?.org_uuid, course?.course_uuid, activity.activity_uuid, activity.content?.filename, 'video')}
></video>
</div>
)}
{videoType === 'external_video' && (
<div>
<YouTube
className="rounded-md overflow-hidden m-8 bg-zinc-900 mt-14"
opts={
{
width: '1300',
height: '500',
playerVars: {
autoplay: 0,
},
</div>
)}
{activity.activity_sub_type === 'SUBTYPE_VIDEO_YOUTUBE' && (
<div>
<YouTube
className="rounded-md overflow-hidden m-8 bg-zinc-900 mt-14"
opts={
{
width: '1300',
height: '500',
playerVars: {
autoplay: 0,
},
}
}
videoId={videoId} />
</div>
)}
}
}
videoId={videoId} />
</div>
)}</>}
</div>
);

15
apps/web/components/Objects/Editor/Editor.tsx
View file

@ -43,7 +43,6 @@ interface Editor {
ydoc: any;
provider: any;
activity: any;
orgslug: string
course: any;
org: any;
setContent: (content: string) => void;
@ -52,10 +51,10 @@ interface Editor {
function Editor(props: Editor) {
const auth: any = React.useContext(AuthContext);
// remove course_ from course_uuid
const course_uuid = props.course.course.course_uuid.substring(7);
const course_uuid = props.course.course_uuid.substring(7);
// remove activity_ from activity_id
const activity_id = props.activity.activity_id.substring(9);
// remove activity_ from activity_uuid
const activity_uuid = props.activity.activity_uuid.substring(9);
// Code Block Languages for Lowlight
lowlight.register('html', html)
@ -147,11 +146,11 @@ function Editor(props: Editor) {
<EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" />
</Link>
<Link target="_blank" href={`/course/${course_uuid}/edit`}>
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.org?.org_uuid, props.course.course.course_uuid, props.course.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.org?.org_uuid, props.course.course_uuid, props.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
</Link>
<EditorInfoDocName>
{" "}
<b>{props.course.course.name}</b> <SlashIcon /> {props.activity.name}{" "}
<b>{props.course.name}</b> <SlashIcon /> {props.activity.name}{" "}
</EditorInfoDocName>
</EditorInfoWrapper>
@ -162,13 +161,13 @@ function Editor(props: Editor) {
<EditorUsersSection>
<EditorUserProfileWrapper>
{!auth.isAuthenticated && <span>Loading</span>}
{auth.isAuthenticated && <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />}
{auth.isAuthenticated && <Avvvatars value={auth.userInfo.user_uuid} style="shape" />}
</EditorUserProfileWrapper>
<DividerVerticalIcon style={{ marginTop: "auto", marginBottom: "auto", color: "grey", opacity: '0.5' }} />
<EditorLeftOptionsSection className="space-x-2 pl-2 pr-3">
<div className="bg-sky-600 hover:bg-sky-700 transition-all ease-linear px-3 py-2 font-black text-sm shadow text-teal-100 rounded-lg hover:cursor-pointer" onClick={() => props.setContent(editor.getJSON())}> Save </div>
<ToolTip content="Preview">
<Link target="_blank" href={`/course/${course_uuid}/activity/${activity_id}`}>
<Link target="_blank" href={`/course/${course_uuid}/activity/${activity_uuid}`}>
<div className="flex bg-neutral-600 hover:bg-neutral-700 transition-all ease-linear h-9 px-3 py-2 font-black justify-center items-center text-sm shadow text-neutral-100 rounded-lg hover:cursor-pointer">
<Eye className="mx-auto items-center" size={15} />
</div>

6
apps/web/components/Objects/Editor/EditorWrapper.tsx
View file

@ -10,7 +10,6 @@ interface EditorWrapperProps {
content: string;
activity: any;
course: any
orgslug: string;
org: any;
}
@ -27,6 +26,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
// setProviderState(provider);
setIsLoading(false);
}
@ -35,7 +35,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
activity.content = content;
toast.promise(
updateActivity(activity, activity.activity_id),
updateActivity(activity, activity.activity_uuid),
{
loading: 'Saving...',
success: <b>Activity saved!</b>,
@ -50,7 +50,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
} else {
return <>
<Toast></Toast>
<Editor org={props.org} orgslug={props.orgslug} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
<Editor org={props.org} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
</>
}

4
apps/web/services/courses/activities.ts
View file

@ -57,8 +57,8 @@ export async function deleteActivity(activity_id: any) {
return res;
}
export async function getActivityWithAuthHeader(activity_id: any, next: any, access_token: string) {
const result = await fetch(`${getAPIUrl()}activities/activity_${activity_id}`, RequestBodyWithAuthHeader("GET", null, next, access_token));
export async function getActivityWithAuthHeader(activity_uuid: any, next: any, access_token: string) {
const result = await fetch(`${getAPIUrl()}activities/activity_${activity_uuid}`, RequestBodyWithAuthHeader("GET", null, next, access_token));
const res = await result.json();
return res;
}

8
apps/web/services/organizations/orgs.ts
View file

@ -24,10 +24,16 @@ export async function getOrganizationContextInfo(org_slug: any, next: any) {
return res;
}
export async function getOrganizationContextInfoWithId(org_id: any, next: any) {
const result = await fetch(`${getAPIUrl()}orgs/${org_id}`, RequestBody("GET", null, next));
const res = await errorHandling(result);
return res;
}
export async function getOrganizationContextInfoWithoutCredentials(org_slug: any, next: any) {
let HeadersConfig = new Headers({ "Content-Type": "application/json" });
let options: any = {
method: 'GET',
method: "GET",
headers: HeadersConfig,
redirect: "follow",
// Next.js