Refactor clipboard actions to use useClipboard hook

[marcuscastelo]

Refactor clipboard actions in ItemGroupListView and ItemListView to utilize the useClipboard hook, streamlining the copy functionality and improving error handling.

Closes #472

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
marucs-diet	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 3, 2025 7:42pm

[Copilot]

Pull Request Overview

This PR refactors the clipboard copy/paste logic across recipe, meal, item-group, and food-item components to use shared hooks, improving code reuse, error handling, and schema validation.

• Introduces useCopyPasteActions for unified copy/paste flows in RecipeEditView and MealEditView.
• Replaces direct navigator.clipboard calls in ItemGroupListView and ItemListView with the useClipboard hook.
• Enhances useClipboard to accept an error callback and ignore NotAllowedError.

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/sections/recipe/components/RecipeEditView.tsx	Switched to useCopyPasteActions, removed duplicated code
src/sections/meal/components/MealEditView.tsx	Same refactor for meal editor
src/sections/item-group/components/ItemGroupListView.tsx	Replaced inline clipboard with useClipboard
src/sections/item-group/components/ItemGroupEditModal.tsx	Integrated useCopyPasteActions; removed custom clipboard code
src/sections/food-item/components/ItemListView.tsx	Replaced inline clipboard in item list with useClipboard
src/sections/common/hooks/useCopyPasteActions.ts	New shared hook for copy/paste operations
src/sections/common/hooks/useClipboard.tsx	Expanded write API to accept error callback
package.json	Bumped version to match issue #472
.github/copilot-instructions.md	Added static import guideline under Imports

Comments suppressed due to low confidence (5)

src/sections/item-group/components/ItemGroupListView.tsx:18

• [nitpick] Naming the entire hook result as clipboard can be confusing; destructure only the needed methods (e.g., const { write, clear } = useClipboard()) for clarity.

const clipboard = useClipboard()

src/sections/food-item/components/ItemListView.tsx:43

• [nitpick] To improve readability, destructure the hook return value instead of using a generic clipboard object, e.g., const { write } = useClipboard().

const clipboard = useClipboard()

src/sections/common/hooks/useCopyPasteActions.ts:1

• The new useCopyPasteActions hook encapsulates important logic but currently has no unit tests; consider adding tests for handleCopy, handlePaste, and validation flows.

import { useClipboard, createClipboardSchemaFilter } from '~/sections/common/hooks/useClipboard'

src/sections/common/hooks/useCopyPasteActions.ts:5

• Add JSDoc descriptions for the returned properties (handleCopy, handlePaste, etc.) so consumers know their purpose and return types.

/**

src/sections/item-group/components/ItemGroupEditModal.tsx:473

• Missing import for useConfirmModalContext, which will cause a runtime error. Please add import { useConfirmModalContext } from '~/sections/common/context/ConfirmModalContext' at the top of the file.

const { show: showConfirmModal } = useConfirmModalContext()