Parse script updated

Author: alaaltoros

UIcode/client/src/Components/FileUpload.js

@@ -0,0 +1,91 @@
+import React, { Fragment, useState } from "react";
+import Message from "../Message";
+import Progress from "../Progress";
+import axios from "axios";
+
+const FileUpload = ({ onChange }) => {
+  const [file, setFile] = useState("");
+  const [filename, setFilename] = useState("Choose File");
+  const [uploadedFile, setUploadedFile] = useState({});
+  const [message, setMessage] = useState("");
+  const [uploadPercentage, setUploadPercentage] = useState(0);
+
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0]);
+    setFilename(e.target.files[0].name);
+    onChange(e.target.files[0]);
+  };
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const res = await axios.post("/upload", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+        onUploadProgress: (progressEvent) => {
+          setUploadPercentage(
+            parseInt(
+              Math.round((progressEvent.loaded * 100) / progressEvent.total)
+            )
+          );
+
+          // Clear percentage
+          setTimeout(() => setUploadPercentage(0), 10000);
+        },
+      });
+
+      const { fileName, filePath } = res.data;
+
+      setUploadedFile({ fileName, filePath });
+
+      setMessage("File Uploaded");
+    } catch (err) {
+      if (err.response.status === 500) {
+        setMessage("There was a problem with the server");
+      } else {
+        setMessage(err.response.data.msg);
+      }
+    }
+  };
+
+  return (
+    <Fragment>
+      {message ? <Message msg={message} /> : null}
+      <form onSubmit={onSubmit}>
+        <div className="custom-file mb-4">
+          <input
+            type="file"
+            className="custom-file-input"
+            id="customFile"
+            onChange={handleFileChange}
+          />
+          <label className="custom-file-label" htmlFor="customFile">
+            {filename}
+          </label>
+        </div>
+
+        <Progress percentage={uploadPercentage} />
+
+        <input
+          type="submit"
+          value="Upload"
+          className="btn btn-primary btn-block mt-4"
+        />
+      </form>
+      {uploadedFile ? (
+        <div className="row mt-5">
+          <div className="col-md-6 m-auto">
+            <h3 className="text-center">{uploadedFile.fileName}</h3>
+            <img style={{ width: "100%" }} src={uploadedFile.filePath} alt="" />
+          </div>
+        </div>
+      ) : null}
+    </Fragment>
+  );
+};
+
+export default FileUpload;

UIcode/client/src/Components/FileUpload/index.jsx.js

@@ -1,7 +1,9 @@
 import React from "react";
 import Box from "Styled/Box";
+import Row from "Components/Grid/Row";
+import FileUpload from "Components/FileUpload/index.jsx";
 
-const Step3 = ({ onFileUpload }) => {
+const Step3 = ({ onFileChange }) => {
   return (
     <Box>
       <h2>Self Report</h2>
@@ -41,6 +43,9 @@ const Step3 = ({ onFileUpload }) => {
         </b>{" "}
         Can’t find the file?
       </p>
+      <Row>
+        <FileUpload onChange={onFileChange}/>
+      </Row>
     </Box>
   );
 };

UIcode/client/src/Pages/Contribute/Step3.jsx

@@ -8,6 +8,7 @@ import Step2 from "./Step2";
 import { authContext } from "Providers/AuthProvider";
 import LoginForm from "Sections/LoginForm";
 import Step3 from "./Step3";
+import { parseJsonFile, convertLocationData } from "Services/parser";
 
 const Wrapper = styled.div`
   padding-top: 50px;
@@ -24,6 +25,14 @@ const Contribute = () => {
   const handleTestDateChange = (date) => setTestDate(date);
   const handleNextClick = () => setStep((step) => step + 1);
   const handleBackClick = () => setStep((step) => step - 1);
+  const onFileChange = (f) => {
+    parseJsonFile(f).then(
+      (json) => {
+        console.log(convertLocationData(json));
+      },
+      () => alert("Invalid file")
+    );
+  };
 
   const steps = [
     () => <Step1 submitReport={handleNextClick} viewResults={() => {}} />,
@@ -35,7 +44,7 @@ const Contribute = () => {
         onTestDateChange={handleTestDateChange}
       />
     ),
-    () => <Step3 />,
+    () => <Step3 onFileChange={onFileChange} />,
   ];
 
   const CurrentStep = steps[step];

UIcode/client/src/Pages/Contribute/index.jsx

@@ -0,0 +1,46 @@
+export const parseJsonFile = async (file) => {
+  const reader = new FileReader();
+
+  return new Promise((resolve, reject) => {
+    reader.onload = (evt) => {
+      let parsed;
+      try {
+        parsed = JSON.parse(evt.target.result);
+      } catch {
+        return reject(new Error("Invalid file"));
+      }
+
+      if (
+        parsed.hasOwnProperty("timelineObjects") &&
+        Array.isArray(parsed.timelineObjects)
+      ) {
+        return resolve(parsed);
+      } else {
+        return reject(new Error("Invalid file"));
+      }
+    };
+    reader.readAsText(file);
+  });
+};
+
+export const isPlaceVisitActivity = (location) =>
+  location.hasOwnProperty("placeVisit");
+
+export const startedAfter = (timestamp) => (location) =>
+  location.placeVisit.duration.startTimestampMs > timestamp;
+
+export const activityTransformer = (activity) => ({
+  lat: activity.placeVisit.location.latitudeE7 / 10000000,
+  lng: activity.placeVisit.location.longitudeE7 / 10000000,
+  startTS: activity.placeVisit.duration.startTimestampMs,
+  endTS: activity.placeVisit.duration.endTimestampMs,
+});
+
+export const convertLocationData = (json) => {
+  const startingDate = new Date().getTime() - 2 * 604800 * 1000;
+
+  const activityFilter = (activity) =>
+    isPlaceVisitActivity(activity) && startedAfter(startingDate)(activity);
+
+  return json.timelineObjects.filter(activityFilter).map(activityTransformer);
+};