Routing for result-app added (#74)

* Routing for result-app
User Updated

* React Router added to result app

* Type error fixed

packages/result-app/package.json

@@ -12,6 +12,7 @@
         "@types/react-dom": "^17.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-router": "^5.2.1",
         "react-scripts": "4.0.3",
         "typescript": "^4.3.5",
         "web-vitals": "^1.0.1"

packages/result-app/src/App.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 import logo from './logo.svg';
 import './App.css';
+import MainRoutes from './routes/MainRoutes';
+
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function App() {
@@ -20,6 +24,9 @@ function App() {
           Learn React
         </a>
       </header>
+      <Router>
+            <MainRoutes />
+      </Router>
     </div>
   );
 }

packages/result-app/src/pages/BallotConfirmationPage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+
+const BallotConfirmationPage: React.FC = ({ children }) => (
+    <Box height="100vh" display="flex" flexDirection="column">
+            {children}
+            <h1> Ballot Confirmation Page</h1>
+    </Box>
+);
+
+export default BallotConfirmationPage;

packages/result-app/src/pages/ElectionPage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+
+const ElectionPage: React.FC = ({ children }) => (
+    <Box height="100vh" display="flex" flexDirection="column">
+            {children}
+            <h1> Election Page</h1>
+    </Box>
+);
+
+export default ElectionPage;

packages/result-app/src/pages/RecordsPage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+
+const RecordsPage: React.FC = ({ children }) => (
+    <Box height="100vh" display="flex" flexDirection="column">
+            {children}
+            <h1> Records Page</h1>
+    </Box>
+);
+
+export default RecordsPage;

packages/result-app/src/pages/ResultsPage.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+
+const ResultsPage: React.FC = ({ children }) => (
+    <Box height="100vh" display="flex" flexDirection="column">
+            {children}
+            <h1> Results Page</h1>
+    </Box>
+);
+
+
+export default ResultsPage;

packages/result-app/src/pages/SelectElectionPage.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '@material-ui/core';
+
+const SelectElectionPage: React.FC = ({ children }) => (
+        <Box height="100vh" display="flex" flexDirection="column">
+                {children}
+        <h1> Select Election Page</h1>
+        </Box>
+    );
+    
+
+export default SelectElectionPage;

packages/result-app/src/routes/MainRoutes.tsx

@@ -0,0 +1,24 @@
+
+import React from "react";
+import {Route, Switch,Redirect } from "react-router-dom";
+import ElectionPage from '../pages/ElectionPage';
+import RecordsPage from '../pages/RecordsPage';
+import ResultsPage from '../pages/ResultsPage';
+import BallotConfirmationPage from '../pages/BallotConfirmationPage';
+import SelectElectionPage from "../pages/SelectElectionPage";
+
+const MainRoutes: React.FC = () => (
+    <Switch>
+        <Route path="/" exact>
+            <Redirect to="/menu" />
+        </Route>
+        <Route path="/menu" component={SelectElectionPage} />
+        <Route path="/:election" component={ElectionPage} />
+        <Route path="/:election/results" component={ResultsPage} />
+        <Route path="/:election/records" component={RecordsPage} />
+        <Route path="/:election/:ballot" component={BallotConfirmationPage} />
+    </Switch>
+);
+
+
+export default MainRoutes;