Convert header to client component, fetch seasonList from backend

frontend/app/components/header/header.tsx

@@ -1,28 +1,64 @@
+"use client";
+import {useEffect, useState} from "react";
 import styles from "./header.module.scss"
+import {fetchSeasonList} from "@/app/utils/clientSideFetch";
+import {useRouter} from "next/router";
 
-
-export type NavLinks = {
+type NavLinks = {
     label: string;
-    path: string;
+    path: string
 }
 
-export type HeaderProps = {
-    nav_links: NavLinks[];
-}
+const Header = () => {
+    const [navLinks, setNavLinks] = useState<NavLinks[]>([])
+    const router = useRouter();
+    useEffect(() => {
+        fetchSeasonList().then(seasonList => {
+            setNavLinks(seasonList.reverse().map(season => {
+                const seasonNumber = season.split("_")[0]
+                return {label: `Season ${seasonNumber}`, path: `/season/${seasonNumber}`}
+            }))
+            if (router.pathname === "/" && typeof window !== undefined) {
+                const element = document.getElementById("curseason")
+                if (element) {
+                    element.innerText = `Season ${seasonList[0].split("_")[0]}`
+                }
+            }
+
+            if (typeof window !== undefined){
+                const element = document.getElementById('navbar')
+                if (element){
+                    element.addEventListener('wheel', function(e) {
+                        // @ts-ignore
+                        if (e.deltaY != 0) {
+                            // @ts-ignore
+                            this.scrollLeft += (e.deltaY * 1.5);
+                            e.preventDefault();
+                        }
+                    }, false);
+                }
+
+            }
+
+        })
+
+    }, []);
+
 
-const Header = ({nav_links}: HeaderProps) => {
     return (
         <header>
             <div className={styles.top_header_container}>
                 <h1>Top 500 Aggregator</h1>
             </div>
 
-            <div className={styles.navbar}>
+            <div className={styles.navbar} id="navbar">
                 <ul>
-                    {nav_links.map(link => {
-                        return <li><a href={link.path}>{link.label}</a></li>
+                    {!!navLinks.length && navLinks.map(link => {
+                        return <li><a className="block p-2 text-inherit no-underline" href={link.path}>{link.label}</a></li>
                     })}
 
+                    {!navLinks.length && <li><p className="invisible">you're not supposed to see this...</p></li>}
+
                 </ul>
             </div>