Merge pull request #458 from ente-io/master

release

package.json

@@ -45,7 +45,6 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.3.0",
     "react-burger-menu": "^3.0.4",
-    "react-collapse": "^5.1.0",
     "react-datepicker": "^4.3.0",
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.2.4",

src/components/pages/gallery/UploadProgress.tsx

@@ -1,13 +1,12 @@
 import ExpandLess from 'components/icons/ExpandLess';
 import ExpandMore from 'components/icons/ExpandMore';
 import React, { useState } from 'react';
-import { Button, Modal, ProgressBar } from 'react-bootstrap';
+import { Accordion, Button, Modal, ProgressBar } from 'react-bootstrap';
 import { FileRejection } from 'react-dropzone';
 
 import styled from 'styled-components';
 import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
 import constants from 'utils/strings/constants';
-import { Collapse } from 'react-collapse';
 import { ButtonVariant, getVariantColor } from './LinkButton';
 import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload';
 
@@ -50,9 +49,6 @@ const SectionTitle = styled.div`
 
 const Section = styled.div`
     margin: 20px 0;
-    & > .ReactCollapse--collapse {
-        transition: height 200ms;
-    }
     word-break: break-word;
     padding: 0 20px;
 `;
@@ -61,7 +57,7 @@ const SectionInfo = styled.div`
     padding-left: 15px;
 `;
 
-const Content = styled.div`
+const SectionContent = styled.div`
     padding-right: 30px;
 `;
 
@@ -87,24 +83,30 @@ const ResultSection = (props: ResultSectionProps) => {
         return <></>;
     }
     return (
+        <Accordion defaultActiveKey="1">
             <Section>
+                <Accordion.Toggle eventKey="0" as="div">
                     <SectionTitle onClick={() => setListView(!listView)}>
                         {props.sectionTitle}
                         {listView ? <ExpandLess /> : <ExpandMore />}
                     </SectionTitle>
-            <Collapse isOpened={listView}>
-                <Content>
+                </Accordion.Toggle>
+                <Accordion.Collapse eventKey="0">
+                    <SectionContent>
                         {props.sectionInfo && (
                             <SectionInfo>{props.sectionInfo}</SectionInfo>
                         )}
                         <FileList>
                             {fileList.map((fileID) => (
-                            <li key={fileID}>{props.filenames.get(fileID)}</li>
+                                <li key={fileID}>
+                                    {props.filenames.get(fileID)}
+                                </li>
                             ))}
                         </FileList>
-                </Content>
-            </Collapse>
+                    </SectionContent>
+                </Accordion.Collapse>
             </Section>
+        </Accordion>
     );
 };
 
@@ -117,20 +119,18 @@ interface InProgressProps {
 const InProgressSection = (props: InProgressProps) => {
     const [listView, setListView] = useState(true);
     const fileList = props.fileProgressStatuses;
-    if (!fileList?.length) {
-        return <></>;
-    }
-    if (!fileList?.length) {
-        return <></>;
-    }
+
     return (
+        <Accordion defaultActiveKey="0">
             <Section>
+                <Accordion.Toggle eventKey="0" as="div">
                     <SectionTitle onClick={() => setListView(!listView)}>
                         {props.sectionTitle}
                         {listView ? <ExpandLess /> : <ExpandMore />}
                     </SectionTitle>
-            <Collapse isOpened={listView}>
-                <Content>
+                </Accordion.Toggle>
+                <Accordion.Collapse eventKey="0">
+                    <SectionContent>
                         {props.sectionInfo && (
                             <SectionInfo>{props.sectionInfo}</SectionInfo>
                         )}
@@ -143,9 +143,10 @@ const InProgressSection = (props: InProgressProps) => {
                                 </li>
                             ))}
                         </FileList>
-                </Content>
-            </Collapse>
+                    </SectionContent>
+                </Accordion.Collapse>
             </Section>
+        </Accordion>
     );
 };
 
@@ -217,12 +218,14 @@ export default function UploadProgress(props: Props) {
                         variant="upload-progress-bar"
                     />
                 )}
+                {props.uploadStage === UPLOAD_STAGES.UPLOADING && (
                     <InProgressSection
                         filenames={props.filenames}
                         fileProgressStatuses={fileProgressStatuses}
                         sectionTitle={constants.INPROGRESS_UPLOADS}
                         sectionInfo={sectionInfo}
                     />
+                )}
 
                 <ResultSection
                     filenames={props.filenames}

src/services/upload/uploader.ts

@@ -14,6 +14,7 @@ import { FileUploadResults, MAX_FILE_SIZE_SUPPORTED } from 'constants/upload';
 import { FileWithCollection, BackupedFile, UploadFile } from 'types/upload';
 import { logUploadInfo } from 'utils/upload';
 import { convertToHumanReadable } from 'utils/billing';
+import { sleep } from 'utils/common';
 
 interface UploadResponse {
     fileUploadResult: FileUploadResults;
@@ -33,6 +34,7 @@ export default async function uploader(
 
     logUploadInfo(`uploader called for  ${fileNameSize}`);
     UIService.setFileProgress(localID, 0);
+    await sleep(0);
     const { fileTypeInfo, metadata } =
         UploadService.getFileMetadataAndFileTypeInfo(localID);
     try {

yarn.lock

@@ -4583,11 +4583,6 @@ react-burger-menu@^3.0.4:
     prop-types "^15.7.2"
     snapsvg-cjs "0.0.6"
 
-react-collapse@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/react-collapse/-/react-collapse-5.1.0.tgz"
-  integrity sha512-5v0ywsn9HjiR/odNzbRDs0RZfrnbdSippJebWOBCFFDA12Vx8DddrbI4qWVf1P2wTiVagrpcSy07AU0b6+gM9Q==
-
 react-datepicker@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.3.0.tgz"