Alex styles

client/src/common/services/companies.service.js

@@ -1,28 +1,83 @@
-import { Observable } from '@reactivex/rxjs';
-import { API_COMPANIES_PATH } from 'client/src/common/api/constants';
-import { FETCH_COMPANIES, FETCH_COMPANY } from './constants';
-import { Company } from 'client/src/common/models/company.model';
-
-export class CompaniesService {
-    static $inject = [
-        'APIService',
-        '$ngRedux'
-    ];
-
-    constructor(api, $ngRedux) {
-        this.api = api;
-        this.$ngRedux = $ngRedux;
-    }
-
-    fetchCompanies() {
-        Observable.fromPromise(this.api.fetch(API_COMPANIES_PATH))
-            .map(payload => ({ type: FETCH_COMPANIES, payload }))
-            .subscribe(action => this.$ngRedux.dispatch(action));
-    }
-
-    fetchCompany(id) {
-        Observable.fromPromise(this.api.fetch(API_COMPANIES_PATH + '/' + id))
-            .map(payload => ({ type: FETCH_COMPANY, payload }))
-            .subscribe(action => this.$ngRedux.dispatch(action));
-    }
-}
+import {
+    ajax
+}
+from 'rxjs/Rx';
+
+import {
+    API_BASE_URL,
+    API_COMPANIES_PATH
+}
+from 'client/src/common/api/constants';
+
+import {
+    FETCH_COMPANIES,
+    FETCH_COMPANIES_FULFILLED,
+    FETCH_COMPANY,
+    FETCH_COMPANY_FULFILLED
+}
+from './constants';
+
+// import { Company } from 'client/src/common/models/company.model';
+
+// Action Creators
+const fetchCompanies = payload => ({
+    type: FETCH_COMPANIES,
+    payload
+});
+const fetchCompaniesFullfilled = payload => ({
+    type: FETCH_COMPANIES_FULLFILLED,
+    payload
+});
+
+const fetchCompany = company_id => ({
+    type: FETCH_COMPANY,
+    payload: company_id
+});
+const fetchCompanyFullfilled = payload => ({
+    type: FETCH_COMPANY_FULLFILLED,
+    payload
+});
+
+// Epics
+export function fetchCompaniesEpic (action$) {
+    return action$
+        .ofType(FETCH_COMPANIES)
+        .mergeMap(action =>
+            ajax.getJSON(`${API_BASE_URL}${API_COMPANIES_PATH}`)
+                .map(fetchCompaniesFullfilled)
+        );
+}
+
+export function fetchCompanyEpic (action$) {
+    return action$
+        .ofType(FETCH_COMPANY)
+        .mergeMap(action =>
+            ajax.getJSON(`${API_BASE_URL}${API_COMPANIES_PATH}/${action.payload}`)
+                .map(fetchCompanyFullfilled)
+        );
+}
+
+// export class CompaniesService {
+//     static $inject = [
+//         'APIService',
+//         '$ngRedux'
+//     ];
+
+//     constructor(api, $ngRedux) {
+//         this.api = api;
+//         this.$ngRedux = $ngRedux;
+//     }
+
+//     fetchCompanies() {
+//         // Observable.fromPromise(this.api.fetch(API_COMPANIES_PATH))
+//         //     .filter(r => r.name === "Axial")
+//         //     .map(payload => ({ type: FETCH_COMPANIES, payload }))
+//         //     .subscribe(action => this.$ngRedux.dispatch(action));
+//     }
+
+//     fetchCompany(id) {
+//         // Observable.fromPromise(this.api.fetch(API_COMPANIES_PATH + '/' + id))
+//         //     .map(payload => ({ type: FETCH_COMPANY, payload }))
+//         //     .subscribe(action => this.$ngRedux.dispatch(action));
+//     }
+// }

client/src/common/services/constants.js

@@ -1,6 +1,9 @@
 // Companies
 export const FETCH_COMPANIES = 'FETCH_COMPANIES';
+export const FETCH_COMPANIES_FULFILLED = 'FETCH_COMPANIES_FULFILLED';
+
 export const FETCH_COMPANY = 'FETCH_COMPANY';
+export const FETCH_COMPANY_FULFILLED = 'FETCH_COMPANY_FULFILLED';
 
 // Members
 export const FETCH_MEMBERS = 'FETCH_MEMBERS';

client/src/common/services/rootEpic.js

@@ -0,0 +1,13 @@
+/**
+ * Combine all epics in this file and export the combined epic.
+ */
+
+import { combineEpics } from 'redux-observable';
+
+// our custom data reducer for the data points
+import { fetchCompaniesEpic, fetchCompanyEpic } from './companies.service';
+
+export default combineEpics(
+    fetchCompaniesEpic, 
+    fetchCompanyEpic
+);

client/src/components/companies/companies.component.js

@@ -1,4 +1,3 @@
-import { Observable } from '@reactivex/rxjs';
 import { Component } from 'client/src/utils';
 
 import template from './companies.html';
@@ -13,38 +12,35 @@ import './companies.scss';
 export class CompaniesComponent {
 
     static $inject = [
-        '$ngRedux',
-        'CompaniesService'
+        '$ngRedux'
     ];
 
-    constructor($ngRedux, CompaniesService) {
+    constructor($ngRedux) {
         this.$ngRedux = $ngRedux;
-        this.companiesService = CompaniesService;
-        this.list = Observable.from([]);
-        this.currentCompany = Observable.of({});
+        // this.companiesService = CompaniesService;
     }
 
     $onInit() {
         // Connect to the store
-        this.disconnect = this.$ngRedux.connect(state => ({
-            companies: state.companies,
-            currentCompany: state.currentCompany
-        }))((state, actions) => {
-            this.actions = actions;
-            this.list = state.companies;
-            this.currentCompany = state.currentCompany;
-        });
+        // this.disconnect = this.$ngRedux.connect(state => ({
+        //     companies: state.companies,
+        //     currentCompany: state.currentCompany
+        // }))((state, actions) => {
+        //     this.actions = actions;
+        //     this.list = state.companies;
+        //     this.currentCompany = state.currentCompany;
+        // });
 
         // Fetch Companies
-        this.companies = this.companiesService.fetchCompanies();
+        // this.companies = this.companiesService.fetchCompanies();
     }
 
     $onDestroy() {
         // Disconnect from the store
-        this.disconnect();
+        // this.disconnect();
     }
 
     onCompanySelected(company) {
-        this.companiesService.fetchCompany(company.id);
+        // this.companiesService.fetchCompany(company.id);
     }
 }

client/src/components/styles/index.js

@@ -0,0 +1 @@
+export * from './styles.component';

client/src/components/styles/styles.component.js

@@ -0,0 +1,12 @@
+import { Component } from 'client/src/utils';
+
+import template from './styles.html';
+
+import './styles.scss';
+
+@Component({
+    template,
+    controllerAs: 'stylesCtrl'
+})
+
+export class StylesComponent {}