Refactor/composables-folder (#787)

* move api clients and rename

* organize recipes composables

* rewrite useRecipeContext

* refactor(frontend): ♻️ abstract common ingredient functionality.

* feat(frontend): ✨ add scale, and back to recipe button + hide ingredients if none

* update regex to mach 11. instead of just 1.

* minor UX improvements

Co-authored-by: Hayden K <hay-kot@pm.me>

frontend/pages/recipe/_slug/cook.vue

@@ -8,12 +8,30 @@
     <v-card-title>
       <h1 class="headline">{{ recipe.name }}</h1>
     </v-card-title>
+
     <v-stepper v-model="activeStep" flat>
       <v-toolbar class="ma-1 elevation-2 rounded">
         <v-toolbar-title class="headline">
           Step {{ activeStep }} of {{ recipe.recipeInstructions.length }}</v-toolbar-title
         >
       </v-toolbar>
+      <div class="d-flex mt-3 px-2">
+        <BaseButton color="primary" @click="$router.go(-1)">
+          <template #icon> {{ $globals.icons.arrowLeftBold }}</template>
+          To Recipe
+        </BaseButton>
+        <v-btn rounded icon color="primary" class="ml-auto" small @click="scale > 1 ? scale-- : null">
+          <v-icon>
+            {{ $globals.icons.minus }}
+          </v-icon>
+        </v-btn>
+        <v-btn rounded color="primary" small> Scale: {{ scale }} </v-btn>
+        <v-btn rounded icon color="primary" small @click="scale++">
+          <v-icon>
+            {{ $globals.icons.createAlt }}
+          </v-icon>
+        </v-btn>
+      </div>
       <v-stepper-items>
         <template v-for="(step, index) in recipe.recipeInstructions">
           <v-stepper-content :key="index + 1 + '-content'" :step="index + 1" class="pa-0 mt-2 elevation-0">
@@ -21,11 +39,17 @@
               <v-card-text>
                 <h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
                 <VueMarkdown :source="step.text"> </VueMarkdown>
-                <v-divider></v-divider>
-                <h2 class="mb-4 mt-4">{{ $t("recipe.ingredients") }}</h2>
-                <div v-for="ing in step.ingredientReferences" :key="ing.referenceId">
-                  {{ getIngredientByRefId(ing.referenceId).note }}
-                </div>
+                <template v-if="step.ingredientReferences.length > 0">
+                  <v-divider></v-divider>
+                  <div>
+                    <h2 class="mb-4 mt-4">{{ $t("recipe.ingredients") }}</h2>
+                    <div
+                      v-for="ing in step.ingredientReferences"
+                      :key="ing.referenceId"
+                      v-html="getIngredientByRefId(ing.referenceId)"
+                    ></div>
+                  </div>
+                </template>
               </v-card-text>
             </v-card>
             <v-card-actions class="justify-center">
@@ -33,6 +57,7 @@
                 <template #icon> {{ $globals.icons.arrowLeftBold }}</template>
                 Back
               </BaseButton>
+
               <BaseButton
                 icon-right
                 :disabled="index + 1 == recipe.recipeInstructions.length"
@@ -55,25 +80,35 @@ import { defineComponent, useRoute, ref } from "@nuxtjs/composition-api";
 // @ts-ignore
 import VueMarkdown from "@adapttive/vue-markdown";
 import { useStaticRoutes } from "~/composables/api";
-import { useRecipeContext } from "~/composables/use-recipe-context";
+import { parseIngredientText, useRecipe } from "~/composables/recipes";
+
 export default defineComponent({
   components: { VueMarkdown },
   setup() {
     const route = useRoute();
     const slug = route.value.params.slug;
     const activeStep = ref(1);
+    const scale = ref(1);
 
-    const { getBySlug } = useRecipeContext();
+    const { recipe } = useRecipe(slug);
 
     const { recipeImage } = useStaticRoutes();
 
-    const recipe = getBySlug(slug);
-
     function getIngredientByRefId(refId: String) {
-      return recipe.value?.recipeIngredient.find((ing) => ing.referenceId === refId) || "";
+      if (!recipe.value) {
+        return;
+      }
+
+      const ing = recipe?.value.recipeIngredient.find((ing) => ing.referenceId === refId) || "";
+      if (ing === "") {
+        return "";
+      }
+
+      return parseIngredientText(ing, recipe?.value?.settings?.disableAmount || false, scale.value);
     }
 
     return {
+      scale,
       getIngredientByRefId,
       activeStep,
       slug,

frontend/pages/recipe/_slug/index.vue

@@ -233,6 +233,7 @@
               <RecipeInstructions
                 v-model="recipe.recipeInstructions"
                 :ingredients="recipe.recipeIngredient"
+                :disable-amount="recipe.settings.disableAmount"
                 :edit="form"
               />
               <div v-if="form" class="d-flex">
@@ -289,9 +290,9 @@ import VueMarkdown from "@adapttive/vue-markdown";
 import draggable from "vuedraggable";
 import RecipeCategoryTagSelector from "@/components/Domain/Recipe/RecipeCategoryTagSelector.vue";
 import RecipeDialogBulkAdd from "@/components/Domain/Recipe//RecipeDialogBulkAdd.vue";
-import { useApiSingleton } from "~/composables/use-api";
+import { useUserApi, useStaticRoutes } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
-import { useRecipeContext } from "~/composables/use-recipe-context";
+import { useRecipe } from "~/composables/recipes";
 import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
 import RecipeChips from "~/components/Domain/Recipe/RecipeChips.vue";
 import RecipeIngredients from "~/components/Domain/Recipe/RecipeIngredients.vue";
@@ -307,8 +308,7 @@ import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientE
 import RecipeIngredientParserMenu from "~/components/Domain/Recipe/RecipeIngredientParserMenu.vue";
 import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
 import { Recipe } from "~/types/api-types/recipe";
-import { useStaticRoutes } from "~/composables/api";
-import { uuid4 } from "~/composables/use-uuid";
+import { uuid4 } from "~/composables/use-utils";
 
 export default defineComponent({
   components: {
@@ -335,7 +335,7 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const slug = route.value.params.slug;
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     const state = reactive({
       form: false,
@@ -352,15 +352,13 @@ export default defineComponent({
       },
     });
 
-    const { getBySlug, loading, fetchRecipe } = useRecipeContext();
+    const { recipe, loading, fetchRecipe } = useRecipe(slug);
 
     const { recipeImage } = useStaticRoutes();
 
     // @ts-ignore
     const { $vuetify } = useContext();
 
-    const recipe = getBySlug(slug);
-
     // ===========================================================================
     // Layout Helpers
 
@@ -399,7 +397,7 @@ export default defineComponent({
     async function closeEditor() {
       state.form = false;
       state.jsonEditor = false;
-      recipe.value = await fetchRecipe(slug);
+      await fetchRecipe();
     }
 
     function toggleJson() {

frontend/pages/recipe/_slug/ingredient-parser.vue

@@ -75,10 +75,8 @@
 import { defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
 import { Food, ParsedIngredient, Parser } from "~/api/class-interfaces/recipes";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
-import { useApiSingleton } from "~/composables/use-api";
-import { useRecipeContext } from "~/composables/use-recipe-context";
-import { useFoods } from "~/composables/use-recipe-foods";
-import { useUnits } from "~/composables/use-recipe-units";
+import { useUserApi } from "~/composables/api";
+import { useRecipe, useFoods, useUnits } from "~/composables/recipes";
 import { RecipeIngredientUnit } from "~/types/api-types/recipe";
 
 interface Error {
@@ -99,11 +97,9 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const slug = route.value.params.slug;
-    const api = useApiSingleton();
+    const api = useUserApi();
 
-    const { getBySlug, loading } = useRecipeContext();
-
-    const recipe = getBySlug(slug);
+    const { recipe, loading } = useRecipe(slug);
 
     const ingredients = ref<any[]>([]);