filter questions in form for each page and return, so that each repor…

…t page endpoint serves the relevant questions

.eslintrc.js

@@ -4,7 +4,12 @@ module.exports = {
     node: true,
     es6: true,
   },
-  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'prettier',
+    'prettier/react',
+  ],
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',

src/App/App.js

@@ -32,7 +32,6 @@ function App() {
           render={() => (
             <>
               <Home></Home>
-              <Link to='/report/0'>Start</Link>
             </>
           )}
         />

src/components/Button.js

@@ -8,8 +8,6 @@ const ButtonPrimary = styled(Button)`
     border-radius: 1rem;
     background: linear-gradient(296.3deg, #7768A6 2.65%, #CA68A4 86.52%);
     font-weight: bold;
-
-    
 }
 `;
 

src/components/Form/Form.js

@@ -1,32 +1,44 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 
 const Form = ({ questions }) => {
-  const questionArray = questions
-    ? questions.map(question => {
-      return (
-        <>
-          <p> {question.question}</p>
-          {question.content ? (
-            question.content.map(answer => {
-              return (
-                <>
-                  <input
-                    type={question.type}
-                    value={answer}
-                    id={answer + ' ' + question.questionNumber}
-                  />
-                  <label htmlFor={answer}>{answer}</label>
-                </>
-              );
-            })
-          ) : (
-            <input type={question.type} />
-          )}
-        </>
-      );
-    })
+  const path = useLocation().pathname;
+
+  // page question from URL path
+  const page = parseInt(path.match(/report\/(\d+)$/i)[1]);
+
+  console.log({ page });
+
+
+  const pageQuestions = questions ? questions
+    .filter(question => {
+    return question.page === page
+  })
+    .map(question => {
+        return (
+          <>
+            <p> {question.question}</p>
+            {question.content ? (
+              question.content.map(answer => {
+                return (
+                  <>
+                    <input
+                      type={question.type}
+                      value={answer}
+                      id={answer + ' ' + question.questionNumber}
+                    />
+                    <label htmlFor={answer}>{answer}</label>
+                  </>
+                );
+              })
+            ) : (
+              <input type={question.type} />
+            )}
+          </>
+        );
+      })
     : null;
-  return <form>{questionArray}</form>;
+  return <form>{pageQuestions}</form>;
 };
 
 export default Form;