refactor(frontend): ♻️ rewrite search componenets to typescript

frontend/pages/recipes/all.vue

@@ -1,37 +1,26 @@
 <template>
   <v-container>
     <RecipeCardSection
+      v-if="allRecipes"
       :icon="$globals.icons.primary"
       :title="$t('page.all-recipes')"
-      :recipes="recipes"
+      :recipes="allRecipes"
       @sort="assignSorted"
     ></RecipeCardSection>
   </v-container>
 </template>
   
-  <script lang="ts">
-import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
-import { useApiSingleton } from "~/composables/use-api";
-import { Recipe } from "~/types/api-types/admin";
+import { useRecipes, allRecipes } from "~/composables/use-recipes";
 
 export default defineComponent({
   components: { RecipeCardSection },
   setup() {
-    const api = useApiSingleton();
+    const { assignSorted } = useRecipes(true);
 
-    const recipes = ref<Recipe[] | null>([]);
-    onMounted(async () => {
-      const { data } = await api.recipes.getAll();
-      recipes.value = data;
-    });
-
-    return { api, recipes };
-  },
-  methods: {
-    assignSorted(val: Array<Recipe>) {
-      this.recipes = val;
-    },
+    return { allRecipes, assignSorted };
   },
 });
 </script>