wip

src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx

@@ -1,7 +1,10 @@
 import { Loader2Icon, PersonStandingIcon } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { usePersonalizedRoadmap } from '../../hooks/use-personalized-roadmap';
-import { renderTopicProgress } from '../../lib/resource-progress';
+import {
+  refreshProgressCounters,
+  renderTopicProgress,
+} from '../../lib/resource-progress';
 import { PersonalizedRoadmapModal } from './PersonalizedRoadmapModal';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { httpPost } from '../../lib/query-http';
@@ -34,22 +37,45 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
     queryClient,
   );
 
-  const allClickableNodes = useMemo(() => {
-    return (
+  const { data: userProgress, refetch: refetchUserProgress } = useQuery(
+    userResourceProgressOptions('roadmap', roadmapId),
+    queryClient,
+  );
+
+  const alreadyInProgressNodeIds = useMemo(() => {
+    return new Set([
+      ...(userProgress?.learning ?? []),
+      ...(userProgress?.done ?? []),
+    ]);
+  }, [userProgress]);
+
+  const allPendingNodeIds = useMemo(() => {
+    const nodes =
       roadmap?.json?.nodes?.filter((node) =>
         ['topic', 'subtopic'].includes(node?.type ?? ''),
-      ) ?? []
-    );
-  }, [roadmap]);
+      ) ?? [];
 
-  const { mutate: bulkUpdateResourceProgress, isPending: isBulkUpdating } =
-    useMutation(
+    return nodes
+      .filter((node) => {
+        const topicId = node?.id;
+        return !alreadyInProgressNodeIds.has(topicId);
+      })
+      .map((node) => node?.id);
+  }, [roadmap, alreadyInProgressNodeIds]);
+
+  const clearResourceProgressLocalStorage = useCallback(() => {
+    localStorage.removeItem(`roadmap-${roadmapId}-${currentUser?.id}-progress`);
+    localStorage.removeItem(`roadmap-${roadmapId}-${currentUser?.id}-favorite`);
+  }, [roadmapId, currentUser]);
+
+  const {
+    mutate: bulkUpdateResourceProgress,
+    isPending: isBulkUpdating,
+    mutateAsync: bulkUpdateResourceProgressAsync,
+  } = useMutation(
     {
       mutationFn: (body: BulkUpdateResourceProgressBody) => {
-          return httpPost(
-            `/v1-bulk-update-resource-progress/${roadmapId}`,
-            body,
-          );
+        return httpPost(`/v1-bulk-update-resource-progress/${roadmapId}`, body);
       },
       onError: (error) => {
         toast.error(
@@ -57,9 +83,9 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
         );
       },
       onSuccess: () => {
-          queryClient.invalidateQueries(
-            userResourceProgressOptions('roadmap', roadmapId),
-          );
+        clearResourceProgressLocalStorage();
+        refetchUserProgress();
+        refreshProgressCounters();
       },
     },
     queryClient,
@@ -73,14 +99,18 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
     onData: (data) => {
       const { topicIds } = data;
       topicIds.forEach((topicId) => {
+        if (alreadyInProgressNodeIds.has(topicId)) {
+          return;
+        }
+
         renderTopicProgress(topicId, 'pending');
       });
     },
     onFinish: (data) => {
       const { topicIds } = data;
-      const remainingTopicIds = allClickableNodes
-        .filter((node) => !topicIds.includes(node?.id ?? ''))
-        .map((node) => node?.id ?? '');
+      const remainingTopicIds = allPendingNodeIds.filter(
+        (nodeId) => !topicIds.includes(nodeId),
+      );
 
       bulkUpdateResourceProgress({
         skipped: remainingTopicIds,
@@ -93,10 +123,12 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
 
   const { mutate: clearResourceProgress, isPending: isClearing } = useMutation(
     {
-      mutationFn: () => {
-        return httpPost(`/v1-clear-resource-progress`, {
-          resourceId: roadmapId,
-          resourceType: 'roadmap',
+      mutationFn: (pendingTopicIds: string[]) => {
+        return bulkUpdateResourceProgressAsync({
+          skipped: [],
+          learning: [],
+          done: [],
+          pending: pendingTopicIds,
         });
       },
       onError: (error) => {
@@ -104,15 +136,15 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
           error?.message ?? 'Something went wrong, please try again.',
         );
       },
-      onSuccess: () => {
+      onSuccess: (_, pendingTopicIds) => {
+        for (const topicId of pendingTopicIds) {
+          renderTopicProgress(topicId, 'pending');
+        }
+
         toast.success('Progress cleared successfully.');
-        localStorage.removeItem(
-          `roadmap-${roadmapId}-${currentUser?.id}-progress`,
-        );
-        localStorage.removeItem(
-          `roadmap-${roadmapId}-${currentUser?.id}-favorite`,
-        );
-        window.location.reload();
+        clearResourceProgressLocalStorage();
+        refreshProgressCounters();
+        refetchUserProgress();
       },
     },
     queryClient,
@@ -126,15 +158,16 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
         <PersonalizedRoadmapModal
           onClose={() => setIsModalOpen(false)}
           onSubmit={(information) => {
-            for (const node of allClickableNodes) {
-              renderTopicProgress(node?.id, 'skipped');
+            for (const nodeId of allPendingNodeIds) {
+              renderTopicProgress(nodeId, 'skipped');
             }
 
             generatePersonalizedRoadmap(information);
           }}
           onClearProgress={() => {
             setIsModalOpen(false);
-            clearResourceProgress();
+            const prevSkipped = userProgress?.skipped ?? [];
+            clearResourceProgress(prevSkipped);
           }}
         />
       )}
@@ -145,11 +178,16 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
         disabled={isGenerating}
       >
         {isGenerating ? (
+          <>
             <Loader2Icon className="h-4 w-4 shrink-0 animate-spin" />
+            <span>Personalizing...</span>
+          </>
         ) : (
+          <>
             <PersonStandingIcon className="h-4 w-4 shrink-0" />
+            <span>Personalize</span>
+          </>
         )}
-        <span>Personalized</span>
       </button>
     </>
   );

src/components/PersonalizedRoadmap/PersonalizedRoadmapForm.tsx

@@ -39,15 +39,15 @@ export function PersonalizedRoadmapForm(props: PersonalizedRoadmapFormProps) {
       <div className="mt-2 grid grid-cols-2 gap-2">
         <button
           type="button"
-          className="flex items-center justify-center gap-2 rounded-xl border border-gray-200 p-2 px-4 text-gray-600 hover:bg-gray-100 focus:outline-none"
+          className="flex items-center justify-center gap-2 rounded-xl border border-gray-200 p-2 px-2 text-gray-600 hover:bg-gray-100 focus:outline-none"
           onClick={onClearProgress}
         >
           <XIcon className="h-4 w-4" />
-          Clear Progress
+          Clear Personalized
         </button>
         <button
           type="submit"
-          className="flex items-center justify-center gap-2 rounded-xl bg-black p-2 px-4 text-white hover:opacity-90 focus:outline-none"
+          className="flex items-center justify-center gap-2 rounded-xl bg-black p-2 px-2 text-white hover:opacity-90 focus:outline-none"
         >
           <PersonStandingIcon className="h-4 w-4" />
           Personalize

src/hooks/use-personalized-roadmap.ts

@@ -26,8 +26,7 @@ export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
     'idle' | 'streaming' | 'loading' | 'ready' | 'error'
   >('idle');
 
-  const generatePersonalizedRoadmap = useCallback(
-    async (information: string) => {
+  const generatePersonalizedRoadmap = async (information: string) => {
     try {
       onStart?.();
       setStatus('loading');
@@ -101,9 +100,7 @@ export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
       onError?.(error as Error);
       setStatus('error');
     }
-    },
-    [roadmapId, onError],
-  );
+  };
 
   const stop = useCallback(() => {
     if (!abortControllerRef.current) {

src/lib/resource-progress.ts

@@ -4,6 +4,8 @@ import { TOKEN_COOKIE_NAME, getUser } from './jwt';
 import { roadmapProgress, totalRoadmapNodes } from '../stores/roadmap.ts';
 // @ts-ignore
 import Element = astroHTML.JSX.Element;
+import { queryClient } from '../stores/query-client.ts';
+import { userResourceProgressOptions } from '../queries/resource-progress.ts';
 
 export type ResourceType = 'roadmap' | 'best-practice';
 export type ResourceProgressType =
@@ -78,6 +80,22 @@ export async function updateResourceProgress(
     response.skipped,
   );
 
+  queryClient.setQueryData(
+    userResourceProgressOptions(resourceType, resourceId).queryKey,
+    (oldData) => {
+      if (!oldData) {
+        return undefined;
+      }
+
+      return {
+        ...oldData,
+        done: response.done,
+        learning: response.learning,
+        skipped: response.skipped,
+      };
+    },
+  );
+
   return response;
 }