completed items are dismissed when their respective page is visited o…

…r x is pressed
mentorpal · Jun 18, 2021 · 05435cb · 05435cb
1 parent fd9f53b
commit 05435cb
Show file tree

Hide file tree

Showing 5 changed files with 282 additions and 53 deletions.
diff --git a/client/src/components/record/uploading-list-item.tsx b/client/src/components/record/uploading-list-item.tsx
@@ -15,6 +15,7 @@ import {
 import { makeStyles } from "@material-ui/core/styles";
 import { PublishRounded, CancelRounded, CheckCircle } from "@material-ui/icons";
 import CloseIcon from "@material-ui/icons/Close";
+import { UseWithRecordState } from "hooks/graphql/use-with-record-state";
 
 function UploadingListItem(props: {
   upload: UploadTask;
@@ -24,6 +25,7 @@ function UploadingListItem(props: {
   cancelledAnswer: boolean;
   cancelAnswerUpload: (s: string) => void;
   representsCurrentAnswer: boolean;
+  recordState: UseWithRecordState;
 }): JSX.Element {
   const {
     jobTitle,
@@ -33,6 +35,7 @@ function UploadingListItem(props: {
     cancelAnswerUpload,
     representsCurrentAnswer,
     upload,
+    recordState,
   } = props;
   const [cancelling, setCancelling] = useState(false);
   const useStyles = makeStyles(() => ({
@@ -70,6 +73,7 @@ function UploadingListItem(props: {
         )}
       </ListItemIcon>
       <ListItemText
+        style={{ cursor: "pointer" }}
         data-cy="card-answer-title"
         onClick={() => {
           setAnswerIDx(answerIDx);
@@ -101,23 +105,25 @@ function UploadingListItem(props: {
           ) : jobStatus !== UploadStatus.DONE ? (
             "Processing"
           ) : (
-            ""
+            "Tap to preview"
           )
         }
       />
       <ListItemIcon
         style={{
           minWidth: 0,
-          visibility: jobDone || jobFailed ? "hidden" : "visible",
+          visibility: jobFailed ? "hidden" : "visible",
         }}
         data-cy="cancel-upload"
       >
         <CloseIcon
           onClick={() => {
-            if (representsCurrentAnswer) {
+            if (!jobDone && representsCurrentAnswer) {
               cancelAnswerUpload(upload.question._id);
+              setCancelling(true);
+            } else {
+              recordState.removeCompletedTask(upload);
             }
-            setCancelling(true);
           }}
           style={{ cursor: "pointer", paddingRight: 5 }}
         />

diff --git a/client/src/components/record/uploading-widget.tsx b/client/src/components/record/uploading-widget.tsx
@@ -5,7 +5,7 @@ Permission to use, copy, modify, and distribute this software and its documentat
 The full terms of this copyright and license should always be found in the root directory of this software deliverable as "license.txt" and if these terms are not found with this software, please contact the USC Stevens Center for the full license.
 */
 
-import React from "react";
+import React, { useEffect } from "react";
 import ListItem from "./uploading-list-item";
 import { Answer } from "types";
 import { UploadStatus } from "hooks/graphql/use-with-upload-status";
@@ -30,6 +30,17 @@ function UploadingView(props: {
     cancelledAnswerID,
   } = props;
   const { answers, setAnswerIDx, uploads } = recordState;
+
+  useEffect(() => {
+    uploads.forEach((u) => {
+      if (
+        u.uploadStatus == UploadStatus.DONE &&
+        u.question._id === curAnswer.question._id
+      )
+        recordState.removeCompletedTask(u);
+    });
+  }, [uploads, curAnswer]);
+
   const uploadsToShow = uploads.filter(
     (upload) => upload.uploadStatus !== UploadStatus.CANCELLED
   );
@@ -76,6 +87,7 @@ function UploadingView(props: {
               }
             >
               <ListItem
+                recordState={recordState}
                 upload={upload}
                 cancelAnswerUpload={cancelAnswerUpload}
                 representsCurrentAnswer={

diff --git a/client/src/hooks/graphql/use-with-record-state.tsx b/client/src/hooks/graphql/use-with-record-state.tsx
@@ -58,6 +58,7 @@ export function useWithRecordState(
     uploads,
     isUploading,
     upload,
+    removeCompletedTask,
     isTaskDoneOrFailed,
   } = useWithUploadStatus(
     accessToken,
@@ -319,6 +320,7 @@ export function useWithRecordState(
     setAnswerIDx,
     editAnswer,
     saveAnswer,
+    removeCompletedTask,
     rerecord,
     startRecording,
     stopRecording,
@@ -344,6 +346,7 @@ export interface UseWithRecordState {
   setAnswerIDx: (id: number) => void;
   editAnswer: (edits: Partial<Answer>) => void;
   saveAnswer: () => void;
+  removeCompletedTask: (tasks: UploadTask) => void;
   rerecord: () => void;
   startRecording: () => void;
   stopRecording: (video: File) => void;

diff --git a/client/src/hooks/graphql/use-with-upload-status.tsx b/client/src/hooks/graphql/use-with-upload-status.tsx
@@ -99,6 +99,16 @@ export function useWithUploadStatus(
     isPolling ? pollingInterval : null
   );
 
+  function removeCompletedTask(task: UploadTask) {
+    const idx = uploads.findIndex((u) => u.question._id === task.question._id);
+    if (idx !== -1 && uploads[idx].uploadStatus === UploadStatus.DONE) {
+      const newArray = uploads.filter(
+        (u) => u.question._id !== task.question._id
+      );
+      setUploads(newArray);
+    }
+  }
+
   function isTaskDoneOrFailed(task: UploadTask) {
     return (
       task.uploadStatus === UploadStatus.CANCELLED ||
@@ -160,6 +170,7 @@ export function useWithUploadStatus(
     uploads,
     isUploading,
     upload,
+    removeCompletedTask,
     isTaskDoneOrFailed,
   };
 }
@@ -173,5 +184,6 @@ export interface UseWithUploadStatus {
     video: File,
     trim?: { start: number; end: number }
   ) => void;
+  removeCompletedTask: (tasks: UploadTask) => void;
   isTaskDoneOrFailed: (upload: UploadTask) => boolean;
 }