Debug

Author: pelusanchez

src/components/blocks/Accordion.tsx

@@ -1,20 +1,21 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 
 import styled from 'styled-components'
 import { AccordionSingle } from '@ecmwf-projects/cads-ui-library'
 
 import { GenerateBlocks } from '../GenerateBlocks'
 
 import type { AccordionBlock } from '../../models'
+import { useHash } from 'src/hooks/useHash'
 
 export const Accordion = ({ block }: { block: AccordionBlock }) => {
 
 
   // Get the current hash
-  const [hash, setHash] = useState<string>()
-  useEffect(() => {
-    setHash(window.location.hash)
-  }, [])
+  const hash = useHash();
+
+  console.log('hash', hash)
+  console.log('Block id', block.id)
 
   // Check if the hash is the same as the block id
   const isHash = hash === `#${block.id}`
@@ -26,6 +27,7 @@ export const Accordion = ({ block }: { block: AccordionBlock }) => {
     }
     return block.collapsed ? '' : block.title
   }, [isHash, block.title, block.collapsed])
+  console.log('Block id', block.id, defaultValue)
 
   return (<AccordionSingle
     rootProps={{

src/hooks/useHash.ts

@@ -0,0 +1,18 @@
+import { useCallback, useEffect, useState } from 'react'
+
+export const useHash = () => {
+  const [hash, setHash] = useState(() => window.location.hash)
+
+  const hashChangeHandler = useCallback(() => {
+    setHash(window.location.hash)
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('hashchange', hashChangeHandler)
+    return () => {
+      window.removeEventListener('hashchange', hashChangeHandler)
+    }
+  }, [])
+
+  return hash
+}