add: abstraigo logica del manejo del listener a un custom hook y lo consumo por el header y el button para el tema de los leidos

Author: JeanBayer

app/components/ButtonRead.jsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
+import { useEventListener } from '../../hooks/useEventListener'
 
 export function ButtonRead ({ title }) {
   const [isFavorite, setIsRead] = useState(false)
@@ -10,18 +11,17 @@ export function ButtonRead ({ title }) {
     setIsRead(readStorage.includes(title))
   }, [title])
 
-  useEffect(() => {
-    window.addEventListener('storage', (event) => {
-      if (event.key === 'read') {
-        setIsRead(JSON.parse(event.newValue).includes(title))
-      }
-    })
-
-    return () => {
-      window.removeEventListener('storage', () => {})
+  const handlerStorageListener = useCallback((event) => {
+    if (event.key === 'read') {
+      setIsRead(JSON.parse(event.newValue).includes(title))
     }
   }, [title])
 
+  useEventListener({
+    eventName: 'storage',
+    handler: handlerStorageListener
+  })
+
   const handleSetRead = (title) => {
     if (title) {
       const read = JSON.parse(localStorage.getItem('read') || [])

app/components/Header.jsx

@@ -12,6 +12,7 @@ import { SearchIcon } from './SearchIcon.jsx'
 import { Title } from './Title.jsx'
 import { Stars } from './Stars.jsx'
 import ThemeToggle from './ThemeToggle'
+import { useEventListener } from '../../hooks/useEventListener'
 
 export function Header ({ stars }) {
   const pathname = usePathname()
@@ -34,6 +35,17 @@ export function Header ({ stars }) {
     []
   )
 
+  const handlerStorageListener = useCallback((event) => {
+    if (event.key === 'read') {
+      setRead(JSON.parse(event.newValue).length)
+    }
+  }, [])
+
+  useEventListener({
+    eventName: 'storage',
+    handler: handlerStorageListener
+  })
+
   useEffect(() => {
     setOpen(false)
     setResults([])
@@ -44,18 +56,6 @@ export function Header ({ stars }) {
     setRead(readStorage.length)
   }, [])
 
-  useEffect(() => {
-    window.addEventListener('storage', (event) => {
-      if (event.key === 'read') {
-        setRead(JSON.parse(event.newValue).length)
-      }
-    })
-
-    return () => {
-      window.removeEventListener('storage', () => {})
-    }
-  }, [])
-
   const handleSelect = (result) => {
     if (result) router.push(`/${result.id}/#content`)
   }

hooks/useEventListener.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+
+type UseEventListenerProps = {
+  eventName: string;
+  handler: (event: Event) => void;
+};
+export const useEventListener = ({
+  eventName,
+  handler
+}: UseEventListenerProps) => {
+  useEffect(() => {
+    window.addEventListener(eventName, (event) => {
+      handler(event)
+    })
+
+    return () => {
+      window.removeEventListener(eventName, () => {})
+    }
+  }, [eventName, handler])
+
+  return null
+}