Fix hydration errors (#254)

* fixed paragraph hydration error

* fixed section link hydration errors

* fix theme switcher hydration error

* prettier

* remove log

* remove redundant

* fix build errors

* Refactor header and navbar components

- Remove unnecessary stylesheet link in Header component
- Refactor Navbar component to use useRef instead of global variables
- Fix hover and popover behavior in Navbar component
- Add useRef hook to Content component
- Remove unused props in Solution component

* Update Tailwind CSS purge paths

* hydration changing size of bound box

---------

Co-authored-by: Alasdair Wilson <[email protected]>

components/Header.tsx

@@ -22,7 +22,6 @@ const Header: React.FC<Props> = ({ theme, course, pageInfo }) => {
  <title>{pageTitle}</title>
  {pageInfo && <meta name="description" content={description} />}
  {pageInfo && <link rel="icon" href={logoSrc} />}
- <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.min.css" rel="stylesheet" />
  </Head>
  )
 }

components/Navbar.tsx

@@ -60,8 +60,8 @@ const Navbar: React.FC<Props> = ({
  const ref1 = useRef<HTMLLIElement>(null)
  const ref2 = useRef<HTMLLIElement>(null)
  const ref3 = useRef<HTMLLIElement>(null)
- let enterTimer: NodeJS.Timeout
- let leaveTimer: NodeJS.Timeout
+ const enterTimer = useRef<NodeJS.Timeout | null>(null)
+ const leaveTimer = useRef<NodeJS.Timeout | null>(null)
 
  const openAttribution = () => {
  setShowAttribution(true)
@@ -85,36 +85,36 @@ const Navbar: React.FC<Props> = ({
 
  useEffect(() => {
  if (isHovered || isPopoverHovered) {
- enterTimer = setTimeout(() => {
+ enterTimer.current = setTimeout(() => {
  setShowNavDiagram(true)
  }, 500)
  } else {
- leaveTimer = setTimeout(() => {
- clearTimeout(enterTimer)
- clearTimeout(leaveTimer)
+ leaveTimer.current = setTimeout(() => {
+ clearTimeout(enterTimer.current as NodeJS.Timeout)
+ clearTimeout(leaveTimer.current as NodeJS.Timeout)
  setShowNavDiagram(false)
  }, 500)
  }
  }, [isHovered, isPopoverHovered])
 
  const handleIsHovered = (hovered: string) => {
- clearTimeout(leaveTimer)
+ clearTimeout(leaveTimer.current as NodeJS.Timeout)
  setItemHovered(hovered)
  setIsHovered(true)
  }
 
  const handleIsNotHovered = () => {
- clearTimeout(enterTimer)
+ clearTimeout(enterTimer.current as NodeJS.Timeout)
  setIsHovered(false)
  }
 
  const handlePopoverHovered = () => {
- clearTimeout(leaveTimer)
+ clearTimeout(leaveTimer.current as NodeJS.Timeout)
  setIsPopoverHovered(true)
  }
 
  const handlePopoverNotHovered = () => {
- clearTimeout(enterTimer)
+ clearTimeout(enterTimer.current as NodeJS.Timeout)
  setIsPopoverHovered(false)
  }
 

components/Overlay.tsx

@@ -109,11 +109,15 @@ const Overlay: NextPage<Props> = ({
  <>
  <Stack direction="column" className="absolute bottom-20 left-0 ">
  {sectionLinks &&
- sectionLinks.filter((link) => link.direction === "prev").map((link) => LinkedSection(link))}
+ sectionLinks
+ .filter((link) => link.direction === "prev")
+ .map((link) => <LinkedSection key={link.url} {...link} />)}
  </Stack>
  <Stack direction="column" className="absolute bottom-20 right-0 ">
  {sectionLinks &&
- sectionLinks.filter((link) => link.direction === "next").map((link) => LinkedSection(link))}
+ sectionLinks
+ .filter((link) => link.direction === "next")
+ .map((link) => <LinkedSection key={link.url} {...link} />)}
  </Stack>
  </>
  )}

components/content/Content.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react"
+import React, { ReactNode, useRef } from "react"
 import ReactDom from "react-dom"
 import ReactMarkdown, { Components, uriTransformer } from "react-markdown"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
@@ -64,10 +64,8 @@ const h = (sectionStr: string, tag: string) => {
  return h
 }
 
-let solutionCount = 0
 function solution({ node, children, ...props }: ReactMarkdownProps) {
- solutionCount++
- return <Solution id={`solution-${solutionCount}`} content={children} />
+ return <Solution content={children} />
 }
 
 type CalloutProps = ReactMarkdownProps & {

components/content/Paragraph.tsx

@@ -136,7 +136,7 @@ const Paragraph: React.FC<ParagraphProps> = ({ content, section }) => {
  return (
  <>
  <div data-cy="paragraph" ref={ref} className="relative pb-2">
- <p className="m-0 pb-0">{content}</p>
+ <div className="m-0 pb-0">{content}</div>
  {activeEvent && (
  <div className={`absolute top-0 right-0 md:-right-6 xl:-right-[420px]`}>
  <div className={`w-[420px]`}>

components/content/Solution.tsx

@@ -1,15 +1,16 @@
+import { uniqueId } from "cypress/types/lodash"
 import React, { useRef, useState } from "react"
+import { v4 as uuidv4 } from "uuid"
 
 interface SolutionProps {
- id: string
  content: React.ReactNode
 }
 
-const Solution: React.FC<SolutionProps> = ({ id, content }) => {
+const Solution: React.FC<SolutionProps> = ({ content }) => {
  const [active, setActive] = useState(false)
  const [height, setHeight] = useState("0px")
  const [rotate, setRotate] = useState("transform duration-700 ease")
-
+ const id = useRef("solution-" + uuidv4())
  const contentSpace = useRef<null | HTMLDivElement>(null)
  const solutionContentSpace = useRef<null | HTMLDivElement>(null)
 

components/ui/LinkedSection.tsx

@@ -63,7 +63,7 @@ export const LinkedSection = (sectionLink: SectionLink) => {
  <Tooltip title={tooltipTitle}>
  <a href={`${sectionLink.url}`} className={`pointer-events-auto text-gray-600 hover:text-gray-500 opacity-50`}>
  <div
- className={`group rounded-md border-2 hover:border-4 hover:-mt-1 ${borderColor} ${calcAnchorHeight} w-[150px] text-sm`}
+ className={`group rounded-md border-2 hover:border-4 hover:-mt-1 ${calcAnchorHeight()} ${borderColor}  w-[150px] text-sm`}
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
  >

components/ui/ThemeSwitcher.tsx

@@ -1,11 +1,17 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { BsSunFill, BsFillMoonFill } from "react-icons/bs"
 import { useTheme } from "next-themes"
 
 export const ThemeButton = () => {
  const { systemTheme, theme, setTheme } = useTheme()
  const currentTheme = theme === "system" ? systemTheme : theme
 
+ const [mounted, setMounted] = React.useState(false)
+
+ useEffect(() => setMounted(true), [])
+
+ if (!mounted) return null
+
  let icon = currentTheme == "dark" ? <BsSunFill /> : <BsFillMoonFill />
  return (
  <button

pages/_document.tsx

@@ -3,7 +3,9 @@ import { Html, Head, Main, NextScript } from "next/document"
 export default function Document() {
  return (
  <Html lang="en-GB">
- <Head />
+ <Head>
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.5.2/flowbite.min.css" rel="stylesheet" />
+ </Head>
  <body className="bg-white dark:bg-slate-900">
  <Main />
  <NextScript />

tailwind.config.js

@@ -11,7 +11,7 @@ module.exports = {
  },
  mode: "jit",
  // These paths are just examples, customize them to match your project structure
- purge: [
+ content: [
  "./public/**/*.html",
  "./node_modules/flowbite-react/**/*.js",
  "./components/**/*.{js,jsx,ts,tsx,vue}",