From e4e0f9ac984c7c887375440b3900091c4717bf0e Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 29 Mar 2024 17:17:58 +0000
Subject: [PATCH] Filtering of roadmaps

---
 src/components/Roadmaps/RoadmapsPage.tsx | 121 ++++++++++++++++-------
 1 file changed, 85 insertions(+), 36 deletions(-)

diff --git a/src/components/Roadmaps/RoadmapsPage.tsx b/src/components/Roadmaps/RoadmapsPage.tsx
index 4f818f55e..c172b1a38 100644
--- a/src/components/Roadmaps/RoadmapsPage.tsx
+++ b/src/components/Roadmaps/RoadmapsPage.tsx
@@ -25,6 +25,7 @@ type GroupType = {
     title: string;
     link: string;
     type: 'role' | 'skill';
+    otherGroups?: AllowGroupNames[];
   }[];
 };
 
@@ -49,7 +50,7 @@ const groups: GroupType[] = [
       },
       {
         title: 'Full-Stack Developer',
-        link: '/fullstack',
+        link: '/full-stack',
         type: 'role',
       },
     ],
@@ -61,11 +62,13 @@ const groups: GroupType[] = [
         title: 'Frontend',
         link: '/frontend',
         type: 'role',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'Backend',
         link: '/backend',
         type: 'role',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'DevOps',
@@ -76,6 +79,7 @@ const groups: GroupType[] = [
         title: 'Full Stack',
         link: '/full-stack',
         type: 'role',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'QA',
@@ -86,6 +90,42 @@ const groups: GroupType[] = [
         title: 'GraphQL',
         link: '/graphql',
         type: 'skill',
+        otherGroups: ['Web Development'],
+      },
+    ],
+  },
+  {
+    group: 'Frameworks',
+    roadmaps: [
+      {
+        title: 'React',
+        link: '/react',
+        type: 'skill',
+        otherGroups: ['Web Development'],
+      },
+      {
+        title: 'Vue',
+        link: '/vue',
+        type: 'skill',
+        otherGroups: ['Web Development'],
+      },
+      {
+        title: 'Angular',
+        link: '/angular',
+        type: 'skill',
+        otherGroups: ['Web Development'],
+      },
+      {
+        title: 'Spring Boot',
+        link: '/spring-boot',
+        type: 'skill',
+        otherGroups: ['Web Development'],
+      },
+      {
+        title: 'ASP.NET Core',
+        link: '/aspnet-core',
+        type: 'skill',
+        otherGroups: ['Web Development'],
       },
     ],
   },
@@ -96,21 +136,25 @@ const groups: GroupType[] = [
         title: 'DevOps',
         link: '/devops',
         type: 'role',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'Docker',
         link: '/docker',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'Kubernetes',
         link: '/kubernetes',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'AWS',
         link: '/aws',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
     ],
   },
@@ -121,16 +165,19 @@ const groups: GroupType[] = [
         title: 'JavaScript',
         link: '/javascript',
         type: 'skill',
+        otherGroups: ['Web Development', 'DevOps', 'Mobile Development'],
       },
       {
         title: 'TypeScript',
         link: '/typescript',
         type: 'skill',
+        otherGroups: ['Web Development', 'Mobile Development'],
       },
       {
         title: 'Node.js',
         link: '/nodejs',
         type: 'skill',
+        otherGroups: ['Web Development', 'DevOps'],
       },
       {
         title: 'C++',
@@ -141,62 +188,42 @@ const groups: GroupType[] = [
         title: 'Go',
         link: '/golang',
         type: 'skill',
+        otherGroups: ['Web Development', 'DevOps'],
       },
       {
         title: 'Rust',
         link: '/rust',
         type: 'skill',
+        otherGroups: ['Web Development', 'DevOps'],
       },
       {
         title: 'Python',
         link: '/python',
         type: 'skill',
+        otherGroups: ['Web Development', 'DevOps'],
       },
       {
         title: 'Java',
         link: '/java',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'SQL',
         link: '/sql',
         type: 'skill',
+        otherGroups: ['Web Development', 'Databases', 'DevOps'],
       },
     ],
   },
   {
-    group: 'Frameworks',
+    group: 'Mobile Development',
     roadmaps: [
       {
-        title: 'React',
-        link: '/react',
-        type: 'skill',
-      },
-      {
-        title: 'Vue',
-        link: '/vue',
-        type: 'skill',
-      },
-      {
-        title: 'Angular',
-        link: '/angular',
-        type: 'skill',
-      },
-      {
-        title: 'Spring Boot',
-        link: '/spring-boot',
-        type: 'skill',
-      },
-      {
-        title: 'ASP.NET Core',
-        link: '/aspnet-core',
-        type: 'skill',
+        title: 'Android',
+        link: '/android',
+        type: 'role',
       },
-    ],
-  },
-  {
-    group: 'Mobile Development',
-    roadmaps: [
       {
         title: 'React Native',
         link: '/react-native',
@@ -207,11 +234,6 @@ const groups: GroupType[] = [
         link: '/flutter',
         type: 'role',
       },
-      {
-        title: 'Android',
-        link: '/android',
-        type: 'role',
-      },
     ],
   },
   {
@@ -221,11 +243,13 @@ const groups: GroupType[] = [
         title: 'PostgreSQL',
         link: '/postgresql-dba',
         type: 'role',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'MongoDB',
         link: '/mongodb',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
     ],
   },
@@ -236,31 +260,37 @@ const groups: GroupType[] = [
         title: 'Computer Science',
         link: '/computer-science',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'Data Structures',
         link: '/data-structures-and-algorithms',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'System Design',
         link: '/system-design',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'Design and Architecture',
         link: '/software-design-architecture',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'Software Architect',
         link: '/software-architect',
         type: 'role',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'Code Review',
         link: '/code-review',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
       {
         title: 'Technical Writer',
@@ -316,6 +346,7 @@ const groups: GroupType[] = [
         title: 'Design System',
         link: '/design-system',
         type: 'skill',
+        otherGroups: ['Web Development'],
       },
     ],
   },
@@ -368,7 +399,25 @@ export function RoadmapsPage() {
       const group = groups.find((group) => group.group === activeGroup);
 
       if (group) {
-        setVisibleGroups([group]);
+        // other groups that have a roadmap that is in the same group
+        const otherGroups = groups.filter((g) => {
+          return (
+            g.group !== group.group &&
+            g.roadmaps.some((roadmap) => {
+              return roadmap.otherGroups?.includes(group.group);
+            })
+          );
+        });
+
+        setVisibleGroups([
+          group,
+          ...otherGroups.map((g) => ({
+            ...g,
+            roadmaps: g.roadmaps.filter((roadmap) =>
+              roadmap.otherGroups?.includes(group.group),
+            ),
+          })),
+        ]);
       }
     }
   }, [activeGroup]);