Results formatting

Author: alaaltoros

UIcode/.env.example

@@ -1,3 +1,4 @@
 REACT_APP_API_URL=
 REACT_APP_GOOGLE_CLIENT_ID=
-REACT_APP_ENCLAVE_URL=https://safetrace.enigma.co
+REACT_APP_ENCLAVE_URL=https://safetrace.enigma.co
+REACT_APP_GOOGLE_MAPS_API_KEY=

UIcode/README.md

@@ -30,6 +30,17 @@ Then add the API URL to your `.env.development`
 echo "REACT_APP_GOOGLE_CLIENT_ID=119469794689-hhq7rpcmd88c7r5gkiom0u2pakfka3cd.apps.googleusercontent.com" >> .env.development
 ```
 
+Include the Enclave URL in your `.env.development`
+```bash
+echo "REACT_APP_ENCLAVE_URL=https://safetrace.enigma.co" >> .env.development
+```
+
+Include Google Maps API Key in your `.env.development`, you can find instructions on how to obtain it here [https://developers.google.com/maps/documentation/javascript/get-api-key](https://developers.google.com/maps/documentation/javascript/get-api-key)
+
+```bash
+echo "REACT_APP_GOOGLE_MAPS_API_KEY=AaLeiVHdICmJYzM8w8aSyEzo-TainZ3W3Ev2QfQ" >> .env.development
+```
+
 Finally to run the client execute the following commands:
 
 ```bash

UIcode/package-lock.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "enigma-js": "^0.3.0",
     "axios": "^0.19.2",
     "bootstrap": "^4.4.1",
-    "date-fns": "^2.11.1",
+    "date-fns": "^2.12.0",
+    "enigma-js": "^0.3.0",
     "eth-crypto": "^1.5.2",
     "jayson": "^3.2.0",
     "js-cookie": "^2.2.1",
@@ -19,6 +19,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^4.1.2",
     "react-scripts": "^3.4.1",
+    "react-spinners": "^0.8.1",
     "styled-components": "^5.0.1"
   },
   "scripts": {

UIcode/package.json

@@ -1,5 +1,4 @@
 import React from "react";
-import "./App.css";
 import { BrowserRouter as Router, Switch } from "react-router-dom";
 import DefaultLayout from "Layouts/Default";
 import Home from "Pages/Home";

UIcode/src/App/App.css

@@ -0,0 +1,15 @@
+class Flash {
+  constructor() {
+    this.state = {};
+  }
+
+  get() {
+    return this.state;
+  }
+
+  set(message, type = "info") {
+    this.state = { message, type };
+  }
+}
+
+export default new Flash();

UIcode/src/App/index.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+import colors from "Theme/colors";
+import Flash from "./Flash";
+
+const Msg = styled.span`
+  color: ${(props) =>
+    props.type === "success"
+      ? colors.success.main
+      : props.type === "error"
+      ? colors.error.main
+      : colors.text.main};
+`;
+
+const FlashMessage = () => {
+  const { message, type } = Flash.get();
+
+  return message ? <Msg type={type}>{message}</Msg> : null;
+};
+
+export default FlashMessage;

UIcode/src/Components/FlashMessage/Flash.jsx

@@ -72,7 +72,14 @@ const Header = ({ className }) => {
             </StyledNavLink>
           </NavLi>
           <NavLi>
-            <StyledNavLink to="/contribute">Contribute</StyledNavLink>
+            <StyledNavLink
+              to="/contribute"
+              isActive={(match, location) => {
+                return match || location.pathname === "/results";
+              }}
+            >
+              Contribute
+            </StyledNavLink>
           </NavLi>
         </NavUl>
 

UIcode/src/Components/FlashMessage/index.jsx

@@ -12,6 +12,7 @@ import { parseJsonFile, convertLocationData } from "Services/parser";
 import { report } from "Services/api";
 import { addData } from "Services/enclave";
 import Authorized from "Sections/Authorized";
+import Flash from "Components/FlashMessage/Flash";
 
 const Wrapper = styled.div`
   padding-top: 50px;
@@ -26,6 +27,7 @@ const Contribute = ({ history }) => {
   const showButtons = step === 1;
 
   const nextPage = () => setStep((step) => step + 1);
+  const goToResultsPage = () => history.push("/results");
 
   const sendReport = () =>
     report({
@@ -48,13 +50,14 @@ const Contribute = ({ history }) => {
   const handleFileSubmit = (file) => {
     parseJsonFile(file)
       .then((json) => {
-        const data = convertLocationData(json);
-        addData(me.encryptedUserId, JSON.stringify(data))
+        const data = convertLocationData(json, testResult === "positive");
+        addData(me._id, JSON.stringify(data))
           .then(() => {
-            history.push(
-              "/results",
-              "Your data has been successfully shared with SafeTrace API."
+            Flash.set(
+              "Your data has been successfully shared with SafeTrace API.",
+              "success"
             );
+            goToResultsPage();
           })
           .catch(() => alert("An error occurred. Please try again"));
       })
@@ -76,7 +79,9 @@ const Contribute = ({ history }) => {
   };
 
   const steps = [
-    () => <Step1 submitReport={handleNextClick} viewResults={() => {}} />,
+    () => (
+      <Step1 submitReport={handleNextClick} viewResults={goToResultsPage} />
+    ),
     () => (
       <Step2
         selectedTestResult={testResult}

UIcode/src/Components/Header/index.jsx

@@ -4,7 +4,7 @@ class Home extends React.Component {
   render() {
     return (
       <div>
-        <div className="centeralign">
+        <div>
           <Card border="light" style={{ width: "18rem" }}>
             <Card.Body>
               <Card.Title>

UIcode/src/Pages/Contribute/index.jsx

@@ -1,7 +1,58 @@
 import React from "react";
+import styled from "styled-components";
 
-const ResultsTable = () => {
-  return <div></div>;
+const StyledTable = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  & > thead > tr > th {
+    border: none;
+    vertical-align: baseline;
+    padding: 0.75rem;
+    & > p {
+      font-size: 14px;
+      font-weight: normal;
+    }
+  }
+`;
+
+const ResultsTable = ({ results }) => {
+  return (
+    <StyledTable>
+      <thead>
+        <tr>
+          <th>Location</th>
+          <th>Address</th>
+          <th>
+            Number of Matches
+            <p>
+              How many individuals who have COVID-19 have been in this location
+              in the past 12 hours.
+            </p>
+          </th>
+          <th>Date</th>
+          <th>
+            Time
+            <p>
+              the amount of time between your visit and the most recent match
+            </p>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {results &&
+          results.map((result) => (
+            <tr key={result.location + result.address + result.date}>
+              <td>{result.location}</td>
+              <td>{result.address}</td>
+              <td>{result.numberOfMatches}</td>
+              <td>{result.date}</td>
+              <td>{result.time}</td>
+            </tr>
+          ))}
+      </tbody>
+    </StyledTable>
+  );
 };
 
 export default ResultsTable;