Merge branch 'main' of https://hackethon.ai/hack/HackXlbef/FreeBug
commit
8dd5b8fca2
@ -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 { Button } from '@/components/ui/button'; |
||||||
import React, { useEffect, useState } from 'react'; |
import { APP_BASE_URL } from '@/utils/constants'; |
||||||
|
|
||||||
export default function CustomPDFViewer() { |
const CustomPDFViewer = ({ |
||||||
const [currentPage, setCurrentPage] = useState(1); |
pdfPages , |
||||||
const [totalPages, setTotalPages] = useState(0); |
currentPage ,
|
||||||
const [loading, setLoading] = useState(true); |
onChange |
||||||
const [error, setError] = useState<string | null>(null); |
} : { |
||||||
const [pageUrl, setPageUrl] = useState(''); |
pdfPages : Array<string> |
||||||
|
currentPage : number |
||||||
|
onChange : (value : any) => void |
||||||
|
}) => { |
||||||
|
// const [currentPage, setCurrentPage] = useState(0);
|
||||||
|
|
||||||
// Mock function to fetch PDF page as image URL
|
// Your PDF pages array
|
||||||
// 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(() => { |
const totalPages = pdfPages?.length; |
||||||
fetchPageImage(currentPage); |
|
||||||
}, [currentPage]); |
|
||||||
|
|
||||||
const goToPreviousPage = () => { |
const goToPreviousPage = () => { |
||||||
if (currentPage > 1) { |
if (currentPage > 0) { |
||||||
setCurrentPage(prev => prev - 1); |
onChange((prev : number) => prev - 1); |
||||||
} |
} |
||||||
}; |
}; |
||||||
|
|
||||||
const goToNextPage = () => { |
const goToNextPage = () => { |
||||||
if (currentPage < totalPages) { |
if (currentPage < totalPages - 1) { |
||||||
setCurrentPage(prev => prev + 1); |
onChange((prev : number) => prev + 1); |
||||||
} |
} |
||||||
}; |
}; |
||||||
|
|
||||||
return ( |
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"> |
pdfPages && ( |
||||||
{loading ? ( |
<div className="flex flex-col items-center space-y-4"> |
||||||
<div className=" inset-0 flex items-center justify-center min-h-96"> |
{/* PDF Display */} |
||||||
<div className="text-lg text-gray-600">Loading page {currentPage}...</div> |
<div className="w-full max-w-3xl border rounded-lg shadow-lg"> |
||||||
</div> |
<iframe |
||||||
) : error ? ( |
src={APP_BASE_URL + pdfPages[currentPage]} |
||||||
<div className="absolute inset-0 flex items-center justify-center"> |
className="w-full h-[800px]" |
||||||
<div className="text-lg text-red-600">{error}</div> |
title={`PDF Page ${currentPage + 1}`} |
||||||
</div> |
|
||||||
) : ( |
|
||||||
<img
|
|
||||||
src={pageUrl}
|
|
||||||
alt={`Page ${currentPage}`} |
|
||||||
className="w-full h-auto object-contain rounded-lg" |
|
||||||
/> |
/> |
||||||
)} |
|
||||||
</div> |
</div> |
||||||
|
|
||||||
{/* Navigation Controls */} |
{/* Navigation Controls */} |
||||||
<div className="flex items-center gap-4 mt-6"> |
<div className="flex items-center space-x-4"> |
||||||
<Button |
<Button |
||||||
onClick={goToPreviousPage} |
onClick={goToPreviousPage} |
||||||
disabled={currentPage <= 1 || loading} |
disabled={currentPage === 0} |
||||||
className={`px-4 py-2 rounded-lg ${ |
variant="outline" |
||||||
currentPage <= 1 || loading |
|
||||||
? 'bg-purple-700/50 cursor-not-allowed' |
|
||||||
: 'bg-purple-700 hover:bg-purple-500 text-white' |
|
||||||
} transition-colors`}
|
|
||||||
> |
> |
||||||
Previous |
Previous |
||||||
</Button> |
</Button> |
||||||
|
<span className="text-sm"> |
||||||
<div className="text-lg font-medium"> |
Page {currentPage + 1} of {totalPages} |
||||||
Page {currentPage} of {totalPages} |
</span> |
||||||
</div> |
|
||||||
|
|
||||||
<Button |
<Button |
||||||
onClick={goToNextPage} |
onClick={goToNextPage} |
||||||
disabled={currentPage >= totalPages || loading} |
disabled={currentPage === totalPages - 1} |
||||||
className={`px-4 py-2 rounded-lg ${ |
variant="outline" |
||||||
currentPage >= totalPages || loading |
|
||||||
? 'bg-purple-700/50 cursor-not-allowed' |
|
||||||
: 'bg-purple-700 hover:bg-purple-500 text-white' |
|
||||||
} transition-colors`}
|
|
||||||
> |
> |
||||||
Next |
Next |
||||||
</Button> |
</Button> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
); |
) |
||||||
} |
} |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default CustomPDFViewer; |
||||||
Loading…
Reference in new issue