add searchInput to handleDataFilter (#5593)

website/src/components/quickstartGuideList/index.js

@@ -4,15 +4,14 @@ import Head from '@docusaurus/Head';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Hero from '@site/src/components/hero';
-import QuickstartGuideCard from '../quickstartGuideCard'
+import QuickstartGuideCard from '../quickstartGuideCard';
 import styles from './styles.module.css';
 import { SelectDropdown } from '../selectDropdown';
 import SearchInput from '../searchInput';
 import { useHistory, useLocation } from '@docusaurus/router';
 
-const quickstartTitle = 'Guides'
-const quickstartDescription = 'dbt Cloud is the fastest and most reliable way to deploy your dbt jobs and dbt Core is a powerful open-source tool for data transformations. With the help of a sample project, learn how to quickly start using dbt and one of the most common data platforms.'
-
+const quickstartTitle = 'Guides';
+const quickstartDescription = 'dbt Cloud is the fastest and most reliable way to deploy your dbt jobs and dbt Core is a powerful open-source tool for data transformations. With the help of a sample project, learn how to quickly start using dbt and one of the most common data platforms.';
 
 function QuickstartList({ quickstartData }) {
   const { siteConfig } = useDocusaurusContext();
@@ -23,7 +22,6 @@ function QuickstartList({ quickstartData }) {
   const history = useHistory();
   const location = useLocation();
 
-
   // Build meta title from quickstartTitle and docusaurus config site title
   const metaTitle = `${quickstartTitle}${siteConfig?.title ? ` | ${siteConfig.title}` : ''}`;
 
@@ -54,7 +52,7 @@ function QuickstartList({ quickstartData }) {
     selectedTags.forEach(tag => params.append('tags', tag.value));
     selectedLevel.forEach(level => params.append('level', level.value));
     history.replace({ search: params.toString() });
-};
+  };
 
   // Handle all filters
   const handleDataFilter = () => {
@@ -78,8 +76,8 @@ function QuickstartList({ quickstartData }) {
     const tagsFromUrl = params.getAll('tags').map(tag => ({ value: tag, label: tag }));
     const levelsFromUrl = params.getAll('level').map(level => ({ value: level, label: level }));
     setSelectedTags(tagsFromUrl);
-    setSelectedLevel(levelsFromUrl)
-  }, []); // Empty dependency array ensures this runs only once on component mount
+    setSelectedLevel(levelsFromUrl);
+  }, [location.search]); // Added location.search to dependency array
 
   useEffect(() => {
     updateUrlParams(selectedTags, selectedLevel);
@@ -89,7 +87,7 @@ function QuickstartList({ quickstartData }) {
   // Also just good practice to separate out side effects with different functions
   useEffect(() => {
     handleDataFilter();
-  }, [selectedTags, selectedLevel]);
+  }, [selectedTags, selectedLevel, searchInput]); // Added searchInput to dependency array
 
   return (
     <Layout>