Add ability to delete saved directory path

Also save the directory from the "move" dialog Issue #174
openscopeproject · Mar 3, 2024 · b1915e0 · b1915e0
1 parent d2b4b8f
commit b1915e0
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 13 deletions.
diff --git a/src/components/modals/common.tsx b/src/components/modals/common.tsx
@@ -22,7 +22,7 @@ import {
     Text, TextInput, ActionIcon, Menu, ScrollArea,
 } from "@mantine/core";
 import { ConfigContext, ServerConfigContext } from "config";
-import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { pathMapFromServer, pathMapToServer } from "trutil";
 import * as Icon from "react-bootstrap-icons";
 import { useServerSelectedTorrents, useServerTorrentData } from "rpc/torrent";
@@ -105,6 +105,7 @@ export interface LocationData {
     setPath: (s: string) => void,
     lastPaths: string[],
     addPath: (dir: string) => void,
+    removePath: (dir: string) => void,
     browseHandler: () => void,
     inputLabel?: string,
     disabled?: boolean,
@@ -114,12 +115,17 @@ export interface LocationData {
 export function useTorrentLocation(): LocationData {
     const config = useContext(ConfigContext);
     const serverConfig = useContext(ServerConfigContext);
-    const lastPaths = useMemo(() => serverConfig.lastSaveDirs, [serverConfig]);
+    const [lastPaths, setLastPaths] = useState(serverConfig.lastSaveDirs);
 
     const [path, setPath] = useState<string>("");
 
+    const pathRef = useRef(path);
+    pathRef.current = path;
+
     useEffect(() => {
-        setPath(lastPaths.length > 0 ? lastPaths[0] : "");
+        if (!lastPaths.includes(pathRef.current) && lastPaths.length > 0) {
+            setPath(lastPaths[0]);
+        }
     }, [lastPaths]);
 
     const browseHandler = useCallback(() => {
@@ -136,11 +142,17 @@ export function useTorrentLocation(): LocationData {
         }).catch(console.error);
     }, [serverConfig, path, setPath]);
 
-    const addPath = useCallback(
-        (dir: string) => { config.addSaveDir(serverConfig.name, dir); },
-        [config, serverConfig.name]);
+    const addPath = useCallback((dir: string) => {
+        config.addSaveDir(serverConfig.name, dir);
+        setLastPaths([...serverConfig.lastSaveDirs]);
+    }, [config, serverConfig]);
+
+    const removePath = useCallback((dir: string) => {
+        config.removeSaveDir(serverConfig.name, dir);
+        setLastPaths([...serverConfig.lastSaveDirs]);
+    }, [config, serverConfig]);
 
-    return { path, setPath, lastPaths, addPath, browseHandler };
+    return { path, setPath, lastPaths, addPath, removePath, browseHandler };
 }
 
 export function TorrentLocation(props: LocationData) {
@@ -170,7 +182,22 @@ export function TorrentLocation(props: LocationData) {
                                 styles={{ viewport: { paddingBottom: 0 } }}
                             >
                                 {props.lastPaths.map((path) => (
-                                    <Menu.Item key={path} onClick={() => { props.setPath(path); }}>{path}</Menu.Item>
+                                    <Menu.Item key={path}
+                                        onClick={() => { props.setPath(path); }}
+                                        rightSection={
+                                            <ActionIcon
+                                                component="div"
+                                                title="Remove path"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    props.removePath(path);
+                                                }}
+                                                className="list-delete-icon">
+                                                <Icon.Trash size="12" />
+                                            </ActionIcon>}
+                                    >
+                                        {path}
+                                    </Menu.Item>
                                 ))}
                             </ScrollArea.Autosize>
                         </Menu.Dropdown>

diff --git a/src/components/modals/move.tsx b/src/components/modals/move.tsx
@@ -30,7 +30,7 @@ export function MoveModal(props: ModalState) {
     const [moveData, setMoveData] = useState<boolean>(true);
 
     const location = useTorrentLocation();
-    const { setPath } = location;
+    const { setPath, addPath } = location;
 
     const changeDirectory = useTorrentChangeDirectory();
 
@@ -42,6 +42,9 @@ export function MoveModal(props: ModalState) {
                 move: moveData,
             },
             {
+                onSuccess: () => {
+                    addPath(location.path);
+                },
                 onError: (e) => {
                     console.log("Error moving torrents", e);
                     notifications.show({
@@ -53,7 +56,7 @@ export function MoveModal(props: ModalState) {
         );
 
         props.close();
-    }, [changeDirectory, serverSelected, location.path, moveData, props]);
+    }, [changeDirectory, serverSelected, location.path, moveData, props, addPath]);
 
     const calculateInitialLocation = useCallback(() => {
         const [id] = [...serverSelected];

diff --git a/src/config.ts b/src/config.ts
@@ -388,15 +388,21 @@ export class Config {
     }
 
     addSaveDir(serverName: string, dir: string) {
-        const saveDirs = this.getServer(serverName)?.lastSaveDirs;
+        const saveDirs = this.removeSaveDir(serverName, dir);
         if (saveDirs === undefined) return;
-        const index = saveDirs.findIndex((d) => d === dir);
-        if (index >= 0) saveDirs.splice(index, 1);
         saveDirs.unshift(dir);
         while (saveDirs.length > this.values.interface.numLastSaveDirs) {
             saveDirs.pop();
         }
     }
+
+    removeSaveDir(serverName: string, dir: string): string[] | undefined {
+        const saveDirs = this.getServer(serverName)?.lastSaveDirs;
+        if (saveDirs === undefined) return;
+        const index = saveDirs.findIndex((d) => d === dir);
+        if (index >= 0) saveDirs.splice(index, 1);
+        return saveDirs;
+    }
 }
 
 export const ConfigContext = React.createContext(new Config());

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -86,4 +86,16 @@ img {
 .selected {
     background-color: rgb(50, 80, 170);
     color: white;
+}
+
+.list-delete-icon {
+    height: initial;
+    width: initial;
+    min-height: initial;
+    min-width: initial;
+    display: none;
+}
+
+button[data-hovered="true"] .list-delete-icon {
+    display: block;
 }