マイルストーン編集用のfetchロジックを作る

.env.local.sample

@@ -4,3 +4,4 @@ NEXT_PUBLIC_FIREBASE_PROJECT_ID=
 NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
 NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
 NEXT_PUBLIC_FIREBASE_APP_ID=
+NEXT_PUBLIC_BACKEND_DOMAIN=

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@protobuf-ts/plugin": "^2.9.4",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "firebase": "^10.8.1",
     "next": "14.1.3",
     "react": "^18",

src/hooks/useApiPBClient.ts

@@ -0,0 +1,64 @@
+import axios from "axios";
+
+const useApiPBClient = () => {
+  interface BackendResponse {
+    data: any;
+    unauthorized: boolean;
+    error: any;
+  }
+
+  // get access token
+  const token = localStorage.getItem("token");
+  const headers = {
+    "Content-Type": "application/octet-stream",
+    ...(token ? { Authorization: `Bearer ${token}` } : {}),
+  };
+
+  const get = async (
+    url: string,
+    params?: Record<string, any>,
+  ): Promise<BackendResponse> => {
+    return await axios
+      .get(process.env.NEXT_PUBLIC_BACKEND_DOMAIN + url, { params, headers })
+      .then((resp) => {
+        if (resp.status < 210) {
+          return { data: resp.data, unauthorized: false, error: null };
+        }
+        if (resp.status === 401) {
+          return { data: null, unauthorized: true, error: resp.status };
+        }
+        return { data: null, unauthorized: false, error: resp.statusText };
+      });
+  };
+
+  const put = async (url: string, body: any): Promise<BackendResponse> => {
+    return await axios
+      .put(process.env.NEXT_PUBLIC_BACKEND_DOMAIN + url, body, { headers })
+      .then((resp) => {
+        if (resp.status < 210) {
+          return { data: resp.data, unauthorized: false, error: null };
+        }
+        if (resp.status === 401) {
+          return { data: null, unauthorized: true, error: resp.status };
+        }
+        return { data: null, unauthorized: false, error: resp.statusText };
+      });
+  };
+
+  const post = async (url: string, body: any): Promise<BackendResponse> => {
+    return await axios
+      .post(process.env.NEXT_PUBLIC_BACKEND_DOMAIN + url, body, { headers })
+      .then((resp) => {
+        if (resp.status < 210) {
+          return { data: resp.data, unauthorized: false, error: null };
+        }
+        if (resp.status === 401) {
+          return { data: null, unauthorized: true, error: resp.status };
+        }
+        return { data: null, unauthorized: false, error: resp.statusText };
+      });
+  };
+  return { get, put, post };
+};
+
+export default useApiPBClient;

src/hooks/useFetchMilestone.ts

@@ -0,0 +1,63 @@
+"use client";
+import axios from "axios";
+import {
+  Milestone,
+  MilestoneCreateRequest,
+  MilestoneCreateResponse,
+} from "../../proto/typescript/pb_out/main";
+
+import useApiPBClient from "@/hooks/useApiPBClient";
+
+const protobuf = require("protobufjs");
+
+const useFetchMilestone = () => {
+  const client = useApiPBClient();
+
+  const create = async (
+    newMilestoen: MilestoneCreateRequest,
+  ): Promise<MilestoneCreateResponse> => {
+    return await client.post("/milestone", newMilestoen).then((resp) => {
+      if (resp.unauthorized) {
+        throw new Error("unauthorized");
+      }
+      if (resp.error) {
+        throw new Error(resp.error);
+      }
+      return MilestoneCreateResponse.fromBinary(resp.data);
+    });
+  };
+
+  const update = async (
+    newMilestoen: MilestoneCreateRequest,
+  ): Promise<MilestoneUpdateResponse> => {
+    return await client
+      .put(`/milestone/${newMilestoen.milestone?.milestoneId}`, newMilestoen)
+      .then((resp) => {
+        if (resp.unauthorized) {
+          throw new Error("unauthorized");
+        }
+        if (resp.error) {
+          throw new Error(resp.error);
+        }
+        return MilestoneUpdateResponse.fromBinary(resp.data);
+      });
+  };
+
+  const _delete = async (
+    milestoneId: string,
+  ): Promise<MilestoneDeleteResponse> => {
+    return await client.delete(`/milestone/${milestoneId}`).then((resp) => {
+      if (resp.unauthorized) {
+        throw new Error("unauthorized");
+      }
+      if (resp.error) {
+        throw new Error(resp.error);
+      }
+      return MilestoneDeleteResponse.fromBinary(resp.data);
+    });
+  };
+
+  return { create, update, _delete };
+};
+
+export default useFetchMilestone;

