Reduced MyChores.jsx from 2,839 to 1,364 lines (52% reduction) by extracting reusable hooks and components. Created 6 custom hooks: - useMultiSelect: Multi-select mode and selection state management - useChoreModals: Centralized modal state management - useProjectFilter: Project filtering with localStorage sync - useChoreFilters: Multi-layer filtering (project, search, user filters) - useKeyboardShortcuts: All keyboard event handling - useChoreActions: Chore actions and bulk operations Created 3 components: - SearchBar: Clean search input with keyboard hints - MultiSelectToolbar: Full multi-select toolbar with action buttons - ChoreModals: Centralized modal rendering
28 lines
607 B
JavaScript
28 lines
607 B
JavaScript
import { useState, useCallback } from 'react'
|
|
|
|
export const useChoreModals = () => {
|
|
const [activeModal, setActiveModal] = useState(null)
|
|
const [modalData, setModalData] = useState({})
|
|
const [modalChore, setModalChore] = useState(null)
|
|
|
|
const openModal = useCallback((modal, chore, data = {}) => {
|
|
setActiveModal(modal)
|
|
setModalChore(chore)
|
|
setModalData(data)
|
|
}, [])
|
|
|
|
const closeModal = useCallback(() => {
|
|
setActiveModal(null)
|
|
setModalChore(null)
|
|
setModalData({})
|
|
}, [])
|
|
|
|
return {
|
|
activeModal,
|
|
modalChore,
|
|
modalData,
|
|
openModal,
|
|
closeModal,
|
|
}
|
|
}
|