バックエンドのAPIと連携させる

client/package.json

@@ -12,7 +12,9 @@
   "dependencies": {
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "axios": "^0.21.1",
     "next": "11.1.0",
+    "nookies": "^2.5.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-query": "^3.21.1"

client/src/lib/enums/user-role-enum.ts

@@ -0,0 +1,4 @@
+export enum UserRoleEnum {
+  ADMIN = 1,
+  MEMBER = 2,
+}

client/src/lib/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  API_BASE_URI: "https://api.abelab.dev/timestamp",
+  CREDENTIALS_KEY: "Authorization",
+};

client/src/lib/model/stamp-model.ts

@@ -0,0 +1,20 @@
+// スタンプモデル
+export interface StampModel {
+  id: number;
+  title: string;
+  description: string;
+  userId: number;
+  attachments: StampAttachmentModel[];
+}
+
+// スタンプ一覧モデル
+export interface StampsModel {
+  stamps: StampModel[];
+}
+
+// 添付ファイルモデル
+export interface StampAttachmentModel {
+  id: number;
+  name: string;
+  uuid: string;
+}

client/src/lib/model/user-model.ts

@@ -0,0 +1,22 @@
+import { UserRoleEnum } from "../enums/user-role-enum";
+
+// ユーザモデル
+export interface UserModel {
+  id: number;
+  email: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+  roleId: UserRoleEnum;
+}
+
+// ユーザ一覧モデル
+export interface UsersModel {
+  users: UserModel[];
+}
+
+// アクセストークンモデル
+export interface AccessTokenModel {
+  accessToken: string;
+  tokenType: string;
+}

client/src/lib/request/login-request.ts

@@ -0,0 +1,5 @@
+// ログインAPIのリクエストボディ
+export interface LoginRequest {
+  email: string;
+  password: string;
+}

client/src/lib/request/stamp-request.ts

@@ -0,0 +1,9 @@
+// スタンプ作成APIのリクエストボディ
+export interface StampCreateRequest {
+  title: string;
+  description: string;
+  attachments: {
+    name: string;
+    content: string;
+  };
+}

client/src/lib/request/user-request.ts

@@ -0,0 +1,31 @@
+import { UserRoleEnum } from "../enums/user-role-enum";
+
+// ユーザ作成APIのリクエストボディ
+export interface UserCreateRequest {
+  email: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+  roleId: UserRoleEnum;
+}
+
+// ユーザ更新APIのリクエストボディ
+export interface UserUpdateRequest {
+  email: string;
+  firstName: string;
+  lastName: string;
+  roleId: UserRoleEnum;
+}
+
+// ログインユーザ更新APIのリクエストボディ
+export interface LoginUserUpdateRequest {
+  email: string;
+  firstName: string;
+  lastName: string;
+}
+
+// ログインユーザパスワード更新APIのリクエストボディ
+export interface LoginUserPasswordUpdateRequest {
+  currentPassword: string;
+  newPassword: string;
+}

client/src/lib/service/auth-service.ts

@@ -0,0 +1,37 @@
+import axios from "axios";
+import { parseCookies, setCookie, destroyCookie } from "nookies";
+
+import { environment } from "../environments/environment";
+import { LoginRequest } from "../request/login-request";
+import { AccessTokenModel } from "../model/user-model";
+
+export class AuthService {
+  public static login(requestBody: LoginRequest) {
+    return axios
+      .post<AccessTokenModel>(
+        `${environment.API_BASE_URI}/api/login`,
+        requestBody
+      )
+      .then((res) => {
+        const accesToken = res.data.accessToken;
+        const tokenType = res.data.tokenType;
+
+        AuthService.setCredentials(`${tokenType} ${accesToken}`);
+      });
+  }
+
+  public static setCredentials(credentials: string): void {
+    setCookie(null, environment.CREDENTIALS_KEY, credentials, {
+      maxAge: 30 * 24 * 60 * 60,
+    });
+  }
+
+  public static getCredentials(): string | undefined {
+    const cookie = parseCookies(null);
+    return cookie[environment.CREDENTIALS_KEY];
+  }
+
+  public static deleteCredentials(): void {
+    destroyCookie(null, environment.CREDENTIALS_KEY);
+  }
+}

client/src/lib/service/http-base-service.ts

@@ -0,0 +1,28 @@
+import axios from "axios";
+
+import { AuthService } from "./auth-service";
+
+export class HttpBaseService {
+  private static options = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: AuthService.getCredentials(),
+    },
+  };
+
+  public static getRequest<T>(uri: string) {
+    return axios.get<T>(uri, this.options);
+  }
+
+  public static postRequest<T>(uri: string, requstBody: any) {
+    return axios.post<T>(uri, requstBody, this.options);
+  }
+
+  public static putRequest<T>(uri: string, requstBody: any) {
+    return axios.put<T>(uri, requstBody, this.options);
+  }
+
+  public static deleteRequest<T>(uri: string) {
+    return axios.delete<T>(uri, this.options);
+  }
+}

client/src/lib/service/stamp-service.ts

@@ -0,0 +1,33 @@
+import { HttpBaseService } from "./http-base-service";
+
+import { environment } from "../environments/environment";
+import { StampsModel } from "../model/stamp-model";
+import { StampCreateRequest } from "../request/stamp-request";
+
+export class StampService {
+  public static getStamps() {
+    return HttpBaseService.getRequest<StampsModel>(
+      `${environment.API_BASE_URI}/api/stamps`
+    );
+  }
+
+  public static createStamp(requestBody: StampCreateRequest) {
+    return HttpBaseService.postRequest(
+      `${environment.API_BASE_URI}/api/stamps`,
+      requestBody
+    );
+  }
+
+  public static deleteStamp(stampId: number) {
+    return HttpBaseService.deleteRequest(
+      `${environment.API_BASE_URI}/api/stamps/${stampId}`
+    );
+  }
+
+  public static downloadStamp(attachmentId: number) {
+    // FIXME: ヘッダーからファイル情報を取り出して
+    return HttpBaseService.getRequest(
+      `${environment.API_BASE_URI}/api/stamps/attachments/${attachmentId}`
+    );
+  }
+}

client/src/lib/service/user-service.ts

@@ -0,0 +1,60 @@
+import { HttpBaseService } from "./http-base-service";
+
+import { environment } from "../environments/environment";
+import { UserModel, UsersModel } from "../model/user-model";
+import {
+  LoginUserUpdateRequest,
+  LoginUserPasswordUpdateRequest,
+  UserCreateRequest,
+  UserUpdateRequest,
+} from "../request/user-request";
+
+export class UserService {
+  public static getUsers() {
+    return HttpBaseService.getRequest<UsersModel>(
+      `${environment.API_BASE_URI}/api/users`
+    );
+  }
+
+  public static createUser(requestBody: UserCreateRequest) {
+    return HttpBaseService.postRequest(
+      `${environment.API_BASE_URI}/api/users`,
+      requestBody
+    );
+  }
+
+  public static updateUser(userId: number, requestBody: UserUpdateRequest) {
+    return HttpBaseService.putRequest(
+      `${environment.API_BASE_URI}/api/users/${userId}`,
+      requestBody
+    );
+  }
+
+  public static deleteUser(userId: number) {
+    return HttpBaseService.deleteRequest(
+      `${environment.API_BASE_URI}/api/users/${userId}`
+    );
+  }
+
+  public static getLoginUser() {
+    return HttpBaseService.getRequest<UserModel>(
+      `${environment.API_BASE_URI}/api/users/me`
+    );
+  }
+
+  public static updateLoginUser(requestBody: LoginUserUpdateRequest) {
+    return HttpBaseService.putRequest(
+      `${environment.API_BASE_URI}/api/users/me`,
+      requestBody
+    );
+  }
+
+  public static updateLoginUserPassword(
+    requestBody: LoginUserPasswordUpdateRequest
+  ) {
+    return HttpBaseService.putRequest(
+      `${environment.API_BASE_URI}/api/users/me/password`,
+      requestBody
+    );
+  }
+}

client/src/pages/index.tsx

@@ -3,6 +3,7 @@ import styles from "../styles/Home.module.css";
 import Header from "../components/Header";
 import { Footer } from "../components/Footer";
 
+
 export default function Home() {
   return (
     <div className={styles.container}>

client/yarn.lock

@@ -640,6 +640,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.3.tgz#b55cd8e8ddf659fe89b064680e1c6a4dceab0325"
   integrity sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -1002,6 +1009,11 @@ convert-source-map@1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+cookie@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
+  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
+
 core-js-pure@^3.16.0:
   version "3.16.4"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.16.4.tgz#8b23122628d88c560f209812b9b2d9ebbce5e29c"
@@ -1768,6 +1780,11 @@ flatten@^1.0.2:
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
   integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
 
+follow-redirects@^1.10.0:
+  version "1.14.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.2.tgz#cecb825047c00f5e66b142f90fed4f515dec789b"
+  integrity sha512-yLR6WaE2lbF0x4K2qE2p9PEXKLDjUjnR/xmjS3wHAYxtlsI9MLLBJUZirAHKzUZDGLxje7w/cXR49WOUo4rbsA==
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
@@ -2723,6 +2740,14 @@ node-releases@^1.1.71, node-releases@^1.1.75:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.75.tgz#6dd8c876b9897a1b8e5a02de26afa79bb54ebbfe"
   integrity sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==
 
+nookies@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/nookies/-/nookies-2.5.2.tgz#cc55547efa982d013a21475bd0db0c02c1b35b27"
+  integrity sha512-x0TRSaosAEonNKyCrShoUaJ5rrT5KHRNZ5DwPCuizjgrnkpE5DRf3VL7AyyQin4htict92X1EQ7ejDbaHDVdYA==
+  dependencies:
+    cookie "^0.4.1"
+    set-cookie-parser "^2.4.6"
+
 normalize-package-data@^2.3.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -3805,6 +3830,11 @@ semver@^7.2.1, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+set-cookie-parser@^2.4.6:
+  version "2.4.8"
+  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.4.8.tgz#d0da0ed388bc8f24e706a391f9c9e252a13c58b2"
+  integrity sha512-edRH8mBKEWNVIVMKejNnuJxleqYE/ZSdcT8/Nem9/mmosx12pctd80s2Oy00KNZzrogMZS5mauK2/ymL1bvlvg==
+
 setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"