Compare commits
No commits in common. '9f19445301a5a9824eb38d42ad3ebf9725b25351' and '88b4537b4a6e8b86792698d31bb012202dd31fc9' have entirely different histories.
9f19445301
...
88b4537b4a
@ -1,46 +0,0 @@ |
|||||||
'use client' |
|
||||||
import { PageHeading } from "@/components/(dashboard)/ui/title" |
|
||||||
import CommonContainer from "@/components/elements/CommonContainer" |
|
||||||
import CourseCard from "@/components/elements/CourseCard" |
|
||||||
import AppContextProvider from "@/helpers/context/AppContextProvider" |
|
||||||
import { defaultFetcher } from "@/helpers/fetch.helper" |
|
||||||
import { APP_BASE_URL } from "@/utils/constants" |
|
||||||
import CommonView from "@/views/CommonView" |
|
||||||
import React from "react" |
|
||||||
import useSWR from "swr" |
|
||||||
|
|
||||||
const AllCourseList : React.FC = () => { |
|
||||||
const { data } = useSWR(APP_BASE_URL + '/api/course/listAll' , defaultFetcher) |
|
||||||
|
|
||||||
console.log(data) |
|
||||||
return( |
|
||||||
<AppContextProvider> |
|
||||||
<CommonView> |
|
||||||
<CommonContainer> |
|
||||||
<PageHeading>All Courses</PageHeading> |
|
||||||
<div className="grid grid-cols-4 gap-4 mt-8"> |
|
||||||
{ |
|
||||||
data?.data?.length && data?.data?.map((course) => { |
|
||||||
return( |
|
||||||
<CourseCard
|
|
||||||
id={course?.id} |
|
||||||
image={APP_BASE_URL + course?.coverImage} |
|
||||||
title={course?.name} |
|
||||||
category={course?.category?.name} |
|
||||||
instructor={{ |
|
||||||
image : APP_BASE_URL + course?.author?.pfpFilename , |
|
||||||
name :course?.author?.firstName |
|
||||||
}}
|
|
||||||
|
|
||||||
/> |
|
||||||
) |
|
||||||
}) |
|
||||||
} |
|
||||||
</div> |
|
||||||
</CommonContainer> |
|
||||||
</CommonView> |
|
||||||
</AppContextProvider> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default AllCourseList |
|
||||||
@ -1,300 +0,0 @@ |
|||||||
import React, { useState, useRef } from 'react'; |
|
||||||
import useSWRInfinite from 'swr/infinite'; |
|
||||||
import { Card } from "@/components/ui/card"; |
|
||||||
import { Button } from "@/components/ui/button"; |
|
||||||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; |
|
||||||
import { Textarea } from "@/components/ui/textarea"; |
|
||||||
import { ScrollArea } from "@/components/ui/scroll-area"; |
|
||||||
import { MessageCircle, Reply, X } from "lucide-react"; |
|
||||||
import { APP_BASE_URL } from '@/utils/constants'; |
|
||||||
import { getEduConnectAccessToken } from '@/helpers/token.helper'; |
|
||||||
|
|
||||||
// Types
|
|
||||||
interface Reply { |
|
||||||
id: number; |
|
||||||
user: string; |
|
||||||
avatar: string; |
|
||||||
content: string; |
|
||||||
timestamp: string; |
|
||||||
} |
|
||||||
|
|
||||||
interface Discussion { |
|
||||||
id: number; |
|
||||||
user: string; |
|
||||||
avatar: string; |
|
||||||
content: string; |
|
||||||
likes: number; |
|
||||||
replies: Reply[]; |
|
||||||
timestamp: string; |
|
||||||
} |
|
||||||
|
|
||||||
interface PageData { |
|
||||||
discussions: Discussion[]; |
|
||||||
hasMore: boolean; |
|
||||||
} |
|
||||||
|
|
||||||
interface DiscussionSectionProps { |
|
||||||
courseUuid: string; |
|
||||||
} |
|
||||||
|
|
||||||
// Key generator for SWR
|
|
||||||
const getKey = (courseUuid: string) => (pageIndex: number, previousPageData: PageData | null) => { |
|
||||||
if (previousPageData && !previousPageData.discussions.length) return null; |
|
||||||
return `${APP_BASE_URL}/api/chat/get?page=${pageIndex}`; |
|
||||||
}; |
|
||||||
|
|
||||||
// Fetcher function
|
|
||||||
const fetcher = async (url: string, courseUuid: string): Promise<PageData> => { |
|
||||||
const formData = new FormData(); |
|
||||||
formData.append('course_uuid', courseUuid); |
|
||||||
|
|
||||||
const response = await fetch(url, { |
|
||||||
method: 'POST', |
|
||||||
body: formData ,
|
|
||||||
headers : { |
|
||||||
Authorization : `Bearer ${getEduConnectAccessToken()}` |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
if (!response.ok) { |
|
||||||
throw new Error('Failed to fetch discussions'); |
|
||||||
} |
|
||||||
|
|
||||||
const data = await response.json(); |
|
||||||
return { |
|
||||||
discussions: data.discussions.map((discussion: any) => ({ |
|
||||||
...discussion, |
|
||||||
timestamp: new Date(discussion.timestamp).toLocaleString() |
|
||||||
})), |
|
||||||
hasMore: data.hasMore |
|
||||||
}; |
|
||||||
}; |
|
||||||
|
|
||||||
const EnhancedDiscussionSection: React.FC<DiscussionSectionProps> = ({ courseUuid }) => { |
|
||||||
const [comment, setComment] = useState(''); |
|
||||||
const [replyingTo, setReplyingTo] = useState<{ commentId: number; userName: string } | null>(null); |
|
||||||
const loadingRef = useRef<HTMLDivElement>(null); |
|
||||||
const containerRef = useRef<HTMLDivElement>(null); |
|
||||||
|
|
||||||
const { |
|
||||||
data, |
|
||||||
error, |
|
||||||
size, |
|
||||||
setSize, |
|
||||||
isValidating, |
|
||||||
mutate |
|
||||||
} = useSWRInfinite( |
|
||||||
getKey(courseUuid), |
|
||||||
(url) => fetcher(url, courseUuid), |
|
||||||
{ |
|
||||||
revalidateFirstPage: false, |
|
||||||
revalidateOnFocus: false, |
|
||||||
persistSize: true |
|
||||||
} |
|
||||||
); |
|
||||||
|
|
||||||
const allDiscussions = data ? data.flatMap(page => page.discussions) : []; |
|
||||||
const hasMore = data ? data[data.length - 1]?.hasMore : true; |
|
||||||
const isLoadingMore = !data && !error || (size > 0 && data && typeof data[size - 1] === "undefined"); |
|
||||||
|
|
||||||
// Intersection Observer for infinite loading
|
|
||||||
React.useEffect(() => { |
|
||||||
const observer = new IntersectionObserver( |
|
||||||
(entries) => { |
|
||||||
if (entries[0].isIntersecting && hasMore && !isValidating) { |
|
||||||
setSize(size + 1); |
|
||||||
} |
|
||||||
}, |
|
||||||
{ threshold: 0.1 } |
|
||||||
); |
|
||||||
|
|
||||||
if (loadingRef.current) { |
|
||||||
observer.observe(loadingRef.current); |
|
||||||
} |
|
||||||
|
|
||||||
return () => observer.disconnect(); |
|
||||||
}, [hasMore, isValidating, setSize, size]); |
|
||||||
|
|
||||||
const handleSubmit = async () => { |
|
||||||
if (comment.trim()) { |
|
||||||
const formData = new FormData(); |
|
||||||
formData.append('course_uuid', courseUuid); |
|
||||||
formData.append('content', comment); |
|
||||||
if (replyingTo) { |
|
||||||
formData.append('parent_id', replyingTo.commentId.toString()); |
|
||||||
} |
|
||||||
|
|
||||||
try { |
|
||||||
const response = await fetch('/api/chat/post', { |
|
||||||
method: 'POST', |
|
||||||
body: formData |
|
||||||
}); |
|
||||||
|
|
||||||
if (!response.ok) { |
|
||||||
throw new Error('Failed to post comment'); |
|
||||||
} |
|
||||||
|
|
||||||
const newComment = await response.json(); |
|
||||||
|
|
||||||
// Optimistically update the UI
|
|
||||||
const updatedData = [...(data || [])]; |
|
||||||
if (replyingTo) { |
|
||||||
// Update the discussion with the new reply
|
|
||||||
updatedData.forEach(page => { |
|
||||||
page.discussions = page.discussions.map(discussion => { |
|
||||||
if (discussion.id === replyingTo.commentId) { |
|
||||||
return { |
|
||||||
...discussion, |
|
||||||
replies: [...discussion.replies, { |
|
||||||
...newComment, |
|
||||||
timestamp: 'Just now' |
|
||||||
}] |
|
||||||
}; |
|
||||||
} |
|
||||||
return discussion; |
|
||||||
}); |
|
||||||
}); |
|
||||||
} else { |
|
||||||
// Add new top-level comment
|
|
||||||
if (updatedData[0]) { |
|
||||||
updatedData[0].discussions = [{ |
|
||||||
...newComment, |
|
||||||
replies: [], |
|
||||||
timestamp: 'Just now' |
|
||||||
}, ...updatedData[0].discussions]; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
await mutate(updatedData, false); |
|
||||||
setComment(''); |
|
||||||
setReplyingTo(null); |
|
||||||
} catch (error) { |
|
||||||
console.error('Failed to post comment:', error); |
|
||||||
// You might want to show an error message to the user here
|
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const handleReply = (commentId: number, userName: string) => { |
|
||||||
setReplyingTo({ commentId, userName }); |
|
||||||
setComment(`@${userName} `); |
|
||||||
}; |
|
||||||
|
|
||||||
const cancelReply = () => { |
|
||||||
setReplyingTo(null); |
|
||||||
setComment(''); |
|
||||||
}; |
|
||||||
|
|
||||||
if (error) { |
|
||||||
return ( |
|
||||||
<div className="text-red-500 p-4 text-center"> |
|
||||||
Error loading discussions. Please try again later. |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="w-full max-w-3xl mx-auto"> |
|
||||||
<ScrollArea className="h-[600px]"> |
|
||||||
<div className="space-y-6 p-4"> |
|
||||||
{allDiscussions.map((discussion) => ( |
|
||||||
<Card key={discussion.id} className="p-4"> |
|
||||||
<div className="space-y-4"> |
|
||||||
<div className="flex gap-4"> |
|
||||||
<Avatar className="w-8 h-8"> |
|
||||||
<AvatarImage src={discussion.avatar} alt={discussion.user} /> |
|
||||||
<AvatarFallback>{discussion.user[0]}</AvatarFallback> |
|
||||||
</Avatar> |
|
||||||
<div className="flex-1"> |
|
||||||
<div className="flex items-center gap-2 mb-1"> |
|
||||||
<span className="font-medium">{discussion.user}</span> |
|
||||||
<span className="text-sm text-gray-500">{discussion.timestamp}</span> |
|
||||||
</div> |
|
||||||
<p className="text-gray-700 mb-2">{discussion.content}</p> |
|
||||||
<div className="flex items-center gap-4"> |
|
||||||
<button
|
|
||||||
className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700" |
|
||||||
onClick={() => handleReply(discussion.id, discussion.user)} |
|
||||||
> |
|
||||||
<Reply className="w-4 h-4" /> |
|
||||||
Reply |
|
||||||
</button> |
|
||||||
<div className="flex items-center gap-1 text-sm text-gray-500"> |
|
||||||
<MessageCircle className="w-4 h-4" /> |
|
||||||
{discussion.replies.length} replies |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
{discussion.replies.length > 0 && ( |
|
||||||
<div className="ml-12 space-y-4"> |
|
||||||
{discussion.replies.map((reply) => ( |
|
||||||
<div key={reply.id} className="flex gap-4"> |
|
||||||
<Avatar className="w-8 h-8"> |
|
||||||
<AvatarImage src={reply.avatar} alt={reply.user} /> |
|
||||||
<AvatarFallback>{reply.user[0]}</AvatarFallback> |
|
||||||
</Avatar> |
|
||||||
<div className="flex-1"> |
|
||||||
<div className="flex items-center gap-2 mb-1"> |
|
||||||
<span className="font-medium">{reply.user}</span> |
|
||||||
<span className="text-sm text-gray-500">{reply.timestamp}</span> |
|
||||||
</div> |
|
||||||
<p className="text-gray-700">{reply.content}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
</Card> |
|
||||||
))} |
|
||||||
|
|
||||||
<div ref={loadingRef} className="h-10 flex items-center justify-center"> |
|
||||||
{isLoadingMore && ( |
|
||||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900" /> |
|
||||||
)} |
|
||||||
{!hasMore && allDiscussions.length > 0 && ( |
|
||||||
<div className="text-gray-500">No more discussions</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</ScrollArea> |
|
||||||
|
|
||||||
<div className="my-6 px-4"> |
|
||||||
<div className="flex items-start gap-4"> |
|
||||||
<Avatar className="w-8 h-8"> |
|
||||||
<AvatarImage src="/api/placeholder/32/32" alt="User" /> |
|
||||||
<AvatarFallback>U</AvatarFallback> |
|
||||||
</Avatar> |
|
||||||
<div className="flex-1"> |
|
||||||
{replyingTo && ( |
|
||||||
<div className="flex items-center gap-2 mb-2 text-sm text-gray-500"> |
|
||||||
<span>Replying to {replyingTo.userName}</span> |
|
||||||
<button
|
|
||||||
onClick={cancelReply} |
|
||||||
className="p-1 hover:bg-gray-100 rounded-full" |
|
||||||
> |
|
||||||
<X className="w-4 h-4" /> |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
<Textarea |
|
||||||
placeholder={replyingTo ? `Reply to ${replyingTo.userName}...` : "Add to the discussion..."} |
|
||||||
value={comment} |
|
||||||
onChange={(e) => setComment(e.target.value)} |
|
||||||
className="min-h-24 mb-6" |
|
||||||
/> |
|
||||||
<div className="w-fit ml-auto"> |
|
||||||
<Button onClick={handleSubmit} className="bg-purple-700"> |
|
||||||
{replyingTo ? 'Post Reply' : 'Post Comment'} |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default EnhancedDiscussionSection; |
|
||||||
@ -1,73 +1,97 @@ |
|||||||
import React, { useState } from 'react'; |
|
||||||
import { Button } from '@/components/ui/button'; |
import { Button } from '@/components/ui/button'; |
||||||
import { APP_BASE_URL } from '@/utils/constants'; |
import React, { useEffect, useState } from 'react'; |
||||||
|
|
||||||
const CustomPDFViewer = ({ |
export default function CustomPDFViewer() { |
||||||
pdfPages , |
const [currentPage, setCurrentPage] = useState(1); |
||||||
currentPage ,
|
const [totalPages, setTotalPages] = useState(0); |
||||||
onChange |
const [loading, setLoading] = useState(true); |
||||||
} : { |
const [error, setError] = useState<string | null>(null); |
||||||
pdfPages : Array<string> |
const [pageUrl, setPageUrl] = useState(''); |
||||||
currentPage : number |
|
||||||
onChange : (value : any) => void |
|
||||||
}) => { |
|
||||||
// const [currentPage, setCurrentPage] = useState(0);
|
|
||||||
|
|
||||||
// Your PDF pages array
|
|
||||||
|
|
||||||
const totalPages = pdfPages?.length; |
// Mock function to fetch PDF page as image URL
|
||||||
|
// In a real implementation, you would use a backend service to convert PDF pages to images
|
||||||
|
const fetchPageImage = async (pageNumber : number) => { |
||||||
|
setLoading(true); |
||||||
|
try { |
||||||
|
// Simulating API call delay
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 500)); |
||||||
|
// Using placeholder image for demonstration
|
||||||
|
setPageUrl(`https://placehold.co/600x400?text=Page ${pageNumber}`); |
||||||
|
setTotalPages(5); // Mock total pages
|
||||||
|
setLoading(false); |
||||||
|
} catch (err) { |
||||||
|
setError('Failed to load PDF page'); |
||||||
|
setLoading(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
fetchPageImage(currentPage); |
||||||
|
}, [currentPage]); |
||||||
|
|
||||||
const goToPreviousPage = () => { |
const goToPreviousPage = () => { |
||||||
if (currentPage > 0) { |
if (currentPage > 1) { |
||||||
onChange((prev : number) => prev - 1); |
setCurrentPage(prev => prev - 1); |
||||||
} |
} |
||||||
}; |
}; |
||||||
|
|
||||||
const goToNextPage = () => { |
const goToNextPage = () => { |
||||||
if (currentPage < totalPages - 1) { |
if (currentPage < totalPages) { |
||||||
onChange((prev : number) => prev + 1); |
setCurrentPage(prev => prev + 1); |
||||||
} |
} |
||||||
}; |
}; |
||||||
|
|
||||||
return ( |
return ( |
||||||
<> |
<div className="flex flex-col items-center w-full max-w-3xl mx-auto p-4"> |
||||||
{ |
{/* Page Display */} |
||||||
pdfPages && ( |
<div className="relative w-full h-auto bg-gray-100 rounded-lg shadow-lg mb-4"> |
||||||
<div className="flex flex-col items-center space-y-4"> |
{loading ? ( |
||||||
{/* PDF Display */} |
<div className=" inset-0 flex items-center justify-center min-h-96"> |
||||||
<div className="w-full max-w-3xl border rounded-lg shadow-lg"> |
<div className="text-lg text-gray-600">Loading page {currentPage}...</div> |
||||||
<iframe |
|
||||||
src={APP_BASE_URL + pdfPages[currentPage]} |
|
||||||
className="w-full h-[800px]" |
|
||||||
title={`PDF Page ${currentPage + 1}`} |
|
||||||
/> |
|
||||||
</div> |
</div> |
||||||
|
) : error ? ( |
||||||
{/* Navigation Controls */} |
<div className="absolute inset-0 flex items-center justify-center"> |
||||||
<div className="flex items-center space-x-4"> |
<div className="text-lg text-red-600">{error}</div> |
||||||
<Button |
|
||||||
onClick={goToPreviousPage} |
|
||||||
disabled={currentPage === 0} |
|
||||||
variant="outline" |
|
||||||
> |
|
||||||
Previous |
|
||||||
</Button> |
|
||||||
<span className="text-sm"> |
|
||||||
Page {currentPage + 1} of {totalPages} |
|
||||||
</span> |
|
||||||
<Button |
|
||||||
onClick={goToNextPage} |
|
||||||
disabled={currentPage === totalPages - 1} |
|
||||||
variant="outline" |
|
||||||
> |
|
||||||
Next |
|
||||||
</Button> |
|
||||||
</div> |
</div> |
||||||
|
) : ( |
||||||
|
<img
|
||||||
|
src={pageUrl}
|
||||||
|
alt={`Page ${currentPage}`} |
||||||
|
className="w-full h-auto object-contain rounded-lg" |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Navigation Controls */} |
||||||
|
<div className="flex items-center gap-4 mt-6"> |
||||||
|
<Button |
||||||
|
onClick={goToPreviousPage} |
||||||
|
disabled={currentPage <= 1 || loading} |
||||||
|
className={`px-4 py-2 rounded-lg ${ |
||||||
|
currentPage <= 1 || loading |
||||||
|
? 'bg-purple-700/50 cursor-not-allowed' |
||||||
|
: 'bg-purple-700 hover:bg-purple-500 text-white' |
||||||
|
} transition-colors`}
|
||||||
|
> |
||||||
|
Previous |
||||||
|
</Button> |
||||||
|
|
||||||
|
<div className="text-lg font-medium"> |
||||||
|
Page {currentPage} of {totalPages} |
||||||
</div> |
</div> |
||||||
) |
|
||||||
} |
|
||||||
</> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default CustomPDFViewer; |
<Button |
||||||
|
onClick={goToNextPage} |
||||||
|
disabled={currentPage >= totalPages || loading} |
||||||
|
className={`px-4 py-2 rounded-lg ${ |
||||||
|
currentPage >= totalPages || loading |
||||||
|
? 'bg-purple-700/50 cursor-not-allowed' |
||||||
|
: 'bg-purple-700 hover:bg-purple-500 text-white' |
||||||
|
} transition-colors`}
|
||||||
|
> |
||||||
|
Next |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue