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/components/Domain/Recipe/RecipeAssets.vue

@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import { useApiSingleton } from "~/composables/use-api";
+import { useUserApi } from "~/composables/api";
 export default {
   props: {
     slug: {
@@ -88,7 +88,7 @@ export default {
     },
   },
   setup() {
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     return { api };
   },

frontend/components/Domain/Recipe/RecipeCardImage.vue

@@ -18,8 +18,7 @@
 </template>
 
 <script>
-import { useStaticRoutes } from "~/composables/api";
-import { useApiSingleton } from "~/composables/use-api";
+import { useStaticRoutes, useUserApi } from "~/composables/api";
 export default {
   props: {
     tiny: {
@@ -52,7 +51,7 @@ export default {
     },
   },
   setup() {
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes();
 

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -67,7 +67,7 @@
 import { defineComponent } from "@nuxtjs/composition-api";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge";
 import RecipeContextMenu from "./RecipeContextMenu";
-import { useApiSingleton } from "~/composables/use-api";
+import { useUserApi } from "~/composables/api";
 export default defineComponent({
   components: {
     RecipeFavoriteBadge,
@@ -104,7 +104,7 @@ export default defineComponent({
     },
   },
   setup() {
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     return { api };
   },

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -103,7 +103,7 @@
 <script>
 import RecipeCard from "./RecipeCard";
 import RecipeCardMobile from "./RecipeCardMobile";
-import { useSorter } from "~/composables/use-recipes";
+import { useSorter } from "~/composables/recipes";
 const SORT_EVENT = "sort";
 
 export default {

frontend/components/Domain/Recipe/RecipeCategoryTagDialog.vue

@@ -36,7 +36,7 @@
 
 <script>
 import { defineComponent } from "@nuxtjs/composition-api";
-import { useApiSingleton } from "~/composables/use-api";
+import { useUserApi } from "~/composables/api";
 const CREATED_ITEM_EVENT = "created-item";
 export default defineComponent({
   props: {
@@ -58,7 +58,7 @@ export default defineComponent({
     },
   },
   setup() {
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     return { api };
   },

frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue

@@ -44,8 +44,8 @@
 
 <script>
 import RecipeCategoryTagDialog from "./RecipeCategoryTagDialog";
-import { useApiSingleton } from "~/composables/use-api";
-import { useTags, useCategories } from "~/composables/use-tags-categories";
+import { useUserApi } from "~/composables/api";
+import { useTags, useCategories } from "~/composables/recipes";
 const MOUNTED_EVENT = "mounted";
 export default {
   components: {
@@ -91,7 +91,7 @@ export default {
   },
 
   setup() {
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     const { allTags, useAsyncGetAll: getAllTags } = useTags();
     const { allCategories, useAsyncGetAll: getAllCategories } = useCategories();

frontend/components/Domain/Recipe/RecipeComments.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { useApiSingleton } from "~/composables/use-api";
+import { useUserApi } from "~/composables/api";
 const NEW_COMMENT_EVENT = "new-comment";
 const UPDATE_COMMENT_EVENT = "update-comment";
 export default {
@@ -65,7 +65,7 @@ export default {
     },
   },
   setup() {
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     return { api };
   },

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -75,7 +75,7 @@
 <script lang="ts">
 import { defineComponent, reactive, ref, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
 import { useClipboard, useShare } from "@vueuse/core";
-import { useApiSingleton } from "~/composables/use-api";
+import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 
 export interface ContextMenuIncludes {
@@ -147,7 +147,7 @@ export default defineComponent({
     },
   },
   setup(props, context) {
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     const state = reactive({
       loading: false,

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -39,7 +39,7 @@
 import { computed, defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
 import RecipeChip from "./RecipeChips.vue";
 import { Recipe } from "~/types/api-types/recipe";
-import { useApiSingleton } from "~/composables/use-api";
+import { useUserApi } from "~/composables/api";
 import { UserOut } from "~/types/api-types/user";
 
 const INPUT_EVENT = "input";
@@ -114,7 +114,7 @@ export default defineComponent({
 
     // ============
     // Group Members
-    const api = useApiSingleton();
+    const api = useUserApi();
     const members = ref<UserOut[] | null[]>([]);
 
     async function refreshMembers() {

frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue

@@ -82,7 +82,7 @@ export default defineComponent({
         .join("\n");
     }
 
-    const numberedLineRegex = /\d[.):] /gm;
+    const numberedLineRegex = /\d+[.):] /gm;
 
     function splitByNumberedLine() {
       // Split inputText by numberedLineRegex

frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue

@@ -22,7 +22,7 @@
 
 <script>
 import { defineComponent } from "@nuxtjs/composition-api";
-import { useApiSingleton } from "~/composables/use-api";
+import { useUserApi } from "~/composables/api";
 export default defineComponent({
   props: {
     slug: {
@@ -39,7 +39,7 @@ export default defineComponent({
     },
   },
   setup() {
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     return { api };
   },

frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue

@@ -41,7 +41,7 @@
 
 <script>
 import { defineComponent } from "@nuxtjs/composition-api";
-import { useApiSingleton } from "~/composables/use-api";
+import { useUserApi } from "~/composables/api";
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
 export default defineComponent({
@@ -52,7 +52,7 @@ export default defineComponent({
     },
   },
   setup() {
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     return { api };
   },

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -95,8 +95,7 @@
 
 <script lang="ts">
 import { defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api";
-import { useFoods } from "~/composables/use-recipe-foods";
-import { useUnits } from "~/composables/use-recipe-units";
+import { useFoods, useUnits } from "~/composables/recipes";
 import { validators } from "~/composables/use-validators";
 
 export default defineComponent({

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -2,7 +2,7 @@
   <div v-if="value && value.length > 0">
     <div class="d-flex justify-start">
       <h2 class="mb-4 mt-1">{{ $t("recipe.ingredients") }}</h2>
-      <AppButtonCopy btn-class="ml-auto" :copy-text="ingredientCopyText" />
+    <AppButtonCopy btn-class="ml-auto" :copy-text="ingredientCopyText" />
     </div>
     <div>
       <div v-for="(ingredient, index) in value" :key="'ingredient' + index">
@@ -11,7 +11,10 @@
         <v-list-item dense @click="toggleChecked(index)">
           <v-checkbox hide-details :value="checked[index]" class="pt-0 my-auto py-auto" color="secondary"> </v-checkbox>
           <v-list-item-content>
-            <VueMarkdown class="ma-0 pa-0 text-subtitle-1 dense-markdown" :source="parseIngredientText(ingredient)">
+            <VueMarkdown
+              class="ma-0 pa-0 text-subtitle-1 dense-markdown"
+              :source="parseIngredientText(ingredient, disableAmount, scale)"
+            >
             </VueMarkdown>
           </v-list-item-content>
         </v-list-item>
@@ -23,7 +26,7 @@
 <script>
 import { computed, defineComponent } from "@nuxtjs/composition-api";
 import VueMarkdown from "@adapttive/vue-markdown";
-import { useFraction } from "@/composables/use-fraction";
+import { parseIngredientText } from "~/composables/recipes";
 export default defineComponent({
   components: {
     VueMarkdown,
@@ -43,37 +46,10 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { frac } = useFraction();
-
-    function parseIngredientText(ingredient) {
-      if (props.disableAmount) {
-        return ingredient.note;
-      }
-
-      const { quantity, food, unit, note } = ingredient;
-
-      let return_qty = "";
-      if (unit?.fraction) {
-        const fraction = frac(quantity * props.scale, 10, true);
-        if (fraction[0] !== undefined && fraction[0] > 0) {
-          return_qty += fraction[0];
-        }
-
-        if (fraction[1] > 0) {
-          return_qty += ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>`;
-        }
-      } else {
-        return_qty = quantity * props.scale;
-      }
-
-      return `${return_qty} ${unit?.name || " "}  ${food?.name || " "} ${note}`;
-    }
-
     const ingredientCopyText = computed(() => {
-      // Returns a string of all ingredients in markdown list format -[ ]
       return props.value
         .map((ingredient) => {
-          return `- [ ] ${parseIngredientText(ingredient)}`;
+          return `- [ ] ${parseIngredientText(ingredient, props.disableAmount, props.scale)}`;
         })
         .join("\n");
     });

frontend/components/Domain/Recipe/RecipeInstructions.vue

@@ -17,13 +17,31 @@
           </p>
           <v-divider class="mb-4"></v-divider>
           <v-checkbox
-            v-for="ing in ingredients"
+            v-for="ing in unusedIngredients"
             :key="ing.referenceId"
             v-model="activeRefs"
-            :label="ing.note"
             :value="ing.referenceId"
             class="mb-n2 mt-n2"
-          ></v-checkbox>
+          >
+            <template #label>
+              <div v-html="parseIngredientText(ing, disableAmount)"></div>
+            </template>
+          </v-checkbox>
+
+          <template v-if="usedIngredients.length > 0">
+            <h4 class="py-3 ml-1">Linked to other step</h4>
+            <v-checkbox
+              v-for="ing in usedIngredients"
+              :key="ing.referenceId"
+              v-model="activeRefs"
+              :value="ing.referenceId"
+              class="mb-n2 mt-n2"
+            >
+              <template #label>
+                <div v-html="parseIngredientText(ing, disableAmount)"></div>
+              </template>
+            </v-checkbox>
+          </template>
         </v-card-text>
 
         <v-divider></v-divider>
@@ -111,17 +129,16 @@
             <v-card-text v-if="edit">
               <v-textarea :key="'instructions' + index" v-model="value[index]['text']" auto-grow dense rows="4">
               </v-textarea>
-              <div v-for="ing in step.ingredientReferences" :key="ing.referenceId">
-                {{ getIngredientByRefId(ing.referenceId).note }}
-              </div>
+              <div
+                v-for="ing in step.ingredientReferences"
+                :key="ing.referenceId"
+                v-html="getIngredientByRefId(ing.referenceId)"
+              />
             </v-card-text>
             <v-expand-transition>
               <div v-show="!isChecked(index) && !edit" class="m-0 p-0">
                 <v-card-text>
                   <VueMarkdown :source="step.text"> </VueMarkdown>
-                  <div v-for="ing in step.ingredientReferences" :key="ing.referenceId">
-                    {{ getIngredientByRefId(ing.referenceId).note }}
-                  </div>
                 </v-card-text>
               </div>
             </v-expand-transition>
@@ -138,6 +155,7 @@ import draggable from "vuedraggable";
 import VueMarkdown from "@adapttive/vue-markdown";
 import { ref, toRefs, reactive, defineComponent, watch, onMounted } from "@nuxtjs/composition-api";
 import { RecipeStep, IngredientToStepRef, RecipeIngredient } from "~/types/api-types/recipe";
+import { parseIngredientText } from "~/composables/recipes";
 
 interface MergerHistory {
   target: number;
@@ -164,12 +182,18 @@ export default defineComponent({
       type: Array as () => RecipeIngredient[],
       default: () => [],
     },
+    disableAmount: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup(props, context) {
     const state = reactive({
       dialog: false,
       disabledSteps: [] as number[],
+      unusedIngredients: [] as RecipeIngredient[],
+      usedIngredients: [] as RecipeIngredient[],
     });
 
     const showTitleEditor = ref<boolean[]>([]);
@@ -245,6 +269,7 @@ export default defineComponent({
     const activeText = ref("");
 
     function openDialog(idx: number, refs: IngredientToStepRef[], text: string) {
+      setUsedIngredients();
       activeText.value = text;
       activeIndex.value = idx;
       state.dialog = true;
@@ -261,6 +286,24 @@ export default defineComponent({
       state.dialog = false;
     }
 
+    function setUsedIngredients() {
+      const usedRefs: { [key: string]: boolean } = {};
+
+      props.value.forEach((element) => {
+        element.ingredientReferences.forEach((ref) => {
+          usedRefs[ref.referenceId] = true;
+        });
+      });
+
+      state.usedIngredients = props.ingredients.filter((ing) => {
+        return ing.referenceId in usedRefs;
+      });
+
+      state.unusedIngredients = props.ingredients.filter((ing) => {
+        return !(ing.referenceId in usedRefs);
+      });
+    }
+
     function autoSetReferences() {
       // Ingore matching blacklisted words when auto-linking - This is kind of a cludgey implementation. We're blacklisting common words but
       // other common phrases trigger false positives and I'm not sure how else to approach this. In the future I maybe look at looking directly
@@ -294,10 +337,9 @@ export default defineComponent({
         }
 
         props.ingredients.forEach((ingredient) => {
-          if (
-            ingredient.note.toLowerCase().includes(" " + word) &&
-            !activeRefs.value.includes(ingredient.referenceId)
-          ) {
+          const searchText = parseIngredientText(ingredient, props.disableAmount);
+
+          if (searchText.toLowerCase().includes(" " + word) && !activeRefs.value.includes(ingredient.referenceId)) {
             console.info("Word Matched", `'${word}'`, ingredient.note);
             activeRefs.value.push(ingredient.referenceId);
           }
@@ -306,7 +348,11 @@ export default defineComponent({
     }
 
     function getIngredientByRefId(refId: String) {
-      return props.ingredients.find((ing) => ing.referenceId === refId) || "";
+      const ing = props.ingredients.find((ing) => ing.referenceId === refId) || "";
+      if (ing === "") {
+        return "";
+      }
+      return parseIngredientText(ing, props.disableAmount);
     }
 
     // ===============================================================
@@ -365,6 +411,7 @@ export default defineComponent({
       toggleShowTitle,
       updateIndex,
       autoSetReferences,
+      parseIngredientText,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -18,7 +18,7 @@
 
 <script>
 import { defineComponent } from "@nuxtjs/composition-api";
-import { useApiSingleton } from "~/composables/use-api";
+import { useUserApi } from "~/composables/api";
 export default defineComponent({
   props: {
     emitOnly: {
@@ -43,7 +43,7 @@ export default defineComponent({
     },
   },
   setup() {
-    const api = useApiSingleton();
+    const api = useUserApi();
 
     return { api };
   },