Added routing for project and created prototype of landing page

app/package.json

@@ -1,10 +1,12 @@
 {
   "dependencies": {
+    "@types/react-router-dom": "^5.3.2",
     "axios": "^0.22.0",
     "formik": "^2.2.9",
     "jest": "^27.2.4",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0"
   },
   "scripts": {
     "start": "parcel ./src/index.html --port 3000",

app/src/components/formPage/formPage.tsx

@@ -1,19 +1,26 @@
 import * as React from 'react';
-import { Dispatch, SetStateAction, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import MyForm from './form';
 import getQuestionnaire from '../../api/questionnaire';
 import ErrorMessage from '../errorMessage/errorMessage';
+import { useHistory, withRouter, useLocation } from 'react-router-dom';
 
-type Dispatcher<S> = Dispatch<SetStateAction<S>>;
+const useQuery = () => {
+  return new URLSearchParams(useLocation().search);
+};
+
+const FormPage = () => {
+  const history = useHistory();
+  const query = useQuery();
 
-const FormPage = ({ setRenderFormPage }: { setRenderFormPage: Dispatcher<boolean> }) => {
   const [questionnaire, setQuestionnaire] = useState({
     title: '',
     description: '',
     id: '',
     item: [],
   });
-  const questionnaireId: string = '2638765'; // harcoded for now
+
+  const questionnaireId = query.get('id'); // get id from query param
 
   useEffect(() => {
     const getQuestionnaireFromApi = async () => {
@@ -24,7 +31,9 @@ const FormPage = ({ setRenderFormPage }: { setRenderFormPage: Dispatcher<boolean
   }, []);
 
   const goToMainPage = () => {
-    setRenderFormPage(false);
+    history.push({
+      pathname: '/',
+    });
   };
 
   if (questionnaire.id === '') {
@@ -34,12 +43,13 @@ const FormPage = ({ setRenderFormPage }: { setRenderFormPage: Dispatcher<boolean
 
   return (
     <div>
+      form selected: {questionnaireId}
       <MyForm questionnaire={questionnaire} />
       <button onClick={goToMainPage} type="button">
-        go to the main page
+        Go back to main page
       </button>
     </div>
   );
 };
 
-export default FormPage;
+export default withRouter(FormPage);

app/src/components/landingPage/landingPage.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Formik, Field, Form, FormikHelpers } from 'formik';
+import { useHistory } from 'react-router-dom';
+
+interface Values {
+  id: number; // Selected questionnaire's id
+}
+
+const questionnaireIds = [2638765, 2638766, 2638767, 2638768, 2638769]; // hardcoded for now
+const idList = questionnaireIds.map((id) => <option value={id}>{id}</option>);
+
+const LandingPage = () => {
+  const history = useHistory();
+
+  return (
+    <div>
+      <h1>Select a questionnaire by id</h1>
+      <Formik
+        initialValues={{
+          id: questionnaireIds[0],
+        }}
+        onSubmit={(values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+          console.log(JSON.stringify(values, null, 2)); // for debugging
+          setSubmitting(false);
+          history.push({
+            pathname: `/form`,
+            search: `?id=${values.id}`,
+          });
+        }}
+      >
+        <Form>
+          <Field as="select" name="id">
+            {idList}
+          </Field>
+
+          <button type="submit">Submit</button>
+        </Form>
+      </Formik>
+    </div>
+  );
+};
+
+export default LandingPage;

app/src/components/main.tsx

@@ -1,8 +1,27 @@
 import * as React from 'react';
+import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import Status from './status';
+import LandingPage from './landingPage/landingPage';
 import FormPage from './formPage/formPage';
 
 const Main = () => {
+  return (
+    <Router>
+      <div>
+        <Switch>
+          <Route exact path="/">
+            <LandingPage />
+          </Route>
+          <Route path="/form">
+            <FormPage />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+  );
+
+  //return <LandingPage/>
+
   const [renderFormPage, setRenderFormPage] = React.useState(false);
 
   if (!renderFormPage) {

package.json

@@ -5,5 +5,8 @@
     "test": "npm run test --prefix app",
     "install-all": "npm i --prefix server && npm i --prefix app",
     "build": "npm run build --prefix app"
+  },
+  "dependencies": {
+    "@types/react-router-dom": "^5.3.2"
   }
 }