mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: add mobile version CoursesActions, improve the user flow
This commit is contained in:
swve
parent
320f649462
commit
d3df80a8b2
3 changed files with 523 additions and 255 deletions
|
|
@ -18,6 +18,7 @@ import CourseUpdates from '@components/Objects/Courses/CourseUpdates/CourseUpdat
|
||||||
import { CourseProvider } from '@components/Contexts/CourseContext'
|
import { CourseProvider } from '@components/Contexts/CourseContext'
|
||||||
import { useMediaQuery } from 'usehooks-ts'
|
import { useMediaQuery } from 'usehooks-ts'
|
||||||
import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
|
import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
|
||||||
|
import CourseActionsMobile from '@components/Objects/Courses/CourseActions/CourseActionsMobile'
|
||||||
|
|
||||||
const CourseClient = (props: any) => {
|
const CourseClient = (props: any) => {
|
||||||
const [learnings, setLearnings] = useState<any>([])
|
const [learnings, setLearnings] = useState<any>([])
|
||||||
|
|
@ -65,265 +66,273 @@ const CourseClient = (props: any) => {
|
||||||
{!course && !org ? (
|
{!course && !org ? (
|
||||||
<PageLoading></PageLoading>
|
<PageLoading></PageLoading>
|
||||||
) : (
|
) : (
|
||||||
<GeneralWrapperStyled>
|
<>
|
||||||
<div className="pb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
|
<GeneralWrapperStyled>
|
||||||
<div>
|
<div className="pb-3 flex flex-col md:flex-row justify-between items-start md:items-center">
|
||||||
<p className="text-md font-bold text-gray-400 pb-2">Course</p>
|
<div>
|
||||||
<h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
|
<p className="text-md font-bold text-gray-400 pb-2">Course</p>
|
||||||
</div>
|
<h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
|
||||||
<div className="mt-4 md:mt-0">
|
|
||||||
{!isMobile && <CourseProvider courseuuid={course.course_uuid}>
|
|
||||||
<CourseUpdates />
|
|
||||||
</CourseProvider>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{props.course?.thumbnail_image && org ? (
|
|
||||||
<div
|
|
||||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[200px] md:h-[400px] bg-cover bg-center mb-4"
|
|
||||||
style={{
|
|
||||||
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
|
|
||||||
org?.org_uuid,
|
|
||||||
course?.course_uuid,
|
|
||||||
course?.thumbnail_image
|
|
||||||
)})`,
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[400px] bg-cover bg-center mb-4"
|
|
||||||
style={{
|
|
||||||
backgroundImage: `url('../empty_thumbnail.png')`,
|
|
||||||
backgroundSize: 'auto',
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<ActivityIndicators
|
|
||||||
course_uuid={props.course.course_uuid}
|
|
||||||
orgslug={orgslug}
|
|
||||||
course={course}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0 pt-10">
|
|
||||||
<div className="course_metadata_left w-full md:basis-3/4 space-y-2">
|
|
||||||
<h2 className="py-3 text-2xl font-bold">About</h2>
|
|
||||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
|
||||||
<p className="py-5 px-5 whitespace-pre-wrap">{course.about}</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mt-4 md:mt-0">
|
||||||
|
{!isMobile && <CourseProvider courseuuid={course.course_uuid}>
|
||||||
|
<CourseUpdates />
|
||||||
|
</CourseProvider>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{learnings.length > 0 && learnings[0]?.text !== 'null' && (
|
{props.course?.thumbnail_image && org ? (
|
||||||
<div>
|
<div
|
||||||
<h2 className="py-3 text-2xl font-bold">
|
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[200px] md:h-[400px] bg-cover bg-center mb-4"
|
||||||
What you will learn
|
style={{
|
||||||
</h2>
|
backgroundImage: `url(${getCourseThumbnailMediaDirectory(
|
||||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
|
org?.org_uuid,
|
||||||
{learnings.map((learning: any) => {
|
course?.course_uuid,
|
||||||
// Handle both new format (object with text and emoji) and legacy format (string)
|
course?.thumbnail_image
|
||||||
const learningText = typeof learning === 'string' ? learning : learning.text
|
)})`,
|
||||||
const learningEmoji = typeof learning === 'string' ? null : learning.emoji
|
}}
|
||||||
const learningId = typeof learning === 'string' ? learning : learning.id || learning.text
|
></div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-auto h-[400px] bg-cover bg-center mb-4"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url('../empty_thumbnail.png')`,
|
||||||
|
backgroundSize: 'auto',
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
)}
|
||||||
|
|
||||||
if (!learningText) return null
|
<ActivityIndicators
|
||||||
|
course_uuid={props.course.course_uuid}
|
||||||
|
orgslug={orgslug}
|
||||||
|
course={course}
|
||||||
|
/>
|
||||||
|
|
||||||
return (
|
<div className="flex flex-col md:flex-row md:space-x-10 space-y-6 md:space-y-0 pt-10">
|
||||||
<div
|
<div className="course_metadata_left w-full md:basis-3/4 space-y-2">
|
||||||
key={learningId}
|
<h2 className="py-3 text-2xl font-bold">About</h2>
|
||||||
className="flex space-x-2 items-center font-semibold text-gray-500"
|
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||||
>
|
<p className="py-5 px-5 whitespace-pre-wrap">{course.about}</p>
|
||||||
<div className="px-2 py-2 rounded-full">
|
</div>
|
||||||
{learningEmoji ? (
|
|
||||||
<span>{learningEmoji}</span>
|
{learnings.length > 0 && learnings[0]?.text !== 'null' && (
|
||||||
) : (
|
<div>
|
||||||
<Check className="text-gray-400" size={15} />
|
<h2 className="py-3 text-2xl font-bold">
|
||||||
|
What you will learn
|
||||||
|
</h2>
|
||||||
|
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden px-5 py-5 space-y-2">
|
||||||
|
{learnings.map((learning: any) => {
|
||||||
|
// Handle both new format (object with text and emoji) and legacy format (string)
|
||||||
|
const learningText = typeof learning === 'string' ? learning : learning.text
|
||||||
|
const learningEmoji = typeof learning === 'string' ? null : learning.emoji
|
||||||
|
const learningId = typeof learning === 'string' ? learning : learning.id || learning.text
|
||||||
|
|
||||||
|
if (!learningText) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={learningId}
|
||||||
|
className="flex space-x-2 items-center font-semibold text-gray-500"
|
||||||
|
>
|
||||||
|
<div className="px-2 py-2 rounded-full">
|
||||||
|
{learningEmoji ? (
|
||||||
|
<span>{learningEmoji}</span>
|
||||||
|
) : (
|
||||||
|
<Check className="text-gray-400" size={15} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p>{learningText}</p>
|
||||||
|
{learning.link && (
|
||||||
|
<a
|
||||||
|
href={learning.link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-500 hover:underline text-sm"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Link to {learningText}</span>
|
||||||
|
<ArrowRight size={14} />
|
||||||
|
</a>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<p>{learningText}</p>
|
)
|
||||||
{learning.link && (
|
})}
|
||||||
<a
|
|
||||||
href={learning.link}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-blue-500 hover:underline text-sm"
|
|
||||||
>
|
|
||||||
<span className="sr-only">Link to {learningText}</span>
|
|
||||||
<ArrowRight size={14} />
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
|
|
||||||
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
|
||||||
{course.chapters.map((chapter: any) => {
|
|
||||||
return (
|
|
||||||
<div key={chapter} className="">
|
|
||||||
<div className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center">
|
|
||||||
<h3 className="grow mr-3 break-words">{chapter.name}</h3>
|
|
||||||
<p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap flex-shrink-0">
|
|
||||||
{chapter.activities.length} Activities
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="py-3">
|
|
||||||
{chapter.activities.map((activity: any) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<p className="flex text-md"></p>
|
|
||||||
<div className="flex space-x-1 py-2 px-4 items-center">
|
|
||||||
<div className="courseicon items-center flex space-x-2 text-neutral-400">
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_DYNAMIC' && (
|
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
|
||||||
<Sparkles
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{activity.activity_type === 'TYPE_VIDEO' && (
|
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
|
||||||
<Video
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_DOCUMENT' && (
|
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
|
||||||
<File
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_ASSIGNMENT' && (
|
|
||||||
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
|
||||||
<Backpack
|
|
||||||
className="text-gray-400"
|
|
||||||
size={13}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
className="flex font-semibold grow pl-2 text-neutral-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<p>{activity.name}</p>
|
|
||||||
</Link>
|
|
||||||
<div className="flex ">
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_DYNAMIC' && (
|
|
||||||
<>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Page</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{activity.activity_type === 'TYPE_VIDEO' && (
|
|
||||||
<>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Video</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_DOCUMENT' && (
|
|
||||||
<>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Document</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{activity.activity_type ===
|
|
||||||
'TYPE_ASSIGNMENT' && (
|
|
||||||
<>
|
|
||||||
<Link
|
|
||||||
className="flex grow pl-2 text-gray-500"
|
|
||||||
href={
|
|
||||||
getUriWithOrg(orgslug, '') +
|
|
||||||
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
|
||||||
'activity_',
|
|
||||||
''
|
|
||||||
)}`
|
|
||||||
}
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
|
||||||
<p>Assignment</p>
|
|
||||||
<ArrowRight size={13} />
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
})}
|
)}
|
||||||
|
|
||||||
|
<h2 className="py-3 text-xl md:text-2xl font-bold">Course Lessons</h2>
|
||||||
|
<div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||||
|
{course.chapters.map((chapter: any) => {
|
||||||
|
return (
|
||||||
|
<div key={chapter} className="">
|
||||||
|
<div className="flex text-lg py-4 px-4 outline outline-1 outline-neutral-200/40 font-bold bg-neutral-50 text-neutral-600 items-center">
|
||||||
|
<h3 className="grow mr-3 break-words">{chapter.name}</h3>
|
||||||
|
<p className="text-sm font-normal text-neutral-400 px-3 py-[2px] outline-1 outline outline-neutral-200 rounded-full whitespace-nowrap flex-shrink-0">
|
||||||
|
{chapter.activities.length} Activities
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="py-3">
|
||||||
|
{chapter.activities.map((activity: any) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<p className="flex text-md"></p>
|
||||||
|
<div className="flex space-x-1 py-2 px-4 items-center">
|
||||||
|
<div className="courseicon items-center flex space-x-2 text-neutral-400">
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_DYNAMIC' && (
|
||||||
|
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
||||||
|
<Sparkles
|
||||||
|
className="text-gray-400"
|
||||||
|
size={13}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{activity.activity_type === 'TYPE_VIDEO' && (
|
||||||
|
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
||||||
|
<Video
|
||||||
|
className="text-gray-400"
|
||||||
|
size={13}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_DOCUMENT' && (
|
||||||
|
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
||||||
|
<File
|
||||||
|
className="text-gray-400"
|
||||||
|
size={13}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_ASSIGNMENT' && (
|
||||||
|
<div className="bg-gray-100 px-2 py-2 rounded-full">
|
||||||
|
<Backpack
|
||||||
|
className="text-gray-400"
|
||||||
|
size={13}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
className="flex font-semibold grow pl-2 text-neutral-500"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<p>{activity.name}</p>
|
||||||
|
</Link>
|
||||||
|
<div className="flex ">
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_DYNAMIC' && (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
className="flex grow pl-2 text-gray-500"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
||||||
|
<p>Page</p>
|
||||||
|
<ArrowRight size={13} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{activity.activity_type === 'TYPE_VIDEO' && (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
className="flex grow pl-2 text-gray-500"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
||||||
|
<p>Video</p>
|
||||||
|
<ArrowRight size={13} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_DOCUMENT' && (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
className="flex grow pl-2 text-gray-500"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
||||||
|
<p>Document</p>
|
||||||
|
<ArrowRight size={13} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{activity.activity_type ===
|
||||||
|
'TYPE_ASSIGNMENT' && (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
className="flex grow pl-2 text-gray-500"
|
||||||
|
href={
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${activity.activity_uuid.replace(
|
||||||
|
'activity_',
|
||||||
|
''
|
||||||
|
)}`
|
||||||
|
}
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
|
||||||
|
<p>Assignment</p>
|
||||||
|
<ArrowRight size={13} />
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='course_metadata_right basis-1/4'>
|
||||||
|
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='course_metadata_right basis-1/4'>
|
</GeneralWrapperStyled>
|
||||||
<CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
|
||||||
|
{isMobile && (
|
||||||
|
<div className="fixed bottom-0 left-0 right-0 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 p-4 z-50">
|
||||||
|
<CourseActionsMobile courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</GeneralWrapperStyled>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||||
|
import { getUriWithoutOrg, getUriWithOrg } from '@services/config/config'
|
||||||
|
import { getProductsByCourse } from '@services/payments/products'
|
||||||
|
import { LogIn, LogOut, ShoppingCart } from 'lucide-react'
|
||||||
|
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||||
|
import CoursePaidOptions from './CoursePaidOptions'
|
||||||
|
import { checkPaidAccess } from '@services/payments/payments'
|
||||||
|
import { removeCourse, startCourse } from '@services/courses/activity'
|
||||||
|
import { revalidateTags } from '@services/utils/ts/requests'
|
||||||
|
import UserAvatar from '../../UserAvatar'
|
||||||
|
import { getUserAvatarMediaDirectory } from '@services/media/media'
|
||||||
|
|
||||||
|
interface Author {
|
||||||
|
user_uuid: string
|
||||||
|
avatar_image: string
|
||||||
|
first_name: string
|
||||||
|
last_name: string
|
||||||
|
username: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CourseRun {
|
||||||
|
status: string
|
||||||
|
course_id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Course {
|
||||||
|
id: string
|
||||||
|
authors: Author[]
|
||||||
|
trail?: {
|
||||||
|
runs: CourseRun[]
|
||||||
|
}
|
||||||
|
chapters?: Array<{
|
||||||
|
name: string
|
||||||
|
activities: Array<{
|
||||||
|
activity_uuid: string
|
||||||
|
name: string
|
||||||
|
activity_type: string
|
||||||
|
}>
|
||||||
|
}>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CourseActionsMobileProps {
|
||||||
|
courseuuid: string
|
||||||
|
orgslug: string
|
||||||
|
course: Course & {
|
||||||
|
org_id: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobileProps) => {
|
||||||
|
const router = useRouter()
|
||||||
|
const session = useLHSession() as any
|
||||||
|
const [linkedProducts, setLinkedProducts] = useState<any[]>([])
|
||||||
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||||
|
const [hasAccess, setHasAccess] = useState<boolean | null>(null)
|
||||||
|
|
||||||
|
const isStarted = course.trail?.runs?.some(
|
||||||
|
(run) => run.status === 'STATUS_IN_PROGRESS' && run.course_id === course.id
|
||||||
|
) ?? false
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchLinkedProducts = async () => {
|
||||||
|
try {
|
||||||
|
const response = await getProductsByCourse(
|
||||||
|
course.org_id,
|
||||||
|
course.id,
|
||||||
|
session.data?.tokens?.access_token
|
||||||
|
)
|
||||||
|
setLinkedProducts(response.data || [])
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch linked products')
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchLinkedProducts()
|
||||||
|
}, [course.id, course.org_id, session.data?.tokens?.access_token])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkAccess = async () => {
|
||||||
|
if (!session.data?.user) return
|
||||||
|
try {
|
||||||
|
const response = await checkPaidAccess(
|
||||||
|
parseInt(course.id),
|
||||||
|
course.org_id,
|
||||||
|
session.data?.tokens?.access_token
|
||||||
|
)
|
||||||
|
setHasAccess(response.has_access)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to check course access')
|
||||||
|
setHasAccess(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (linkedProducts.length > 0) {
|
||||||
|
checkAccess()
|
||||||
|
}
|
||||||
|
}, [course.id, course.org_id, session.data?.tokens?.access_token, linkedProducts])
|
||||||
|
|
||||||
|
const handleCourseAction = async () => {
|
||||||
|
if (!session.data?.user) {
|
||||||
|
router.push(getUriWithoutOrg(`/signup?orgslug=${orgslug}`))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isStarted) {
|
||||||
|
await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||||
|
await revalidateTags(['courses'], orgslug)
|
||||||
|
router.refresh()
|
||||||
|
} else {
|
||||||
|
await startCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||||
|
await revalidateTags(['courses'], orgslug)
|
||||||
|
|
||||||
|
// Get the first activity from the first chapter
|
||||||
|
const firstChapter = course.chapters?.[0]
|
||||||
|
const firstActivity = firstChapter?.activities?.[0]
|
||||||
|
|
||||||
|
if (firstActivity) {
|
||||||
|
// Redirect to the first activity
|
||||||
|
router.push(
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${firstActivity.activity_uuid.replace('activity_', '')}`
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
router.refresh()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <div className="animate-pulse h-16 bg-gray-100 rounded-lg" />
|
||||||
|
}
|
||||||
|
|
||||||
|
const author = course.authors[0]
|
||||||
|
const authorName = author.first_name && author.last_name
|
||||||
|
? `${author.first_name} ${author.last_name}`
|
||||||
|
: `@${author.username}`
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<UserAvatar
|
||||||
|
border="border-4"
|
||||||
|
avatar_url={author.avatar_image ? getUserAvatarMediaDirectory(author.user_uuid, author.avatar_image) : ''}
|
||||||
|
predefined_avatar={author.avatar_image ? undefined : 'empty'}
|
||||||
|
width={40}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-xs text-neutral-400 font-medium">Author</span>
|
||||||
|
<span className="text-sm font-semibold text-neutral-800">{authorName}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
{linkedProducts.length > 0 ? (
|
||||||
|
hasAccess ? (
|
||||||
|
<button
|
||||||
|
onClick={handleCourseAction}
|
||||||
|
className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center gap-2 ${
|
||||||
|
isStarted
|
||||||
|
? 'bg-red-500 text-white hover:bg-red-600'
|
||||||
|
: 'bg-neutral-900 text-white hover:bg-neutral-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isStarted ? (
|
||||||
|
<>
|
||||||
|
<LogOut className="w-4 h-4" />
|
||||||
|
Leave Course
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<LogIn className="w-4 h-4" />
|
||||||
|
Start Course
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Modal
|
||||||
|
isDialogOpen={isModalOpen}
|
||||||
|
onOpenChange={setIsModalOpen}
|
||||||
|
dialogContent={<CoursePaidOptions course={course} />}
|
||||||
|
dialogTitle="Purchase Course"
|
||||||
|
dialogDescription="Select a payment option to access this course"
|
||||||
|
minWidth="sm"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
className="py-2 px-4 rounded-lg bg-neutral-900 text-white font-semibold text-sm hover:bg-neutral-800 transition-colors flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<ShoppingCart className="w-4 h-4" />
|
||||||
|
Purchase
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={handleCourseAction}
|
||||||
|
className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center gap-2 ${
|
||||||
|
isStarted
|
||||||
|
? 'bg-red-500 text-white hover:bg-red-600'
|
||||||
|
: 'bg-neutral-900 text-white hover:bg-neutral-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{!session.data?.user ? (
|
||||||
|
<>
|
||||||
|
<LogIn className="w-4 h-4" />
|
||||||
|
Sign In
|
||||||
|
</>
|
||||||
|
) : isStarted ? (
|
||||||
|
<>
|
||||||
|
<LogOut className="w-4 h-4" />
|
||||||
|
Leave Course
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<LogIn className="w-4 h-4" />
|
||||||
|
Start Course
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CourseActionsMobile
|
||||||
|
|
@ -32,6 +32,14 @@ interface Course {
|
||||||
trail?: {
|
trail?: {
|
||||||
runs: CourseRun[]
|
runs: CourseRun[]
|
||||||
}
|
}
|
||||||
|
chapters?: Array<{
|
||||||
|
name: string
|
||||||
|
activities: Array<{
|
||||||
|
activity_uuid: string
|
||||||
|
name: string
|
||||||
|
activity_type: string
|
||||||
|
}>
|
||||||
|
}>
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CourseActionsProps {
|
interface CourseActionsProps {
|
||||||
|
|
@ -129,10 +137,29 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
||||||
router.push(getUriWithoutOrg(`/signup?orgslug=${orgslug}`))
|
router.push(getUriWithoutOrg(`/signup?orgslug=${orgslug}`))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const action = isStarted ? removeCourse : startCourse
|
|
||||||
await action('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
if (isStarted) {
|
||||||
await revalidateTags(['courses'], orgslug)
|
await removeCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||||
router.refresh()
|
await revalidateTags(['courses'], orgslug)
|
||||||
|
router.refresh()
|
||||||
|
} else {
|
||||||
|
await startCourse('course_' + courseuuid, orgslug, session.data?.tokens?.access_token)
|
||||||
|
await revalidateTags(['courses'], orgslug)
|
||||||
|
|
||||||
|
// Get the first activity from the first chapter
|
||||||
|
const firstChapter = course.chapters?.[0]
|
||||||
|
const firstActivity = firstChapter?.activities?.[0]
|
||||||
|
|
||||||
|
if (firstActivity) {
|
||||||
|
// Redirect to the first activity
|
||||||
|
router.push(
|
||||||
|
getUriWithOrg(orgslug, '') +
|
||||||
|
`/course/${courseuuid}/activity/${firstActivity.activity_uuid.replace('activity_', '')}`
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
router.refresh()
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue