code developed in the second hour of class

week11/react-qa-server/server.js

@@ -15,7 +15,7 @@ const port = 3001;
 app.use(express.json());
 app.use(morgan('dev'));
 const corsOptions = {
-  origin: 'http://localhost:3000',
+  origin: 'http://localhost:5173',
   optionsSuccessStatus: 200
 }
 app.use(cors(corsOptions));

week11/react-qa/src/API.js

@@ -1 +1,25 @@
-/* Add the API calls here */
+import { Answer, Question } from "./QAModels";
+const SERVER_URL = 'http://localhost:3001';
+
+const getQuestions = async () => {
+  const response = await fetch(SERVER_URL + '/api/questions');
+  if(response.ok) {
+    const questionsJson = await response.json();
+    return questionsJson.map(q => new Question(q.id, q.text, q.author, q.date));
+  }
+  else
+    throw new Error('Internal server error');
+}
+
+const getAnswers = async (questionId) => {
+  const response = await fetch(SERVER_URL + `/api/questions/${questionId}/answers`);
+  const answersJson = await response.json();
+  if(response.ok) {
+    return answersJson.map(ans => new Answer(ans.id, ans.text, ans.author, ans.date, ans.score));
+  }
+  else
+    throw answersJson;
+}
+
+const API = {getQuestions, getAnswers};
+export default API;

week11/react-qa/src/App.jsx

@@ -6,36 +6,22 @@ import NavHeader from './components/NavbarComponents';
 import NotFound from './components/NotFoundComponent';
 import AnswerForm from './components/AnswerForm';
 import QuestionList from './components/QuestionListComponent';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
-
-const fakeQuestions = new Array(
-  new Question(1, 'Is JavaScript better than Python?', 'Luigi De Russis', '2023-02-07'),
-  new Question(2, 'How many students does WA1 have?', 'Luca Mannella', '2023-02-15')
-);
-
-const fakeAnswers = new Array(
-  new Answer(1, 'Yes', 'Luca Mannella', '2023-02-15', 1, -10),
-  new Answer(2, 'Not in a million year', 'Guido van Rossum', '2023-03-02', 1, 5),
-  new Answer(3, 'No', 'Luigi De Russis', '2023-03-02', 1, 10),
-  new Answer(4, 'Both have their pros and cons', 'Mario Rossi', '2023-03-04', 1));
+import API from './API';
 
 function App() {
-  const [questions, setQuestions] = useState(fakeQuestions);
-  const [answers, setAnswers] = useState(fakeAnswers);
+  const [questions, setQuestions] = useState([]);
+  const [answers, setAnswers] = useState([]);
 
-  const voteUp = (answerId) => {
-    setAnswers(oldAnswer => {
-      return oldAnswer.map((ans) => {
-        if(ans.id === answerId) {
-          // return the "updated" answer
-          return new Answer(ans.id, ans.text, ans.name, ans.date, ans.questionId, ans.score +1);
-        }
-        else
-          return ans;
-      });
-    });
-  }
+  useEffect(()=> {
+    // get all the questions from API
+    const getQuestions = async () => {
+      const questions = await API.getQuestions();
+      setQuestions(questions);
+    }
+    getQuestions();
+  }, []);
 
   const addAnswer = (answer) => {
     setAnswers((oldAnswers) => [...oldAnswers, answer]);
@@ -73,7 +59,7 @@ function App() {
             <Route index 
               element={ <QuestionList questions={questions}/> } />
             <Route path='questions/:questionId' 
-              element={<SingleQuestion questions={questions} answers={answers} voteUp={voteUp}/> } />
+              element={<SingleQuestion questions={questions}/> } />
             <Route path='questions/:questionId/addAnswer' 
               element={<AnswerForm addAnswer={addAnswer} lastId={Math.max(...answers.map(ans => ans.id))}/>} />
             <Route path='questions/:questionId/editAnswer/:answerId' 

week11/react-qa/src/QAModels.js

@@ -2,12 +2,11 @@
 
 import dayjs from 'dayjs';
 
-function Answer(id, text, name, date, questionId, score=0) {
+function Answer(id, text, name, date, score=0) {
   this.id = id;
   this.text = text;
   this.name = name;
   this.score = score;
-  this.questionId = questionId;
   this.date = dayjs(date);
 
   /* Method to enable the proper serialization to string of the dayjs object. 

week11/react-qa/src/components/SingleQuestionComponent.jsx

@@ -1,19 +1,44 @@
 import { Row, Col } from 'react-bootstrap';
 import Answers from './AnswerComponents';
 import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import API from '../API';
+import { Answer } from '../QAModels';
 
 function SingleQuestion(props) {
   // get the questionId from the URL to retrieve the right question and its answers
   const params = useParams();
   const question = props.questions[params.questionId-1];
-  const answers = props.answers.filter((ans) => ans.questionId == params.questionId);
+  const [answers, setAnswers] = useState([]);
+
+  useEffect(()=> {
+    // get all the answers of this question from API
+    const getAnswers = async () => {
+      const answers = await API.getAnswers(params.questionId);
+      setAnswers(answers);
+    }
+    getAnswers();
+  }, []);
+
+  const voteUp = (answerId) => {
+    setAnswers(oldAnswer => {
+      return oldAnswer.map((ans) => {
+        if(ans.id === answerId) {
+          // return the "updated" answer
+          return new Answer(ans.id, ans.text, ans.name, ans.date, ans.score +1);
+        }
+        else
+          return ans;
+      });
+    });
+  }
 
   return (
     <>
     {/* The check on "question" is needed to intercept errors due to invalid URLs (e.g., /questions/5 when you have two questions only) */}
     {question ? <>
       <QuestionDescription question={question} />
-      <Answers answers={answers} voteUp={props.voteUp}></Answers></> :
+      <Answers answers={answers} voteUp={voteUp}></Answers></> :
       <p className='lead'>The selected question does not exist!</p>
     } 
     </>