diff --git a/src/components/GenerateRoadmap/GenerateRoadmap.tsx b/src/components/GenerateRoadmap/GenerateRoadmap.tsx index 05d03454f..c7a846d89 100644 --- a/src/components/GenerateRoadmap/GenerateRoadmap.tsx +++ b/src/components/GenerateRoadmap/GenerateRoadmap.tsx @@ -93,7 +93,7 @@ export function GenerateRoadmap() { const [generatedRoadmapContent, setGeneratedRoadmapContent] = useState(''); const [currentRoadmap, setCurrentRoadmap] = useState(null); - const [selectedTopic, setSelectedTopic] = useState( + const [selectedNode, setSelectedNode] = useState( null, ); @@ -110,16 +110,7 @@ export function GenerateRoadmap() { } }; - const handleSubmit = async (e: FormEvent) => { - 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) => { + 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 && ( setSelectedTopic(null)} + nodeId={selectedNode.nodeId} + nodeType={selectedNode.nodeType} + nodeTitle={selectedNode.nodeTitle} + parentTitle={selectedNode.parentTitle} + onClose={() => setSelectedNode(null)} roadmapId={currentRoadmap?.id || ''} topicLimit={roadmapTopicLimit} topicLimitUsed={roadmapTopicLimitUsed} diff --git a/src/components/GenerateRoadmap/RoadmapSearch.tsx b/src/components/GenerateRoadmap/RoadmapSearch.tsx index 944c2fb67..6667a023c 100644 --- a/src/components/GenerateRoadmap/RoadmapSearch.tsx +++ b/src/components/GenerateRoadmap/RoadmapSearch.tsx @@ -14,6 +14,7 @@ type RoadmapSearchProps = { roadmapTopic: string; setRoadmapTopic: (topic: string) => void; handleSubmit: (e: FormEvent) => 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" >