From f8f29d2a1733a4344aaa80b6abf4f1872b423c12 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 29 Mar 2024 19:35:41 +0000
Subject: [PATCH] Fix flickering issue
---
src/components/Roadmaps/RoadmapsPage.tsx | 84 ++++++++++---------
.../Roadmaps/RoadmapsPageHeader.tsx | 28 +++++++
src/pages/roadmaps.astro | 31 +------
3 files changed, 75 insertions(+), 68 deletions(-)
create mode 100644 src/components/Roadmaps/RoadmapsPageHeader.tsx
diff --git a/src/components/Roadmaps/RoadmapsPage.tsx b/src/components/Roadmaps/RoadmapsPage.tsx
index 77513251f..4d21fda08 100644
--- a/src/components/Roadmaps/RoadmapsPage.tsx
+++ b/src/components/Roadmaps/RoadmapsPage.tsx
@@ -365,54 +365,58 @@ const groups: GroupType[] = [
},
];
+const roleRoadmaps = groups.flatMap((group) =>
+ group.roadmaps.filter((roadmap) => roadmap.type === 'role'),
+);
+const skillRoadmaps = groups.flatMap((group) =>
+ group.roadmaps.filter((roadmap) => roadmap.type === 'skill'),
+);
+
+const allGroups = [
+ {
+ group: 'Role Based Roadmaps',
+ roadmaps: roleRoadmaps,
+ },
+ {
+ group: 'Skill Based Roadmaps',
+ roadmaps: skillRoadmaps,
+ },
+];
+
export function RoadmapsPage() {
const [activeGroup, setActiveGroup] = useState<AllowGroupNames>('');
- const [visibleGroups, setVisibleGroups] = useState<GroupType[]>([]);
+ const [visibleGroups, setVisibleGroups] = useState<GroupType[]>(allGroups);
useEffect(() => {
if (!activeGroup) {
- const roleRoadmaps = groups.flatMap((group) =>
- group.roadmaps.filter((roadmap) => roadmap.type === 'role'),
- );
- const skillRoadmaps = groups.flatMap((group) =>
- group.roadmaps.filter((roadmap) => roadmap.type === 'skill'),
- );
+ setVisibleGroups(allGroups);
+ return;
+ }
- setVisibleGroups([
- {
- group: 'Role Based Roadmaps',
- roadmaps: roleRoadmaps,
- },
- {
- group: 'Skill Based Roadmaps',
- roadmaps: skillRoadmaps,
- },
- ]);
- } else {
- const group = groups.find((group) => group.group === activeGroup);
+ const group = groups.find((group) => group.group === activeGroup);
+ if (!group) {
+ return;
+ }
- if (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);
- })
- );
- });
+ // 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),
- ),
- })),
- ]);
- }
- }
+ setVisibleGroups([
+ group,
+ ...otherGroups.map((g) => ({
+ ...g,
+ roadmaps: g.roadmaps.filter((roadmap) =>
+ roadmap.otherGroups?.includes(group.group),
+ ),
+ })),
+ ]);
}, [activeGroup]);
return (
diff --git a/src/components/Roadmaps/RoadmapsPageHeader.tsx b/src/components/Roadmaps/RoadmapsPageHeader.tsx
new file mode 100644
index 000000000..a3ab04649
--- /dev/null
+++ b/src/components/Roadmaps/RoadmapsPageHeader.tsx
@@ -0,0 +1,28 @@
+export function RoadmapsPageHeader() {
+ return (
+ <div className="bg-white py-12">
+ <div className="container">
+ <div className="flex flex-col items-center bg-white">
+ <h1 className="text-5xl font-bold">Developer Roadmaps</h1>
+ <p className="my-3 text-lg">
+ Browse ever-growing list of up-to-date, community driven roadmaps
+ </p>
+ <p className="flex flex-row gap-3">
+ <a
+ className="inline-block rounded-md bg-black px-3.5 py-1.5 text-base text-white"
+ href="#"
+ >
+ Draw your own roadmap
+ </a>
+ <a
+ className="inline-block rounded-md bg-gray-300 px-3.5 py-1.5 text-base text-black"
+ href="#"
+ >
+ Generate Roadmap with AI
+ </a>
+ </p>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/src/pages/roadmaps.astro b/src/pages/roadmaps.astro
index c5cd1cdee..7d9df0145 100644
--- a/src/pages/roadmaps.astro
+++ b/src/pages/roadmaps.astro
@@ -1,5 +1,6 @@
---
import { RoadmapsPage } from '../components/Roadmaps/RoadmapsPage';
+import { RoadmapsPageHeader } from '../components/Roadmaps/RoadmapsPageHeader';
import GridItem from '../components/GridItem.astro';
import SimplePageHeader from '../components/SimplePageHeader.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
@@ -11,32 +12,6 @@ import { getRoadmapsByTag } from '../lib/roadmap';
description={'Step by step guides and paths to learn different tools or technologies'}
permalink={'/roadmaps'}
>
- <div class=''>
- <div class='bg-white py-12'>
- <div class='container'>
- <div class='flex flex-col items-center bg-white'>
- <h1 class='text-5xl font-bold'>Developer Roadmaps</h1>
- <p class='my-3 text-lg'>
- Browse ever-growing list of up-to-date, community driven roadmaps
- </p>
- <p class='flex flex-row gap-3'>
- <a
- class='inline-block rounded-md bg-black px-3.5 py-1.5 text-base text-white'
- href='#'
- >
- Draw your own roadmap
- </a>
- <a
- class='inline-block rounded-md bg-gray-300 px-3.5 py-1.5 text-base text-black'
- href='#'
- >
- Generate Roadmap with AI
- </a>
- </p>
- </div>
- </div>
- </div>
-
- <RoadmapsPage client:load />
- </div>
+ <RoadmapsPageHeader client:load />
+ <RoadmapsPage client:load />
</BaseLayout>