mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
fix: Authors showing on the course page
This commit is contained in:
swve
parent
4e7a06b74e
commit
5a80dd17f1
5 changed files with 353 additions and 128 deletions
|
|
@ -29,6 +29,8 @@ const CourseClient = (props: any) => {
|
|||
const router = useRouter()
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
|
||||
console.log(course)
|
||||
|
||||
function getLearningTags() {
|
||||
if (!course?.learnings) {
|
||||
setLearnings([])
|
||||
|
|
@ -333,7 +335,7 @@ const CourseClient = (props: any) => {
|
|||
</GeneralWrapperStyled>
|
||||
|
||||
{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">
|
||||
<div className="fixed bottom-0 left-0 right-0 p-4 z-50">
|
||||
<CourseActionsMobile courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ const CoursePage = async (params: any) => {
|
|||
// Fetch course metadata once
|
||||
const course_meta = await getCourseMetadata(
|
||||
params.params.courseuuid,
|
||||
{ revalidate: 1800, tags: ['courses'] },
|
||||
{ revalidate: 0, tags: ['courses'] },
|
||||
access_token ? access_token : null
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ 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 { LogIn, LogOut, ShoppingCart, AlertCircle } from 'lucide-react'
|
||||
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||
import CoursePaidOptions from './CoursePaidOptions'
|
||||
import { checkPaidAccess } from '@services/payments/payments'
|
||||
|
|
@ -13,11 +13,15 @@ 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
|
||||
user: {
|
||||
user_uuid: string
|
||||
avatar_image: string
|
||||
first_name: string
|
||||
last_name: string
|
||||
username: string
|
||||
}
|
||||
authorship: 'CREATOR' | 'CONTRIBUTOR' | 'MAINTAINER' | 'REPORTER'
|
||||
authorship_status: 'ACTIVE' | 'INACTIVE' | 'PENDING'
|
||||
}
|
||||
|
||||
interface CourseRun {
|
||||
|
|
@ -49,11 +53,81 @@ interface CourseActionsMobileProps {
|
|||
}
|
||||
}
|
||||
|
||||
// Component for displaying multiple authors
|
||||
const MultipleAuthors = ({ authors }: { authors: Author[] }) => {
|
||||
const displayedAvatars = authors.slice(0, 3)
|
||||
const remainingCount = Math.max(0, authors.length - 3)
|
||||
|
||||
// Avatar size for mobile
|
||||
const avatarSize = 36
|
||||
const borderSize = "border-2"
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex -space-x-3 relative">
|
||||
{displayedAvatars.map((author, index) => (
|
||||
<div
|
||||
key={author.user.user_uuid}
|
||||
className="relative"
|
||||
style={{ zIndex: displayedAvatars.length - index }}
|
||||
>
|
||||
<UserAvatar
|
||||
border={borderSize}
|
||||
rounded='rounded-full'
|
||||
avatar_url={author.user.avatar_image ? getUserAvatarMediaDirectory(author.user.user_uuid, author.user.avatar_image) : ''}
|
||||
predefined_avatar={author.user.avatar_image ? undefined : 'empty'}
|
||||
width={avatarSize}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{remainingCount > 0 && (
|
||||
<div
|
||||
className="relative"
|
||||
style={{ zIndex: 0 }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-center bg-neutral-100 text-neutral-600 font-medium rounded-full border-2 border-white shadow-sm"
|
||||
style={{
|
||||
width: `${avatarSize}px`,
|
||||
height: `${avatarSize}px`,
|
||||
fontSize: '12px'
|
||||
}}
|
||||
>
|
||||
+{remainingCount}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-neutral-400 font-medium">
|
||||
{authors.length > 1 ? 'Authors' : 'Author'}
|
||||
</span>
|
||||
{authors.length === 1 ? (
|
||||
<span className="text-sm font-semibold text-neutral-800">
|
||||
{authors[0].user.first_name && authors[0].user.last_name
|
||||
? `${authors[0].user.first_name} ${authors[0].user.last_name}`
|
||||
: `@${authors[0].user.username}`}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-sm font-semibold text-neutral-800">
|
||||
{authors[0].user.first_name && authors[0].user.last_name
|
||||
? `${authors[0].user.first_name} ${authors[0].user.last_name}`
|
||||
: `@${authors[0].user.username}`}
|
||||
{authors.length > 1 && ` & ${authors.length - 1} more`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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 [isActionLoading, setIsActionLoading] = useState(false)
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
const [hasAccess, setHasAccess] = useState<boolean | null>(null)
|
||||
|
||||
|
|
@ -107,106 +181,141 @@ const CourseActionsMobile = ({ courseuuid, orgslug, course }: CourseActionsMobil
|
|||
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 {
|
||||
setIsActionLoading(true)
|
||||
try {
|
||||
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()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to perform course action:', error)
|
||||
} finally {
|
||||
setIsActionLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="animate-pulse h-16 bg-gray-100 rounded-lg" />
|
||||
return <div className="animate-pulse h-16 bg-gray-100 rounded-lg mt-4 mb-8" />
|
||||
}
|
||||
|
||||
const author = course.authors[0]
|
||||
const authorName = author.first_name && author.last_name
|
||||
? `${author.first_name} ${author.last_name}`
|
||||
: `@${author.username}`
|
||||
// Filter active authors and sort by role priority
|
||||
const sortedAuthors = [...course.authors]
|
||||
.filter(author => author.authorship_status === 'ACTIVE')
|
||||
.sort((a, b) => {
|
||||
const rolePriority: Record<string, number> = {
|
||||
'CREATOR': 0,
|
||||
'MAINTAINER': 1,
|
||||
'CONTRIBUTOR': 2,
|
||||
'REPORTER': 3
|
||||
};
|
||||
return rolePriority[a.authorship] - rolePriority[b.authorship];
|
||||
});
|
||||
|
||||
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="bg-white/90 backdrop-blur-sm shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden p-4 my-6 mx-2">
|
||||
<div className="flex flex-col space-y-4">
|
||||
<MultipleAuthors authors={sortedAuthors} />
|
||||
|
||||
<div className="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"
|
||||
/>
|
||||
<div className="space-y-3">
|
||||
{hasAccess ? (
|
||||
<div className="p-3 bg-green-50 border border-green-200 rounded-lg">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
|
||||
<span className="text-green-800 text-sm font-semibold">You Own This Course</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-amber-800" />
|
||||
<span className="text-amber-800 text-sm font-semibold">Paid Course</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasAccess ? (
|
||||
<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"
|
||||
onClick={handleCourseAction}
|
||||
disabled={isActionLoading}
|
||||
className={`w-full py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center justify-center gap-2 ${
|
||||
isStarted
|
||||
? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
|
||||
: 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
|
||||
}`}
|
||||
>
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
Purchase
|
||||
{isActionLoading ? (
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
) : 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)}
|
||||
disabled={isActionLoading}
|
||||
className="w-full py-2 px-4 rounded-lg bg-neutral-900 text-white font-semibold text-sm hover:bg-neutral-800 transition-colors flex items-center justify-center gap-2 disabled:bg-neutral-700"
|
||||
>
|
||||
{isActionLoading ? (
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<ShoppingCart className="w-4 h-4" />
|
||||
Purchase Course
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleCourseAction}
|
||||
className={`py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center gap-2 ${
|
||||
disabled={isActionLoading}
|
||||
className={`w-full py-2 px-4 rounded-lg font-semibold text-sm transition-colors flex items-center justify-center gap-2 ${
|
||||
isStarted
|
||||
? 'bg-red-500 text-white hover:bg-red-600'
|
||||
: 'bg-neutral-900 text-white hover:bg-neutral-800'
|
||||
? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
|
||||
: 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
|
||||
}`}
|
||||
>
|
||||
{!session.data?.user ? (
|
||||
{isActionLoading ? (
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
) : !session.data?.user ? (
|
||||
<>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Sign In
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ interface Author {
|
|||
username: string
|
||||
}
|
||||
authorship: 'CREATOR' | 'CONTRIBUTOR' | 'MAINTAINER' | 'REPORTER'
|
||||
authorship_status: 'ACTIVE' | 'INACTIVE' | 'PENDING'
|
||||
}
|
||||
|
||||
interface CourseRun {
|
||||
|
|
@ -82,11 +83,109 @@ const AuthorInfo = ({ author, isMobile }: { author: Author, isMobile: boolean })
|
|||
</div>
|
||||
)
|
||||
|
||||
const MultipleAuthors = ({ authors, isMobile }: { authors: Author[], isMobile: boolean }) => {
|
||||
const displayedAvatars = authors.slice(0, 3)
|
||||
const displayedNames = authors.slice(0, 2)
|
||||
const remainingCount = Math.max(0, authors.length - 3)
|
||||
|
||||
// Consistent sizes for both avatars and badge
|
||||
const avatarSize = isMobile ? 72 : 86
|
||||
const borderSize = "border-4"
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center space-y-4 px-2 py-2">
|
||||
<div className="text-[12px] text-neutral-400 font-semibold self-start">Authors</div>
|
||||
|
||||
{/* Avatars row */}
|
||||
<div className="flex justify-center -space-x-6 relative">
|
||||
{displayedAvatars.map((author, index) => (
|
||||
<div
|
||||
key={author.user.user_uuid}
|
||||
className="relative"
|
||||
style={{ zIndex: displayedAvatars.length - index }}
|
||||
>
|
||||
<div className="ring-white">
|
||||
<UserAvatar
|
||||
border={borderSize}
|
||||
rounded='rounded-full'
|
||||
avatar_url={author.user.avatar_image ? getUserAvatarMediaDirectory(author.user.user_uuid, author.user.avatar_image) : ''}
|
||||
predefined_avatar={author.user.avatar_image ? undefined : 'empty'}
|
||||
width={avatarSize}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{remainingCount > 0 && (
|
||||
<div
|
||||
className="relative"
|
||||
style={{ zIndex: 0 }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-center bg-neutral-100 text-neutral-600 font-medium rounded-full border-4 border-white shadow-sm"
|
||||
style={{
|
||||
width: `${avatarSize}px`,
|
||||
height: `${avatarSize}px`,
|
||||
fontSize: isMobile ? '14px' : '16px'
|
||||
}}
|
||||
>
|
||||
+{remainingCount}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Names row - improved display logic */}
|
||||
<div className="text-center mt-2">
|
||||
<div className="text-sm font-medium text-neutral-800">
|
||||
{authors.length === 1 ? (
|
||||
<span>
|
||||
{authors[0].user.first_name && authors[0].user.last_name
|
||||
? `${authors[0].user.first_name} ${authors[0].user.last_name}`
|
||||
: `@${authors[0].user.username}`}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
{displayedNames.map((author, index) => (
|
||||
<span key={author.user.user_uuid}>
|
||||
{author.user.first_name && author.user.last_name
|
||||
? `${author.user.first_name} ${author.user.last_name}`
|
||||
: `@${author.user.username}`}
|
||||
{index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
|
||||
</span>
|
||||
))}
|
||||
{authors.length > 2 && (
|
||||
<span className="text-neutral-500 ml-1">
|
||||
& {authors.length - 2} more
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-neutral-500 mt-0.5">
|
||||
{authors.length === 1 ? (
|
||||
<span>@{authors[0].user.username}</span>
|
||||
) : (
|
||||
<>
|
||||
{displayedNames.map((author, index) => (
|
||||
<span key={author.user.user_uuid}>
|
||||
@{author.user.username}
|
||||
{index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
|
||||
</span>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
||||
const router = useRouter()
|
||||
const session = useLHSession() as any
|
||||
const [linkedProducts, setLinkedProducts] = useState<any[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [isActionLoading, setIsActionLoading] = useState(false)
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
const [hasAccess, setHasAccess] = useState<boolean | null>(null)
|
||||
|
||||
|
|
@ -141,27 +240,34 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
|||
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 {
|
||||
setIsActionLoading(true)
|
||||
try {
|
||||
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()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to perform course action:', error)
|
||||
} finally {
|
||||
setIsActionLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -185,13 +291,16 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
|||
</div>
|
||||
<button
|
||||
onClick={handleCourseAction}
|
||||
className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 ${
|
||||
disabled={isActionLoading}
|
||||
className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 cursor-pointer ${
|
||||
isStarted
|
||||
? 'bg-red-500 text-white hover:bg-red-600'
|
||||
: 'bg-neutral-900 text-white hover:bg-neutral-800'
|
||||
? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
|
||||
: 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
|
||||
}`}
|
||||
>
|
||||
{isStarted ? (
|
||||
{isActionLoading ? (
|
||||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
) : isStarted ? (
|
||||
<>
|
||||
<LogOut className="w-5 h-5" />
|
||||
Leave Course
|
||||
|
|
@ -242,13 +351,16 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
|
|||
return (
|
||||
<button
|
||||
onClick={handleCourseAction}
|
||||
className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 ${
|
||||
disabled={isActionLoading}
|
||||
className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 cursor-pointer ${
|
||||
isStarted
|
||||
? 'bg-red-500 text-white hover:bg-red-600'
|
||||
: 'bg-neutral-900 text-white hover:bg-neutral-800'
|
||||
? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
|
||||
: 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
|
||||
}`}
|
||||
>
|
||||
{!session.data?.user ? (
|
||||
{isActionLoading ? (
|
||||
<div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
) : !session.data?.user ? (
|
||||
<>
|
||||
<LogIn className="w-5 h-5" />
|
||||
Authenticate to start course
|
||||
|
|
@ -273,20 +385,22 @@ function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
|
|||
const session = useLHSession() as any
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
|
||||
// Sort authors by role priority
|
||||
const sortedAuthors = [...course.authors].sort((a, b) => {
|
||||
const rolePriority: Record<string, number> = {
|
||||
'CREATOR': 0,
|
||||
'MAINTAINER': 1,
|
||||
'CONTRIBUTOR': 2,
|
||||
'REPORTER': 3
|
||||
};
|
||||
return rolePriority[a.authorship] - rolePriority[b.authorship];
|
||||
});
|
||||
// Filter active authors and sort by role priority
|
||||
const sortedAuthors = [...course.authors]
|
||||
.filter(author => author.authorship_status === 'ACTIVE')
|
||||
.sort((a, b) => {
|
||||
const rolePriority: Record<string, number> = {
|
||||
'CREATOR': 0,
|
||||
'MAINTAINER': 1,
|
||||
'CONTRIBUTOR': 2,
|
||||
'REPORTER': 3
|
||||
};
|
||||
return rolePriority[a.authorship] - rolePriority[b.authorship];
|
||||
});
|
||||
|
||||
return (
|
||||
<div className=" space-y-3 antialiased flex flex-col p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||
<AuthorInfo author={sortedAuthors[0]} isMobile={isMobile} />
|
||||
<div className="space-y-3 antialiased flex flex-col p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
|
||||
<MultipleAuthors authors={sortedAuthors} isMobile={isMobile} />
|
||||
<div className='px-3 py-2'>
|
||||
<Actions courseuuid={courseuuid} orgslug={orgslug} course={course} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ function UserAvatar(props: UserAvatarProps) {
|
|||
${props.border ? `border ${props.border}` : ''}
|
||||
${props.borderColor ?? 'border-white'}
|
||||
${props.backgroundColor ?? 'bg-gray-100'}
|
||||
shadow-xl
|
||||
shadow-md shadow-gray-300/45
|
||||
aspect-square
|
||||
w-[${props.width ?? 50}px]
|
||||
h-[${props.width ?? 50}px]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue