sync status button

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
+                <SpaceBetweenFlex
-                    style={{
+                    sx={{
+                        marginTop: '20px',
                         borderTop: '1px solid #e6e6e6',
                         paddingTop: '12px',
-                        marginTop: '20px',
+                    }}>
+                    <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',

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