fix: consoldate stores to fix mismatched state

frontend/composables/store/index.ts

@@ -0,0 +1,3 @@
+export { useFoodStore, useFoodData } from "./use-food-store";
+export { useUnitStore, useUnitData } from "./use-unit-store";
+export { useLabelStore, useLabelData } from "./use-label-store";

frontend/composables/store/use-food-store.ts

@@ -0,0 +1,50 @@
+import { ref, reactive, Ref } from "@nuxtjs/composition-api";
+import { useStoreActions } from "../partials/use-actions-factory";
+import { useUserApi } from "~/composables/api";
+import { IngredientFood } from "~/types/api-types/recipe";
+
+let foodStore: Ref<IngredientFood[] | null> | null = null;
+
+/**
+ * useFoodData returns a template reactive object
+ * for managing the creation of units. It also provides a
+ * function to reset the data back to the initial state.
+ */
+export const useFoodData = function () {
+  const data: IngredientFood = reactive({
+    id: "",
+    name: "",
+    description: "",
+    labelId: undefined,
+  });
+
+  function reset() {
+    data.id = "";
+    data.name = "";
+    data.description = "";
+    data.labelId = undefined;
+  }
+
+  return {
+    data,
+    reset,
+  };
+};
+
+export const useFoodStore = function () {
+  const api = useUserApi();
+  const loading = ref(false);
+
+  const actions = {
+    ...useStoreActions(api.foods, foodStore, loading),
+    flushStore() {
+      foodStore = null;
+    },
+  };
+
+  if (!foodStore) {
+    foodStore = actions.getAll();
+  }
+
+  return { foods: foodStore, actions };
+};

frontend/composables/store/use-label-store.ts

@@ -0,0 +1,49 @@
+import { reactive, ref, Ref } from "@nuxtjs/composition-api";
+import { useStoreActions } from "../partials/use-actions-factory";
+import { MultiPurposeLabelOut } from "~/types/api-types/labels";
+import { useUserApi } from "~/composables/api";
+
+let labelStore: Ref<MultiPurposeLabelOut[] | null> | null = null;
+
+export function useLabelData() {
+  const data = reactive({
+    groupId: "",
+    id: "",
+    name: "",
+    color: "",
+  });
+
+  function reset() {
+    data.groupId = "";
+    data.id = "";
+    data.name = "";
+    data.color = "";
+  }
+
+  return {
+    data,
+    reset,
+  };
+}
+
+export function useLabelStore() {
+  const api = useUserApi();
+  const loading = ref(false);
+
+  const actions = {
+    ...useStoreActions<MultiPurposeLabelOut>(api.multiPurposeLabels, labelStore, loading),
+    flushStore() {
+      labelStore = null;
+    },
+  };
+
+  if (!labelStore) {
+    labelStore = actions.getAll();
+  }
+
+  return {
+    labels: labelStore,
+    actions,
+    loading,
+  };
+}

frontend/composables/store/use-unit-store.ts

@@ -0,0 +1,52 @@
+import { ref, reactive, Ref } from "@nuxtjs/composition-api";
+import { useStoreActions } from "../partials/use-actions-factory";
+import { useUserApi } from "~/composables/api";
+import { IngredientUnit } from "~/types/api-types/recipe";
+
+let unitStore: Ref<IngredientUnit[] | null> | null = null;
+
+/**
+ * useUnitData returns a template reactive object
+ * for managing the creation of units. It also provides a
+ * function to reset the data back to the initial state.
+ */
+export const useUnitData = function () {
+  const data: IngredientUnit = reactive({
+    id: "",
+    name: "",
+    fraction: true,
+    abbreviation: "",
+    description: "",
+  });
+
+  function reset() {
+    data.id = "";
+    data.name = "";
+    data.fraction = true;
+    data.abbreviation = "";
+    data.description = "";
+  }
+
+  return {
+    data,
+    reset,
+  };
+};
+
+export const useUnitStore = function () {
+  const api = useUserApi();
+  const loading = ref(false);
+
+  const actions = {
+    ...useStoreActions<IngredientUnit>(api.units, unitStore, loading),
+    flushStore() {
+      unitStore = null;
+    },
+  };
+
+  if (!unitStore) {
+    unitStore = actions.getAll();
+  }
+
+  return { units: unitStore, actions };
+};