From ec4dd7d35d605bd2908ad271607093da8727e54b Mon Sep 17 00:00:00 2001
From: jwu-fisker <jwu@fiskerinc.com>
Date: Fri, 15 Jan 2021 11:11:51 -0800
Subject: [PATCH] Fix file upload form to handle ota_update service

---
 src/components/Contexts/FileUploadContext.jsx      | 12 +++++++++---
 src/components/Contexts/FileUploadContext.test.jsx | 11 ++++++++---
 src/components/FileUploadForm/index.jsx            |  4 ++--
 src/components/ModalProgressBar/index.jsx          |  5 +++--
 src/services/__mocks__/uploadFile.js               |  2 +-
 src/services/auth.js                               |  2 +-
 src/services/uploadFile.js                         |  2 +-
 7 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/Contexts/FileUploadContext.jsx b/src/components/Contexts/FileUploadContext.jsx
index 142a50a..351cde9 100644
--- a/src/components/Contexts/FileUploadContext.jsx
+++ b/src/components/Contexts/FileUploadContext.jsx
@@ -8,6 +8,7 @@ export const FileUploadProvider = ({ children }) => {
   const [progress, setProgress] = useState(0);
   const [status, setStatus] = useState(null);
   const [cancelUpload, setCancelUpload] = useState(null);
+  const [linkURL, setLinkURL] = useState(null);
 
   const done = () => {
     setCancelUpload(null);
@@ -31,18 +32,22 @@ export const FileUploadProvider = ({ children }) => {
       const filename = file.name;
   
       setUploading(true);
+      setLinkURL(null);
       setProgress(0);
       setStatus(`Uploading ${filename}`);
       setCancelUpload(getCancelToken());
       
-      const result = await uploadFile(file, setProgress, cancelUpload);
-      const url = ((result && result.url) ? result.url : "No URL available");
-      setStatus(`Uploaded ${filename}\n${url}`);
+      const { data } = await uploadFile(file, setProgress, cancelUpload);
+      if (data.message) throw new Error(`${data.error}. ${data.message}`);
+      const url = ((data && data.link) ? data.link : "No URL available");
+      setLinkURL(url);
+      setStatus(`Uploaded ${filename}`);
       setCancelUpload(null);
       setProgress(100);
     }
     catch (e) {
       setStatus(`Error occured: ${e.message}`);
+      setProgress(-1);
     }
   };
 
@@ -51,6 +56,7 @@ export const FileUploadProvider = ({ children }) => {
       uploading,
       progress,
       status,
+      linkURL,
       upload,
       cancel,
     }}>
