From cd996a0b49be0da4cd9e16623e0f50abfac69324 Mon Sep 17 00:00:00 2001
From: Rushikesh Tote <rushi.tote@gmail.com>
Date: Tue, 7 Jun 2022 12:24:38 +0530
Subject: [PATCH] sync status button

---
 src/components/Sidebar/WatchModal.tsx | 51 +++++++++++++++++++++------
 src/services/watchService.ts          |  4 +++
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/components/Sidebar/WatchModal.tsx b/src/components/Sidebar/WatchModal.tsx
index dca115aa4..2f195f97d 100644
--- a/src/components/Sidebar/WatchModal.tsx
+++ b/src/components/Sidebar/WatchModal.tsx
@@ -1,15 +1,31 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Dialog, IconButton } from '@mui/material';
+import { Button, CircularProgress, Dialog, IconButton } from '@mui/material';
 import watchService, { WatchMapping } from 'services/watchService';
 import { MdDelete } from 'react-icons/md';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import Close from '@mui/icons-material/Close';
 import { SpaceBetweenFlex } from 'components/Container';
 
-function WatchModal({ watchModalView, setWatchModalView }) {
+function WatchModal({
+    watchModalView,
+    setWatchModalView,
+}: {
+    watchModalView: boolean;
+    setWatchModalView: (watchModalView: boolean) => void;
+}) {
     const [mappings, setMappings] = useState<WatchMapping[]>([]);
     const [shouldUpdateMappings, setShouldUpdateMappings] = useState(true);
     const [inputFolderPath, setInputFolderPath] = useState('');
+    const [isSyncing, setIsSyncing] = useState(false);
+
+    useEffect(() => {
+        if (watchModalView) {
+            const interval = setInterval(() => {
+                setIsSyncing(watchService.isEventRunning);
+            }, 1000);
+            return () => clearInterval(interval);
+        }
+    }, [watchModalView]);
 
     useEffect(() => {
         if (shouldUpdateMappings) {
@@ -39,6 +55,12 @@ function WatchModal({ watchModalView, setWatchModalView }) {
         setShouldUpdateMappings(true);
     };
 
+    const handleSyncProgressClick = () => {
+        if (watchService.isUploadRunning) {
+            // show progress view
+        }
+    };
+
     const handleClose = () => {
         setWatchModalView(false);
     };
@@ -103,17 +125,26 @@ function WatchModal({ watchModalView, setWatchModalView }) {
                         </Button>
                     </div>
                 </div>
-                <div
-                    style={{
+                <SpaceBetweenFlex
+                    sx={{
+                        marginTop: '20px',
                         borderTop: '1px solid #e6e6e6',
                         paddingTop: '12px',
-                        marginTop: '20px',
-                        marginBottom: '8px',
-                        fontSize: '28px',
-                        fontWeight: 'bold',
                     }}>
-                    Current Watch Mappings
-                </div>
+                    <div
+                        style={{
+                            marginBottom: '8px',
+                            fontSize: '28px',
+                            fontWeight: 'bold',
+                        }}>
+                        Current Watch Mappings
+                    </div>
+                    {isSyncing && (
+                        <IconButton onClick={handleSyncProgressClick}>
+                            <CircularProgress size={24} />
+                        </IconButton>
+                    )}
+                </SpaceBetweenFlex>
                 <div
                     style={{
                         marginTop: '12px',
diff --git a/src/services/watchService.ts b/src/services/watchService.ts
index 9928e891c..94ad79510 100644
--- a/src/services/watchService.ts
+++ b/src/services/watchService.ts
@@ -27,10 +27,12 @@ class WatchService {
     allElectronAPIsExist: boolean = false;
     eventQueue: EventQueueType[] = [];
     isEventRunning: boolean = false;
+    isUploadRunning: boolean = false;
     pathToIDMap = new Map<string, number>();
     setElectronFiles: (files: ElectronFile[]) => void;
     setCollectionName: (collectionName: string) => void;
     syncWithRemote: () => void;
+    showProgressView: () => void;
 
     constructor() {
         this.ElectronAPIs = runningInBrowser() && window['ElectronAPIs'];
@@ -170,6 +172,7 @@ class WatchService {
             }
 
             this.isEventRunning = true;
+            this.isUploadRunning = true;
 
             this.batchNextEvent();
 
@@ -282,6 +285,7 @@ class WatchService {
 
                 this.eventQueue.shift();
                 this.isEventRunning = false;
+                this.isUploadRunning = false;
                 this.runNextEvent();
             } catch (e) {
                 logError(e, 'error while running all file uploads done');