Put all API requests in the frontend into a module

.eslintrc.yml

@@ -18,3 +18,9 @@ rules:
     no-plusplus:
         - error
         - allowForLoopAfterthoughts: true
+
+settings:
+    "import/resolver":
+        alias:
+            map:
+                - ["cookbook", "./src"]

CHANGELOG.md

@@ -44,6 +44,8 @@
   [#1051](https://github.com/nextcloud/cookbook/pull/1051) @christianlupus
 - Add the url as a parameter to allow for specialized parsers per website in the backend
   [#1060](https://github.com/nextcloud/cookbook/pull/1060) @christianlupus
+- Create wrapper in frontend for all API requests
+  [#1061](https://github.com/nextcloud/cookbook/pull/1061) @christianlupus
 
 ### Codebase maintenance
 - Removed codecov.io upload of intermediate merge commits during pull requests

cookbook.code-workspace

@@ -28,7 +28,7 @@
 			".github/actions/run-tests/volumes/nextcloud/custom_apps/cookbook/**/*": true,
 			".github/actions/run-tests/volumes/nextcloud/**/*": true
 		},
-		"intelephense.trace.server": "message",
+		//"intelephense.trace.server": "message",
 		"intelephense.files.exclude": [
 			"**/.git/**",
 			"**/.svn/**",
@@ -44,6 +44,9 @@
 		],
 		"cSpell.words": [
 			"Nextcloud"
-		]
+		],
+		"path-intellisense.mappings": {
+			"cookbook": "${workspaceFolder}/src",
+		}
 	}
 }

package.json

@@ -17,8 +17,8 @@
     "build": "npx webpack --node-env production --progress --config webpack.config.js",
     "build-dev": "npx webpack --node-env development --progress --config webpack.config.js",
     "dev": "npx webpack --node-env development --progress --watch --config webpack.devel.js",
-    "eslint": "npx eslint --cache --cache-strategy content src/**/*.{vue,js}",
-    "eslint-fix": "npx eslint --cache --cache-strategy content --fix src/**/*.{vue,js}",
+    "eslint": "npx eslint --cache --cache-strategy content 'src/**/*.{vue,js}'",
+    "eslint-fix": "npx eslint --cache --cache-strategy content --fix 'src/**/*.{vue,js}'",
     "package-lint": "npx prettier-package-json --write ./package.json",
     "serve": "npx webpack serve --node-env development --progress --config webpack.config.js --env dev_server",
     "stylelint": "npx stylelint src",
@@ -50,6 +50,7 @@
     "eslint": "^8.2.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.0.0",
+    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^9.0.1",
     "prettier": "^2.2.1",

src/components/AppIndex.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
+import api from "cookbook/js/api-interface"
 
 import RecipeList from "./RecipeList.vue"
 
