feat: Filter Recipes By Household (and a ton of bug fixes) (#4207)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/composables/partials/types.ts

@@ -0,0 +1,3 @@
+export type BoundT = {
+  id?: string | number | null;
+};

frontend/composables/partials/use-actions-factory.ts

@@ -1,18 +1,15 @@
 import { Ref, useAsync } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
+import { BoundT } from "./types";
 import { BaseCRUDAPI, BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
 import { QueryValue } from "~/lib/api/base/route";
 
-type BoundT = {
-  id?: string | number | null;
-};
-
-interface PublicStoreActions<T extends BoundT> {
+interface ReadOnlyStoreActions<T extends BoundT> {
   getAll(page?: number, perPage?: number, params?: any): Ref<T[] | null>;
   refresh(): Promise<void>;
 }
 
-interface StoreActions<T extends BoundT> extends PublicStoreActions<T> {
+interface StoreActions<T extends BoundT> extends ReadOnlyStoreActions<T> {
   createOne(createData: T): Promise<T | null>;
   updateOne(updateData: T): Promise<T | null>;
   deleteOne(id: string | number): Promise<T | null>;
@@ -20,16 +17,16 @@ interface StoreActions<T extends BoundT> extends PublicStoreActions<T> {
 
 
 /**
- * usePublicStoreActions is a factory function that returns a set of methods
+ * useReadOnlyActions is a factory function that returns a set of methods
  * that can be reused to manage the state of a data store without using
  * Vuex. This is primarily used for basic GET/GETALL operations that required
  * a lot of refreshing hooks to be called on operations
  */
-export function usePublicStoreActions<T extends BoundT>(
+export function useReadOnlyActions<T extends BoundT>(
   api: BaseCRUDAPIReadOnly<T>,
   allRef: Ref<T[] | null> | null,
   loading: Ref<boolean>
-): PublicStoreActions<T> {
+): ReadOnlyStoreActions<T> {
   function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
     params.orderBy ??= "name";
     params.orderDirection ??= "asc";

frontend/composables/partials/use-store-factory.ts

@@ -0,0 +1,53 @@
+import { ref, reactive, Ref } from "@nuxtjs/composition-api";
+import { useReadOnlyActions, useStoreActions } from "./use-actions-factory";
+import { BoundT } from "./types";
+import { BaseCRUDAPI, BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
+
+export const useData = function<T extends BoundT>(defaultObject: T) {
+  const data = reactive({ ...defaultObject });
+  function reset() {
+    Object.assign(data, defaultObject);
+  };
+
+  return { data, reset };
+}
+
+export const useReadOnlyStore = function<T extends BoundT>(
+  store: Ref<T[]>,
+  loading: Ref<boolean>,
+  api: BaseCRUDAPIReadOnly<T>,
+) {
+  const actions = {
+    ...useReadOnlyActions(api, store, loading),
+    flushStore() {
+      store.value = [];
+    },
+  };
+
+  if (!loading.value && (!store.value || store.value.length === 0)) {
+    const result = actions.getAll();
+    store.value = result.value || [];
+  }
+
+  return { store, actions };
+}
+
+export const useStore = function<T extends BoundT>(
+  store: Ref<T[]>,
+  loading: Ref<boolean>,
+  api: BaseCRUDAPI<unknown, T, unknown>,
+) {
+  const actions = {
+    ...useStoreActions(api, store, loading),
+    flushStore() {
+      store = ref([]);
+    },
+  };
+
+  if (!loading.value && (!store.value || store.value.length === 0)) {
+    const result = actions.getAll();
+    store.value = result.value || [];
+  }
+
+  return { store, actions };
+}