From da425c970e2ef2c2d9c1e08f01b94a60525a7f8a Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Sun, 8 Aug 2021 14:10:32 -0800
Subject: [PATCH] properly support subroutes

---
 frontend/api/class-interfaces/recipes.ts      | 23 ++++++++++++++++++-
 .../Domain/Recipe/RecipeComments.vue          | 18 ++++++++++-----
 frontend/nuxt.config.js                       | 14 ++++++++++-
 3 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/frontend/api/class-interfaces/recipes.ts b/frontend/api/class-interfaces/recipes.ts
index 061c2c5edfe6..ba218dad5506 100644
--- a/frontend/api/class-interfaces/recipes.ts
+++ b/frontend/api/class-interfaces/recipes.ts
@@ -16,6 +16,9 @@ const routes = {
   recipesRecipeSlugZip: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}/zip`,
   recipesRecipeSlugImage: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}/image`,
   recipesRecipeSlugAssets: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}/assets`,
+
+  recipesSlugComments: (slug: string) => `${prefix}/recipes/${slug}/comments`,
+  recipesSlugCommentsId: (slug: string, id: number) => `${prefix}/recipes/${slug}/comments/${id}`,
 };
 
 export class RecipeAPI extends BaseCRUDAPI<Recipe, CreateRecipe> {
@@ -45,7 +48,9 @@ export class RecipeAPI extends BaseCRUDAPI<Recipe, CreateRecipe> {
     return await this.requests.post(routes.recipesCreateUrl, { url });
   }
 
-  // * Methods to Generate reference urls for assets/images *
+  // Recipe Comments
+
+  // Methods to Generate reference urls for assets/images *
   recipeImage(recipeSlug: string, version = null, key = null) {
     return `/api/media/recipes/${recipeSlug}/images/original.webp?&rnd=${key}&version=${version}`;
   }
@@ -61,4 +66,20 @@ export class RecipeAPI extends BaseCRUDAPI<Recipe, CreateRecipe> {
   recipeAssetPath(recipeSlug: string, assetName: string) {
     return `/api/media/recipes/${recipeSlug}/assets/${assetName}`;
   }
+
+  async createComment(slug: string, payload: Object) {
+    return await this.requests.post(routes.recipesSlugComments(slug), payload);
+  }
+
+  /** Update comment in the Database
+   */
+  async updateComment(slug: string, id: number, payload: Object) {
+    return await this.requests.put(routes.recipesSlugCommentsId(slug, id), payload);
+  }
+
+  /** Delete comment from the Database
+   */
+  async deleteComment(slug: string, id: number) {
+    return await this.requests.delete(routes.recipesSlugCommentsId(slug, id));
+  }
 }
diff --git a/frontend/components/Domain/Recipe/RecipeComments.vue b/frontend/components/Domain/Recipe/RecipeComments.vue
index 3b595fafc562..d361f033a68e 100644
--- a/frontend/components/Domain/Recipe/RecipeComments.vue
+++ b/frontend/components/Domain/Recipe/RecipeComments.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { api } from "@/api";
+import { useApiSingleton } from "~/composables/use-api";
 const NEW_COMMENT_EVENT = "new-comment";
 const UPDATE_COMMENT_EVENT = "update-comment";
 export default {
@@ -64,6 +64,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const api = useApiSingleton();
+
+    return { api };
+  },
   data() {
     return {
       newComment: "",
@@ -89,8 +94,9 @@ export default {
     resetImage() {
       this.hideImage = false;
     },
-    getProfileImage(id) {
-      return api.users.userProfileImage(id);
+    getProfileImage() {
+      // TODO Actually get Profile Image
+      return null;
     },
     editComment(id) {
       this.$set(this.editKeys, id, true);
@@ -98,17 +104,17 @@ export default {
     async updateComment(id, index) {
       this.$set(this.editKeys, id, false);
 
-      await api.recipes.updateComment(this.slug, id, this.comments[index]);
+      await this.api.recipes.updateComment(this.slug, id, this.comments[index]);
       this.$emit(UPDATE_COMMENT_EVENT);
     },
     async createNewComment() {
-      await api.recipes.createComment(this.slug, { text: this.newComment });
+      await this.api.recipes.createComment(this.slug, { text: this.newComment });
       this.$emit(NEW_COMMENT_EVENT);
 
       this.newComment = "";
     },
     async deleteComment(id) {
-      await api.recipes.deleteComment(this.slug, id);
+      await this.api.recipes.deleteComment(this.slug, id);
       this.$emit(UPDATE_COMMENT_EVENT);
     },
   },
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index b5b4e8f963e5..e59a9a5c2a34 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -196,12 +196,24 @@ export default {
   publicRuntimeConfig: {
     GLOBAL_MIDDLEWARE: process.env.GLOBAL_MIDDLEWARE || null,
     ALLOW_SIGNUP: process.env.ALLOW_SIGNUP || true,
+    axios: {
+      browserBaseURL: process.env.SUB_PATH || "",
+    },
   },
 
+  privateRuntimeConfig: {},
+
   proxy: {
     // "http://localhost:9000/*/api",
     // See Proxy section
-    "/api/": {
+    [`${process.env.SUB_PATH}api`]: {
+      pathRewrite: {
+        [`${process.env.SUB_PATH}api`]: "/api", // rewrite path
+      },
+      changeOrigin: true,
+      target: process.env.API_URL || "http://localhost:9000",
+    },
+    "/api": {
       changeOrigin: true,
       target: process.env.API_URL || "http://localhost:9000",
     },