Dependencies updated with refactoring and normalization of hooks and correction of bugs in child-type prop-types

Author: joellesenne

eslint.config.js

@@ -5,7 +5,7 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 
 export default [
-  { ignores: ['build'] },
+  { ignores: ['build', 'src/App.test.js'] },
   {
     files: ['**/*.{js,jsx}'],
     languageOptions: {

package.json

@@ -42,6 +42,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
+    "prop-types": "^15.8.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",

pnpm-lock.yaml

@@ -1,7 +1,14 @@
+import PropTypes from 'prop-types';
+
 export  default function Content({children}) {
     return (
         <article className="content">
             {children}
         </article>
     );
-}
+}
+
+Content.propTypes = {
+    name: PropTypes.string.isRequired,
+    children: PropTypes.node
+};

src/components/Content.jsx

@@ -1,7 +1,14 @@
+import PropTypes from 'prop-types';
+
 export  default function Header({children}) {
     return (
         <header id="home" className="header scroll-snap js-slider">
             {children}
         </header>
     )
-}
+}
+
+Header.propTypes = {
+    name: PropTypes.string.isRequired,
+    children: PropTypes.node
+};

src/components/Header.jsx

@@ -1,7 +1,14 @@
+import PropTypes from 'prop-types';
+
 export default function Layout({children}) {
     return (
         <main className="container">
             {children}
         </main>
     );
-}
+}
+
+Layout.propTypes = {
+    name: PropTypes.string.isRequired,
+    children: PropTypes.node
+};

src/components/Layout.jsx

@@ -1,72 +1,18 @@
-import React, { useEffect, useState } from 'react';
-
-const navTabs = [
-    {
-        titre: "Home",
-        url: "#home",
-        active: ""
-    },
-    {
-        titre: "Project",
-        url: "#project",
-        active: ""
-    },
-    {
-        titre: "Lab",
-        url: "#lab",
-        active: ""
-    },
-    {
-        titre: "Blog",
-        url: "#blog",
-        active: ""
-    },
-    {
-        titre: "Photos",
-        url: "#photos",
-        active: ""
-    },
-    {
-        titre: "About",
-        url: "#about",
-        active: ""
-    }
-]
+import { useStickySliderNav } from '../hooks/useStickySliderNav';
 
 export  default function Navigation() {
-    const [isNavSticky, setIsNavSticky] = useState(false);
-    const [activeTab, setActiveTab] = useState(0);
-
-    useEffect(() => {
-        const navSticky = document.getElementById('js-nav-sticky');
-        // const navTabs = document.querySelectorAll('.js-nav-tab');
-        const sliders = document.querySelectorAll('.js-slider');
-        const sticky = navSticky.offsetTop;
-
-        const navStickyHandler = () => {
-            setIsNavSticky(window.scrollY >= sticky);
-
-            for (let i = sliders.length - 1; i >= 0; i--) {
-                if (window.scrollY + 50 >= sliders[i].offsetTop) {
-                    setActiveTab(i);
-                    break;
-                }
-            }
-        };
-
-        window.addEventListener('scroll', navStickyHandler);
+    const { isNavSticky, isActiveTab, navTabs } = useStickySliderNav();
 
-        return () => {
-            window.removeEventListener('scroll', navStickyHandler);
-        };
-    }, []);
     return (
         <nav id="js-nav-sticky" className={`nav ${isNavSticky ? 'nav-sticky' : ''}`}>
-            {navTabs.map((tab, index) => (
+            {navTabs.map((navTab, index) => (
                 <a
                     key={index}
-                    className={`nav-tab js-nav-tab ${activeTab === index ? 'active' : ''}`}
-                    href={tab.url}>{tab.titre}</a>
+                    className={`nav-tab js-nav-tab ${isActiveTab === index ? 'active' : ''}`}
+                    href={navTab.url}
+                >
+                    {navTab.titre}
+                </a>
 
             ))}
         </nav>

src/components/Navigation.jsx

@@ -1,20 +1,17 @@
-import { useScrollToTop } from "../utils";
-import { UseScrollToTop } from "../hooks/UseScollToTop";
+import { useScrollToTop } from "../hooks/useScollToTop.jsx";
 
 export  default function ScrollToTop() {
-    const {isVisible} = UseScrollToTop();
+    const { isVisible, scrollToTop} = useScrollToTop(300);
     return (
         <>
-            {isVisible && (
-                <button
-                    className="scroll"
-                    onClick={useScrollToTop}
-                    type="button"
-                    aria-label="Scroll to top"
-                    title="Scroll to top"
-                />
-            )}
+            <button
+              className="scroll"
+              style={{ display: isVisible ? "block" : "none" }}
+              onClick={scrollToTop}
+              type="button"
+              aria-label="Scroll to top"
+              title="Scroll to top"
+            />
         </>
-
     )
 }

src/components/ScrollToTop.jsx

@@ -1,7 +1,7 @@
-import {UseToggleDarkMode} from "../hooks/UseToggleDarkMode";
+import {useToggleDarkMode} from "../hooks/useToggleDarkMode.jsx";
 
 export default function ToggleDarkMode() {
-    const {theme, handleToggleTheme} = UseToggleDarkMode()
+    const {theme, handleToggleTheme} = useToggleDarkMode()
 
     return (
         <button