From 70b29283b5580a9578fef6351da929f8ad7f1fd5 Mon Sep 17 00:00:00 2001 From: Geunwon Lim Date: Sun, 15 Mar 2020 12:04:53 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20ghost=20type=EC=9D=84=20=EC=84=9C?= =?UTF-8?q?=EB=B2=84(hatchout)=EC=99=80=20=EC=9D=BC=EC=B9=98=EC=8B=9C?= =?UTF-8?q?=ED=82=A4=EA=B3=A0,=20=EC=84=9C=EB=B2=84=20api=EB=A5=BC=20?= =?UTF-8?q?=ED=98=B8=EC=B6=9C=ED=95=98=EB=8F=84=EB=A1=9D=20=ED=95=A8(#39,?= =?UTF-8?q?=20#40)=20(#41)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: GhostApi - getByPage() * feat: sync ghost type with server [ISSUE: 40] * feat: call ghost api at hatchout [ISSUE:#39] --- src/api/ghost/ghost.api.spec.ts | 36 ++++++++ src/api/ghost/ghost.api.ts | 14 ++++ src/api/user/user.api.spec.ts | 2 +- .../sections/MarketPlaceSection.vue | 4 + src/store/index.ts | 8 +- src/store/modules/ghost.ts | 82 +++++++++++++++++-- src/store/tokens.ts | 1 + src/types/ghost.ts | 7 +- 8 files changed, 143 insertions(+), 11 deletions(-) create mode 100644 src/api/ghost/ghost.api.spec.ts create mode 100644 src/api/ghost/ghost.api.ts diff --git a/src/api/ghost/ghost.api.spec.ts b/src/api/ghost/ghost.api.spec.ts new file mode 100644 index 0000000..4eb905b --- /dev/null +++ b/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); + }); + }); +}); diff --git a/src/api/ghost/ghost.api.ts b/src/api/ghost/ghost.api.ts new file mode 100644 index 0000000..4df1b47 --- /dev/null +++ b/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 { + return await this. httpClient.call('GET', `${this.domain}?page=${page}`); + } +} diff --git a/src/api/user/user.api.spec.ts b/src/api/user/user.api.spec.ts index dc75f48..a1da859 100644 --- a/src/api/user/user.api.spec.ts +++ b/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); diff --git a/src/components/sections/MarketPlaceSection.vue b/src/components/sections/MarketPlaceSection.vue index a216b15..0b62906 100644 --- a/src/components/sections/MarketPlaceSection.vue +++ b/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; diff --git a/src/store/index.ts b/src/store/index.ts index 5129e7d..e963ec1 100644 --- a/src/store/index.ts +++ b/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(); + diff --git a/src/store/modules/ghost.ts b/src/store/modules/ghost.ts index 1a7b1ae..037272c 100644 --- a/src/store/modules/ghost.ts +++ b/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 { + this.ghosts = await this.ghostApi.getByPage(page); + } + @Getter() public get getGhosts(): Ghost[] { return this.ghosts; diff --git a/src/store/tokens.ts b/src/store/tokens.ts index 9ecb612..04ac8e2 100644 --- a/src/store/tokens.ts +++ b/src/store/tokens.ts @@ -3,4 +3,5 @@ import {Token} from 'typedi'; export default { USER_MODULE: new Token(), + GHOST_MODULE: new Token(), }; diff --git a/src/types/ghost.ts b/src/types/ghost.ts index d90b25a..2cdac98 100644 --- a/src/types/ghost.ts +++ b/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; }