refator: reuse search page component (#2240)

* wip: fix recipe card section

* refactor basic search to share composable

* fix dialog results

* use search for cat/tag/tool pages

* update organizer to support name edits

* fix composable typing

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -5,7 +5,7 @@
       <v-app-bar sticky dark color="primary lighten-1" :rounded="!$vuetify.breakpoint.xs">
         <v-text-field
           id="arrow-search"
-          v-model="search"
+          v-model="search.query.value"
           autofocus
           solo
           flat
@@ -35,7 +35,7 @@
         </v-card-actions>
 
         <RecipeCardMobile
-          v-for="(recipe, index) in searchResults"
+          v-for="(recipe, index) in search.data.value"
           :key="index"
           :tabindex="index"
           class="ma-1 arrow-nav"
@@ -55,10 +55,10 @@
 
 <script lang="ts">
 import { defineComponent, toRefs, reactive, ref, watch, useRoute } from "@nuxtjs/composition-api";
-import { watchDebounced } from "@vueuse/shared";
 import RecipeCardMobile from "./RecipeCardMobile.vue";
 import { RecipeSummary } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
+import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
 const SELECTED_EVENT = "selected";
 export default defineComponent({
   components: {
@@ -69,7 +69,6 @@ export default defineComponent({
     const state = reactive({
       loading: false,
       selectedIndex: -1,
-      searchResults: [] as RecipeSummary[],
     });
 
     // ===========================================================================
@@ -79,9 +78,9 @@ export default defineComponent({
     // Reset or Grab Recipes on Change
     watch(dialog, (val) => {
       if (!val) {
-        search.value = "";
+        search.query.value = "";
         state.selectedIndex = -1;
-        state.searchResults = [];
+        search.data.value = [];
       }
     });
 
@@ -142,30 +141,8 @@ export default defineComponent({
     // ===========================================================================
     // Basic Search
     const api = useUserApi();
-    const search = ref("");
+    const search = useRecipeSearch(api);
 
-    watchDebounced(
-      search,
-      async (val) => {
-        console.log(val);
-        if (val) {
-          state.loading = true;
-          const { data, error } = await api.recipes.search({ search: val, page: 1, perPage: 10 });
-
-          if (error || !data) {
-            console.error(error);
-            state.searchResults = [];
-          } else {
-            state.searchResults = data.items;
-          }
-
-          state.loading = false;
-        }
-      },
-      { debounce: 500, maxWait: 1000 }
-    );
-
-    // ===========================================================================
     // Select Handler
 
     function handleSelect(recipe: RecipeSummary) {
@@ -173,7 +150,14 @@ export default defineComponent({
       context.emit(SELECTED_EVENT, recipe);
     }
 
-    return { ...toRefs(state), dialog, open, close, handleSelect, search };
+    return {
+      ...toRefs(state),
+      dialog,
+      open,
+      close,
+      handleSelect,
+      search,
+    };
   },
 });
 </script>