Refactor nodesg

src/components/GenerateRoadmap/GenerateRoadmap.tsx

@@ -93,7 +93,7 @@ export function GenerateRoadmap() {
   const [generatedRoadmapContent, setGeneratedRoadmapContent] = useState('');
   const [currentRoadmap, setCurrentRoadmap] =
     useState<GetAIRoadmapResponse | null>(null);
-  const [selectedTopic, setSelectedTopic] = useState<RoadmapNodeDetails | null>(
+  const [selectedNode, setSelectedNode] = useState<RoadmapNodeDetails | null>(
     null,
   );
 
@@ -110,16 +110,7 @@ export function GenerateRoadmap() {
     }
   };
 
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (!roadmapTopic) {
-      return;
-    }
-
-    if (roadmapTopic === currentRoadmap?.topic) {
-      return;
-    }
-
+  const loadTopic = async (topic: string) => {
     setIsLoading(true);
     setHasSubmitted(true);
 
@@ -140,7 +131,7 @@ export function GenerateRoadmap() {
           'Content-Type': 'application/json',
         },
         credentials: 'include',
-        body: JSON.stringify({ topic: roadmapTopic }),
+        body: JSON.stringify({ topic: topic }),
       },
     );
 
@@ -193,6 +184,19 @@ export function GenerateRoadmap() {
     setIsLoading(false);
   };
 
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!roadmapTopic) {
+      return;
+    }
+
+    if (roadmapTopic === currentRoadmap?.topic) {
+      return;
+    }
+
+    loadTopic(roadmapTopic);
+  };
+
   const saveAIRoadmap = async () => {
     if (!isLoggedIn()) {
       showLoginPopup();
@@ -328,7 +332,7 @@ export function GenerateRoadmap() {
         return;
       }
 
-      setSelectedTopic({
+      setSelectedNode({
         nodeId,
         nodeType,
         nodeTitle,
@@ -361,6 +365,10 @@ export function GenerateRoadmap() {
         handleSubmit={handleSubmit}
         limit={roadmapLimit}
         limitUsed={roadmapLimitUsed}
+        onLoadTopic={(topic: string) => {
+          setRoadmapTopic(topic);
+          loadTopic(topic);
+        }}
       />
     );
   }
@@ -370,13 +378,13 @@ export function GenerateRoadmap() {
 
   return (
     <>
-      {selectedTopic && currentRoadmap && !isLoading && (
+      {selectedNode && currentRoadmap && !isLoading && (
         <RoadmapTopicDetail
-          nodeId={selectedTopic.nodeId}
-          nodeType={selectedTopic.nodeType}
-          nodeTitle={selectedTopic.nodeTitle}
-          parentTitle={selectedTopic.parentTitle}
-          onClose={() => setSelectedTopic(null)}
+          nodeId={selectedNode.nodeId}
+          nodeType={selectedNode.nodeType}
+          nodeTitle={selectedNode.nodeTitle}
+          parentTitle={selectedNode.parentTitle}
+          onClose={() => setSelectedNode(null)}
           roadmapId={currentRoadmap?.id || ''}
           topicLimit={roadmapTopicLimit}
           topicLimitUsed={roadmapTopicLimitUsed}

src/components/GenerateRoadmap/RoadmapSearch.tsx

@@ -14,6 +14,7 @@ type RoadmapSearchProps = {
   roadmapTopic: string;
   setRoadmapTopic: (topic: string) => void;
   handleSubmit: (e: FormEvent<HTMLFormElement>) => void;
+  onLoadTopic: (topic: string) => void;
   limit: number;
   limitUsed: number;
 };
@@ -25,6 +26,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
     handleSubmit,
     limit = 0,
     limitUsed = 0,
+    onLoadTopic,
   } = props;
 
   const canGenerateMore = limitUsed < limit;
@@ -97,7 +99,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
               disabled={!limit || !canGenerateMore}
               type="button"
               onClick={() => {
-                setRoadmapTopic(topic);
+                onLoadTopic(topic);
               }}
               className="flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-sm transition-colors hover:border-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
             >