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

frontend/composables/use-api.ts

@@ -23,9 +23,9 @@ const request = {
 
 function getRequests(axoisInstance: NuxtAxiosInstance): ApiRequestInstance {
   const requests = {
-    async get<T>(url: string, queryParams = {}): Promise<RequestResponse<T>> {
+    async get<T>(url: string, params = {}): Promise<RequestResponse<T>> {
       let error = null;
-      const response = await axoisInstance.get<T>(url, { params: { queryParams } }).catch((e) => {
+      const response = await axoisInstance.get<T>(url, params).catch((e) => {
         error = e;
       });
       if (response != null) {
@@ -53,12 +53,9 @@ function getRequests(axoisInstance: NuxtAxiosInstance): ApiRequestInstance {
   return requests;
 }
 
-
-
-
 export const useApiSingleton = function (): Api {
   const { $axios } = useContext();
   const requests = getRequests($axios);
 
-  return new Api(requests)
+  return new Api(requests);
 };

frontend/composables/use-recipe-context.ts

@@ -1,37 +1,35 @@
-import {  useAsync, ref } from "@nuxtjs/composition-api";
+import { useAsync, ref, reactive } from "@nuxtjs/composition-api";
 import { useApiSingleton } from "~/composables/use-api";
 import { Recipe } from "~/types/api-types/recipe";
 
 export const useRecipeContext = function () {
   const api = useApiSingleton();
-  const loading = ref(false)
-
+  const loading = ref(false);
 
   function getBySlug(slug: string) {
-    loading.value = true
+    loading.value = true;
     const recipe = useAsync(async () => {
       const { data } = await api.recipes.getOne(slug);
       return data;
     }, slug);
 
-    loading.value = false
+    loading.value = false;
     return recipe;
   }
 
-  async function  deleteRecipe(slug: string) {
-    loading.value = true
+  async function deleteRecipe(slug: string) {
+    loading.value = true;
     const { data } = await api.recipes.deleteOne(slug);
-    loading.value = false
+    loading.value = false;
     return data;
   }
 
   async function updateRecipe(slug: string, recipe: Recipe) {
-    loading.value = true
+    loading.value = true;
     const { data } = await api.recipes.updateOne(slug, recipe);
-    loading.value = false
+    loading.value = false;
     return data;
   }
 
-
-  return {loading, getBySlug, deleteRecipe, updateRecipe}
+  return { loading, getBySlug, deleteRecipe, updateRecipe };
 };

frontend/composables/use-recipes.ts

@@ -0,0 +1,51 @@
+import { useAsync, ref } from "@nuxtjs/composition-api";
+import { useAsyncKey } from "./use-utils";
+import { useApiSingleton } from "~/composables/use-api";
+import { Recipe } from "~/types/api-types/recipe";
+
+export const allRecipes = ref<Recipe[] | null>([]);
+export const recentRecipes = ref<Recipe[] | null>([]);
+
+export const useRecipes = (all = false, fetchRecipes = true) => {
+  const api = useApiSingleton();
+
+  // recipes is non-reactive!!
+  const { recipes, start, end } = (() => {
+    if (all) {
+      return {
+        recipes: allRecipes,
+        start: 0,
+        end: 9999,
+      };
+    } else {
+      return {
+        recipes: recentRecipes,
+        start: 0,
+        end: 30,
+      };
+    }
+  })();
+
+  async function refreshRecipes() {
+    const { data } = await api.recipes.getAll(start, end);
+    if (data) {
+      recipes.value = data;
+    }
+  }
+
+  function getAllRecipes() {
+    useAsync(async () => {
+      await refreshRecipes();
+    }, useAsyncKey());
+  }
+
+  function assignSorted(val: Array<Recipe>) {
+    recipes.value = val;
+  }
+
+  if (fetchRecipes) {
+    getAllRecipes();
+  }
+
+  return { getAllRecipes, assignSorted };
+};

frontend/composables/use-tags-categories.ts

@@ -0,0 +1,60 @@
+import { Ref, ref, useAsync } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "./use-api";
+import { useAsyncKey } from "./use-utils";
+import { CategoriesAPI, Category } from "~/api/class-interfaces/categories";
+import { Tag, TagsAPI } from "~/api/class-interfaces/tags";
+
+export const allCategories = ref<Category[] | null>([]);
+export const allTags = ref<Tag[] | null>([]);
+
+function baseTagsCategories(reference: Ref<Category[] | null> | Ref<Tag[] | null>, api: TagsAPI | CategoriesAPI) {
+  function useAsyncGetAll() {
+    useAsync(async () => {
+      await refreshItems();
+    }, useAsyncKey());
+  }
+
+  async function refreshItems() {
+    const { data } = await api.getAll();
+    reference.value = data;
+  }
+
+  async function createOne(payload: { name: string }) {
+    const { data } = await api.createOne(payload);
+    if (data) {
+      refreshItems();
+    }
+  }
+
+  async function deleteOne(slug: string) {
+    const { data } = await api.deleteOne(slug);
+    if (data) {
+      refreshItems();
+    }
+  }
+
+  async function updateOne(slug: string, payload: { name: string }) {
+    // @ts-ignore // TODO: Fix Typescript Issue - Unsure how to fix this while also keeping mixins
+    const { data } = await api.updateOne(slug, payload);
+    if (data) {
+      refreshItems();
+    }
+  }
+
+  return { useAsyncGetAll, refreshItems, createOne, deleteOne, updateOne };
+}
+
+export const useTags = function () {
+  const api = useApiSingleton();
+  return {
+    allTags,
+    ...baseTagsCategories(allTags, api.tags),
+  };
+};
+export const useCategories = function () {
+  const api = useApiSingleton();
+  return {
+    allCategories,
+    ...baseTagsCategories(allCategories, api.categories),
+  };
+};