I am trying to separate some logic from my component into a custom hook. I feel like i'm misunderstanding some fundamentals but I thought my code would work.
Custom hook:
function eventsReducer(events, action) {
switch (action.type) {
case 'add': {
return [
...events,
{
date: action.date,
}
]
}
case 'delete': {
return events.filter((t) => t.date !== action.date)
}
default:
throw new Error('No such action');
}
}
const initEvents = () => {
const eventsFromStorage = localStorage.getItem('savedEvents')
const parsedEvents = eventsFromStorage ? JSON.parse(eventsFromStorage) : []
return parsedEvents
}
const useEvent = () => {
const [events, dispatchEvent] = useReducer(
eventsReducer,
[],
initEvents
)
useEffect(() => {
const saveEventsToStorage = () => {
localStorage.setItem('savedEvents', JSON.stringify(events))
}
saveEventsToStorage()
}, [events])
const getEventByDate = useCallback((date) => {
return events.filter(
event =>
format(new Date(event.date), 'yyyy MM d H') === format(new Date(date), 'yyyy MM d H')
)
}, [events])
return {
events,
getEventByDate,
dispatchEvent,
}
}
export default useEvent
Here Hour component:
const Hour = ({ dayWithHour }) => {
const { getEventByDate } = useEvent()
const hasEvent = !!getEventByDate(dayWithHour).length
return (
<Container hasEvent={hasEvent}></Container>
)
}
And function for adding new event in another component:
const { dispatchEvent } = useEvent()
const handleClick = () => {
const promptData = prompt('Enter event time: YYYY-MM-DD HH:mm:ss')
if (!promptData) return
dispatchEvent({
type: 'add',
date: new Date(promptData)
})
}
I have hook thats store events(useEvent) and i need to update component Hour, when I add new event.