mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: perf improvements and bug fixes
This commit is contained in:
swve
parent
93d0e2a104
commit
59bae82ee7
10 changed files with 200 additions and 112 deletions
|
|
@ -24,7 +24,7 @@ export async function generateMetadata(props: MetadataProps): Promise<Metadata>
|
|||
// Get Org context information
|
||||
const course_meta = await getCourseMetadata(
|
||||
params.courseid,
|
||||
{ revalidate: 0, tags: ['courses'] },
|
||||
{ revalidate: 60, tags: ['courses'] },
|
||||
access_token ? access_token : null
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ import { AssignmentsTaskProvider } from '@components/Contexts/Assignments/Assign
|
|||
import AssignmentSubmissionProvider, { useAssignmentSubmission } from '@components/Contexts/Assignments/AssignmentSubmissionContext'
|
||||
import toast from 'react-hot-toast'
|
||||
import { mutate } from 'swr'
|
||||
import useSWR from 'swr'
|
||||
import { swrFetcher } from '@services/utils/ts/requests'
|
||||
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
import PaidCourseActivityDisclaimer from '@components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer'
|
||||
|
|
@ -32,6 +34,7 @@ import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/Ge
|
|||
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
|
||||
import { revalidateTags } from '@services/utils/ts/requests'
|
||||
import UserAvatar from '@components/Objects/UserAvatar'
|
||||
import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
|
||||
|
||||
// Lazy load heavy components
|
||||
const Canva = lazy(() => import('@components/Objects/Activities/DynamicCanva/DynamicCanva'))
|
||||
|
|
@ -94,8 +97,18 @@ function useActivityPosition(course: any, activityId: string) {
|
|||
}
|
||||
|
||||
function ActivityActions({ activity, activityid, course, orgslug, assignment, showNavigation = true }: ActivityActionsProps) {
|
||||
const session = useLHSession() as any;
|
||||
|
||||
const { contributorStatus } = useContributorStatus(course.course_uuid);
|
||||
const org = useOrg() as any;
|
||||
const session = useLHSession() as any;
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
|
||||
// Add SWR for trail data
|
||||
const { data: trailData } = useSWR(
|
||||
`${getAPIUrl()}trail/org/${org?.id}/trail`,
|
||||
(url) => swrFetcher(url, access_token)
|
||||
);
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex space-x-2 items-center">
|
||||
|
|
@ -108,6 +121,7 @@ function ActivityActions({ activity, activityid, course, orgslug, assignment, sh
|
|||
activityid={activityid}
|
||||
course={course}
|
||||
orgslug={orgslug}
|
||||
trailData={trailData}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -171,6 +185,12 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
const { contributorStatus } = useContributorStatus(courseuuid);
|
||||
const router = useRouter();
|
||||
|
||||
// Add SWR for trail data
|
||||
const { data: trailData, error: error } = useSWR(
|
||||
`${getAPIUrl()}trail/org/${org?.id}/trail`,
|
||||
(url) => swrFetcher(url, access_token)
|
||||
)
|
||||
|
||||
// Memoize activity position calculation
|
||||
const { allActivities, currentIndex } = useActivityPosition(course, activityid);
|
||||
|
||||
|
|
@ -331,17 +351,17 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={2 * Math.PI * 14}
|
||||
strokeDashoffset={2 * Math.PI * 14 * (1 - (course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1))}
|
||||
strokeDashoffset={2 * Math.PI * 14 * (1 - (trailData?.runs?.find((run: any) => run.course_uuid === course.course_uuid)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1))}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-xs font-bold text-gray-800">
|
||||
{Math.round(((course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1)) * 100)}%
|
||||
{Math.round(((trailData?.runs?.find((run: any) => run.course_uuid === course.course_uuid)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1)) * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-600">
|
||||
{course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0} of {course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 0}
|
||||
{trailData?.runs?.find((run: any) => run.course_uuid === course.course_uuid)?.steps?.filter((step: any) => step.complete)?.length || 0} of {course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 0}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
|
|
@ -386,6 +406,7 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
course={course}
|
||||
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
|
||||
orgslug={orgslug}
|
||||
trailData={trailData}
|
||||
/>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
|
|
@ -542,6 +563,7 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
orgslug={orgslug}
|
||||
course={course}
|
||||
enableNavigation={true}
|
||||
trailData={trailData}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between items-center w-full">
|
||||
|
|
@ -639,6 +661,7 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
course={course}
|
||||
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
|
||||
orgslug={orgslug}
|
||||
trailData={trailData}
|
||||
/>
|
||||
{contributorStatus === 'ACTIVE' && activity.activity_type == 'TYPE_DYNAMIC' && (
|
||||
<Link
|
||||
|
|
@ -746,15 +769,18 @@ export function MarkStatus(props: {
|
|||
activity: any
|
||||
activityid: string
|
||||
course: any
|
||||
orgslug: string
|
||||
orgslug: string,
|
||||
trailData: any
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const session = useLHSession() as any;
|
||||
const org = useOrg() as any;
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const [showMarkedTooltip, setShowMarkedTooltip] = React.useState(false);
|
||||
const [showUnmarkedTooltip, setShowUnmarkedTooltip] = React.useState(false);
|
||||
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const markedTooltipCount = localStorage.getItem('activity_marked_tooltip_count');
|
||||
|
|
@ -799,8 +825,8 @@ export function MarkStatus(props: {
|
|||
);
|
||||
|
||||
const areAllActivitiesCompleted = () => {
|
||||
const run = props.course.trail.runs.find(
|
||||
(run: any) => run.course_id == props.course.id
|
||||
const run = props.trailData?.runs?.find(
|
||||
(run: any) => run.course_uuid === props.course.course_uuid
|
||||
);
|
||||
if (!run) return false;
|
||||
|
||||
|
|
@ -811,7 +837,7 @@ export function MarkStatus(props: {
|
|||
chapter.activities.forEach((activity: any) => {
|
||||
totalActivities++;
|
||||
const isCompleted = run.steps.find(
|
||||
(step: any) => step.activity_id === activity.id && step.complete === true
|
||||
(step: any) => step.activity_uuid === activity.activity_uuid && step.complete === true
|
||||
);
|
||||
if (isCompleted) {
|
||||
completedActivities++;
|
||||
|
|
@ -826,23 +852,19 @@ export function MarkStatus(props: {
|
|||
try {
|
||||
const willCompleteAll = areAllActivitiesCompleted();
|
||||
setIsLoading(true);
|
||||
// refresh the page after marking the activity as complete
|
||||
await revalidateTags(['courses'], props.orgslug);
|
||||
router.refresh();
|
||||
|
||||
await markActivityAsComplete(
|
||||
props.orgslug,
|
||||
props.course.course_uuid,
|
||||
props.activity.activity_uuid,
|
||||
session.data?.tokens?.access_token
|
||||
);
|
||||
|
||||
await mutate(`${getAPIUrl()}courses/${props.course.course_uuid}/meta`);
|
||||
|
||||
await mutate(`${getAPIUrl()}trail/org/${org?.id}/trail`);
|
||||
|
||||
if (willCompleteAll) {
|
||||
const cleanCourseUuid = props.course.course_uuid.replace('course_', '');
|
||||
router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/end`);
|
||||
} else {
|
||||
router.refresh();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error marking activity as complete:', error);
|
||||
|
|
@ -855,15 +877,15 @@ export function MarkStatus(props: {
|
|||
async function unmarkActivityAsCompleteFront() {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
await unmarkActivityAsComplete(
|
||||
props.orgslug,
|
||||
props.course.course_uuid,
|
||||
props.activity.activity_uuid,
|
||||
session.data?.tokens?.access_token
|
||||
);
|
||||
await revalidateTags(['courses'], props.orgslug);
|
||||
await mutate(`${getAPIUrl()}courses/${props.course.course_uuid}/meta`);
|
||||
router.refresh();
|
||||
|
||||
await mutate(`${getAPIUrl()}trail/org/${org?.id}/trail`);
|
||||
} catch (error) {
|
||||
toast.error('Failed to unmark activity as complete');
|
||||
} finally {
|
||||
|
|
@ -872,14 +894,28 @@ export function MarkStatus(props: {
|
|||
}
|
||||
|
||||
const isActivityCompleted = () => {
|
||||
let run = props.course.trail.runs.find(
|
||||
(run: any) => run.course_id == props.course.id
|
||||
)
|
||||
// Clean up course UUID by removing 'course_' prefix if it exists
|
||||
const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
|
||||
|
||||
let run = props.trailData?.runs?.find(
|
||||
(run: any) => {
|
||||
const cleanRunCourseUuid = run.course?.course_uuid?.replace('course_', '');
|
||||
return cleanRunCourseUuid === cleanCourseUuid;
|
||||
}
|
||||
);
|
||||
|
||||
if (run) {
|
||||
// Find the step that matches the current activity
|
||||
return run.steps.find(
|
||||
(step: any) => (step.activity_id == props.activity.id) && (step.complete == true)
|
||||
)
|
||||
(step: any) => step.activity_id === props.activity.id && step.complete === true
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Don't render until we have trail data
|
||||
if (!props.trailData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -931,24 +967,41 @@ export function MarkStatus(props: {
|
|||
<div className="flex items-center space-x-2">
|
||||
<div className="relative">
|
||||
<div
|
||||
className={`${isLoading ? 'opacity-75 cursor-not-allowed' : ''} bg-gray-800 rounded-md px-4 nice-shadow flex flex-col p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out`}
|
||||
className={`${isLoading ? 'opacity-90' : ''} bg-gray-800 rounded-md px-4 nice-shadow flex flex-col p-2.5 text-white hover:cursor-pointer transition-all duration-200 ${isLoading ? 'cursor-not-allowed' : 'hover:bg-gray-700'}`}
|
||||
onClick={!isLoading ? markActivityAsCompleteFront : undefined}
|
||||
>
|
||||
<span className="text-[10px] font-bold mb-1 uppercase">Status</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
</svg>
|
||||
<span className="text-xs font-bold">{isLoading ? 'Marking...' : 'Mark as complete'}</span>
|
||||
{isLoading ? (
|
||||
<div className="animate-spin">
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M21 12a9 9 0 11-6.219-8.56" />
|
||||
</svg>
|
||||
</div>
|
||||
) : (
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
</svg>
|
||||
)}
|
||||
<span className="text-xs font-bold min-w-[90px]">{isLoading ? 'Marking...' : 'Mark as complete'}</span>
|
||||
</div>
|
||||
</div>
|
||||
{showUnmarkedTooltip && (
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ type Session = {
|
|||
async function fetchCourseMetadata(courseuuid: string, access_token: string | null | undefined) {
|
||||
return await getCourseMetadata(
|
||||
courseuuid,
|
||||
{ revalidate: 0, tags: ['courses'] },
|
||||
{ revalidate: 60, tags: ['courses'] },
|
||||
access_token || null
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
'use client'
|
||||
import Link from 'next/link'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { getUriWithOrg } from '@services/config/config'
|
||||
import { getUriWithOrg, getAPIUrl } from '@services/config/config'
|
||||
import PageLoading from '@components/Objects/Loaders/PageLoading'
|
||||
import { revalidateTags } from '@services/utils/ts/requests'
|
||||
import { revalidateTags, swrFetcher } from '@services/utils/ts/requests'
|
||||
import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
|
||||
|
|
@ -18,6 +18,8 @@ import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesAct
|
|||
import CourseActionsMobile from '@components/Objects/Courses/CourseActions/CourseActionsMobile'
|
||||
import CourseAuthors from '@components/Objects/Courses/CourseAuthors/CourseAuthors'
|
||||
import CourseBreadcrumbs from '@components/Pages/Courses/CourseBreadcrumbs'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import useSWR from 'swr'
|
||||
|
||||
const CourseClient = (props: any) => {
|
||||
const [learnings, setLearnings] = useState<any>([])
|
||||
|
|
@ -28,6 +30,14 @@ const CourseClient = (props: any) => {
|
|||
const org = useOrg() as any
|
||||
const router = useRouter()
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
const session = useLHSession() as any;
|
||||
const access_token = session?.data?.tokens?.access_token;
|
||||
|
||||
// Add SWR for trail data
|
||||
const { data: trailData } = useSWR(
|
||||
`${getAPIUrl()}trail/org/${org?.id}/trail`,
|
||||
(url) => swrFetcher(url, access_token)
|
||||
);
|
||||
|
||||
console.log(course)
|
||||
|
||||
|
|
@ -178,7 +188,7 @@ const CourseClient = (props: any) => {
|
|||
|
||||
<div className='course_metadata_right w-full md:w-1/4 space-y-4'>
|
||||
{/* Actions Box */}
|
||||
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
||||
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} trailData={trailData} />
|
||||
|
||||
{/* Authors & Updates Box */}
|
||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden p-4">
|
||||
|
|
@ -329,10 +339,9 @@ const CourseClient = (props: any) => {
|
|||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
|
||||
{/* Mobile Actions Box */}
|
||||
{isMobile && (
|
||||
<div className="fixed bottom-0 left-0 right-0 p-4 z-50">
|
||||
<CourseActionsMobile courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
||||
</div>
|
||||
<CourseActionsMobile courseuuid={courseuuid} orgslug={orgslug} course={course} trailData={trailData} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export async function generateMetadata(props: MetadataProps): Promise<Metadata>
|
|||
})
|
||||
const course_meta = await getCourseMetadata(
|
||||
params.courseuuid,
|
||||
{ revalidate: 0, tags: ['courses'] },
|
||||
{ revalidate: 60, tags: ['courses'] },
|
||||
access_token ? access_token : null
|
||||
)
|
||||
|
||||
|
|
@ -69,17 +69,20 @@ const CoursePage = async (params: any) => {
|
|||
const session = await getServerSession(nextAuthOptions)
|
||||
const access_token = session?.tokens?.access_token
|
||||
|
||||
// Await params before using them
|
||||
const { courseuuid, orgslug } = await params.params
|
||||
|
||||
// Fetch course metadata once
|
||||
const course_meta = await getCourseMetadata(
|
||||
params.params.courseuuid,
|
||||
courseuuid,
|
||||
{ revalidate: 0, tags: ['courses'] },
|
||||
access_token ? access_token : null
|
||||
)
|
||||
|
||||
return (
|
||||
<CourseClient
|
||||
courseuuid={params.params.courseuuid}
|
||||
orgslug={params.params.orgslug}
|
||||
courseuuid={courseuuid}
|
||||
orgslug={orgslug}
|
||||
course={course_meta}
|
||||
access_token={access_token}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue