From 603ff23acf5c7a64cb81b2dbc5dc1c2a5a930a27 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 19 Mar 2024 20:18:08 +0000
Subject: [PATCH] Refactor roadmap search and suggestions

---
 .../GenerateRoadmap/AITermSuggestionInput.tsx | 145 ++++++++++--------
 .../GenerateRoadmap/GenerateRoadmap.tsx       |  58 ++++---
 .../GenerateRoadmap/RoadmapSearch.tsx         |  51 +++---
 3 files changed, 144 insertions(+), 110 deletions(-)

diff --git a/src/components/GenerateRoadmap/AITermSuggestionInput.tsx b/src/components/GenerateRoadmap/AITermSuggestionInput.tsx
index 7b42f02d0..e54efd0a9 100644
--- a/src/components/GenerateRoadmap/AITermSuggestionInput.tsx
+++ b/src/components/GenerateRoadmap/AITermSuggestionInput.tsx
@@ -1,16 +1,15 @@
 import {
+  type InputHTMLAttributes,
   useEffect,
   useMemo,
   useRef,
   useState,
-  type InputHTMLAttributes,
 } from 'react';
 import { cn } from '../../lib/classname';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useDebounceValue } from '../../hooks/use-debounce';
 import { httpGet } from '../../lib/http';
 import { useToast } from '../../hooks/use-toast';
-import { Loader2 } from 'lucide-react';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import type { PageType } from '../CommandMenu/CommandMenu.tsx';
 
@@ -24,7 +23,7 @@ type GetTopAIRoadmapTermResponse = {
 type AITermSuggestionInputProps = {
   value: string;
   onValueChange: (value: string) => void;
-  onSelect?: (roadmapId: string) => void;
+  onSelect?: (roadmapId: string, roadmapTitle: string) => void;
   inputClassName?: string;
   wrapperClassName?: string;
   placeholder?: string;
@@ -62,7 +61,7 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
     useState<GetTopAIRoadmapTermResponse>([]);
   const [searchedText, setSearchedText] = useState(defaultValue);
   const [activeCounter, setActiveCounter] = useState(0);
-  const debouncedSearchValue = useDebounceValue(searchedText, 500);
+  const debouncedSearchValue = useDebounceValue(searchedText, 300);
 
   const loadTopAIRoadmapTerm = async () => {
     const trimmedValue = debouncedSearchValue.trim();
@@ -133,18 +132,23 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
 
     setIsActive(true);
     setIsLoading(true);
-    loadTopAIRoadmapTerm().then((results) => {
-      const normalizedSearchText = debouncedSearchValue.trim().toLowerCase();
-      const matchingOfficialRoadmaps = officialRoadmaps.filter((roadmap) => {
-        return roadmap.title.toLowerCase().indexOf(normalizedSearchText) !== -1;
-      });
+    loadTopAIRoadmapTerm()
+      .then((results) => {
+        const normalizedSearchText = debouncedSearchValue.trim().toLowerCase();
+        const matchingOfficialRoadmaps = officialRoadmaps.filter((roadmap) => {
+          return (
+            roadmap.title.toLowerCase().indexOf(normalizedSearchText) !== -1
+          );
+        });
 
-      setSearchResults(
-        [...matchingOfficialRoadmaps, ...results]?.slice(0, 5) || [],
-      );
-      setActiveCounter(0);
-      setIsLoading(false);
-    });
+        setSearchResults(
+          [...matchingOfficialRoadmaps, ...results]?.slice(0, 5) || [],
+        );
+        setActiveCounter(0);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
   }, [debouncedSearchValue]);
 
   useEffect(() => {
@@ -158,6 +162,8 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
     setIsActive(false);
   });
 
+  const isFinishedTyping = debouncedSearchValue === searchedText;
+
   return (
     <div className={cn('relative', wrapperClassName)}>
       <input
@@ -196,19 +202,21 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
             setSearchedText('');
             setIsActive(false);
           } else if (e.key === 'Enter') {
-            if (searchResults.length > 0) {
-              e.preventDefault();
-              const activeData = searchResults[activeCounter];
-              if (activeData) {
-                if (activeData.isOfficial) {
-                  window.location.href = `/${activeData._id}`;
-                  return;
-                }
+            if (!searchResults.length || !isFinishedTyping) {
+              return;
+            }
 
-                onValueChange(activeData.term);
-                onSelect?.(activeData._id);
-                setIsActive(false);
+            e.preventDefault();
+            const activeData = searchResults[activeCounter];
+            if (activeData) {
+              if (activeData.isOfficial) {
+                window.open(`/${activeData._id}`, '_blank')?.focus();
+                return;
               }
+
+              onValueChange(activeData.term);
+              onSelect?.(activeData._id, activeData.title);
+              setIsActive(false);
             }
           }
         }}
@@ -223,51 +231,54 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
         </div>
       )}
 
-      {isActive && searchResults.length > 0 && searchedText.length > 0 && (
-        <div
-          className="absolute top-full z-50 mt-1 w-full rounded-md border bg-white px-2 py-2 shadow"
-          ref={dropdownRef}
-        >
-          <div className="flex flex-col">
-            {searchResults.map((result, counter) => {
-              return (
-                <button
-                  key={result?._id}
-                  type="button"
-                  className={cn(
-                    'flex w-full items-center rounded p-2 text-sm',
-                    counter === activeCounter ? 'bg-gray-100' : '',
-                  )}
-                  onMouseOver={() => setActiveCounter(counter)}
-                  onClick={() => {
-                    if (result.isOfficial) {
-                      window.location.href = `/${result._id}`;
-                      return;
-                    }
-
-                    onValueChange(result?.term);
-                    onSelect?.(result._id);
-                    setSearchedText('');
-                    setIsActive(false);
-                  }}
-                >
-                  <span
+      {isActive &&
+        isFinishedTyping &&
+        searchResults.length > 0 &&
+        searchedText.length > 0 && (
+          <div
+            className="absolute top-full z-50 mt-1 w-full rounded-md border bg-white p-1 shadow"
+            ref={dropdownRef}
+          >
+            <div className="flex flex-col">
+              {searchResults.map((result, counter) => {
+                return (
+                  <button
+                    key={result?._id}
+                    type="button"
                     className={cn(
-                      'mr-2 rounded-full p-1 px-1.5 text-xs leading-none',
-                      result.isOfficial
-                        ? 'bg-green-500 text-green-50'
-                        : 'bg-blue-400 text-blue-50',
+                      'flex w-full items-center rounded p-2 text-sm',
+                      counter === activeCounter ? 'bg-gray-100' : '',
                     )}
+                    onMouseOver={() => setActiveCounter(counter)}
+                    onClick={() => {
+                      if (result.isOfficial) {
+                        window.location.href = `/${result._id}`;
+                        return;
+                      }
+
+                      onValueChange(result?.term);
+                      onSelect?.(result._id, result.title);
+                      setSearchedText('');
+                      setIsActive(false);
+                    }}
                   >
-                    {result.isOfficial ? 'Official' : 'Generated'}
-                  </span>
-                  {result?.title || result?.term}
-                </button>
-              );
-            })}
+                    <span
+                      className={cn(
+                        'mr-2 rounded-full p-1 px-1.5 text-xs leading-none',
+                        result.isOfficial
+                          ? 'bg-green-500 text-green-50'
+                          : 'bg-blue-400 text-blue-50',
+                      )}
+                    >
+                      {result.isOfficial ? 'Official' : 'AI Generated'}
+                    </span>
+                    {result?.title || result?.term}
+                  </button>
+                );
+              })}
+            </div>
           </div>
-        </div>
-      )}
+        )}
     </div>
   );
 }
diff --git a/src/components/GenerateRoadmap/GenerateRoadmap.tsx b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
index c69db6291..62f39ef7a 100644
--- a/src/components/GenerateRoadmap/GenerateRoadmap.tsx
+++ b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
@@ -37,6 +37,7 @@ import { AIRoadmapAlert } from './AIRoadmapAlert.tsx';
 import { OpenAISettings } from './OpenAISettings.tsx';
 import { IS_KEY_ONLY_ROADMAP_GENERATION } from '../../lib/ai.ts';
 import { AITermSuggestionInput } from './AITermSuggestionInput.tsx';
+import { useParams } from '../../hooks/use-params.ts';
 
 export type GetAIRoadmapLimitResponse = {
   used: number;
@@ -91,6 +92,7 @@ export function GenerateRoadmap() {
 
   const [hasSubmitted, setHasSubmitted] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingResults, setIsLoadingResults] = useState(false);
   const [roadmapTerm, setRoadmapTerm] = useState('');
   const [generatedRoadmapContent, setGeneratedRoadmapContent] = useState('');
   const [currentRoadmap, setCurrentRoadmap] =
@@ -194,7 +196,7 @@ export function GenerateRoadmap() {
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (!roadmapTerm) {
+    if (!roadmapTerm || isLoadingResults) {
       return;
     }
 
@@ -481,7 +483,7 @@ export function GenerateRoadmap() {
                     >
                       {roadmapLimitUsed} of {roadmapLimit}
                     </span>{' '}
-                    roadmaps generated.
+                    roadmaps generated today.
                   </span>
                   {!openAPIKey && (
                     <button
@@ -523,8 +525,8 @@ export function GenerateRoadmap() {
                   onValueChange={(value) => setRoadmapTerm(value)}
                   placeholder="e.g. Try searching for Ansible or DevOps"
                   wrapperClassName="grow"
-                  onSelect={(id) => {
-                    setUrlParams({ id });
+                  onSelect={(id, title) => {
+                    loadTermRoadmap(title).finally(() => null);
                   }}
                 />
                 <button
@@ -540,37 +542,47 @@ export function GenerateRoadmap() {
                     }
                   }}
                   disabled={
-                    isAuthenticatedUser &&
-                    (!roadmapLimit ||
-                      !roadmapTerm ||
-                      roadmapLimitUsed >= roadmapLimit ||
-                      roadmapTerm === currentRoadmap?.term ||
-                      (isKeyOnly && !openAPIKey))
+                    isLoadingResults ||
+                    (isAuthenticatedUser &&
+                      (!roadmapLimit ||
+                        !roadmapTerm ||
+                        roadmapLimitUsed >= roadmapLimit ||
+                        roadmapTerm === currentRoadmap?.term ||
+                        (isKeyOnly && !openAPIKey)))
                   }
                 >
-                  {!isAuthenticatedUser && (
+                  {isLoadingResults && (
                     <>
-                      <Wand size={20} />
-                      Generate
+                      <span>Please wait..</span>
                     </>
                   )}
-
-                  {isAuthenticatedUser && (
+                  {!isLoadingResults && (
                     <>
-                      {roadmapLimit > 0 && canGenerateMore && (
+                      {!isAuthenticatedUser && (
                         <>
                           <Wand size={20} />
                           Generate
                         </>
                       )}
 
-                      {roadmapLimit === 0 && <span>Please wait..</span>}
-
-                      {roadmapLimit > 0 && !canGenerateMore && (
-                        <span className="flex items-center">
-                          <Ban size={15} className="mr-2" />
-                          Limit reached
-                        </span>
+                      {isAuthenticatedUser && (
+                        <>
+                          {roadmapLimit > 0 && canGenerateMore && (
+                            <>
+                              <Wand size={20} />
+                              Generate
+                            </>
+                          )}
+
+                          {roadmapLimit === 0 && <span>Please wait..</span>}
+
+                          {roadmapLimit > 0 && !canGenerateMore && (
+                            <span className="flex items-center">
+                              <Ban size={15} className="mr-2" />
+                              Limit reached
+                            </span>
+                          )}
+                        </>
                       )}
                     </>
                   )}
diff --git a/src/components/GenerateRoadmap/RoadmapSearch.tsx b/src/components/GenerateRoadmap/RoadmapSearch.tsx
index eaaceee79..711eaac8d 100644
--- a/src/components/GenerateRoadmap/RoadmapSearch.tsx
+++ b/src/components/GenerateRoadmap/RoadmapSearch.tsx
@@ -1,12 +1,11 @@
 import { ArrowUpRight, Ban, Cog, Telescope, Wand } from 'lucide-react';
 import type { FormEvent } from 'react';
+import { useEffect, useState } from 'react';
 import { getOpenAIKey, isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
 import { cn } from '../../lib/classname.ts';
-import { useEffect, useState } from 'react';
 import { OpenAISettings } from './OpenAISettings.tsx';
 import { AITermSuggestionInput } from './AITermSuggestionInput.tsx';
-import { setUrlParams } from '../../lib/browser.ts';
 
 type RoadmapSearchProps = {
   roadmapTerm: string;
@@ -35,11 +34,12 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
   const [isConfiguring, setIsConfiguring] = useState(false);
   const [openAPIKey, setOpenAPIKey] = useState('');
   const [isAuthenticatedUser, setIsAuthenticatedUser] = useState(false);
+  const [isLoadingResults, setIsLoadingResults] = useState(false);
 
   useEffect(() => {
     setOpenAPIKey(getOpenAIKey() || '');
     setIsAuthenticatedUser(isLoggedIn());
-  }, [getOpenAIKey(), isLoggedIn()]);
+  }, []);
 
   const randomTerms = ['OAuth', 'APIs', 'UX Design', 'gRPC'];
 
@@ -84,8 +84,8 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
             onValueChange={(value) => setRoadmapTerm(value)}
             placeholder="Enter a topic to generate a roadmap for"
             wrapperClassName="w-full"
-            onSelect={(roadmapId) => {
-              setUrlParams({ id: roadmapId });
+            onSelect={(roadmapId, roadmapTitle) => {
+              onLoadTerm(roadmapTitle);
             }}
           />
           <button
@@ -100,33 +100,44 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
               }
             }}
             disabled={
-              isAuthenticatedUser &&
-              (!limit ||
-                !roadmapTerm ||
-                limitUsed >= limit ||
-                (isKeyOnly && !openAPIKey))
+              isLoadingResults ||
+              (isAuthenticatedUser &&
+                (!limit ||
+                  !roadmapTerm ||
+                  limitUsed >= limit ||
+                  (isKeyOnly && !openAPIKey)))
             }
           >
-            {!isAuthenticatedUser && (
+            {isLoadingResults && (
               <>
-                <Wand size={20} />
-                Generate
+                <span>Please wait..</span>
               </>
             )}
-            {isAuthenticatedUser && (
+
+            {!isLoadingResults && (
               <>
-                {(!limit || canGenerateMore) && (
+                {!isAuthenticatedUser && (
                   <>
                     <Wand size={20} />
                     Generate
                   </>
                 )}
+                {isAuthenticatedUser && (
+                  <>
+                    {(!limit || canGenerateMore) && (
+                      <>
+                        <Wand size={20} />
+                        Generate
+                      </>
+                    )}
 
-                {limit > 0 && !canGenerateMore && (
-                  <span className="flex items-center text-base">
-                    <Ban size={15} className="mr-2" />
-                    Limit reached
-                  </span>
+                    {limit > 0 && !canGenerateMore && (
+                      <span className="flex items-center text-base">
+                        <Ban size={15} className="mr-2" />
+                        Limit reached
+                      </span>
+                    )}
+                  </>
                 )}
               </>
             )}