show upload status

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

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

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">

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