fix seasons option routings

apps/web/pages/challenges/index.module.css

@@ -5,4 +5,4 @@
     -webkit-text-fill-color: transparent;
     font-weight: 550;
     font-size: 70px;
-  }
+}

apps/web/pages/challenges/index.tsx

@@ -31,13 +31,13 @@ type SeasonData = {
 const seasonData: SeasonData[] = [
   {
     uuid: 1001,
-    seasonName: "season 1",
+    seasonName: "season1",
     seasonDescription:
       "this is the first ever chanllenge held by SCSE, problems vary from easy to hard mode. Everyone is welcome to join!",
   },
   {
     uuid: 1002,
-    seasonName: "season 2",
+    seasonName: "season2",
     seasonDescription:
       "2nd season of challenge!! We added a few interesting problems. Come join the challenge to find out more!",
   },
@@ -48,7 +48,11 @@ const Challenges = () => {
 
   // TODO: jump to the selected season
   const handleJoinClick = (seasonName: string) => {
-    router.push("/challenges/problems");
+    console.log(seasonName);
+    router.push({
+      pathname: "/challenges/problems",
+      query: { season: seasonName },
+    });
   };
 
   return (

apps/web/pages/challenges/problems/index.tsx

@@ -3,7 +3,8 @@ import * as React from "react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { ProblemListTable } from "@/features/challenges/components/ProblemListingTable";
 import Link from "next/link";
-import { useState, SetStateAction } from "react";
+import { useState, SetStateAction, useEffect } from "react";
+import { useRouter } from "next/router";
 
 type ProblemListData = {
   uuid: number;
@@ -84,11 +85,19 @@ const columns = [
 
 const Problems = () => {
   const [option, setOption] = useState("");
+  const router = useRouter();
+
+  useEffect(() => {
+    const { season } = router.query;
+    if (season) setOption(season as string);
+  }, [router.query]);
 
   const handleOptionChange = (event: {
     target: { value: SetStateAction<string> };
   }) => {
-    setOption(event.target.value);
+    const selectedOption = event.target.value;
+    setOption(selectedOption);
+    router.push(`/challenges/problems?season=${selectedOption}`);
   };
 
   const selectedSeasonData = seasonsData[option] || [];
@@ -107,6 +116,7 @@ const Problems = () => {
         my={4}
         bg="#CBD5F0"
         onChange={handleOptionChange}
+        value={option}
       >
         {Object.keys(seasonsData).map((season) => (
           <option key={season} value={season}>