diff --git a/daily-thought-frontend/src/components/questions/QuestionList.tsx b/daily-thought-frontend/src/components/questions/QuestionList.tsx index 049e02bec1c4796b5cfb9cb96c8c17b219c3f022..e4a384272a80a856b62f60bca57ff9b1ef4dfc44 100644 --- a/daily-thought-frontend/src/components/questions/QuestionList.tsx +++ b/daily-thought-frontend/src/components/questions/QuestionList.tsx @@ -5,9 +5,10 @@ import styles from '../../styles/Scrollbox.module.css'; type QuestionListProps = { questions: QuestionRecord[]; + onDeleteClick: (questionId: string) => void; }; -const QuestionList: FC<QuestionListProps> = ({ questions }) => ( +const QuestionList: FC<QuestionListProps> = ({ questions, onDeleteClick }) => ( <ul role="list" className={ @@ -21,7 +22,7 @@ const QuestionList: FC<QuestionListProps> = ({ questions }) => ( className="flex flex-row items-center justify-between gap-x-6 py-5 px-4 " > <p className="text-base font-semibold leading-6 text-gray-900">{question.content}</p> - <TrashIcon className="shrink-0 h-6 w-6" /> + <TrashIcon className="shrink-0 h-6 w-6 cursor-pointer" type='button' onClick={() => onDeleteClick(question.id)} /> </li> ))} </ul> diff --git a/daily-thought-frontend/src/pages/questions.tsx b/daily-thought-frontend/src/pages/questions.tsx index 8614a8db6c488bf718a32aa6a285d0f7d3c79083..5848ae48c2ff36160cc46e06b830196bd9eb62f1 100644 --- a/daily-thought-frontend/src/pages/questions.tsx +++ b/daily-thought-frontend/src/pages/questions.tsx @@ -14,7 +14,7 @@ const Questions = () => { const insertNewQuestion = async (newQuestion: String): Promise<void> => { const JSONdata = JSON.stringify({ questionText: newQuestion }); - const endpoint = `${process.env.NEXT_PUBLIC_FEED_SERVICE_URL}question`; + const endpoint = `${process.env.NEXT_PUBLIC_FEED_SERVICE_URL}insertQuestion`; const options = { method: 'POST', headers: { @@ -46,12 +46,30 @@ const Questions = () => { } }; - const onQuestionSubmit = async (): Promise<void> => { + const deleteQuestion = async (questionId: String): Promise<void> => { + const endpoint = `${process.env.NEXT_PUBLIC_FEED_SERVICE_URL}disableQuestion?questionId=${questionId}`; + const options = { + method: 'POST', + headers: { + Authorization: `Bearer ${sessionStorage.getItem('token')}`, + 'Content-Type': 'application/json' + } + }; + + await fetch(endpoint, options); + }; + + const onQuestionInsert = async (): Promise<void> => { await insertNewQuestion(newQuestion); setNewQuestion(''); setRehydrateQuestions(true); }; + const onQuestionDelete = async (questionId: string): Promise<void> => { + await deleteQuestion(questionId); + setRehydrateQuestions(true); + }; + return ( <div className="flex flex-col w-full items-center h-screen"> {/* Navigation Bar */} @@ -63,14 +81,14 @@ const Questions = () => { <NewQuestionForm newQuestion={newQuestion} setNewQuestion={setNewQuestion} - onSubmit={onQuestionSubmit} + onSubmit={onQuestionInsert} statusMessage={statusMessage} /> {/* List of Questions */} <div className="flex flex-col items-center w-full shadow-lg min-h-32 pb-4 overflow-auto"> <h2 className="text-xl font-semibold leading-10 pt-4 text-gray-900">Questions Stored</h2> - {questions === undefined ? <p>Loading</p> : <QuestionList questions={questions} />} + {questions === undefined ? <p>Loading</p> : <QuestionList questions={questions} onDeleteClick={onQuestionDelete}/>} </div> </div> );