mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
410 lines
No EOL
14 KiB
TypeScript
410 lines
No EOL
14 KiB
TypeScript
import React, { useState } from 'react'
|
|
import UserAvatar from '../../UserAvatar'
|
|
import { getUserAvatarMediaDirectory } from '@services/media/media'
|
|
import { useMediaQuery } from 'usehooks-ts'
|
|
import { Rss, PencilLine, TentTree } from 'lucide-react'
|
|
import { useCourse } from '@components/Contexts/CourseContext'
|
|
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
|
import useSWR, { mutate } from 'swr'
|
|
import { getAPIUrl } from '@services/config/config'
|
|
import { swrFetcher } from '@services/utils/ts/requests'
|
|
import useAdminStatus from '@components/Hooks/useAdminStatus'
|
|
import { useOrg } from '@components/Contexts/OrgContext'
|
|
import { createCourseUpdate, deleteCourseUpdate } from '@services/courses/updates'
|
|
import toast from 'react-hot-toast'
|
|
import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
|
|
import dayjs from 'dayjs'
|
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
|
import * as Form from '@radix-ui/react-form'
|
|
import FormLayout, {
|
|
FormField,
|
|
FormLabelAndMessage,
|
|
Input,
|
|
Textarea,
|
|
} from '@components/Objects/StyledElements/Form/Form'
|
|
import { useFormik } from 'formik'
|
|
import { motion } from 'framer-motion'
|
|
|
|
dayjs.extend(relativeTime)
|
|
|
|
interface Author {
|
|
user: {
|
|
id: string
|
|
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 CourseAuthorsProps {
|
|
authors: Author[]
|
|
}
|
|
|
|
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 & Updates </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}
|
|
showProfilePopup={true}
|
|
userId={author.user.id}
|
|
/>
|
|
</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 UpdatesSection = () => {
|
|
const [selectedView, setSelectedView] = React.useState('list')
|
|
const adminStatus = useAdminStatus()
|
|
const course = useCourse() as any
|
|
const session = useLHSession() as any
|
|
const access_token = session?.data?.tokens?.access_token
|
|
const { data: updates } = useSWR(
|
|
`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`,
|
|
(url) => swrFetcher(url, access_token)
|
|
)
|
|
|
|
return (
|
|
<div className="mt-2 pt-2">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="flex items-center space-x-2">
|
|
<Rss size={14} className="text-neutral-400" />
|
|
<span className="text-sm font-semibold text-neutral-600">Course Updates</span>
|
|
</div>
|
|
{updates && updates.length > 0 && (
|
|
<span className="px-2 py-0.5 text-[11px] font-medium bg-neutral-100 text-neutral-500 rounded-full">
|
|
{updates.length} {updates.length === 1 ? 'update' : 'updates'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{adminStatus.isAdmin && (
|
|
<button
|
|
onClick={() => setSelectedView(selectedView === 'new' ? 'list' : 'new')}
|
|
className={`
|
|
inline-flex items-center space-x-1.5 px-2.5 py-1 rounded-full text-xs font-medium
|
|
transition-colors duration-150
|
|
${selectedView === 'new'
|
|
? 'bg-neutral-200 text-neutral-700 hover:bg-neutral-300'
|
|
: 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
|
|
}
|
|
`}
|
|
>
|
|
<PencilLine size={12} />
|
|
<span>{selectedView === 'new' ? 'Cancel' : 'New Update'}</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="relative"
|
|
>
|
|
<div className="max-h-[300px] overflow-y-auto pr-1 -mr-1">
|
|
{selectedView === 'list' ? (
|
|
<UpdatesListView />
|
|
) : (
|
|
<NewUpdateForm setSelectedView={setSelectedView} />
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const NewUpdateForm = ({ setSelectedView }: { setSelectedView: (view: string) => void }) => {
|
|
const org = useOrg() as any
|
|
const course = useCourse() as any
|
|
const session = useLHSession() as any
|
|
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
title: '',
|
|
content: ''
|
|
},
|
|
validate: (values) => {
|
|
const errors: any = {}
|
|
if (!values.title) errors.title = 'Title is required'
|
|
if (!values.content) errors.content = 'Content is required'
|
|
return errors
|
|
},
|
|
onSubmit: async (values) => {
|
|
const body = {
|
|
title: values.title,
|
|
content: values.content,
|
|
course_uuid: course.courseStructure.course_uuid,
|
|
org_id: org.id
|
|
}
|
|
const res = await createCourseUpdate(body, session.data?.tokens?.access_token)
|
|
if (res.status === 200) {
|
|
toast.success('Update added successfully')
|
|
setSelectedView('list')
|
|
mutate(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`)
|
|
} else {
|
|
toast.error('Failed to add update')
|
|
}
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<FormLayout onSubmit={formik.handleSubmit} className="space-y-4">
|
|
<FormField name="title">
|
|
<FormLabelAndMessage
|
|
label="Update Title"
|
|
message={formik.errors.title}
|
|
/>
|
|
<Form.Control asChild>
|
|
<Input
|
|
onChange={formik.handleChange}
|
|
value={formik.values.title}
|
|
type="text"
|
|
required
|
|
placeholder="What's new in this update?"
|
|
className="bg-white border-neutral-200 focus:border-neutral-300 focus:ring-neutral-200"
|
|
/>
|
|
</Form.Control>
|
|
</FormField>
|
|
<FormField name="content">
|
|
<FormLabelAndMessage
|
|
label="Update Content"
|
|
message={formik.errors.content}
|
|
/>
|
|
<Form.Control asChild>
|
|
<Textarea
|
|
onChange={formik.handleChange}
|
|
value={formik.values.content}
|
|
required
|
|
placeholder="Share the details of your update..."
|
|
className="bg-white h-[120px] border-neutral-200 focus:border-neutral-300 focus:ring-neutral-200 resize-none"
|
|
/>
|
|
</Form.Control>
|
|
</FormField>
|
|
<div className="flex justify-end space-x-2 pt-2">
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-1.5 bg-neutral-900 hover:bg-black text-white text-xs font-medium rounded-full transition-colors duration-150"
|
|
>
|
|
Publish Update
|
|
</button>
|
|
</div>
|
|
</FormLayout>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const UpdatesListView = () => {
|
|
const course = useCourse() as any
|
|
const adminStatus = useAdminStatus()
|
|
const session = useLHSession() as any
|
|
const access_token = session?.data?.tokens?.access_token
|
|
const { data: updates } = useSWR(
|
|
`${getAPIUrl()}courses/${course?.courseStructure?.course_uuid}/updates`,
|
|
(url) => swrFetcher(url, access_token)
|
|
)
|
|
|
|
if (!updates || updates.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-8 px-4 text-center bg-neutral-50/50 rounded-lg border border-dashed border-neutral-200">
|
|
<TentTree size={28} className="text-neutral-400 mb-2" />
|
|
<p className="text-sm text-neutral-600 font-medium">No updates yet</p>
|
|
<p className="text-xs text-neutral-400 mt-1">Updates about this course will appear here</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{updates.map((update: any) => (
|
|
<motion.div
|
|
key={update.id}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="group p-3 rounded-lg bg-neutral-50/50 hover:bg-neutral-100/80 transition-colors duration-150"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="space-y-1 min-w-0 flex-1">
|
|
<div className="flex items-baseline space-x-2">
|
|
<h4 className="text-sm font-medium text-neutral-800 truncate">{update.title}</h4>
|
|
<span
|
|
title={dayjs(update.creation_date).format('MMMM D, YYYY')}
|
|
className="text-[11px] font-medium text-neutral-400 whitespace-nowrap"
|
|
>
|
|
{dayjs(update.creation_date).fromNow()}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-neutral-600 line-clamp-3">{update.content}</p>
|
|
</div>
|
|
{adminStatus.isAdmin && !adminStatus.loading && (
|
|
<div className="ml-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
|
<DeleteUpdateButton update={update} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const DeleteUpdateButton = ({ update }: any) => {
|
|
const session = useLHSession() as any
|
|
const course = useCourse() as any
|
|
|
|
const handleDelete = async () => {
|
|
const toast_loading = toast.loading('Deleting update...')
|
|
const res = await deleteCourseUpdate(
|
|
course.courseStructure.course_uuid,
|
|
update.courseupdate_uuid,
|
|
session.data?.tokens?.access_token
|
|
)
|
|
|
|
if (res.status === 200) {
|
|
toast.dismiss(toast_loading)
|
|
toast.success('Update deleted successfully')
|
|
mutate(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`)
|
|
} else {
|
|
toast.error('Failed to delete update')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ConfirmationModal
|
|
confirmationButtonText="Delete Update"
|
|
confirmationMessage="Are you sure you want to delete this update?"
|
|
dialogTitle="Delete Update?"
|
|
buttonid="delete-update-button"
|
|
dialogTrigger={
|
|
<button
|
|
id="delete-update-button"
|
|
className="p-1.5 text-neutral-400 hover:text-rose-500 rounded-full hover:bg-rose-50 transition-all duration-150"
|
|
>
|
|
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
}
|
|
functionToExecute={handleDelete}
|
|
status="warning"
|
|
/>
|
|
)
|
|
}
|
|
|
|
const CourseAuthors = ({ authors }: CourseAuthorsProps) => {
|
|
const isMobile = useMediaQuery('(max-width: 768px)')
|
|
|
|
// Filter active authors and sort by role priority
|
|
const sortedAuthors = [...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="antialiased">
|
|
<MultipleAuthors authors={sortedAuthors} isMobile={isMobile} />
|
|
<UpdatesSection />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CourseAuthors
|