From b504a93445273def88cb93f8415789761b634716 Mon Sep 17 00:00:00 2001 From: don Date: Sat, 21 Dec 2024 00:30:31 +0100 Subject: [PATCH] fix toggle in front end --- src-tauri/src/service/settings.rs | 2 ++ src/components/elements/toggle.tsx | 31 +++++++++++++------ src/components/navigation/app-sidebar.tsx | 17 +++++----- src/components/pages/app/app.tsx | 15 ++++----- .../pages/app/recent-clipboards.tsx | 9 ++---- src/components/pages/app/view-more.tsx | 31 ++++++++++--------- .../pages/settings/settings-backup.tsx | 13 ++++---- src/store/app-store.ts | 5 ++- src/store/settings-store.ts | 2 +- 9 files changed, 68 insertions(+), 57 deletions(-) diff --git a/src-tauri/src/service/settings.rs b/src-tauri/src/service/settings.rs index 7e869487..6c785621 100644 --- a/src-tauri/src/service/settings.rs +++ b/src-tauri/src/service/settings.rs @@ -127,6 +127,7 @@ pub async fn sync_clipboard_history_enable() { // check if backup file exists if !Path::new(&dir_file).exists() { // copy current database to backup location + println!("copying database to backup location {} {}", &config.db, &dir_file); fs::copy(&config.db, &dir_file).expect("Failed to copy database"); } @@ -169,6 +170,7 @@ pub async fn sync_clipboard_history_disable() { pub async fn sync_clipboard_history_toggle() { let settings = get_settings().await.expect("Failed to get settings"); + printlog!("synchronize: {}", settings.synchronize); with_hotkeys(false, async move { if settings.synchronize { sync_clipboard_history_disable().await; diff --git a/src/components/elements/toggle.tsx b/src/components/elements/toggle.tsx index e06b07d4..3d4e96e2 100644 --- a/src/components/elements/toggle.tsx +++ b/src/components/elements/toggle.tsx @@ -1,6 +1,6 @@ import { FiCheck } from "solid-icons/fi"; import { VsClose } from "solid-icons/vs"; -import { Component, Setter } from "solid-js"; +import { Component, Setter, createEffect, createSignal } from "solid-js"; type SwitchProps = { checked?: boolean; @@ -8,21 +8,34 @@ type SwitchProps = { }; export const Toggle: Component = (props) => { + let inputRef: HTMLInputElement | undefined; + const [internalChecked, setInternalChecked] = createSignal(props.checked || false); + + createEffect(() => { + if (props.checked !== undefined) { + setInternalChecked(props.checked); + if (inputRef) { + inputRef.checked = props.checked; + } + } + }); + + const handleChange = () => { + const newValue = !internalChecked(); + setInternalChecked(newValue); + props.onChange(newValue); + }; + return ( diff --git a/src/components/navigation/app-sidebar.tsx b/src/components/navigation/app-sidebar.tsx index 7db45938..d8d3c8a0 100644 --- a/src/components/navigation/app-sidebar.tsx +++ b/src/components/navigation/app-sidebar.tsx @@ -5,14 +5,11 @@ import { HotkeyStore } from "../../store/hotkey-store"; interface AppSidebarProps {} export const AppSidebar: Component = ({}) => { - const { hotkeys, globalHotkeyEvent, getHotkey } = HotkeyStore; - const { setCurrentTab, tabs } = AppStore; - return ( - - + + {({ current, Icon, name, id }) => { - const currentHotkey = hotkeys()?.find((key) => key?.name === name); + const currentHotkey = HotkeyStore.hotkeys()?.find((key) => key?.name === name); return (
= ({}) => { current ? "text-black dark:text-white" : "text-zinc-600 dark:text-gray-dark" } relative flex h-6 w-full cursor-pointer select-none items-center justify-center py-5 text-xl hover:text-black dark:hover:text-white`} title={currentHotkey?.name} - onClick={() => setCurrentTab(id)} + onClick={() => AppStore.setCurrentTab(id)} > - +
{currentHotkey!.key}
diff --git a/src/components/pages/app/app.tsx b/src/components/pages/app/app.tsx index 87d9ff05..c0d014d5 100644 --- a/src/components/pages/app/app.tsx +++ b/src/components/pages/app/app.tsx @@ -10,9 +10,6 @@ import { StarredClipboards } from "./starred-clipboards"; import { ViewMore } from "./view-more"; function App() { - const { settings } = SettingsStore; - const { getCurrentTab } = AppStore; - return (
@@ -21,26 +18,26 @@ function App() {

- {getCurrentTab()?.name?.toUpperCase()} + {AppStore.getCurrentTab()?.name?.toUpperCase()}

- }> + }>
- + - + - + - +
diff --git a/src/components/pages/app/recent-clipboards.tsx b/src/components/pages/app/recent-clipboards.tsx index e051b351..4b5d964a 100644 --- a/src/components/pages/app/recent-clipboards.tsx +++ b/src/components/pages/app/recent-clipboards.tsx @@ -1,16 +1,11 @@ -import { Component, onMount } from "solid-js"; -import { Clipboards } from "./clipboard/clipboards"; +import { Component } from "solid-js"; import { ClipboardStore } from "../../../store/clipboard-store"; +import { Clipboards } from "./clipboard/clipboards"; interface RecentClipboardsProps {} export const RecentClipboards: Component = ({}) => { const { setClipboards, getClipboards, resetWhere } = ClipboardStore; - onMount(async () => { - resetWhere(); - setClipboards(await getClipboards()); - }); - return ; }; diff --git a/src/components/pages/app/view-more.tsx b/src/components/pages/app/view-more.tsx index 84f5eeff..fc6f0225 100644 --- a/src/components/pages/app/view-more.tsx +++ b/src/components/pages/app/view-more.tsx @@ -1,31 +1,32 @@ import { Component, Show } from "solid-js"; +import { HotkeyStore } from "../../../store/hotkey-store"; +import { SettingsStore } from "../../../store/settings-store"; import { Hotkey } from "../../../types"; import { WebWindow } from "../../../types/enums"; import { ViewMoreName } from "../../../utils/constants"; import { Toggle } from "../../elements/toggle"; -import { HotkeyStore } from "../../../store/hotkey-store"; -import { SettingsStore } from "../../../store/settings-store"; interface ViewMoreProps {} export const ViewMore: Component = ({}) => { - const { settings, syncClipboard, openWindow, exitApp } = SettingsStore; - const { hotkeys, globalHotkeyEvent } = HotkeyStore; - - const createButton = (name: ViewMoreName, onClick: () => void) => { - const hotkey = hotkeys().find((key) => key.name === name) as Hotkey; + const createButton = (name: ViewMoreName, callback: () => void) => { + const hotkey = HotkeyStore.hotkeys().find((key) => key.name === name) as Hotkey; return ( @@ -43,13 +46,13 @@ export const ViewMore: Component = ({}) => { return ( <> {/* Sync Clipboard History */} - {createButton("Sync Clipboard History", syncClipboard)} + {createButton("Sync Clipboard History", SettingsStore.syncClipboard)} {/* Settings */} - {createButton("Settings", async () => openWindow(WebWindow.Settings))} + {createButton("Settings", () => SettingsStore.openWindow(WebWindow.Settings))} {/* About */} - {createButton("About", async () => openWindow(WebWindow.About))} + {createButton("About", () => SettingsStore.openWindow(WebWindow.About))} {/* Exit */} - {createButton("Exit", exitApp)} + {createButton("Exit", SettingsStore.exitApp)} ); }; diff --git a/src/components/pages/settings/settings-backup.tsx b/src/components/pages/settings/settings-backup.tsx index ae222084..f112320c 100644 --- a/src/components/pages/settings/settings-backup.tsx +++ b/src/components/pages/settings/settings-backup.tsx @@ -14,11 +14,10 @@ interface SettingsBackupProps {} export const SettingsBackup: Component = ({}) => { const [url, setUrl] = createSignal(); - const { settings, syncClipboard } = SettingsStore; createEffect( on( - () => settings()?.synchronize, + () => SettingsStore.settings()?.synchronize, () => setTimeout(async () => setUrl(await invokeCommand(InvokeCommand.GetDbPath)), 100) ) ); @@ -31,9 +30,11 @@ export const SettingsBackup: Component = ({}) => {
Synchronize clipboard history
-
- void syncClipboard()} /> -
+ + void SettingsStore.syncClipboard()} + />
@@ -50,7 +51,7 @@ export const SettingsBackup: Component = ({}) => {