rename watchModal to watchFolder

src/components/FullScreenDropZone.tsx

@@ -59,7 +59,7 @@ export default function FullScreenDropZone(props: Props) {
 
     useEffect(() => {
         const handleWatchFolderDrop = (e: DragEvent) => {
-            if (!appContext.watchModalView) {
+            if (!appContext.watchFolderView) {
                 return;
             }
 
@@ -67,7 +67,7 @@ export default function FullScreenDropZone(props: Props) {
             e.stopPropagation();
             const files = e.dataTransfer.files;
             if (files.length > 0) {
-                appContext.setWatchModalFiles(files);
+                appContext.setWatchFolderFiles(files);
             }
         };
 
@@ -75,14 +75,14 @@ export default function FullScreenDropZone(props: Props) {
         return () => {
             removeEventListener('drop', handleWatchFolderDrop);
         };
-    }, [appContext.watchModalView]);
+    }, [appContext.watchFolderView]);
 
     return (
         <DropDiv
             {...props.getRootProps({
                 onDragEnter,
             })}>
-            {!appContext.watchModalView ? (
+            {!appContext.watchFolderView ? (
                 <input {...props.getInputProps()} />
             ) : null}
             {isDragActive && (
@@ -90,7 +90,7 @@ export default function FullScreenDropZone(props: Props) {
                     <CloseButtonWrapper onClick={onDragLeave}>
                         <CloseIcon />
                     </CloseButtonWrapper>
-                    {appContext.watchModalView
+                    {appContext.watchFolderView
                         ? constants.WATCH_FOLDER_DROPZONE_MESSAGE
                         : constants.UPLOAD_DROPZONE_MESSAGE}
                 </Overlay>

src/components/Sidebar/UtilitySection.tsx

@@ -9,15 +9,15 @@ import { useRouter } from 'next/router';
 import { AppContext } from 'pages/_app';
 import isElectron from 'is-electron';
 import { downloadApp } from 'utils/common';
-import WatchFolderModal from 'components/WatchFolder';
+import WatchFolder from 'components/WatchFolder';
 
 export default function UtilitySection({ closeSidebar }) {
     const router = useRouter();
     const {
         setDialogMessage,
         startLoading,
-        watchModalView,
+        watchFolderView: watchModalView,
-        setWatchModalView,
+        setWatchFolderView: setWatchModalView,
     } = useContext(AppContext);
 
     const [recoverModalView, setRecoveryModalView] = useState(false);
@@ -71,7 +71,7 @@ export default function UtilitySection({ closeSidebar }) {
             close: { variant: 'danger' },
         });
 
-    const closeWatchFolderModal = () => setWatchModalView(false);
+    const closeWatchFolder = () => setWatchModalView(false);
     return (
         <>
             <SidebarButton onClick={openRecoveryKeyModal}>
@@ -108,10 +108,7 @@ export default function UtilitySection({ closeSidebar }) {
                 closeSidebar={closeSidebar}
                 setLoading={startLoading}
             />
-            <WatchFolderModal
+            <WatchFolder open={watchModalView} onClose={closeWatchFolder} />
-                open={watchModalView}
-                onClose={closeWatchFolderModal}
-            />
 
             {/* <FixLargeThumbnails
                 isOpen={fixLargeThumbsView}

src/components/UploadProgress/index.tsx

@@ -45,13 +45,10 @@ export default function UploadProgress({
     const [expanded, setExpanded] = useState(true);
 
     useEffect(() => {
-        if (
+        if (appContext.isFolderSyncRunning && watchService.isUploadRunning()) {
-            appContext.watchServiceIsRunning &&
-            watchService.isUploadRunning()
-        ) {
             setExpanded(false);
         }
-    }, [appContext.watchServiceIsRunning]);
+    }, [appContext.isFolderSyncRunning]);
 
     function confirmCancelUpload() {
         appContext.setDialogMessage({

src/components/WatchFolder/index.tsx

@@ -14,7 +14,7 @@ interface Iprops {
     onClose: () => void;
 }
 
-export default function WatchFolderModal({ open, onClose }: Iprops) {
+export default function WatchFolder({ open, onClose }: Iprops) {
     const [mappings, setMappings] = useState<WatchMapping[]>([]);
     const appContext = useContext(AppContext);
 
@@ -24,12 +24,12 @@ export default function WatchFolderModal({ open, onClose }: Iprops) {
 
     useEffect(() => {
         if (
-            appContext.watchModalFiles &&
+            appContext.watchModalFolderFiles &&
-            appContext.watchModalFiles.length > 0
+            appContext.watchModalFolderFiles.length > 0
         ) {
-            handleFolderDrop(appContext.watchModalFiles);
+            handleFolderDrop(appContext.watchModalFolderFiles);
         }
-    }, [appContext.watchModalFiles]);
+    }, [appContext.watchModalFolderFiles]);
 
     const handleFolderDrop = async (folders: FileList) => {
         for (let i = 0; i < folders.length; i++) {

src/components/WatchFolder/mappingEntry/entryHeading.tsx

@@ -15,7 +15,7 @@ export function EntryHeading({ mapping }) {
             }}>
             <>
                 {mapping.collectionName}
-                {appContext.watchServiceIsRunning &&
+                {appContext.isFolderSyncRunning &&
                     watchService.currentEvent?.collectionName ===
                         mapping.collectionName && <SyncProgressIcon />}
             </>

src/components/WatchFolder/mappingEntry/index.tsx

@@ -19,8 +19,8 @@ export function MappingEntry({
     const appContext = React.useContext(AppContext);
 
     useEffect(() => {
-        console.log(appContext.watchServiceIsRunning);
+        console.log(appContext.isFolderSyncRunning);
-    }, [appContext.watchServiceIsRunning]);
+    }, [appContext.isFolderSyncRunning]);
 
     const confirmStopWatching = () => {
         appContext.setDialogMessage({

src/components/pages/gallery/Upload.tsx

@@ -132,7 +132,7 @@ export default function Upload(props: Props) {
                 props.setElectronFiles,
                 setCollectionName,
                 props.syncWithRemote,
-                appContext.setWatchServiceIsRunning
+                appContext.setIsFolderSyncRunning
             );
         }
     }, []);

src/pages/_app.tsx

@@ -52,12 +52,12 @@ type AppContextType = {
     finishLoading: () => void;
     closeMessageDialog: () => void;
     setDialogMessage: SetDialogBoxAttributes;
-    watchServiceIsRunning: boolean;
+    isFolderSyncRunning: boolean;
-    setWatchServiceIsRunning: (isRunning: boolean) => void;
+    setIsFolderSyncRunning: (isRunning: boolean) => void;
-    watchModalView: boolean;
+    watchFolderView: boolean;
-    setWatchModalView: (isOpen: boolean) => void;
+    setWatchFolderView: (isOpen: boolean) => void;
-    watchModalFiles: FileList;
+    watchModalFolderFiles: FileList;
-    setWatchModalFiles: (files: FileList) => void;
+    setWatchFolderFiles: (files: FileList) => void;
 };
 
 export enum FLASH_MESSAGE_TYPE {
@@ -92,9 +92,9 @@ export default function App({ Component, err }) {
     const loadingBar = useRef(null);
     const [dialogMessage, setDialogMessage] = useState<DialogBoxAttributes>();
     const [messageDialogView, setMessageDialogView] = useState(false);
-    const [watchServiceIsRunning, setWatchServiceIsRunning] = useState(false);
+    const [isFolderSyncRunning, setIsFolderSyncRunning] = useState(false);
-    const [watchModalView, setWatchModalView] = useState(false);
+    const [watchFolderView, setWatchFolderView] = useState(false);
-    const [watchModalFiles, setWatchModalFiles] = useState<FileList>(null);
+    const [watchFolderFiles, setWatchFolderFiles] = useState<FileList>(null);
 
     useEffect(() => {
         if (
@@ -283,12 +283,12 @@ export default function App({ Component, err }) {
                         finishLoading,
                         closeMessageDialog,
                         setDialogMessage,
-                        watchServiceIsRunning,
+                        isFolderSyncRunning: isFolderSyncRunning,
-                        setWatchServiceIsRunning,
+                        setIsFolderSyncRunning: setIsFolderSyncRunning,
-                        watchModalView,
+                        watchFolderView: watchFolderView,
-                        setWatchModalView,
+                        setWatchFolderView: setWatchFolderView,
-                        watchModalFiles,
+                        watchModalFolderFiles: watchFolderFiles,
-                        setWatchModalFiles,
+                        setWatchFolderFiles: setWatchFolderFiles,
                     }}>
                     {loading ? (
                         <VerticallyCentered>

src/pages/gallery/index.tsx

@@ -280,7 +280,7 @@ export default function Gallery() {
     );
 
     useEffect(() => {
-        if (!appContext.watchModalView) {
+        if (!appContext.watchFolderView) {
             setDroppedFiles(acceptedFiles);
         }
     }, [acceptedFiles]);