@@ -46,8 +46,8 @@ export default {
          */
         loadAll() {
             const $this = this
-            axios
-                .get(`${this.$window.baseUrl}/api/recipes`)
+            api.recipes
+                .getAll()
                 .then((response) => {
                     $this.recipes = response.data
 

src/components/AppNavi.vue

@@ -108,14 +108,14 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
 import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
 import ActionInput from "@nextcloud/vue/dist/Components/ActionInput"
 import AppNavigation from "@nextcloud/vue/dist/Components/AppNavigation"
 import AppNavigationCounter from "@nextcloud/vue/dist/Components/AppNavigationCounter"
 import AppNavigationItem from "@nextcloud/vue/dist/Components/AppNavigationItem"
 import AppNavigationNew from "@nextcloud/vue/dist/Components/AppNavigationNew"
 import Vue from "vue"
+import api from "cookbook/js/api-interface"
 import AppSettings from "./AppSettings.vue"
 import AppNavigationCaption from "./AppNavigationCaption.vue"
 
@@ -193,8 +193,8 @@ export default {
             const $this = this
             Vue.set(this.isCategoryUpdating, idx, true)
 
-            axios
-                .get(`${this.$window.baseUrl}/api/category/${cat.name}`)
+            api.recipes
+                .allInCategory(cat.name)
                 .then((response) => {
                     cat.recipes = response.data
                 })
@@ -264,11 +264,8 @@ export default {
         downloadRecipe(e) {
             this.downloading = true
             const $this = this
-            axios({
-                url: `${this.$window.baseUrl}/import`,
-                method: "POST",
-                data: `url=${e.target[1].value}`,
-            })
+            api.recipes
+                .import(e.target[1].value)
                 .then((response) => {
                     const recipe = response.data
                     $this.downloading = false
@@ -322,8 +319,8 @@ export default {
         getCategories() {
             const $this = this
             this.loading.categories = true
-            axios
-                .get(`${this.$window.baseUrl}/categories`)
+            api.categories
+                .getAll()
                 .then((response) => {
                     const json = response.data || []
                     // Reset the old values
@@ -400,20 +397,19 @@ export default {
                 return
             }
             this.scanningLibrary = true
-            axios({
-                url: `${this.$window.baseUrl}/reindex`,
-                method: "POST",
-            })
+            api.recipes
+                .reindex()
                 .then(() => {
                     $this.scanningLibrary = false
                     // eslint-disable-next-line no-console
                     console.log("Library reindexing complete")
-                    $this.getCategories()
                     if (
                         ["index", "search"].indexOf(this.$store.state.page) > -1
                     ) {
                         // This refreshes the current router view in case items in it changed during reindex
                         $this.$router.go()
+                    } else {
+                        $this.getCategories()
                     }
                 })
                 .catch(() => {

src/components/AppSettings.vue

@@ -69,10 +69,11 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
 import ActionButton from "@nextcloud/vue/dist/Components/ActionButton"
 import AppNavigationSettings from "@nextcloud/vue/dist/Components/AppNavigationSettings"
 
+import api from "cookbook/js/api-interface"
+
 export default {
     name: "AppSettings",
     components: {
@@ -105,11 +106,8 @@ export default {
                 this.resetPrintImage = false
                 return
             }
-            axios({
-                url: `${this.$window.baseUrl}/config`,
-                method: "POST",
-                data: { print_image: newVal ? 1 : 0 },
-            })
+            api.config.printImage
+                .update(newVal)
                 .then(() => {
                     // Should this check the response of the query? To catch some errors that redirect the page
                 })
@@ -135,11 +133,8 @@ export default {
                 this.resetInterval = false
                 return
             }
-            axios({
-                url: `${this.$window.baseUrl}/config`,
-                method: "POST",
-                data: { update_interval: newVal },
-            })
+            api.config.updateInterval
+                .update(newVal)
                 .then(() => {
                     // Should this check the response of the query? To catch some errors that redirect the page
                 })
@@ -200,11 +195,8 @@ export default {
          * Initial setup
          */
         setup() {
-            axios({
-                url: `${this.$window.baseUrl}/config`,
-                method: "GET",
-                data: null,
-            })
+            api.config
+                .get()
                 .then((response) => {
                     const config = response.data
                     this.resetPrintImage = false

src/components/RecipeEdit.vue

@@ -116,8 +116,10 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
 import Vue from "vue"
+
+import api from "cookbook/js/api-interface"
+
 import EditImageField from "./EditImageField.vue"
 import EditInputField from "./EditInputField.vue"
 import EditInputGroup from "./EditInputGroup.vue"
@@ -415,8 +417,8 @@ export default {
         this.savingRecipe = false
 
         // Load data for all recipes to be used in recipe-reference popup suggestions
-        axios
-            .get(`${this.$window.baseUrl}/api/recipes`)
+        api.recipes
+            .getAll()
             .then((response) => {
                 $this.allRecipes = response.data
             })
@@ -482,8 +484,8 @@ export default {
          */
         fetchCategories() {
             const $this = this
-            axios
-                .get(`${this.$window.baseUrl}/categories`)
+            api.categories
+                .getAll()
                 .then((response) => {
                     const json = response.data || []
                     $this.allCategories = []
@@ -507,8 +509,8 @@ export default {
          */
         fetchKeywords() {
             const $this = this
-            axios
-                .get(`${this.$window.baseUrl}/keywords`)
+            api.keywords
+                .getAll()
                 .then((response) => {
                     const json = response.data || []
                     if (json) {
@@ -545,10 +547,8 @@ export default {
                 })
             }
             const $this = this
-            axios
-                .get(
-                    `${this.$window.baseUrl}/api/recipes/${this.$route.params.id}`
-                )
+            api.recipes
+                .get(this.$route.params.id)
                 .then((response) => {
                     const recipe = response.data
                     $this.$store.dispatch("setRecipe", { recipe })

src/components/RecipeView.vue

@@ -268,9 +268,10 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
 import moment from "@nextcloud/moment"
 
+import api from "cookbook/js/api-interface"
+
 import RecipeImages from "./RecipeImages.vue"
 import RecipeIngredient from "./RecipeIngredient.vue"
 import RecipeInstruction from "./RecipeInstruction.vue"
@@ -513,10 +514,8 @@ export default {
 
             const $this = this
 
-            axios
-                .get(
-                    `${this.$window.baseUrl}/api/recipes/${this.$route.params.id}`
-                )
+            api.recipes
+                .get(this.$route.params.id)
                 .then((response) => {
                     const recipe = response.data
                     // Store recipe data in vuex

src/components/SearchResults.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import axios from "@nextcloud/axios"
+import api from "cookbook/js/api-interface"
 
 import RecipeList from "./RecipeList.vue"
 
@@ -61,8 +61,8 @@ export default {
                 // Search by tags
                 const $this = this
                 const tags = this.$route.params.value
-                axios
-                    .get(`${this.$window.baseUrl}/api/tags/${tags}`)
+                api.recipes
+                    .allWithTag(tags)
                     .then((response) => {
                         $this.results = response.data
                     })
@@ -85,8 +85,8 @@ export default {
                 // Search by category
                 const $this = this
                 const cat = this.$route.params.value
-                axios
-                    .get(`${this.$window.baseUrl}/api/category/${cat}`)
+                api.recipes
+                    .allInCategory(cat)
                     .then((response) => {
                         $this.results = response.data
                     })
@@ -108,10 +108,8 @@ export default {
             } else {
                 // General search
                 const $this = this
-                axios
-                    .get(
-                        `${this.$window.baseUrl}/api/search/${this.$route.params.value}`
-                    )
+                api.recipes
+                    .search($this.$route.params.value)
                     .then((response) => {
                         $this.results = response.data
                     })

src/guest.js

@@ -8,6 +8,9 @@
 import { generateUrl } from "@nextcloud/router"
 
 import Vue from "vue"
+
+import api from "cookbook/js/api-interface"
+
 import store from "./store"
 
 import AppInvalidGuest from "./components/AppInvalidGuest.vue"
@@ -27,6 +30,7 @@ if (__webpack_use_dev_server__ || false) {
 
     // eslint-disable-next-line no-param-reassign
     window.baseUrl = generateUrl("apps/cookbook")
+    api.init(window.baseUrl)
 
     // Also make the injections available in Vue components
     Vue.prototype.$window = window