♻️ : extract api services

src/main/client/app/pages/modules/import/manual-import.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-  import axios from 'axios';
+  import { createModule } from '@/shared/api/modules-api';
 
   export default {
     name: 'ManualImport',
@@ -62,9 +62,8 @@
         let module = {
           name: this.moduleName,
         };
-        const response = await axios.post('/api/modules', module);
-        module = response.data;
-        await this.$router.push({ name: 'module', params: { id: module.id } });
+        module = createModule(module);
+        this.$router.push({ name: 'module', params: { id: module.id } });
       },
     },
   };

src/main/client/app/pages/modules/import/registry-import.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script>
-  import axios from 'axios';
+  import { getRegistriesRepositories, importRegistryRepository } from '@/shared/api/registries-api';
 
   export default {
     name: 'RegistryImport',
@@ -74,8 +74,7 @@
       async search() {
         if (!this.loaded) {
           this.isLoading = true;
-          const response = await axios.get(`/api/registries/${this.registry}/repositories`);
-          this.repositories = response.data;
+          this.repositories = await getRegistriesRepositories(this.registry);
           this.loaded = true;
           this.isLoading = false;
         }
@@ -91,9 +90,8 @@
         });
 
         const id = this.selectedRepository.id ? this.selectedRepository.id : this.selectedRepository.fullName;
-        const response = await axios.get(`/api/registries/${this.registry}/repositories/${id}/import`);
-        const module = response.data;
-        await this.$router.push({ name: 'module', params: { id: module.id } });
+        const module = await importRegistryRepository(this.registry, id);
+        this.$router.push({ name: 'module', params: { moduleId: module.id } });
       },
     },
   };

src/main/client/app/pages/modules/module-description.vue

@@ -67,10 +67,10 @@
 </template>
 
 <script>
-  import axios from 'axios';
-
   import { AppCliBadge, AppMarkdown } from '@/shared/components';
 
+  import { getModule } from '@/shared/api/modules-api';
+
   import AppReadme from './readme.vue';
 
   export default {
@@ -103,9 +103,7 @@
     },
 
     async created() {
-      const url = `/api/modules/${this.moduleId}`;
-      const response = await axios.get(url);
-      this.module = response.data;
+      this.module = await getModule(this.moduleId);
     },
   };
 </script>

src/main/client/app/pages/modules/module.vue

@@ -193,7 +193,8 @@
 </template>
 
 <script>
-  import axios from 'axios';
+  import { getModule, updateModule } from '@/shared/api/modules-api';
+  import { getTeams } from '@/shared/api/teams-api';
 
   import TerraformImageInput from './terraform-image-input.vue';
 
@@ -229,30 +230,24 @@
     },
 
     async created() {
-      const url = `/api/modules/${this.moduleId}`;
-      const response = await axios.get(url);
-      this.module = response.data;
-
-      const responseTeams = await axios.get('/api/teams');
-      this.teams = responseTeams.data;
+      this.module = await getModule(this.moduleId);
+      this.teams = await getTeams();
     },
 
     methods: {
       notEmpty(field) {
         return typeof field !== 'undefined' && field !== null && field.trim() !== '';
       },
       async save() {
-        axios.put(
-          `/api/modules/${this.moduleId}`,
-          this.module,
-        ).then(() => {
-          this.$bvToast.toast('Module saved', {
-            noCloseButton: true,
-            solid: true,
-            variant: 'success',
-            toaster: 'b-toaster-top-center',
-          });
-        })
+        updateModule(this.module)
+          .then(() => {
+            this.$bvToast.toast('Module saved', {
+              noCloseButton: true,
+              solid: true,
+              variant: 'success',
+              toaster: 'b-toaster-top-center',
+            });
+          })
           .catch((error) => {
             this.$bvToast.toast(error.message, {
               title: 'Error when saving module',

src/main/client/app/pages/modules/modules.vue

@@ -63,7 +63,8 @@
 </template>
 
 <script>
-  import axios from 'axios';
+  import { getModules } from '@/shared/api/modules-api';
+
   import { AppCliBadge } from '@/shared/components';
 
   import { v4 as uuidv4 } from 'uuid';
@@ -82,13 +83,12 @@
     },
 
     async created() {
-      const response = await axios.get('/api/modules');
-      this.modules = response.data;
+      this.modules = await getModules();
     },
 
     methods: {
-      async createStack(moduleId) {
-        await this.$router.push({
+      createStack(moduleId) {
+        this.$router.push({
           name: 'stack_creation',
           params: {
             stackId: uuidv4(),

src/main/client/app/pages/modules/readme.vue

@@ -17,10 +17,10 @@
 </template>
 
 <script>
-  import axios from 'axios';
-
   import marked from 'marked';
 
+  import { getModuleReadme } from '@/shared/api/modules-api';
+
   export default {
     name: 'AppReadme',
 
@@ -37,8 +37,8 @@
     }),
 
     async created() {
-      const result = await axios.get(`/api/modules/${this.moduleId}/readme`);
-      this.content = marked(result.data);
+      const readme = await getModuleReadme(this.moduleId);
+      this.content = marked(readme);
       this.loaded = true;
     },
   };

src/main/client/app/pages/stacks/stack-creation.vue

@@ -92,6 +92,8 @@
 <script>
   import axios from 'axios';
 
+  import { getModule } from '@/shared/api/modules-api';
+
   import AppStackVariable from './stack-variable.vue';
 
   export default {
@@ -127,8 +129,7 @@
     },
 
     async created() {
-      const result = await axios.get(`/api/modules/${this.moduleId}`);
-      this.module = result.data;
+      this.module = await getModule(this.moduleId);
 
       this.stack = {};
       this.stack.id = this.stackId;
@@ -161,12 +162,12 @@
       async save() {
         this.stackVariablesMgmt();
         const stack = await this.saveStack();
-        await this.$router.push({ path: `/stacks/${stack.id}` });
+        this.$router.push({ path: `/stacks/${stack.id}` });
       },
       async run() {
         this.stackVariablesMgmt();
         const stack = await this.saveStack();
-        await this.$router.push({ path: `/stacks/${stack.id}/RUN` });
+        this.$router.push({ path: `/stacks/${stack.id}/RUN` });
       },
     },
   };

src/main/client/app/shared/api/modules-api.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+export const getModules = async () => {
+  const resp = await axios.get('/api/modules');
+  return resp.data;
+};
+
+export const getModule = async (moduleId) => {
+  const resp = await axios.get(`/api/modules/${moduleId}`);
+  return resp.data;
+};
+
+export const getModuleReadme = async (moduleId) => {
+  const resp = await axios.get(`/api/modules/${moduleId}/readme`);
+  return resp.data;
+};
+
+export const updateModule = async (module) => axios.put(`/api/modules/${module.id}`, module);
+
+export const createModule = async (module) => {
+  const resp = await axios.post('/api/modules', module);
+  return resp.data;
+};

src/main/client/app/shared/api/registries-api.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+export const getRegistriesRepositories = async (registry) => {
+  const resp = await axios.get(`/api/registries/${registry}/repositories`);
+  return resp.data;
+};
+
+export const importRegistryRepository = async (registry, id) => {
+  const resp = await axios.get(`/api/registries/${registry}/repositories/${id}/import`);
+  return resp.data;
+};

src/main/client/app/shared/api/teams-api.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+export const getTeams = async () => {
+  const resp = await axios.get('/api/teams');
+  return resp.data;
+};