diff --git a/src/components/Contexts/FileUploadContext.test.jsx b/src/components/Contexts/FileUploadContext.test.jsx
index 3e8e8ef..c79b071 100644
--- a/src/components/Contexts/FileUploadContext.test.jsx
+++ b/src/components/Contexts/FileUploadContext.test.jsx
@@ -8,12 +8,13 @@ describe("FileUploadContext", () => {
 
   beforeEach(() => {
     const TestComp = () => {
-      const { progress, uploading, status, upload, cancel } = useFileUploadContext();
+      const { progress, uploading, status, linkURL, upload, cancel } = useFileUploadContext();
       return (
         <>
           <div data-testid="uploading">{uploading.toString()}</div>
           <div data-testid="progress">{progress.toString()}</div>
           <div data-testid="status">{status}</div>
+          <div data-testid="linkURL">{linkURL}</div>
           <button data-testid="uploadNoFile" onClick={() => upload()}/>
           <button data-testid="upload" onClick={() => upload([{ file: { name: "test.jpg" }}])}/>
           <button data-testid="cancel" onClick={() => cancel()}/>
@@ -31,20 +32,23 @@ describe("FileUploadContext", () => {
     expect(screen.getByTestId("uploading").innerHTML).toEqual("false");
     expect(screen.getByTestId("progress").innerHTML).toEqual("0");
     expect(screen.getByTestId("status").innerHTML).toEqual("");
+    expect(screen.getByTestId("linkURL").innerHTML).toEqual("");
   })
 
   it("Upload no file", async () => {
     fireEvent.click(screen.getByTestId("uploadNoFile"));
     expect(screen.getByTestId("uploading").innerHTML).toEqual("false");
-    expect(screen.getByTestId("progress").innerHTML).toEqual("0");
+    expect(screen.getByTestId("progress").innerHTML).toEqual("-1");
     expect(screen.getByTestId("status").innerHTML).toEqual("Error occured: No file provided");
+    expect(screen.getByTestId("linkURL").innerHTML).toEqual("");
   })
 
   it("Upload file", async () => {
     fireEvent.click(screen.getByTestId("upload"));
     await waitFor(() => expect(screen.getByTestId("progress").innerHTML).toEqual("100"));
     expect(screen.getByTestId("uploading").innerHTML).toEqual("true");
-    expect(screen.getByTestId("status").innerHTML).toEqual("Uploaded test.jpg\nCLOUDFRONT_URL");
+    expect(screen.getByTestId("status").innerHTML).toEqual(`Uploaded test.jpg`);
+    expect(screen.getByTestId("linkURL").innerHTML).toEqual(`CLOUDFRONT_URL`);
   })
 
   it("Cancel upload", async () => {
@@ -57,5 +61,6 @@ describe("FileUploadContext", () => {
     await waitFor(() => expect(screen.getByTestId("progress").innerHTML).toEqual("0"));
     expect(screen.getByTestId("uploading").innerHTML).toEqual("false");
     expect(screen.getByTestId("status").innerHTML).toEqual("Upload cancelled");
+    expect(screen.getByTestId("linkURL").innerHTML).toEqual("");
   })
 })
diff --git a/src/components/FileUploadForm/index.jsx b/src/components/FileUploadForm/index.jsx
index cb97a70..7c2fbbc 100644
--- a/src/components/FileUploadForm/index.jsx
+++ b/src/components/FileUploadForm/index.jsx
@@ -7,7 +7,7 @@ import ModalProgressBar from "../ModalProgressBar";
 import useStyles from "../Styles";
 
 const FileUploadZone = ({ classes }) => {
-  const { uploading, progress, status, upload, cancel } = useFileUploadContext();
+  const { uploading, progress, status, linkURL, upload, cancel } = useFileUploadContext();
 
   return (
     <form className={classes.form} noValidate>
@@ -16,7 +16,7 @@ const FileUploadZone = ({ classes }) => {
         showAlerts={false}
         onAdd={upload}
       />
-      <ModalProgressBar uploading={uploading} progress={progress} onCancel={cancel} status={status} />
+      <ModalProgressBar uploading={uploading} progress={progress} onCancel={cancel} status={status} linkURL={linkURL} />
     </form>
   );
 };
diff --git a/src/components/ModalProgressBar/index.jsx b/src/components/ModalProgressBar/index.jsx
index 3b861ea..f72f771 100644
--- a/src/components/ModalProgressBar/index.jsx
+++ b/src/components/ModalProgressBar/index.jsx
@@ -21,7 +21,7 @@ const getModalStyle = () => {
   };
 };
 
-const ModalProgressBar = ({ onCancel, uploading, progress, status }) => {
+const ModalProgressBar = ({ onCancel, uploading, progress, status, linkURL }) => {
   const modalStyle = getModalStyle();
   const onClickCancel = () => {
     if (onCancel) onCancel();
@@ -31,9 +31,10 @@ const ModalProgressBar = ({ onCancel, uploading, progress, status }) => {
     <Modal open={uploading}>
       <div style={modalStyle}>
         {status && <p>{status}</p>}
+        {linkURL && <p><a href={linkURL} target="_blank">View</a></p>}
         <LinearProgress variant="determinate" value={progress} />
         <Button onClick={onClickCancel}>
-          { progress < 100 ? "Cancel" : "Done" }
+          { progress === 100 || progress === -1 ? "Done" : "Cancel" }
         </Button>
       </div>
     </Modal>    
diff --git a/src/services/__mocks__/uploadFile.js b/src/services/__mocks__/uploadFile.js
index a636ec5..13bd095 100644
--- a/src/services/__mocks__/uploadFile.js
+++ b/src/services/__mocks__/uploadFile.js
@@ -1,6 +1,6 @@
 import delay from "../../utils/delay";
 
-let uploadFileResponse = { url: "CLOUDFRONT_URL" };
+let uploadFileResponse = { data: { link: "CLOUDFRONT_URL" } };
 let uploadFileDelay = false;
 let issuedCancelToken = null;
 
diff --git a/src/services/auth.js b/src/services/auth.js
index f3c9b09..27a340f 100644
--- a/src/services/auth.js
+++ b/src/services/auth.js
@@ -1,4 +1,4 @@
-const AUTH_URL = process.env.REACT_APP_AUTH_SERVICE_URL;
+const AUTH_URL = process.env.REACT_APP_AUTH_SERVICE_URL || "https://dev-auth.fiskerdps.com";
 
 const auth = {
   signIn: (username, password) => fetch(`${AUTH_URL}/auth/login`, {
diff --git a/src/services/uploadFile.js b/src/services/uploadFile.js
index 07a9680..79618f0 100644
--- a/src/services/uploadFile.js
+++ b/src/services/uploadFile.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const UPLOAD_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+const UPLOAD_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL || "http://localhost:8080";
 
 export const getCancelToken = () => {
   const token = axios.CancelToken;