From eaa8fab86ec4e07b8dd0d886f1bc3444f62acc31 Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Tue, 20 Oct 2020 13:02:33 +0000
Subject: [PATCH] show upload status

---
 frontend/package-lock.json         | 11 +++++++
 frontend/package.json              |  2 ++
 frontend/src/Home/Home.tsx         |  2 ++
 frontend/src/Home/UploadStatus.tsx | 48 ++++++++++++++++++++++++++++++
 package.json                       |  2 +-
 5 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/Home/UploadStatus.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 925770e..a9c030e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2067,6 +2067,12 @@
             "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
             "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA=="
         },
+        "@types/pluralize": {
+            "version": "0.0.29",
+            "resolved": "https://registry.npmjs.org/@types/pluralize/-/pluralize-0.0.29.tgz",
+            "integrity": "sha512-BYOID+l2Aco2nBik+iYS4SZX0Lf20KPILP5RGmM1IgzdwNdTs0eebiFriOPcej1sX9mLnSoiNte5zcFxssgpGA==",
+            "dev": true
+        },
         "@types/prettier": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.1.tgz",
@@ -9335,6 +9341,11 @@
                 "find-up": "^4.0.0"
             }
         },
+        "pluralize": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+            "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA=="
+        },
         "pn": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7a5ae70..b1c1380 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,6 +31,7 @@
         "eslint-plugin-react-hooks": "^4.1.2",
         "jest": "^26.5.2",
         "parcel": "^1.12.4",
+        "pluralize": "^8.0.0",
         "postcss": "^8.1.1",
         "prettier": "^2.1.2",
         "prettier-eslint": "^11.0.0",
@@ -55,6 +56,7 @@
         "@types/enzyme-adapter-react-16": "^1.0.6",
         "@types/eslint": "^7.2.4",
         "@types/eslint-plugin-prettier": "^3.1.0",
+        "@types/pluralize": "^0.0.29",
         "@types/prettier": "^2.1.1",
         "@types/react": "^16.9.51",
         "@types/react-dom": "^16.9.8",
diff --git a/frontend/src/Home/Home.tsx b/frontend/src/Home/Home.tsx
index 6e0b648..b18badc 100644
--- a/frontend/src/Home/Home.tsx
+++ b/frontend/src/Home/Home.tsx
@@ -25,6 +25,7 @@ import { IAppState } from "~redux/reducers";
 import { logoutUser } from "~redux/user/actions";
 import { Photo } from "~Photos/Photo";
 import { PhotoRoute } from "~Photos/PhotoRoute";
+import { UploadStatus } from "./UploadStatus";
 
 export interface IHomeProps extends RouteComponentProps {
     user: IUserJSON | null;
@@ -59,6 +60,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                             <Navbar.Divider />
                         </Navbar.Group>
                         <Navbar.Group align={Alignment.RIGHT}>
+                            <UploadStatus />
                             <Popover
                                 target={
                                     <Button id="userButton">
diff --git a/frontend/src/Home/UploadStatus.tsx b/frontend/src/Home/UploadStatus.tsx
new file mode 100644
index 0000000..6e29d65
--- /dev/null
+++ b/frontend/src/Home/UploadStatus.tsx
@@ -0,0 +1,48 @@
+import { Button, Icon, Popover, Spinner } from "@blueprintjs/core";
+import * as React from "react";
+import { connect } from "react-redux";
+import { IAppState } from "~redux/reducers";
+import pluralize from "pluralize";
+
+export interface IUploadStatusComponentProps {
+    creatingNow: number;
+    creatingQueue: number;
+
+    uploadingNow: number;
+    uploadingQueue: number;
+}
+
+export const UploadStatusComponent: React.FunctionComponent<IUploadStatusComponentProps> = (
+    props,
+) => {
+    const { creatingNow, creatingQueue, uploadingNow, uploadingQueue } = props;
+    const uploading =
+        creatingNow > 0 ||
+        creatingQueue > 0 ||
+        uploadingNow > 0 ||
+        uploadingQueue > 0;
+    const uploadingCount =
+        creatingNow + creatingQueue + uploadingNow + uploadingQueue;
+    return uploading ? (
+        <Button
+            icon="cloud-upload"
+            text={`Uploading ${uploadingCount} ${pluralize(
+                "photo",
+                uploadingCount,
+            )}`}
+        />
+    ) : (
+        <></>
+    );
+};
+
+function mapStateToProps(state: IAppState) {
+    return {
+        creatingNow: state.photos.photosCreating,
+        creatingQueue: state.photos.photoCreateQueue.length,
+        uploadingNow: state.photos.photosUploading,
+        uploadingQueue: Object.keys(state.photos.photoUploadQueue).length,
+    };
+}
+
+export const UploadStatus = connect(mapStateToProps)(UploadStatusComponent);
diff --git a/package.json b/package.json
index 46a798f..ded5f43 100644
--- a/package.json
+++ b/package.json
@@ -89,4 +89,4 @@
       "pre-commit": "npm run lint-all && npm run prettier-check"
     }
   }
-}
\ No newline at end of file
+}