Revert "Creates a store and a service to match architectural decisions"20450-fix-ujs-actions-part-3

This reverts commit 24617cb09367db3ff1a77799d8025a7d4235c4a8.

6 files changed, 64 insertions, 189 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/index.js b/app/assets/javascripts/vue_pipelines_index/index.js
index bf0ad7a4a7a..a90bd1518e9 100644
--- a/app/assets/javascripts/vue_pipelines_index/index.js
+++ b/app/assets/javascripts/vue_pipelines_index/index.js
@@ -1,8 +1,8 @@
+/* eslint-disable no-param-reassign */
 /* global Vue, VueResource, gl */
-import PipelinesStore from './stores/pipelines_store';
-
 window.Vue = require('vue');
 window.Vue.use(require('vue-resource'));
+require('../lib/utils/common_utils');
 require('../vue_shared/vue_resource_interceptor');
 require('./pipelines');
 
@@ -11,11 +11,10 @@ $(() => new Vue({
 
   data() {
     const project = document.querySelector('.pipelines');
-    const store = new PipelinesStore();
 
     return {
-      store,
-      endpoint: project.dataset.url,
+      scope: project.dataset.url,
+      store: new gl.PipelineStore(),
     };
   },
   components: {
@@ -23,7 +22,8 @@ $(() => new Vue({
   },
   template: `
     <vue-pipelines
-      :endpoint="endpoint"
-      :store="store" />
+      :scope="scope"
+      :store="store">
+    </vue-pipelines>
   `,
 }));
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index d79ab7284df..601ef41e917 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -1,28 +1,15 @@
-/* global Vue, gl, Flash */
-/* eslint-disable no-param-reassign, no-new */
-import '~/flash';
-import CommitPipelinesStoreWithTimeAgo from '../commit/pipelines/pipelines_store';
-import PipelinesService from './services/pipelines_service';
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
 
 window.Vue = require('vue');
 require('../vue_shared/components/table_pagination');
+require('./store');
 require('../vue_shared/components/pipelines_table');
+const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_store');
 
 ((gl) => {
   gl.VuePipelines = Vue.extend({
 
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-
-      store: {
-        type: Object,
-        required: true,
-      },
-    },
-
     components: {
       'gl-pagination': gl.VueGlPagination,
       'pipelines-table-component': gl.pipelines.PipelinesTableComponent,
@@ -30,21 +17,28 @@ require('../vue_shared/components/pipelines_table');
 
     data() {
       return {
-        state: this.store.state,
+        pipelines: [],
+        timeLoopInterval: '',
+        intervalId: '',
         apiScope: 'all',
+        pageInfo: {},
         pagenum: 1,
+        count: {},
         pageRequest: false,
       };
     },
-
+    props: ['scope', 'store'],
     created() {
-      this.service = new PipelinesService(this.endpoint);
+      const pagenum = gl.utils.getParameterByName('page');
+      const scope = gl.utils.getParameterByName('scope');
+      if (pagenum) this.pagenum = pagenum;
+      if (scope) this.apiScope = scope;
 
-      this.fetchPipelines();
+      this.store.fetchDataLoop.call(this, Vue, this.pagenum, this.scope, this.apiScope);
     },
 
     beforeUpdate() {
-      if (this.state.pipelines.length && this.$children) {
+      if (this.pipelines.length && this.$children) {
         CommitPipelinesStoreWithTimeAgo.startTimeAgoLoops.call(this, Vue);
       }
     },
@@ -61,54 +55,30 @@ require('../vue_shared/components/pipelines_table');
         gl.utils.visitUrl(param);
         return param;
       },
-
-      fetchPipelines() {
-        const pageNumber = gl.utils.getParameterByName('page') || this.pagenum;
-        const scope = gl.utils.getParameterByName('scope') || this.apiScope;
-
-        this.pageRequest = true;
-        return this.service.getPipelines(scope, pageNumber)
-          .then(resp => ({
-            headers: resp.headers,
-            body: resp.json(),
-          }))
-          .then((response) => {
-            this.store.storeCount(response.body.count);
-            this.store.storePipelines(response.body.pipelines);
-            this.store.storePagination(response.headers);
-          })
-          .then(() => {
-            this.pageRequest = false;
-          })
-          .catch(() => {
-            this.pageRequest = false;
-            new Flash('An error occurred while fetching the pipelines, please reload the page again.');
-          });
-      },
     },
     template: `
       <div>
-        <div class="pipelines realtime-loading" v-if="pageRequest">
-          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+        <div class="pipelines realtime-loading" v-if='pageRequest'>
+          <i class="fa fa-spinner fa-spin"></i>
         </div>
 
         <div class="blank-state blank-state-no-icon"
-          v-if="!pageRequest && state.pipelines.length === 0">
+          v-if="!pageRequest && pipelines.length === 0">
           <h2 class="blank-state-title js-blank-state-title">
             No pipelines to show
           </h2>
         </div>
 
-        <div class="table-holder" v-if="!pageRequest && state.pipelines.length">
-          <pipelines-table-component :pipelines="state.pipelines"/>
+        <div class="table-holder" v-if='!pageRequest && pipelines.length'>
+          <pipelines-table-component :pipelines='pipelines'/>
         </div>
 
         <gl-pagination
-          v-if="!pageRequest && state.pipelines.length && state.pageInfo.total > state.pageInfo.perPage"
-          :pagenum="pagenum"
-          :change="change"
-          :count="state.count.all"
-          :pageInfo="state.pageInfo"
+          v-if='!pageRequest && pipelines.length && pageInfo.total > pageInfo.perPage'
+          :pagenum='pagenum'
+          :change='change'
+          :count='count.all'
+          :pageInfo='pageInfo'
         >
         </gl-pagination>
       </div>
diff --git a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js b/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
deleted file mode 100644
index 794104c5c90..00000000000
--- a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import Vue from 'vue';
-
-export default class PipelinesService {
-  constructor(endpoint) {
-    this.pipelines = Vue.resource(endpoint);
-  }
-
-  getPipelines(scope, page) {
-    return this.pipelines.get({ scope, page });
-  }
-
-  /**
-   * Post request for all pipelines actions.
-   * Endpoint content type needs to be:
-   * `Content-Type:application/x-www-form-urlencoded`
-   *
-   * @param  {String} endpoint
-   * @return {Promise}
-   */
-  postAction(endpoint) {
-    return Vue.http.post(endpoint, {}, { emulateJSON: true });
-  }
-}
diff --git a/app/assets/javascripts/vue_pipelines_index/store.js b/app/assets/javascripts/vue_pipelines_index/store.js
new file mode 100644
index 00000000000..909007267b9
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/store.js
@@ -0,0 +1,31 @@
+/* global gl, Flash */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  const pageValues = (headers) => {
+    const normalized = gl.utils.normalizeHeaders(headers);
+    const paginationInfo = gl.utils.parseIntPagination(normalized);
+    return paginationInfo;
+  };
+
+  gl.PipelineStore = class {
+    fetchDataLoop(Vue, pageNum, url, apiScope) {
+      this.pageRequest = true;
+
+      return this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
+      .then((response) => {
+        const pageInfo = pageValues(response.headers);
+        this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
+
+        const res = JSON.parse(response.body);
+        this.count = Object.assign({}, this.count, res.count);
+        this.pipelines = Object.assign([], this.pipelines, res.pipelines);
+
+        this.pageRequest = false;
+      }, () => {
+        this.pageRequest = false;
+        return new Flash('An error occurred while fetching the pipelines, please reload the page again.');
+      });
+    }
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/stores/pipelines_store.js b/app/assets/javascripts/vue_pipelines_index/stores/pipelines_store.js
deleted file mode 100644
index ffefe0192f2..00000000000
--- a/app/assets/javascripts/vue_pipelines_index/stores/pipelines_store.js
+++ /dev/null
@@ -1,30 +0,0 @@
-export default class PipelinesStore {
-  constructor() {
-    this.state = {};
-
-    this.state.pipelines = [];
-    this.state.count = {};
-    this.state.pageInfo = {};
-  }
-
-  storePipelines(pipelines = []) {
-    this.state.pipelines = pipelines;
-  }
-
-  storeCount(count = {}) {
-    this.state.count = count;
-  }
-
-  storePagination(pagination = {}) {
-    let paginationInfo;
-
-    if (Object.keys(pagination).length) {
-      const normalizedHeaders = gl.utils.normalizeHeaders(pagination);
-      paginationInfo = gl.utils.parseIntPagination(normalizedHeaders);
-    } else {
-      paginationInfo = pagination;
-    }
-
-    this.state.pageInfo = paginationInfo;
-  }
-}
diff --git a/spec/javascripts/vue_pipelines_index/pipelines_store_spec.js b/spec/javascripts/vue_pipelines_index/pipelines_store_spec.js
deleted file mode 100644
index 5c0934404bb..00000000000
--- a/spec/javascripts/vue_pipelines_index/pipelines_store_spec.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import PipelineStore from '~/vue_pipelines_index/stores/pipelines_store';
-
-describe('Pipelines Store', () => {
-  let store;
-
-  beforeEach(() => {
-    store = new PipelineStore();
-  });
-
-  it('should be initialized with an empty state', () => {
-    expect(store.state.pipelines).toEqual([]);
-    expect(store.state.count).toEqual({});
-    expect(store.state.pageInfo).toEqual({});
-  });
-
-  describe('storePipelines', () => {
-    it('should use the default parameter if none is provided', () => {
-      store.storePipelines();
-      expect(store.state.pipelines).toEqual([]);
-    });
-
-    it('should store the provided array', () => {
-      const array = [{ id: 1, status: 'running' }, { id: 2, status: 'success' }];
-      store.storePipelines(array);
-      expect(store.state.pipelines).toEqual(array);
-    });
-  });
-
-  describe('storeCount', () => {
-    it('should use the default parameter if none is provided', () => {
-      store.storeCount();
-      expect(store.state.count).toEqual({});
-    });
-
-    it('should store the provided count', () => {
-      const count = { all: 20, finished: 10 };
-      store.storeCount(count);
-
-      expect(store.state.count).toEqual(count);
-    });
-  });
-
-  describe('storePagination', () => {
-    it('should use the default parameter if none is provided', () => {
-      store.storePagination();
-      expect(store.state.pageInfo).toEqual({});
-    });
-
-    it('should store pagination information normalized and parsed', () => {
-      const pagination = {
-        'X-nExt-pAge': '2',
-        'X-page': '1',
-        'X-Per-Page': '1',
-        'X-Prev-Page': '2',
-        'X-TOTAL': '37',
-        'X-Total-Pages': '2',
-      };
-
-      const expectedResult = {
-        perPage: 1,
-        page: 1,
-        total: 37,
-        totalPages: 2,
-        nextPage: 2,
-        previousPage: 2,
-      };
-
-      store.storePagination(pagination);
-      expect(store.state.pageInfo).toEqual(expectedResult);
-    });
-  });
-});