Mixins collections

src/app/login/components/LoginBaseCard.vue

@@ -18,6 +18,11 @@
         </b-row>
       </b-form>
     </b-card>
+    <b-card :title="quote.author" :sub-title="quote.category">
+      <p class="card-text">
+        {{quote.quote}}
+      </p>
+    </b-card>
   </div>
 </template>
 
@@ -26,10 +31,13 @@
   import Vue from 'vue';
   import { State, Action, Getter } from 'vuex-class';
   import { LoginState, User} from '../vuex/types';
+  import { FeedCardMixin } from '@/app/mixins';
+  import { Mixins } from 'vue-mixin-decorator';
+
   const namespace: string = 'login';
 
   @Component
-  export default class LoginBaseCard extends Vue {
+  export default class LoginBaseCard extends Mixins<FeedCardMixin>(FeedCardMixin) {
     @State('login') private login!: LoginState;
     @Action('fetchData', {namespace}) private fetchData: any;
     @Getter('name', {namespace}) private name!: string;

src/app/mixins/api.ts

@@ -4,4 +4,15 @@ export const api = {
   getLocation(params: any) {
     return HTTP.get('https://restcountries.eu/rest/v2/regionalbloc/SAARC', {responseType: 'json'});
   },
+
+  getFeeds() {
+    return HTTP.get(
+      'http://quotesondesign.com//wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
+    );
+  },
+  getQuote() {
+    return HTTP.get(
+      'https://talaikis.com/api/quotes/random/',
+    );
+  },
 };

src/app/mixins/index.ts

@@ -1 +1,3 @@
 export { location as vuex } from './vuex';
+export { Location as LocationMixin } from './mixin/location';
+export { FeedCard as FeedCardMixin } from './mixin/feed_card';

src/app/mixins/mixin/feed_card.ts

@@ -0,0 +1,17 @@
+import { Mixin } from 'vue-mixin-decorator';
+import Vue from 'vue';
+import { Action, State, Getter } from 'vuex-class';
+import { MixinState, QuoteState } from '../vuex/types';
+
+@Mixin
+export class FeedCard extends Vue {
+  @State('mixins') private mixin!: MixinState;
+  @Action('feedData', {namespace: 'mixins'}) private feedData: any;
+  @Action('quoteData', {namespace: 'mixins'}) private quoteData: any;
+  @Getter('getQuoteState', {namespace: 'mixins'}) private quote!: QuoteState;
+  public created() {
+    this.feedData().then(() => {
+      this.quoteData();
+    });
+  }
+}

src/app/mixins/mixin/location.ts

@@ -1,11 +1,9 @@
 import { Mixin } from 'vue-mixin-decorator';
 import Vue from 'vue';
 import { State, Getter, Action } from 'vuex-class';
-import { LocationState } from '../vuex/types';
 
 @Mixin
 export class Location extends Vue {
-  @State('mixins') private location!: LocationState;
   @Action('locationData', {namespace: 'mixins'}) private locationData: any;
   @Getter('list', {namespace: 'mixins'}) private list: any;
   @Getter('sliderList', {namespace: 'mixins'}) private sliderList: any;

src/app/mixins/vuex/actions.ts

@@ -1,11 +1,22 @@
 import { ActionTree } from 'vuex';
-import { LocationState } from './types';
+import { MixinState } from './types';
 import { RootState } from '@/app/types';
 import { api } from '../api';
-export const actions: ActionTree<LocationState, RootState> = {
+export const actions: ActionTree<MixinState, RootState> = {
   locationData({commit}): any {
     api.getLocation({}).then((response: any) => {
       commit('sampleLocationLoaded', response.data);
     });
   },
+
+  feedData({commit}): any {
+    return api.getFeeds().then((response: any) => {
+      commit('sampleFeedsLoaded', response.data);
+    });
+  },
+  quoteData({commit}): any {
+    return api.getQuote().then((response) => {
+      commit('sampleQuoteLoaded', response.data);
+    });
+  },
 };

src/app/mixins/vuex/getters.ts

@@ -1,26 +1,32 @@
 import { GetterTree } from 'vuex';
-import { LocationState } from './types';
+import { MixinState, QuoteState, CountryState } from './types';
 import { RootState } from '../../types';
 
-export const getters: GetterTree<LocationState, RootState> = {
+export const getters: GetterTree<MixinState, RootState> = {
   list(state): any {
-    return state && state.list.map((l: any) => {
-      return { name: l.name, capital: l.capital, population: l.population, region: l.region };
-    });
+    const { countries } = state;
+    return countries.map((c) => c);
   },
   sliderList(state): any {
-    return state && state.list.map((l: any) => {
+    const {countries} = state;
+    return countries && countries.map((l: CountryState) => {
       return {
         name: l.name,
         flag: l.flag,
         info: {
           capital: l.capital,
           population: l.population,
           region: l.region,
-          languages: l.languages.map((lang: any) => lang.name).join(', '),
+          languages: l.languages.join(', '),
           nativeName: l.nativeName,
+          area: l.area,
         },
       };
     });
   },
+
+  getQuoteState(state): QuoteState {
+    const {quote} = state;
+    return quote ? quote : {author: '', quote: '', category: ''};
+  },
 };

src/app/mixins/vuex/index.ts

@@ -4,16 +4,19 @@ import { actions } from './actions';
 import { mutations  } from './mutations';
 
 import { RootState } from '../../types';
-import { LocationState } from './types';
+import { MixinState } from './types';
 
-export const state: LocationState = {
-  list: [],
-  error: false,
+export const state: MixinState = {
+  feed: undefined,
+  quote: undefined,
+  country: undefined,
+  countries: [],
+  feeds: [],
 };
 
 const namespaced: boolean = true;
 
-export const location: Module<LocationState, RootState> = {
+export const location: Module<MixinState, RootState> = {
   namespaced,
   state,
   getters,

src/app/mixins/vuex/mutations.ts

@@ -1,14 +1,37 @@
 import { MutationTree } from 'vuex';
-import { LocationState } from './types';
+import { MixinState, QuoteState, FeedState, CountryState } from './types';
 
-export const mutations: MutationTree<LocationState> = {
+export const mutations: MutationTree<MixinState> = {
   sampleLocationLoaded(state, payload: any) {
-    state.list = payload;
-    state.error = false;
+    console.log(payload);
+    for (const c of payload) {
+      const country: CountryState = {
+        name: c.name,
+        flag: c.flag,
+        capital: c.capital,
+        population: c.population,
+        region: c.region,
+        languages: c.languages.map((lang: any) => lang.name),
+        nativeName: c.nativeName,
+        area: c.area,
+      };
+      state.countries.push(country);
+    }
   },
 
   locationError(state) {
-    state.error = true;
-    state.list = [];
+    state.country = undefined;
+  },
+
+  sampleQuoteLoaded(state, payload: any) {
+    const quote: QuoteState = { author: payload.author, category: payload.cat, quote: payload.quote };
+    state.quote = quote;
+  },
+
+  sampleFeedsLoaded(state, payload: any) {
+    for (const f of payload) {
+      const feed: FeedState = {id: f.ID, content: f.content, title: f.title};
+      state.feeds.push(feed);
+    }
   },
 };

src/app/mixins/vuex/types.ts

@@ -1,4 +1,30 @@
-export interface LocationState {
-  list: any;
-  error: boolean;
+export interface CountryState {
+  name: string;
+  flag: string;
+  capital: string;
+  population: string;
+  region: string;
+  languages: string[];
+  nativeName: string;
+  area: number;
+}
+
+export interface FeedState {
+  id: number;
+  title: string;
+  content: string;
+}
+
+export interface QuoteState {
+  author: string;
+  category: string;
+  quote: string;
+}
+
+export interface MixinState {
+  country?: CountryState;
+  countries: CountryState[];
+  feed?: FeedState;
+  feeds: FeedState[];
+  quote?: QuoteState;
 }

src/app/sample/components/SampleComponent.vue

@@ -18,7 +18,7 @@
         @sliding-end="onSlideEnd"
       >
         <b-carousel-slide v-for="country in sliderList"
-          :key="country.name"
+          :key="country.area"
           :caption="country.name"
           img-blank :img-alt="country.name"
         >
@@ -31,6 +31,9 @@
         <template slot="table-caption">
           Countries list
         </template>
+        <template slot="flag" slot-scope="row">
+          <img height="30px" :src="row.value"/>
+        </template>
       </b-table>
     </b-card>
   </div>
@@ -40,12 +43,12 @@
   import Component from 'vue-class-component';
   import { State, Action, Getter } from 'vuex-class';
   import { SampleState } from '../vuex/types';
-  import { Location } from '@/app/mixins/mixin/location';
+  import { LocationMixin } from '@/app/mixins';
   import { Mixins } from 'vue-mixin-decorator';
   const namespace: string = 'sample';
 
   @Component
-  export default class SampleComponent extends Mixins<Location>(Location) {
+  export default class SampleComponent extends Mixins<LocationMixin>(LocationMixin) {
     @Action('sampleData', {namespace}) private sampleData: any;
     @State('sample') private sample!: SampleState;
     @Getter('message', {namespace}) private message!: string;

vue.config.js

@@ -11,7 +11,7 @@ module.exports = {
       }
     },
     devServer: {
-      // open: true,
+      open: true,
       setup: (app, server) => {
         const CONFIG_CHECKS = ['VUE_APP_CLIENT_ID', 'VUE_APP_CLIENT_SECRET', 'VUE_APP_BASE_URL', 'VUE_APP_SCOPE' ];