Feat: ghost type을 서버(hatchout)와 일치시키고, 서버 api를 호출하도록 함(#39, #40)

src/api/ghost/ghost.api.spec.ts

@@ -0,0 +1,36 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from 'axios';
+import {instance, mock, when} from 'ts-mockito';
+import {AxiosSupplier} from '@/api/axios/axios.supplier';
+import {HttpClient} from '@/api/axios/http.client';
+import {GhostApi} from '@/api/ghost/ghost.api';
+import {Ghost} from '@/types';
+
+describe('GhostApi', () => {
+  const mockAdapter = new MockAdapter(axios);
+  const mockAxiosSupplier = mock(AxiosSupplier);
+  when(mockAxiosSupplier.get()).thenReturn(axios.create());
+
+  const httpClient = new HttpClient(instance(mockAxiosSupplier));
+  const ghostApi = new GhostApi(httpClient);
+  let responseData: Ghost;
+  const domain = 'ghosts';
+  describe('getByPage()', () => {
+    const page = 1;
+    it('should return ghosts', async () => {
+      responseData = {
+        name: 'Token Name1',
+        gene: 'token ID',
+        tokenId: 1,
+        userAddress: 'user1',
+        level: 1,
+        angelPoint: 10,
+        devilPoint: 20,
+        createdDate: Date.now(),
+      };
+      mockAdapter.onGet(`/${domain}?page=${page}`).reply(200, responseData);
+
+      expect(await ghostApi.getByPage(page)).toEqual(responseData);
+    });
+  });
+});

src/api/ghost/ghost.api.ts

@@ -0,0 +1,14 @@
+import {Service} from 'typedi';
+import {HttpClient} from '@/api/axios/http.client';
+import {Ghost} from '@/types';
+
+@Service()
+export class GhostApi {
+  private domain = 'ghosts';
+
+  constructor(private httpClient: HttpClient) {}
+
+  public async getByPage(page: number): Promise<Ghost[]> {
+    return await this. httpClient.call<Ghost[]>('GET', `${this.domain}?page=${page}`);
+  }
+}

src/api/user/user.api.spec.ts

@@ -5,7 +5,7 @@ import {UserApi} from '@/api/user/user.api';
 import {AxiosSupplier} from '@/api/axios/axios.supplier';
 import {HttpClient} from '@/api/axios/http.client';
 
-describe('UserApi', () => {
+describe('UserApi',   () => {
 
   const mockAdapter = new MockAdapter(axios);
   const mockAxiosSupplier = mock(AxiosSupplier);

src/components/sections/MarketPlaceSection.vue

@@ -30,6 +30,7 @@ import GhostTable from '@/components/tables/GhostTable.vue';
 import {Inject} from "vue-typedi";
 import tokens from "@/store/tokens";
 import {UserModule} from "@/store/modules/user";
+import {GhostModule} from "@/store/modules/ghost";
 
 @Component({
     components: { GhostCard, GhostTable},
@@ -40,6 +41,9 @@ export default class MarketPlaceSection extends Vue {
   @Inject(tokens.USER_MODULE)
   public userModule!: UserModule;
 
+  @Inject(tokens.GHOST_MODULE)
+  public ghostModule!: GhostModule;
+
   constructor() {
     super();
     this.currentNum = 1;

src/store/index.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import { createVuexStore } from 'vuex-simple';
+import {createVuexStore} from 'vuex-simple';
 import {Store} from './store';
 import {Container} from 'vue-typedi';
 import tokens from './tokens';
@@ -12,6 +12,7 @@ Vue.use(Vuex);
 const instance = new Store();
 
 Container.set(tokens.USER_MODULE, instance.userModule);
+Container.set(tokens.GHOST_MODULE, instance.ghostModule);
 
 export const store = createVuexStore(instance, {
   strict: false,
@@ -20,3 +21,8 @@ export const store = createVuexStore(instance, {
 
 });
 
+// todo: move to config
+const initPage: number = 1;
+// todo: handle error correctly
+instance.ghostModule.loadGhostsByPage(initPage).then().catch();
+

src/store/modules/ghost.ts

@@ -1,21 +1,89 @@
-import {Getter, State} from 'vuex-simple';
+import {Action, Getter, State} from 'vuex-simple';
 import {Ghost} from '@/types';
+import {Inject} from 'typedi';
+import {GhostApi} from '@/api/ghost/ghost.api';
+import {Injectable} from 'vue-typedi';
 
+@Injectable()
 export class GhostModule {
+
+  @Inject()
+  private ghostApi!: GhostApi;
+
   @State()
   private ghosts!: Ghost[];
 
   constructor() {
     this.ghosts = [
-      {gene: 'token ID', evilPoint: 90, angelPoint: 80, name: 'Token Name1', level: 2},
-      {gene: 'token ID2', evilPoint: 90, angelPoint: 80, name: 'Token Name2', level: 2},
-      {gene: 'token ID3', evilPoint: 90, angelPoint: 80, name: 'Token Name3', level: 2},
-      {gene: 'token ID4', evilPoint: 90, angelPoint: 80, name: 'Token Name4', level: 2},
-      {gene: 'token ID5', evilPoint: 90, angelPoint: 80, name: 'Token Name5', level: 2},
-      {gene: 'token ID6', evilPoint: 90, angelPoint: 80, name: 'Token Name6', level: 2},
+      {
+        name: 'Token Name1',
+        gene: 'token ID',
+        tokenId: 1,
+        userAddress: 'user1',
+        level: 1,
+        angelPoint: 10,
+        devilPoint: 20,
+        createdDate: Date.now(),
+      },
+      {
+        name: 'Token Name2',
+        gene: 'token ID2',
+        tokenId: 2,
+        userAddress: 'user2',
+        level: 1,
+        angelPoint: 10,
+        devilPoint: 20,
+        createdDate: Date.now(),
+      },
+      {
+        name: 'Token Name3',
+        gene: 'token ID3',
+        tokenId: 3,
+        userAddress: 'user3',
+        level: 1,
+        angelPoint: 10,
+        devilPoint: 20,
+        createdDate: Date.now(),
+      },
+      {
+        name: 'Token Name4',
+        gene: 'token ID4',
+        tokenId: 4,
+        userAddress: 'user4',
+        level: 1,
+        angelPoint: 10,
+        devilPoint: 20,
+        createdDate: Date.now(),
+      },
+      {
+        name: 'Token Name5',
+        gene: 'token ID5',
+        tokenId: 5,
+        userAddress: 'user5',
+        level: 1,
+        angelPoint: 10,
+        devilPoint: 20,
+        createdDate: Date.now(),
+      },
+      {
+        name: 'Token Name6',
+        gene: 'token ID6',
+        tokenId: 6,
+        userAddress: 'user6',
+        level: 1,
+        angelPoint: 10,
+        devilPoint: 20,
+        createdDate: Date.now(),
+      },
     ];
   }
 
+
+  @Action()
+  public async loadGhostsByPage(page: number): Promise<void> {
+    this.ghosts = await this.ghostApi.getByPage(page);
+  }
+
   @Getter()
   public get getGhosts(): Ghost[] {
     return this.ghosts;

src/store/tokens.ts

@@ -3,4 +3,5 @@ import {Token} from 'typedi';
 
 export default {
   USER_MODULE: new Token(),
+  GHOST_MODULE: new Token(),
 };

src/types/ghost.ts

@@ -1,7 +1,10 @@
 export interface Ghost {
   readonly name: string;
   readonly gene: string;
-  readonly evilPoint: number;
-  readonly angelPoint: number;
+  readonly tokenId: number;
+  readonly userAddress: string;
   readonly level: number;
+  readonly angelPoint: number;
+  readonly devilPoint: number;
+  readonly createdDate: number;
 }