From ee5f239e7edc5b2d98a584883d407d759bc7ade8 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Thu, 5 Sep 2024 00:30:47 +0600
Subject: [PATCH] feat: persist selected group

---
 src/components/Roadmaps/RoadmapsPage.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/Roadmaps/RoadmapsPage.tsx b/src/components/Roadmaps/RoadmapsPage.tsx
index bdf93eb41..eb1c4896a 100644
--- a/src/components/Roadmaps/RoadmapsPage.tsx
+++ b/src/components/Roadmaps/RoadmapsPage.tsx
@@ -3,6 +3,11 @@ import { cn } from '../../lib/classname.ts';
 import { Filter, X } from 'lucide-react';
 import { CategoryFilterButton } from './CategoryFilterButton.tsx';
 import { useOutsideClick } from '../../hooks/use-outside-click.ts';
+import {
+  deleteUrlParam,
+  getUrlParams,
+  setUrlParams,
+} from '../../lib/browser.ts';
 
 const groupNames = [
   'Absolute Beginners',
@@ -468,6 +473,15 @@ export function RoadmapsPage() {
     ]);
   }, [activeGroup]);
 
+  useEffect(() => {
+    const { g } = getUrlParams() as { g: AllowGroupNames };
+    if (!g) {
+      return;
+    }
+
+    setActiveGroup(g);
+  }, []);
+
   return (
     <div className="border-t bg-gray-100">
       <button
@@ -502,6 +516,7 @@ export function RoadmapsPage() {
                 onClick={() => {
                   setActiveGroup('');
                   setIsFilterOpen(false);
+                  deleteUrlParam('g');
                 }}
                 category={'All Roadmaps'}
                 selected={activeGroup === ''}
@@ -514,6 +529,7 @@ export function RoadmapsPage() {
                     setActiveGroup(group.group);
                     setIsFilterOpen(false);
                     document?.getElementById('filter-button')?.scrollIntoView();
+                    setUrlParams({ g: group.group });
                   }}
                   category={group.group}
                   selected={activeGroup === group.group}