diff --git a/daily-thought-frontend/src/pages/questions.tsx b/daily-thought-frontend/src/pages/questions.tsx new file mode 100644 index 0000000000000000000000000000000000000000..9e57b67a2cb6ae43da7c4a7526b95cc01786d40f --- /dev/null +++ b/daily-thought-frontend/src/pages/questions.tsx @@ -0,0 +1,55 @@ +import NavBar from '@/components/navigation/NavBar'; +import { useQuestions } from '@/hooks/useQuestions'; +import { useUser } from '@/hooks/useUser'; +import { useState } from 'react'; +import NewQuestionForm from '@/components/questions/NewQuestionForm'; +import QuestionList from '@/components/questions/QuestionList'; + +const Questions = () => { + const { user } = useUser(); + const { questions, setRehydrateQuestions } = useQuestions(); + const [newQuestion, setNewQuestion] = useState(''); + + const insertNewQuestion = async (newQuestion: String): Promise<void> => { + const JSONdata = JSON.stringify({ questionText: newQuestion }); + const endpoint = `${process.env.NEXT_PUBLIC_FEED_SERVICE_URL}question`; + const options = { + method: 'POST', + headers: { + Authorization: `Bearer ${sessionStorage.getItem('token')}`, + 'Content-Type': 'application/json' + }, + body: JSONdata + }; + await fetch(endpoint, options); + }; + + const onQuestionSubmit = (): void => { + insertNewQuestion(newQuestion); + setRehydrateQuestions(true); + }; + + return ( + <div className="flex flex-col w-full items-center h-screen"> + {/* Navigation Bar */} + <div className="w-full"> + <NavBar user={user} /> + </div> + + {/* Question Insert */} + <NewQuestionForm + newQuestion={newQuestion} + setNewQuestion={setNewQuestion} + onSubmit={onQuestionSubmit} + /> + + {/* 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} />} + </div> + </div> + ); +}; + +export default Questions;