diff --git a/client/src/components/Forums/ThreadDetails/ThreadDetails.tsx b/client/src/components/Forums/ThreadDetails/ThreadDetails.tsx index 4f586d6..930d62b 100644 --- a/client/src/components/Forums/ThreadDetails/ThreadDetails.tsx +++ b/client/src/components/Forums/ThreadDetails/ThreadDetails.tsx @@ -83,6 +83,7 @@ const ThreadDetail = ({ forumId, threadId }: ThreadDetailProps) => { }; // TODO pending, loading, error to be handled by global once migrated + if (pending) return null; if (loading) return
Loading...
; if (error) return
Error: {error}
; diff --git a/client/src/components/Forums/ThreadsDisplay/ThreadsDisplay.tsx b/client/src/components/Forums/ThreadsDisplay/ThreadsDisplay.tsx index 2bf2bd5..55e25a5 100644 --- a/client/src/components/Forums/ThreadsDisplay/ThreadsDisplay.tsx +++ b/client/src/components/Forums/ThreadsDisplay/ThreadsDisplay.tsx @@ -1,7 +1,8 @@ -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import axios from 'axios'; import CreateThread from '../CreateThread/CreateThread'; import { Thread, IForum } from '../../../../types/forums'; +import { useAppSelector } from '../../../app/hooks'; interface ThreadsDisplayProps { forumId?: string | null; @@ -9,11 +10,15 @@ interface ThreadsDisplayProps { } const ThreadsDisplay = ({ forumId, onThreadSelect }: ThreadsDisplayProps) => { + const userID = useAppSelector((state) => state.user.userData?._id); const [threads, setThreads] = useState([]); const [forum, setForum] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [creatingThread, setCreatingThread] = useState(false); + const [editingThreadId, setEditingThreadId] = useState(null); + const [editTitle, setEditTitle] = useState(''); + const [editContent, setEditContent] = useState(''); useEffect(() => { const fetchForumAndThreads = async () => { @@ -45,6 +50,47 @@ const ThreadsDisplay = ({ forumId, onThreadSelect }: ThreadsDisplayProps) => { setCreatingThread(!creatingThread); }; + const handleEditThread = ( + event: React.MouseEvent, + threadId: string, + title: string, + content: string, + ) => { + event.stopPropagation(); + setEditingThreadId(threadId); + setEditTitle(title); + setEditContent(content); + }; + + const handleUpdateThread = async ( + event: React.MouseEvent, + threadId: string, + forum: string, + ) => { + event.stopPropagation(); + setLoading(true); + try { + await axios.put( + `/api/forums/${forumId || forum}/threads/${threadId}`, + { title: editTitle, content: editContent }, + { withCredentials: true }, + ); + setThreads( + threads.map((thread) => + thread._id === threadId ? { ...thread, title: editTitle, content: editContent } : thread, + ), + ); + setEditingThreadId(null); + setEditTitle(''); + setEditContent(''); + setLoading(false); + } catch (err) { + const error = err as Error; + setError(error.message); + setLoading(false); + } + }; + function formatReplies(count: number) { if (count === 0) return 'No replies'; if (count === 1) return '1 reply'; @@ -78,6 +124,55 @@ const ThreadsDisplay = ({ forumId, onThreadSelect }: ThreadsDisplayProps) => { className="mb-2 p-2 bg-gray-800 rounded-lg cursor-pointer" onClick={() => onThreadSelect(thread._id)} > + {editingThreadId === thread._id ? ( +
e.stopPropagation()}> + e.stopPropagation()} + onChange={(e) => setEditTitle(e.target.value)} + className="w-full p-2 mb-2 rounded bg-gray-800 text-white" + /> +