Allocate delete button to disable endpoint

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>

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>
   );