src/hooks/useFetchUser.ts

@@ -0,0 +1,80 @@
+"use client";
+import axios from "axios";
+import {
+  UserData,
+  UserInfoResponse,
+  UserInfosResponse,
+} from "../../proto/typescript/pb_out/main";
+import useApiPBClient from "@/hooks/useApiPBClient";
+
+const protobuf = require("protobufjs");
+
+const useFetchUser = () => {
+  const client = useApiPBClient();
+
+  const me = async (): Promise<UserInfoResponse> => {
+    return await client.get(`/api/v1/user/info/me`).then((resp) => {
+      if (resp.unauthorized) {
+        throw new Error("unauthorized");
+      }
+      if (resp.error) {
+        throw new Error(resp.error);
+      }
+      return UserInfoResponse.fromBinary(resp.data);
+    });
+  };
+
+  const get = async (userId: string): Promise<UserInfoResponse> => {
+    return await client.get(`/api/v1/user/info/${userId}`).then((resp) => {
+      if (resp.unauthorized) {
+        throw new Error("unauthorized");
+      }
+      if (resp.error) {
+        throw new Error(resp.error);
+      }
+      return UserInfoResponse.fromBinary(resp.data);
+    });
+  };
+
+  const list = async (): Promise<UserInfosResponse> => {
+    return await client.get("/api/v1/user/info/").then((resp) => {
+      if (resp.unauthorized) {
+        throw new Error("unauthorized");
+      }
+      if (resp.error) {
+        throw new Error(resp.error);
+      }
+      return UserInfosResponse.fromBinary(resp.data);
+    });
+  };
+
+  const create = async (newUser: UserData): Promise<UserInfoResponse> => {
+    return await client.put(`/user/${newUser.userId}`, newUser).then((resp) => {
+      if (resp.unauthorized) {
+        throw new Error("unauthorized");
+      }
+      if (resp.error) {
+        throw new Error(resp.error);
+      }
+      return UserInfoResponse.fromBinary(resp.data);
+    });
+  };
+
+  //   const icon = async (userId: string, file: File) => {
+  //     return await client.put(
+  //         `/user/${userId}/icon`,
+  //         ).then((resp) => {
+  //         if (resp.unauthorized) {
+  //             throw new Error("unauthorized");
+  //           }
+  //           if (resp.error) {
+  //             throw new Error(resp.error);
+  //           }
+  //           return UserInfoResponse.fromBinary(resp.data)
+  //     })
+  //   }
+
+  return { me, get, list, create };
+};
+
+export default useFetchUser;

src/hooks/useImageUploder.ts

@@ -0,0 +1,38 @@
+import axios from "axios";
+const protobuf = require("protobufjs");
+
+const useImageUploder = () => {
+  const upload = async (image: File): Promise<string | void> => {
+    const token = localStorage.getItem("token");
+
+    const ImageUploadRequest = protobuf.roots.default.lookupType(
+      "main.ImageUploadRequest",
+    );
+    const payload = { image: image };
+    const errMsg = ImageUploadRequest.verify(payload);
+    if (errMsg) throw Error(`ImageUploadRequest: ${errMsg}`);
+
+    const imageUpload = ImageUploadRequest.create(payload);
+    const buffer = ImageUploadRequest.encode(imageUpload).finish();
+    await axios
+      .post(`${process.env.BACKEND_DOMAIN}/api/v1/image/upload`, buffer, {
+        headers: {
+          Authorization: `token ${token}`,
+        },
+      })
+      .then((response) => {
+        const ImageUploadResponse = protobuf.roots.default.lookupType(
+          "main.ImageUploadResponse",
+        );
+        const res = ImageUploadResponse.decode(new Uint8Array(response.data));
+        return res;
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  return { upload };
+};
+
+export default useImageUploder;

tsconfig.json

@@ -21,6 +21,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/app/api/tmp/route.ts"
+  ],
   "exclude": ["node_modules"]
 }