Fix file upload form to handle ota_update service

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,
     }}>

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("");
   })
 })

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>
   );
 };

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>    

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;
 

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`, {

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;