From ef44b865ab26b4bc61f4d1a65e3c62d475f012b5 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Thu, 26 May 2022 13:54:04 +0530
Subject: [PATCH] update conditional renderings

---
 src/components/UploadProgress/dialog.tsx      | 145 +++++++++---------
 src/components/UploadProgress/header.tsx      |   6 +-
 src/components/UploadProgress/progressBar.tsx |  24 +--
 3 files changed, 87 insertions(+), 88 deletions(-)

diff --git a/src/components/UploadProgress/dialog.tsx b/src/components/UploadProgress/dialog.tsx
index bf3015ba1..dc03075bb 100644
--- a/src/components/UploadProgress/dialog.tsx
+++ b/src/components/UploadProgress/dialog.tsx
@@ -32,82 +32,83 @@ export function UploadProgressDialog({
                 fileCounter={props.fileCounter}
                 now={props.now}
             />
-            <DialogContent
-                sx={{
-                    '&&&': { px: 0 },
-                }}>
-                {props.uploadStage === UPLOAD_STAGES.UPLOADING && (
-                    <InProgressSection
+            {(props.uploadStage === UPLOAD_STAGES.UPLOADING ||
+                props.uploadStage === UPLOAD_STAGES.FINISH) && (
+                <DialogContent>
+                    {props.uploadStage === UPLOAD_STAGES.UPLOADING && (
+                        <InProgressSection
+                            filenames={props.filenames}
+                            fileProgressStatuses={fileProgressStatuses}
+                            sectionTitle={constants.INPROGRESS_UPLOADS}
+                            sectionInfo={sectionInfo}
+                        />
+                    )}
+
+                    <ResultSection
                         filenames={props.filenames}
-                        fileProgressStatuses={fileProgressStatuses}
-                        sectionTitle={constants.INPROGRESS_UPLOADS}
-                        sectionInfo={sectionInfo}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.UPLOADED}
+                        sectionTitle={constants.SUCCESSFUL_UPLOADS}
                     />
-                )}
 
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.UPLOADED}
-                    sectionTitle={constants.SUCCESSFUL_UPLOADS}
-                />
-
-                {props.uploadStage === UPLOAD_STAGES.FINISH &&
-                    filesNotUploaded && (
-                        <NotUploadSectionHeader>
-                            {constants.FILE_NOT_UPLOADED_LIST}
-                        </NotUploadSectionHeader>
-                    )}
-
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.BLOCKED}
-                    sectionTitle={constants.BLOCKED_UPLOADS}
-                    sectionInfo={constants.ETAGS_BLOCKED(
-                        DESKTOP_APP_DOWNLOAD_URL
-                    )}
-                />
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.FAILED}
-                    sectionTitle={constants.FAILED_UPLOADS}
-                />
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.ALREADY_UPLOADED}
-                    sectionTitle={constants.SKIPPED_FILES}
-                    sectionInfo={constants.SKIPPED_INFO}
-                />
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={
-                        FileUploadResults.LARGER_THAN_AVAILABLE_STORAGE
-                    }
-                    sectionTitle={
-                        constants.LARGER_THAN_AVAILABLE_STORAGE_UPLOADS
-                    }
-                    sectionInfo={constants.LARGER_THAN_AVAILABLE_STORAGE_INFO}
-                />
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.UNSUPPORTED}
-                    sectionTitle={constants.UNSUPPORTED_FILES}
-                    sectionInfo={constants.UNSUPPORTED_INFO}
-                />
-                <ResultSection
-                    filenames={props.filenames}
-                    fileUploadResultMap={fileUploadResultMap}
-                    fileUploadResult={FileUploadResults.TOO_LARGE}
-                    sectionTitle={constants.TOO_LARGE_UPLOADS}
-                    sectionInfo={constants.TOO_LARGE_INFO}
-                />
-            </DialogContent>
+                    {props.uploadStage === UPLOAD_STAGES.FINISH &&
+                        filesNotUploaded && (
+                            <NotUploadSectionHeader>
+                                {constants.FILE_NOT_UPLOADED_LIST}
+                            </NotUploadSectionHeader>
+                        )}
 
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.BLOCKED}
+                        sectionTitle={constants.BLOCKED_UPLOADS}
+                        sectionInfo={constants.ETAGS_BLOCKED(
+                            DESKTOP_APP_DOWNLOAD_URL
+                        )}
+                    />
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.FAILED}
+                        sectionTitle={constants.FAILED_UPLOADS}
+                    />
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.ALREADY_UPLOADED}
+                        sectionTitle={constants.SKIPPED_FILES}
+                        sectionInfo={constants.SKIPPED_INFO}
+                    />
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={
+                            FileUploadResults.LARGER_THAN_AVAILABLE_STORAGE
+                        }
+                        sectionTitle={
+                            constants.LARGER_THAN_AVAILABLE_STORAGE_UPLOADS
+                        }
+                        sectionInfo={
+                            constants.LARGER_THAN_AVAILABLE_STORAGE_INFO
+                        }
+                    />
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.UNSUPPORTED}
+                        sectionTitle={constants.UNSUPPORTED_FILES}
+                        sectionInfo={constants.UNSUPPORTED_INFO}
+                    />
+                    <ResultSection
+                        filenames={props.filenames}
+                        fileUploadResultMap={fileUploadResultMap}
+                        fileUploadResult={FileUploadResults.TOO_LARGE}
+                        sectionTitle={constants.TOO_LARGE_UPLOADS}
+                        sectionInfo={constants.TOO_LARGE_INFO}
+                    />
+                </DialogContent>
+            )}
             {props.uploadStage === UPLOAD_STAGES.FINISH && (
                 <UploadProgressFooter
                     uploadStage={props.uploadStage}
diff --git a/src/components/UploadProgress/header.tsx b/src/components/UploadProgress/header.tsx
index 9d519879f..3ebdb21f5 100644
--- a/src/components/UploadProgress/header.tsx
+++ b/src/components/UploadProgress/header.tsx
@@ -19,11 +19,7 @@ export function UploadProgressHeader({
                 handleHideModal={handleHideModal}
                 fileCounter={fileCounter}
             />
-            <UploadProgressBar
-                now={now}
-                uploadStage={uploadStage}
-                expanded={expanded}
-            />
+            <UploadProgressBar now={now} uploadStage={uploadStage} />
         </>
     );
 }
diff --git a/src/components/UploadProgress/progressBar.tsx b/src/components/UploadProgress/progressBar.tsx
index 970bc2406..c5e55593b 100644
--- a/src/components/UploadProgress/progressBar.tsx
+++ b/src/components/UploadProgress/progressBar.tsx
@@ -2,22 +2,24 @@ import React from 'react';
 import { LinearProgress, Divider, Box } from '@mui/material';
 import { UPLOAD_STAGES } from 'constants/upload';
 
-export function UploadProgressBar({ uploadStage, now, expanded }) {
+export function UploadProgressBar({ uploadStage, now }) {
     return (
-        <Box mb={expanded ? 2 : 0}>
+        <Box>
             {(uploadStage === UPLOAD_STAGES.READING_GOOGLE_METADATA_FILES ||
                 uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA ||
                 uploadStage === UPLOAD_STAGES.UPLOADING) && (
-                <LinearProgress
-                    sx={{
-                        height: '2px',
-                        backgroundColor: 'transparent',
-                    }}
-                    variant="determinate"
-                    value={now}
-                />
+                <>
+                    <LinearProgress
+                        sx={{
+                            height: '2px',
+                            backgroundColor: 'transparent',
+                        }}
+                        variant="determinate"
+                        value={now}
+                    />
+                    <Divider />
+                </>
             )}
-            <Divider />
         </Box>
     );
 }