info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-02 13:52:46 +02:00
Code Issues Releases Wiki Activity

Add functionality to mark done topic as pending

Browse Source
This commit is contained in:
Kamran Ahmed
2022-12-13 14:36:16 +04:00
parent a0bc3200ed
commit 1f7554df5b
2 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/roadmap/content-drawer.tsx
View File

@@ -19,13 +19,25 @@ export function markTopicDone(groupId: string) {
); );
} }
export function markTopicPending(groupId: string) {
localStorage.removeItem(groupId);
queryGroupElementsById(groupId).forEach((item) =>
item?.classList?.remove('done')
);
}
export function isTopicDone(groupId: string) {
return localStorage.getItem(groupId) === 'done';
}
export function ContentDrawer(props: ContentDrawerProps) { export function ContentDrawer(props: ContentDrawerProps) {
const { roadmap, groupId, onClose = () => null } = props; const { roadmap, groupId, onClose = () => null } = props;
if (!groupId) { if (!groupId) {
return null; return null;
} }
const isDone = localStorage.getItem(groupId) === 'done'; const isDone = isTopicDone(groupId);
return ( return (
<Box zIndex={99999} pos="relative"> <Box zIndex={99999} pos="relative">
@@ -80,10 +92,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
{isDone && ( {isDone && (
<Button <Button
onClick={() => { onClick={() => {
localStorage.removeItem(groupId); markTopicPending(groupId);
queryGroupElementsById(groupId).forEach((item) =>
item?.classList?.remove('done')
);
onClose(); onClose();
}} }}
colorScheme="red" colorScheme="red"

10
pages/[roadmap]/interactive.tsx
View File

@@ -8,7 +8,7 @@ import { Footer } from '../../components/footer';
import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap'; import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
import Helmet from '../../components/helmet'; import Helmet from '../../components/helmet';
import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header'; import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
import { ContentDrawer, markTopicDone } from '../../components/roadmap/content-drawer'; import { ContentDrawer, isTopicDone, markTopicDone, markTopicPending } from '../../components/roadmap/content-drawer';
import { RoadmapError } from '../../components/roadmap/roadmap-error'; import { RoadmapError } from '../../components/roadmap/roadmap-error';
import { RoadmapLoader } from '../../components/roadmap/roadmap-loader'; import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
import { removeSortingInfo } from '../../lib/renderer'; import { removeSortingInfo } from '../../lib/renderer';
@@ -81,7 +81,13 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
} }
event.preventDefault(); event.preventDefault();
markTopicDone(removeSortingInfo(groupId)); const normalizedGroupId = removeSortingInfo(groupId);
if (isTopicDone(normalizedGroupId)) {
markTopicPending(normalizedGroupId);
} else {
markTopicDone(normalizedGroupId);
}
} }
window.addEventListener('keydown', keydownListener); window.addEventListener('keydown', keydownListener);