sync status button
This commit is contained in:
parent
44033eb4fd
commit
cd996a0b49
|
@ -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',
|
||||
}}>
|
||||
<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',
|
||||
|
|
|
@ -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');
|
||||
|
|
Loading…
Reference in a new issue