From 445781bc40afee2c64f645abcfa2575b4218aa08 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sun, 7 Dec 2025 23:37:31 +0900 Subject: feat(client): add manual sync button MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add SyncButton component that allows users to manually trigger data synchronization. The button is disabled when offline or when sync is already in progress. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/client/components/SyncButton.test.tsx | 145 ++++++++++++++++++++++++++++++ src/client/components/SyncButton.tsx | 39 ++++++++ src/client/components/index.ts | 1 + src/client/pages/HomePage.tsx | 2 + 4 files changed, 187 insertions(+) create mode 100644 src/client/components/SyncButton.test.tsx create mode 100644 src/client/components/SyncButton.tsx (limited to 'src') diff --git a/src/client/components/SyncButton.test.tsx b/src/client/components/SyncButton.test.tsx new file mode 100644 index 0000000..c399284 --- /dev/null +++ b/src/client/components/SyncButton.test.tsx @@ -0,0 +1,145 @@ +/** + * @vitest-environment jsdom + */ +import "fake-indexeddb/auto"; +import { cleanup, fireEvent, render, screen } from "@testing-library/react"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { SyncButton } from "./SyncButton"; + +// Mock the useSync hook +const mockSync = vi.fn(); +const mockUseSync = vi.fn(); +vi.mock("../stores", () => ({ + useSync: () => mockUseSync(), +})); + +describe("SyncButton", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockSync.mockResolvedValue({ success: true }); + }); + + afterEach(() => { + cleanup(); + }); + + it("renders sync button", () => { + mockUseSync.mockReturnValue({ + isOnline: true, + isSyncing: false, + sync: mockSync, + }); + + render(); + + expect(screen.getByTestId("sync-button")).toBeDefined(); + expect(screen.getByText("Sync")).toBeDefined(); + }); + + it("displays 'Syncing...' when syncing", () => { + mockUseSync.mockReturnValue({ + isOnline: true, + isSyncing: true, + sync: mockSync, + }); + + render(); + + expect(screen.getByText("Syncing...")).toBeDefined(); + }); + + it("is disabled when offline", () => { + mockUseSync.mockReturnValue({ + isOnline: false, + isSyncing: false, + sync: mockSync, + }); + + render(); + + const button = screen.getByTestId("sync-button"); + expect(button).toHaveProperty("disabled", true); + }); + + it("is disabled when syncing", () => { + mockUseSync.mockReturnValue({ + isOnline: true, + isSyncing: true, + sync: mockSync, + }); + + render(); + + const button = screen.getByTestId("sync-button"); + expect(button).toHaveProperty("disabled", true); + }); + + it("is enabled when online and not syncing", () => { + mockUseSync.mockReturnValue({ + isOnline: true, + isSyncing: false, + sync: mockSync, + }); + + render(); + + const button = screen.getByTestId("sync-button"); + expect(button).toHaveProperty("disabled", false); + }); + + it("calls sync when clicked", async () => { + mockUseSync.mockReturnValue({ + isOnline: true, + isSyncing: false, + sync: mockSync, + }); + + render(); + + const button = screen.getByTestId("sync-button"); + fireEvent.click(button); + + expect(mockSync).toHaveBeenCalledTimes(1); + }); + + it("does not call sync when clicked while disabled", () => { + mockUseSync.mockReturnValue({ + isOnline: false, + isSyncing: false, + sync: mockSync, + }); + + render(); + + const button = screen.getByTestId("sync-button"); + fireEvent.click(button); + + expect(mockSync).not.toHaveBeenCalled(); + }); + + it("shows tooltip when offline", () => { + mockUseSync.mockReturnValue({ + isOnline: false, + isSyncing: false, + sync: mockSync, + }); + + render(); + + const button = screen.getByTestId("sync-button"); + expect(button.getAttribute("title")).toBe("Cannot sync while offline"); + }); + + it("does not show tooltip when online", () => { + mockUseSync.mockReturnValue({ + isOnline: true, + isSyncing: false, + sync: mockSync, + }); + + render(); + + const button = screen.getByTestId("sync-button"); + expect(button.getAttribute("title")).toBeNull(); + }); +}); diff --git a/src/client/components/SyncButton.tsx b/src/client/components/SyncButton.tsx new file mode 100644 index 0000000..1ebfa2e --- /dev/null +++ b/src/client/components/SyncButton.tsx @@ -0,0 +1,39 @@ +import { useSync } from "../stores"; + +export function SyncButton() { + const { isOnline, isSyncing, sync } = useSync(); + + const handleSync = async () => { + await sync(); + }; + + const isDisabled = !isOnline || isSyncing; + + const getButtonText = (): string => { + if (isSyncing) { + return "Syncing..."; + } + return "Sync"; + }; + + return ( + + ); +} diff --git a/src/client/components/index.ts b/src/client/components/index.ts index 12a09a9..31ebe1f 100644 --- a/src/client/components/index.ts +++ b/src/client/components/index.ts @@ -1,2 +1,3 @@ export { ProtectedRoute } from "./ProtectedRoute"; +export { SyncButton } from "./SyncButton"; export { SyncStatusIndicator } from "./SyncStatusIndicator"; diff --git a/src/client/pages/HomePage.tsx b/src/client/pages/HomePage.tsx index debc935..783e623 100644 --- a/src/client/pages/HomePage.tsx +++ b/src/client/pages/HomePage.tsx @@ -4,6 +4,7 @@ import { ApiClientError, apiClient } from "../api"; import { CreateDeckModal } from "../components/CreateDeckModal"; import { DeleteDeckModal } from "../components/DeleteDeckModal"; import { EditDeckModal } from "../components/EditDeckModal"; +import { SyncButton } from "../components/SyncButton"; import { SyncStatusIndicator } from "../components/SyncStatusIndicator"; import { useAuth } from "../stores"; @@ -73,6 +74,7 @@ export function HomePage() {

Kioku

+ -- cgit v1.2.3-70-g09d2