From 9b76a4e3ca87141a0f5b320fd33e2e1754c16bb8 Mon Sep 17 00:00:00 2001
From: tim <tim.veenendaal@gmail.com>
Date: Mon, 5 Jul 2021 01:34:57 +0200
Subject: [PATCH] Implement api client and add first test call to create api

---
 src/objects/objects.ts    | 16 ++++++++++++++++
 src/router/index.ts       |  3 +--
 src/services/PerudoApi.ts | 28 ++++++++++++++++++++++++++++
 src/views/Home.vue        | 12 ++++++++++--
 4 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 src/objects/objects.ts
 create mode 100644 src/services/PerudoApi.ts

diff --git a/src/objects/objects.ts b/src/objects/objects.ts
new file mode 100644
index 0000000..f488646
--- /dev/null
+++ b/src/objects/objects.ts
@@ -0,0 +1,16 @@
+export interface ApiObject {
+}
+
+export interface ResponseObject<T extends ApiObject> {
+  date: T
+}
+
+export interface PlayerObject {
+  id: string,
+  name: string,
+}
+
+export interface CreateGameObject extends ApiObject {
+  player: PlayerObject,
+  code: string,
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 7d2f012..3722147 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
@@ -8,7 +7,7 @@ const routes: Array<RouteConfig> = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: () => import('../views/Home.vue')
   },
   {
     path: '/about',
diff --git a/src/services/PerudoApi.ts b/src/services/PerudoApi.ts
new file mode 100644
index 0000000..df6b55b
--- /dev/null
+++ b/src/services/PerudoApi.ts
@@ -0,0 +1,28 @@
+import axios, { AxiosPromise, AxiosRequestConfig, AxiosResponse } from 'axios'
+import {ApiObject, CreateGameObject} from "@/objects/objects";
+
+export default class PerudoApi {
+  private static baseUrl = 'http://localhost:8000/'
+
+  private static objectInstance?: PerudoApi;
+
+  public static get instance(): PerudoApi {
+    if(typeof PerudoApi.objectInstance === 'undefined') {
+      PerudoApi.objectInstance = new PerudoApi();
+    }
+    return PerudoApi.objectInstance;
+  }
+
+  public createGame(name: string):Promise<CreateGameObject> {
+    return this.get<CreateGameObject>(PerudoApi.baseUrl + 'game/create?name=' + name)
+      .then((response: AxiosResponse<CreateGameObject>) => {
+        return response.data;
+      })
+  }
+
+  private get<T = any>(url: string, getParameters?: Record<string, any>) {
+    return axios.get(url).then((response: AxiosResponse<T>) => {
+      return response;
+    })
+  }
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b0964a2..a724b69 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -7,12 +7,20 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+import PerudoApi from "@/services/PerudoApi";
+import {CreateGameObject} from "@/objects/objects"; // @ is an alias to /src
 
 @Component({
   components: {
     HelloWorld
   }
 })
-export default class Home extends Vue {}
+export default class Home extends Vue {
+  public mounted() {
+    PerudoApi.instance.createGame('Tosti').then((response: CreateGameObject) => {
+      console.log(response);
+    })
+  }
+}
 </script>