Fix search functionality and handle empty results

Author: ajhai

llmstack/client/src/components/store/Search.jsx

@@ -108,6 +108,10 @@ const AppList = ({ queryTerm }) => {
     });
   }, [appsLoadable.contents, setAppsData, appsLoadable.state]);
 
+  useEffect(() => {
+    setNextPage(null);
+  }, [queryTerm]);
+
   useEffect(() => {
     if (loaderRef.current && appsLoadable.state === "hasValue") {
       setAppsData(appsLoadable.contents);
@@ -181,7 +185,6 @@ export default function Search({ appSlug }) {
         sx={{ p: "2px 4px", display: "flex", alignItems: "center" }}
         onSubmit={(e) => {
           e.preventDefault();
-          // searchApps(searchTerm);
           setQueryTerm(`search?query=${searchTerm}`);
         }}
       >

llmstack/client/src/data/atoms.js

@@ -455,7 +455,7 @@ export const storeAppState = atomFamily({
 
 export const appsPageState = atomFamily({
   key: "appsPageState",
-  default: { apps: [], nextPage: null },
+  default: { apps: [], nextPage: null, empty: false },
 });
 
 export const fetchAppsFromStore = selectorFamily({
@@ -464,7 +464,12 @@ export const fetchAppsFromStore = selectorFamily({
     ({ queryTerm, nextPage }) =>
     async ({ get }) => {
       const currentPageData = get(appsPageState(queryTerm));
-      if (nextPage === currentPageData.nextPage) {
+      if (
+        (nextPage && nextPage === currentPageData.nextPage) ||
+        (!nextPage &&
+          currentPageData.apps.length === 0 &&
+          !currentPageData.empty)
+      ) {
         try {
           const response = await axios().get(
             nextPage?.replaceAll("http://localhost:8000", "") ||
@@ -474,6 +479,7 @@ export const fetchAppsFromStore = selectorFamily({
           return {
             apps: [...currentPageData.apps, ...data.results],
             nextPage: data.next,
+            empty: data.results.length === 0,
           };
         } catch (error) {
           console.error(error);