mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-25 08:09:41 +02:00
fix: consoldate stores to fix mismatched state
This commit is contained in:
Hayden
parent
f831791db2
commit
d2a9f7ca24
15 changed files with 348 additions and 350 deletions
90
frontend/composables/partials/use-actions-factory.ts
Normal file
90
frontend/composables/partials/use-actions-factory.ts
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { Ref, useAsync } from "@nuxtjs/composition-api";
|
||||
import { useAsyncKey } from "../use-utils";
|
||||
import { BaseCRUDAPI } from "~/api/_base";
|
||||
|
||||
type BoundT = {
|
||||
id: string | number;
|
||||
};
|
||||
|
||||
interface StoreActions<T extends BoundT> {
|
||||
getAll(): Ref<T[] | null>;
|
||||
refresh(): Promise<void>;
|
||||
createOne(createData: T): Promise<void>;
|
||||
updateOne(updateData: T): Promise<void>;
|
||||
deleteOne(id: string | number): Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* useStoreActions 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 CRUD operations that required
|
||||
* a lot of refreshing hooks to be called on operations
|
||||
*/
|
||||
export function useStoreActions<T extends BoundT>(
|
||||
api: BaseCRUDAPI<unknown, T, unknown>,
|
||||
allRef: Ref<T[] | null> | null,
|
||||
loading: Ref<boolean>
|
||||
): StoreActions<T> {
|
||||
function getAll() {
|
||||
loading.value = true;
|
||||
const allItems = useAsync(async () => {
|
||||
const { data } = await api.getAll();
|
||||
return data;
|
||||
}, useAsyncKey());
|
||||
|
||||
loading.value = false;
|
||||
return allItems;
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
loading.value = true;
|
||||
const { data } = await api.getAll();
|
||||
|
||||
if (data && allRef) {
|
||||
allRef.value = data;
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function createOne(createData: T) {
|
||||
loading.value = true;
|
||||
const { data } = await api.createOne(createData);
|
||||
if (data && allRef?.value) {
|
||||
allRef.value.push(data);
|
||||
} else {
|
||||
refresh();
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function updateOne(updateData: T) {
|
||||
if (!updateData.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
const { data } = await api.updateOne(updateData.id, updateData);
|
||||
if (data && allRef?.value) {
|
||||
refresh();
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
async function deleteOne(id: string | number) {
|
||||
loading.value = true;
|
||||
const { data } = await api.deleteOne(id);
|
||||
if (data && allRef?.value) {
|
||||
refresh();
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
return {
|
||||
getAll,
|
||||
refresh,
|
||||
createOne,
|
||||
updateOne,
|
||||
deleteOne,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
export { useFraction } from "./use-fraction";
|
||||
export { useRecipe } from "./use-recipe";
|
||||
export { useFoods } from "./use-recipe-foods";
|
||||
export { useUnits } from "./use-recipe-units";
|
||||
export { useRecipes, recentRecipes, allRecipes, useLazyRecipes, useSorter } from "./use-recipes";
|
||||
export { useTags, useCategories, allCategories, allTags } from "./use-tags-categories";
|
||||
export { parseIngredientText } from "./use-recipe-ingredients";
|
||||
|
|
|
|||
|
|
@ -1,104 +0,0 @@
|
|||
import { useAsync, ref, reactive, Ref } from "@nuxtjs/composition-api";
|
||||
import { useAsyncKey } from "../use-utils";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { VForm } from "~/types/vuetify";
|
||||
import { IngredientFood } from "~/types/api-types/recipe";
|
||||
|
||||
let foodStore: Ref<IngredientFood[] | null> | null = null;
|
||||
|
||||
export const useFoods = function () {
|
||||
const api = useUserApi();
|
||||
const loading = ref(false);
|
||||
const deleteTargetId = ref(0);
|
||||
const validForm = ref(true);
|
||||
|
||||
const workingFoodData = reactive<IngredientFood>({
|
||||
id: "",
|
||||
name: "",
|
||||
description: "",
|
||||
labelId: undefined,
|
||||
});
|
||||
|
||||
const actions = {
|
||||
getAll() {
|
||||
loading.value = true;
|
||||
const units = useAsync(async () => {
|
||||
const { data } = await api.foods.getAll();
|
||||
return data;
|
||||
}, useAsyncKey());
|
||||
|
||||
loading.value = false;
|
||||
return units;
|
||||
},
|
||||
async refreshAll() {
|
||||
loading.value = true;
|
||||
const { data } = await api.foods.getAll();
|
||||
|
||||
if (data && foodStore) {
|
||||
foodStore.value = data;
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
},
|
||||
async createOne(domForm: VForm | null = null) {
|
||||
if (domForm && !domForm.validate()) {
|
||||
validForm.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
const { data } = await api.foods.createOne(workingFoodData);
|
||||
if (data && foodStore?.value) {
|
||||
foodStore.value.push(data);
|
||||
return data;
|
||||
} else {
|
||||
this.refreshAll();
|
||||
}
|
||||
domForm?.reset();
|
||||
validForm.value = true;
|
||||
this.resetWorking();
|
||||
loading.value = false;
|
||||
},
|
||||
async updateOne() {
|
||||
if (!workingFoodData.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
console.log(workingFoodData);
|
||||
const { data } = await api.foods.updateOne(workingFoodData.id, workingFoodData);
|
||||
if (data && foodStore?.value) {
|
||||
this.refreshAll();
|
||||
}
|
||||
loading.value = false;
|
||||
},
|
||||
async deleteOne(id: string | number) {
|
||||
loading.value = true;
|
||||
const { data } = await api.foods.deleteOne(id);
|
||||
if (data && foodStore?.value) {
|
||||
this.refreshAll();
|
||||
}
|
||||
},
|
||||
resetWorking() {
|
||||
workingFoodData.id = "";
|
||||
workingFoodData.name = "";
|
||||
workingFoodData.description = "";
|
||||
workingFoodData.labelId = undefined;
|
||||
},
|
||||
setWorking(item: IngredientFood) {
|
||||
workingFoodData.id = item.id;
|
||||
workingFoodData.name = item.name;
|
||||
workingFoodData.description = item.description || "";
|
||||
workingFoodData.labelId = item.labelId;
|
||||
},
|
||||
flushStore() {
|
||||
foodStore = null;
|
||||
},
|
||||
};
|
||||
|
||||
if (!foodStore) {
|
||||
foodStore = actions.getAll();
|
||||
}
|
||||
|
||||
return { foods: foodStore, workingFoodData, deleteTargetId, actions, validForm };
|
||||
};
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import { useAsync, ref, reactive, Ref } from "@nuxtjs/composition-api";
|
||||
import { useAsyncKey } from "../use-utils";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { VForm } from "~/types/vuetify";
|
||||
import { IngredientUnit } from "~/types/api-types/recipe";
|
||||
|
||||
let unitStore: Ref<IngredientUnit[] | null> | null = null;
|
||||
|
||||
export const useUnits = function () {
|
||||
const api = useUserApi();
|
||||
const loading = ref(false);
|
||||
const deleteTargetId = ref(0);
|
||||
const validForm = ref(true);
|
||||
|
||||
const workingUnitData: IngredientUnit = reactive({
|
||||
id: "",
|
||||
name: "",
|
||||
fraction: true,
|
||||
abbreviation: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
const actions = {
|
||||
getAll() {
|
||||
loading.value = true;
|
||||
const units = useAsync(async () => {
|
||||
const { data } = await api.units.getAll();
|
||||
return data;
|
||||
}, useAsyncKey());
|
||||
|
||||
loading.value = false;
|
||||
return units;
|
||||
},
|
||||
async refreshAll() {
|
||||
loading.value = true;
|
||||
const { data } = await api.units.getAll();
|
||||
|
||||
if (data && unitStore) {
|
||||
unitStore.value = data;
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
},
|
||||
async createOne(domForm: VForm | null = null) {
|
||||
if (domForm && !domForm.validate()) {
|
||||
validForm.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
const { data } = await api.units.createOne(workingUnitData);
|
||||
if (data && unitStore?.value) {
|
||||
unitStore.value.push(data);
|
||||
} else {
|
||||
this.refreshAll();
|
||||
}
|
||||
domForm?.reset();
|
||||
validForm.value = true;
|
||||
this.resetWorking();
|
||||
loading.value = false;
|
||||
},
|
||||
async updateOne() {
|
||||
if (!workingUnitData.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
const { data } = await api.units.updateOne(workingUnitData.id, workingUnitData);
|
||||
if (data && unitStore?.value) {
|
||||
this.refreshAll();
|
||||
}
|
||||
loading.value = false;
|
||||
},
|
||||
async deleteOne(id: string | number) {
|
||||
loading.value = true;
|
||||
const { data } = await api.units.deleteOne(id);
|
||||
if (data && unitStore?.value) {
|
||||
this.refreshAll();
|
||||
}
|
||||
},
|
||||
resetWorking() {
|
||||
workingUnitData.id = "";
|
||||
workingUnitData.name = "";
|
||||
workingUnitData.abbreviation = "";
|
||||
workingUnitData.description = "";
|
||||
},
|
||||
setWorking(item: IngredientUnit) {
|
||||
workingUnitData.id = item.id;
|
||||
workingUnitData.name = item.name;
|
||||
workingUnitData.fraction = item.fraction;
|
||||
workingUnitData.abbreviation = item.abbreviation;
|
||||
workingUnitData.description = item.description;
|
||||
},
|
||||
flushStore() {
|
||||
unitStore = null;
|
||||
},
|
||||
};
|
||||
|
||||
if (!unitStore) {
|
||||
unitStore = actions.getAll();
|
||||
}
|
||||
|
||||
return { units: unitStore, workingUnitData, deleteTargetId, actions, validForm };
|
||||
};
|
||||
3
frontend/composables/store/index.ts
Normal file
3
frontend/composables/store/index.ts
Normal file
|
|
@ -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";
|
||||
50
frontend/composables/store/use-food-store.ts
Normal file
50
frontend/composables/store/use-food-store.ts
Normal file
|
|
@ -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 };
|
||||
};
|
||||
49
frontend/composables/store/use-label-store.ts
Normal file
49
frontend/composables/store/use-label-store.ts
Normal file
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
52
frontend/composables/store/use-unit-store.ts
Normal file
52
frontend/composables/store/use-unit-store.ts
Normal file
|
|
@ -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 };
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue