Skip to content

Refactor: Extract bookmark and relay logic into custom hooks#38

Merged
pheuberger merged 6 commits intomainfrom
claude/refactor-code-simplification-cpR3t
Feb 6, 2026
Merged

Refactor: Extract bookmark and relay logic into custom hooks#38
pheuberger merged 6 commits intomainfrom
claude/refactor-code-simplification-cpR3t

Conversation

@pheuberger
Copy link
Copy Markdown
Owner

Summary

This PR refactors the BookmarkList component and RelayConfigurationView by extracting complex state management and UI logic into reusable custom hooks and separate components. This improves code organization, testability, and maintainability.

Key Changes

BookmarkList Refactoring

  • Extracted useBookmarkFilters hook: Manages filtering, sorting, and search state for bookmarks

    • Handles filter views (all, read-later, inbox, tag)
    • Manages sort options (recent, oldest, title, updated)
    • Integrates search with debouncing
    • Returns filtered and sorted bookmarks
  • Extracted useBookmarkKeyboardNav hook: Manages keyboard navigation state

    • Handles j/k navigation (selectNext, selectPrev)
    • Manages hover state and keyboard-nav mode switching
    • Implements goToTop/goToBottom navigation
    • Handles scroll-into-view for selected items
    • Provides suppressHoverBriefly utility for modal interactions
  • Extracted useBookmarkSelection hook: Manages multi-select functionality

    • Handles selection mode toggling
    • Implements individual and bulk selection operations
    • Supports shift+arrow selection for range selection
    • Provides exitSelectionMode and selectAllBookmarks utilities
  • Updated navigation callbacks: Wrapped filter navigation functions to also set currentView, reducing duplication

RelayConfigurationView Refactoring

  • Extracted RelayItem component: Displays individual relay status and actions

    • Shows connection status with visual indicators
    • Displays latency information with color coding
    • Provides test and remove actions
  • Extracted AddRelayDialog component: Modal for adding custom relays

    • Handles URL validation with helpful error messages
    • Provides relay connection testing before adding
    • Checks for duplicate relays
  • Extracted relay utilities (src/utils/relay-utils.js):

    • validateRelayUrl(): URL validation with protocol checking
    • testRelayConnection(): WebSocket connection testing with timeout
    • loadCustomRelays() / saveCustomRelays(): localStorage persistence
    • loadSyncEnabled() / saveSyncEnabled(): Sync preference persistence

Implementation Details

  • All extracted hooks maintain the same functionality as the original inline code
  • Hooks follow React best practices with proper dependency arrays
  • Components are self-contained and can be tested independently
  • Utility functions are pure and side-effect free (except for localStorage)
  • Navigation callbacks properly wrap extracted hook functions to maintain view state consistency

https://claude.ai/code/session_01JbRof8b6AKgKxUQdx3FFkX

…from useNostrSync

Splits the 977-line useNostrSync.js into focused modules:
- src/services/nostr-sync-debug.js: syncDebug singleton and window exposure
- src/utils/bookmark-transform.js: bookmarkDataToYMap/ymapToBookmarkData
- src/services/nostr-inbound-handlers.js: handleInboundBookmark/handleInboundDeletion

The hook drops from 977 to 599 lines. All 879 tests pass unchanged.

https://claude.ai/code/session_01JbRof8b6AKgKxUQdx3FFkX
…markList

Splits BookmarkList.jsx (686 lines) into focused custom hooks:
- useBookmarkFilters: filter view, sort, search, tag selection
- useBookmarkSelection: multi-select, shift-select, bulk operations
- useBookmarkKeyboardNav: j/k nav, hover, scroll-into-view

BookmarkList drops from 686 to 487 lines (15 useState -> 6 + 3 hook calls).
All 879 tests pass unchanged.

https://claude.ai/code/session_01JbRof8b6AKgKxUQdx3FFkX
Introduces _result() and _runServiceCheck() template methods to eliminate
repeated service-not-initialized guards and result object construction
across 5 diagnostic check methods. Each method drops from 30-50 lines to
5-15 lines while preserving identical behavior.

All 879 tests pass (including 30 diagnostics tests).

https://claude.ai/code/session_01JbRof8b6AKgKxUQdx3FFkX
Introduces runValidationPipeline() to replace sequential if-return chains
in validateNostrEvent(), and requireTag() to deduplicate tag-finding logic
in validateBookmarkEvent() and validateDeleteEvent().

All 879 tests pass unchanged.

https://claude.ai/code/session_01JbRof8b6AKgKxUQdx3FFkX
…ayConfigurationView

Splits the 681-line RelayConfigurationView.jsx into focused modules:
- src/utils/relay-utils.js: validateRelayUrl, testRelayConnection, storage helpers
- src/components/ui/RelayItem.jsx: single relay display component
- src/components/ui/AddRelayDialog.jsx: add-relay form dialog

RelayConfigurationView drops from 681 to 297 lines. All 879 tests pass.

https://claude.ai/code/session_01JbRof8b6AKgKxUQdx3FFkX
@netlify
Copy link
Copy Markdown

netlify bot commented Feb 6, 2026

Deploy Preview for hypermarkk ready!

Name Link
🔨 Latest commit 4aa0666
🔍 Latest deploy log https://app.netlify.com/projects/hypermarkk/deploys/69857f67970efd0008a8095a
😎 Deploy Preview https://deploy-preview-38--hypermarkk.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Split nostr-sync.js (1,959 → 1,234 lines) into focused modules:
- nostr-validation.js (517 lines): Event validation, VALIDATION_ERRORS, NOSTR_KINDS,
  validateEventStructure/Timestamp/Tags/ContentSize, validateBookmarkEvent,
  validateDeleteEvent, validateNostrEvent, extract* helpers
- nostr-yjs-state.js (274 lines): Yjs state vector encode/decode/compare,
  extractYjsStateVector, compareStateVectors, hasRemoteChanges,
  encodeYjsState, applyYjsUpdate, getYjsDiff, etc.

Re-exports from nostr-sync.js ensure zero import breakage.
All 879 tests pass.

https://claude.ai/code/session_01JbRof8b6AKgKxUQdx3FFkX
@pheuberger pheuberger merged commit 30780bd into main Feb 6, 2026
7 checks passed
@pheuberger pheuberger deleted the claude/refactor-code-simplification-cpR3t branch February 6, 2026 06:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants