properly support subroutes

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));
+  }
 }

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);
     },
   },

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",
     },