setup axios

Author: rockstarr-programmerr

.env.development

@@ -0,0 +1 @@
+VUE_APP_API_ROOT=http://localhost:8000

src/api/endpoints.ts

@@ -0,0 +1,11 @@
+export const endpoints = {
+  users: {
+    login: '/users/login/',
+    tokenRefresh: '/users/token-refresh/',
+    registerTeacher: '/users/register-teacher/'
+  }
+}
+
+export function replacePk (endpoint: string, pk: number): string {
+  return endpoint.replace('<pk>', pk.toString())
+}

src/api/index.ts

@@ -0,0 +1,5 @@
+import { users } from './users'
+
+export const Api = {
+  users,
+}

src/api/users.ts

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import { endpoints } from './endpoints'
+import {
+  LoginReq, LoginRes,
+  RegisterTeacherReq, RegisterTeacherRes, TokenRefreshReq, TokenRefreshRes
+} from '@/interfaces/api/user'
+
+export const users = {
+  async registerTeacher (reqBody: RegisterTeacherReq): Promise<RegisterTeacherRes> {
+    const res = await Vue.axios.post(endpoints.users.registerTeacher, reqBody)
+    return {
+      name: res.data.name,
+      email: res.data.email,
+      phoneNumber: res.data.phone_number
+    }
+  },
+
+  async login (reqBody: LoginReq): Promise<LoginRes> {
+    const res = await Vue.axios.post(endpoints.users.login, reqBody)
+    return {
+      access: res.data.access,
+      refresh: res.data.refresh
+    }
+  },
+
+  async tokenRefresh (reqBody: TokenRefreshReq): Promise<TokenRefreshRes> {
+    const res = await Vue.axios.post(endpoints.users.tokenRefresh, reqBody)
+    return {
+      access: res.data.access,
+      refresh: res.data.refresh
+    }
+  },
+}

src/interfaces/api/user.ts

@@ -0,0 +1,31 @@
+export declare interface LoginReq {
+  name: string;
+  password: string;
+}
+
+export declare interface LoginRes {
+  access: string;
+  refresh: string;
+}
+
+export declare interface TokenRefreshReq {
+  refresh: string;
+}
+
+export declare interface TokenRefreshRes {
+  access: string;
+  refresh: string;
+}
+
+export declare interface RegisterTeacherReq {
+  email: string;
+  password: string;
+  name?: string;
+  phoneNumber?: string;
+}
+
+export declare interface RegisterTeacherRes {
+  email: string;
+  name: string;
+  phoneNumber: string;
+}

src/interfaces/group.ts

@@ -0,0 +1,8 @@
+import { User } from './user'
+
+export declare interface Group {
+  pk: number;
+  name: string;
+  owner: User;
+  members: User[];
+}

src/interfaces/store/groups.ts

@@ -0,0 +1,12 @@
+import { Group } from '../group'
+
+export declare type GroupWithState = Group & {
+  editing: boolean,
+  loading: boolean,
+  nameErrs: string[]
+}
+
+export declare interface GroupsState {
+  groups: GroupWithState[];
+  currentGroup?: GroupWithState;
+}

src/interfaces/user.ts

@@ -0,0 +1,5 @@
+export declare interface User {
+  pk: number;
+  username: string;
+  email: string;
+}

src/interfaces/vuetify.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+export declare type VForm = Vue & {
+  validate: () => boolean;
+  resetValidation: () => void;
+  reset: () => void;
+}

src/plugins/axios.d.ts

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import { AxiosStatic } from 'axios'
+
+declare module 'vue/types/vue' {
+  interface VueConstructor {
+    axios: AxiosStatic;
+  }
+}