Compare commits
4 Commits
88b4537b4a
...
9f19445301
| Author | SHA1 | Date |
|---|---|---|
 ayush
|
9f19445301 | 6 months ago |
|
ayush
|
3f777b170d | 6 months ago |
|
ayush
|
db1c835920 | 6 months ago |
|
ayush
|
4b622f15c3 | 6 months ago |
@ -0,0 +1,46 @@ |
||||
'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 |
||||
@ -0,0 +1,300 @@ |
||||
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,97 +1,73 @@ |
||||
import React, { useState } from 'react'; |
||||
import { Button } from '@/components/ui/button'; |
||||
import React, { useEffect, useState } from 'react'; |
||||
import { APP_BASE_URL } from '@/utils/constants'; |
||||
|
||||
export default function CustomPDFViewer() { |
||||
const [currentPage, setCurrentPage] = useState(1); |
||||
const [totalPages, setTotalPages] = useState(0); |
||||
const [loading, setLoading] = useState(true); |
||||
const [error, setError] = useState<string | null>(null); |
||||
const [pageUrl, setPageUrl] = useState(''); |
||||
const CustomPDFViewer = ({ |
||||
pdfPages , |
||||
currentPage ,
|
||||
onChange |
||||
} : { |
||||
pdfPages : Array<string> |
||||
currentPage : number |
||||
onChange : (value : any) => void |
||||
}) => { |
||||
// const [currentPage, setCurrentPage] = useState(0);
|
||||
|
||||
// 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); |
||||
} |
||||
}; |
||||
// Your PDF pages array
|
||||
|
||||
useEffect(() => { |
||||
fetchPageImage(currentPage); |
||||
}, [currentPage]); |
||||
const totalPages = pdfPages?.length; |
||||
|
||||
const goToPreviousPage = () => { |
||||
if (currentPage > 1) { |
||||
setCurrentPage(prev => prev - 1); |
||||
if (currentPage > 0) { |
||||
onChange((prev : number) => prev - 1); |
||||
} |
||||
}; |
||||
|
||||
const goToNextPage = () => { |
||||
if (currentPage < totalPages) { |
||||
setCurrentPage(prev => prev + 1); |
||||
if (currentPage < totalPages - 1) { |
||||
onChange((prev : number) => prev + 1); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<div className="flex flex-col items-center w-full max-w-3xl mx-auto p-4"> |
||||
{/* Page Display */} |
||||
<div className="relative w-full h-auto bg-gray-100 rounded-lg shadow-lg mb-4"> |
||||
{loading ? ( |
||||
<div className=" inset-0 flex items-center justify-center min-h-96"> |
||||
<div className="text-lg text-gray-600">Loading page {currentPage}...</div> |
||||
</div> |
||||
) : error ? ( |
||||
<div className="absolute inset-0 flex items-center justify-center"> |
||||
<div className="text-lg text-red-600">{error}</div> |
||||
</div> |
||||
) : ( |
||||
<img
|
||||
src={pageUrl}
|
||||
alt={`Page ${currentPage}`} |
||||
className="w-full h-auto object-contain rounded-lg" |
||||
<> |
||||
{ |
||||
pdfPages && ( |
||||
<div className="flex flex-col items-center space-y-4"> |
||||
{/* PDF Display */} |
||||
<div className="w-full max-w-3xl border rounded-lg shadow-lg"> |
||||
<iframe |
||||
src={APP_BASE_URL + pdfPages[currentPage]} |
||||
className="w-full h-[800px]" |
||||
title={`PDF Page ${currentPage + 1}`} |
||||
/> |
||||
)} |
||||
</div> |
||||
|
||||
{/* Navigation Controls */} |
||||
<div className="flex items-center gap-4 mt-6"> |
||||
<div className="flex items-center space-x-4"> |
||||
<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`}
|
||||
disabled={currentPage === 0} |
||||
variant="outline" |
||||
> |
||||
Previous |
||||
</Button> |
||||
|
||||
<div className="text-lg font-medium"> |
||||
Page {currentPage} of {totalPages} |
||||
</div> |
||||
|
||||
<span className="text-sm"> |
||||
Page {currentPage + 1} of {totalPages} |
||||
</span> |
||||
<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`}
|
||||
disabled={currentPage === totalPages - 1} |
||||
variant="outline" |
||||
> |
||||
Next |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
</> |
||||
); |
||||
} |
||||
}; |
||||
|
||||
export default CustomPDFViewer; |
||||
Loading…
Reference in new issue