feat: implement entities api (#4)

package.json

@@ -15,6 +15,7 @@
     "ci:spell": "cspell --config .cspell.json \"**/*.{js,ts,tsx,md,html}\" --quiet"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.24.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1"

src/app/App.tsx

@@ -1,8 +1,13 @@
-import RouterProvider from "./providers/RouterProvider";
+import { QueryClientProvider } from "./providers/query-client.provider";
+import { RouterProvider } from "./providers/router.provider";
 import "./styles/normalize.css";
 
 const App = () => {
-  return <RouterProvider />;
+  return (
+    <QueryClientProvider>
+      <RouterProvider />
+    </QueryClientProvider>
+  );
 };
 
 export default App;

src/app/providers/query-client.provider.tsx

@@ -0,0 +1,15 @@
+import {
+  QueryClient,
+  QueryClientProvider as TanstackQueryClientProvider,
+} from "@tanstack/react-query";
+import { PropsWithChildren } from "react";
+
+const queryClient = new QueryClient();
+
+export const QueryClientProvider = ({ children }: PropsWithChildren) => {
+  return (
+    <TanstackQueryClientProvider client={queryClient}>
+      {children}
+    </TanstackQueryClientProvider>
+  );
+};

src/app/providers/RouterProvider.tsx → src/app/providers/router.provider.tsx

@@ -16,6 +16,4 @@ const router = createBrowserRouter([
   },
 ]);
 
-const RouterProvider = () => <ReactRouterProvider router={router} />;
-
-export default RouterProvider;
+export const RouterProvider = () => <ReactRouterProvider router={router} />;

src/entities/link-book/api/create-link-book.ts

@@ -0,0 +1,7 @@
+import { HttpMethod, fetcher } from "@/shared/lib/fetcher";
+import type { CreateLinkBookDto } from "./dto/create-link-book.dto";
+
+export const createLinkBook = (dto: CreateLinkBookDto) =>
+  fetcher.fetch(HttpMethod.POST, "/link-books", {
+    body: dto,
+  });

src/entities/link-book/api/delete-link-book.ts

@@ -0,0 +1,6 @@
+import { HttpMethod, fetcher } from "@/shared/lib/fetcher";
+import type { GetLinkBooksDto } from "./dto/get-link-books.dto";
+
+export const deleteLinkBook = (id: string) => {
+  return fetcher.fetch<GetLinkBooksDto>(HttpMethod.DELETE, `/link-books/${id}`);
+};

src/entities/link-book/api/dto/create-link-book.dto.ts

@@ -0,0 +1,6 @@
+export type CreateLinkBookDto = {
+  backgroundColor: string;
+  illustration: string;
+  title: string;
+  titleColor: string;
+};

src/entities/link-book/api/dto/get-link-books.dto.ts

@@ -0,0 +1,15 @@
+export interface GetLinkBooksDto {
+  linkBooks: {
+    backgroundColor: string;
+    createdAt: string;
+    illustration: string;
+    isDefault: string;
+    lastSavedAt: string;
+    linkBookId: string;
+    linkCount: number;
+    title: string;
+    titleColor: string;
+    userId: string;
+  }[];
+  totalLinkCount: number;
+}

src/entities/link-book/api/dto/update-link-book.dto.ts

@@ -0,0 +1,6 @@
+export type UpdateLinkBookDto = {
+  backgroundColor: string;
+  illustration: string;
+  title: string;
+  titleColor: string;
+};

src/entities/link-book/api/get-link-books.ts

@@ -0,0 +1,12 @@
+import { HttpMethod, fetcher } from "@/shared/lib/fetcher";
+import { mapLinkBooks } from "@/entities/link-book/api/mapper/link-books.map";
+import type { GetLinkBooksDto } from "./dto/get-link-books.dto";
+
+export const getLinkBooks = (query: {
+  sort: "created_at" | "last_saved_at" | "title";
+}) =>
+  fetcher
+    .fetch<GetLinkBooksDto>(HttpMethod.GET, "/api/link-books", {
+      query,
+    })
+    .then(mapLinkBooks);

src/entities/link-book/api/mapper/link-books.map.ts

@@ -0,0 +1,18 @@
+import type { LinkBook } from "../../model/link-book";
+import type { GetLinkBooksDto } from "../dto/get-link-books.dto";
+
+export const mapLinkBooks = (
+  response: GetLinkBooksDto,
+): {
+  linkBooks: LinkBook[];
+  totalLinkCount: number;
+} => {
+  return {
+    linkBooks: response.linkBooks.map((linkBook) => ({
+      ...linkBook,
+      createdAt: new Date(linkBook.createdAt),
+      lastSavedAt: new Date(linkBook.lastSavedAt),
+    })),
+    totalLinkCount: response.totalLinkCount,
+  };
+};

src/entities/link-book/api/update-link-book.ts

@@ -0,0 +1,9 @@
+import { HttpMethod, fetcher } from "@/shared/lib/fetcher";
+import type { GetLinkBooksDto } from "./dto/get-link-books.dto";
+import type { UpdateLinkBookDto } from "./dto/update-link-book.dto";
+
+export const updateLinkBook = (id: string, dto: UpdateLinkBookDto) => {
+  return fetcher.fetch<GetLinkBooksDto>(HttpMethod.PUT, `/link-books/${id}`, {
+    body: dto,
+  });
+};

src/entities/link-book/model/link-book.ts

@@ -0,0 +1,12 @@
+export interface LinkBook {
+  backgroundColor: string;
+  createdAt: Date;
+  illustration: string;
+  isDefault: string;
+  lastSavedAt: Date;
+  linkBookId: string;
+  linkCount: number;
+  title: string;
+  titleColor: string;
+  userId: string;
+}

src/entities/notification/api/dto/get-notifications.dto.ts

@@ -0,0 +1,21 @@
+export interface GetNotificationsDto {
+  notifications: [
+    {
+      body: string;
+      createdAt: string;
+      isRead: boolean;
+      notificationId: string;
+      title: string;
+      type: string;
+      userId: string;
+    },
+  ];
+  page: {
+    next: number;
+    page: number;
+    perPage: number;
+    prev: number;
+    total: number;
+    totalPage: number;
+  };
+}

src/entities/notification/api/get-notifications.ts

@@ -0,0 +1,12 @@
+import { HttpMethod, fetcher } from "@/shared/lib/fetcher";
+import type { GetNotificationsDto } from "./dto/get-notifications.dto";
+import { mapNotifications } from "./mapper/notifications.map";
+
+export const getNotifications = (page: number) =>
+  fetcher
+    .fetch<GetNotificationsDto>(HttpMethod.GET, "/notifications", {
+      query: {
+        page,
+      },
+    })
+    .then(mapNotifications);

src/entities/notification/api/mapper/notifications.map.ts

@@ -0,0 +1,17 @@
+import { Notification } from "../../model/notification";
+import type { GetNotificationsDto } from "../dto/get-notifications.dto";
+
+export const mapNotifications = (
+  response: GetNotificationsDto,
+): {
+  notifications: Notification[];
+  page: GetNotificationsDto["page"];
+} => {
+  return {
+    notifications: response.notifications.map((notification) => ({
+      ...notification,
+      createdAt: new Date(notification.createdAt),
+    })),
+    page: response.page,
+  };
+};

src/entities/notification/model/notification.ts

@@ -0,0 +1,9 @@
+export interface Notification {
+  body: string;
+  createdAt: Date;
+  isRead: boolean;
+  notificationId: string;
+  title: string;
+  type: string;
+  userId: string;
+}

src/pages/root/index.tsx

@@ -1,5 +1,5 @@
 const RootPage = () => {
-  return <>Root Page</>;
+  return <></>;
 };
 
 export default RootPage;

src/shared/lib/fetcher.ts

@@ -0,0 +1,59 @@
+export enum HttpMethod {
+  GET = "GET",
+  POST = "POST",
+  PUT = "PUT",
+  DELETE = "DELETE",
+}
+
+export type FetchQuery = Record<string, string | number>;
+export type FetchBody = Record<string, unknown>;
+
+export type FetchOptions = {
+  query?: FetchQuery;
+  body?: FetchBody;
+};
+
+type FetcherConfig = {
+  baseUrl?: string;
+};
+
+class Fetcher {
+  constructor(private config: FetcherConfig) {}
+
+  public async fetch<T>(
+    method: HttpMethod,
+    endpoint: string,
+    options?: FetchOptions,
+  ): Promise<T> {
+    const response = await fetch(this.getUrl(endpoint, options?.query), {
+      method,
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: import.meta.env.AUTHORIZATION,
+      },
+      body: options?.body ? JSON.stringify(options.body) : undefined,
+    });
+
+    if (!response.ok) {
+      //
+    }
+    return await response.json();
+  }
+
+  private getUrl(
+    endpoint: string,
+    query?: Record<string, string | number>,
+  ): string {
+    const url = new URL(endpoint, this.config.baseUrl);
+    if (query) {
+      Object.entries(query).forEach(([key, value]) => {
+        url.searchParams.append(key, value.toString());
+      });
+    }
+    return url.toString();
+  }
+}
+
+export const fetcher = new Fetcher({
+  baseUrl: import.meta.env.BASE_URL,
+});

tsconfig.json

@@ -22,7 +22,9 @@
 
     "paths": {
       "@/app/*": ["./src/app/*"],
-      "@/pages/*": ["./src/pages/*"]
+      "@/pages/*": ["./src/pages/*"],
+      "@/shared/*": ["./src/shared/*"],
+      "@/entities/*": ["./src/entities/*"]
     }
   },
   "include": ["src"],

vite.config.ts

@@ -5,4 +5,12 @@ import tsconfigPaths from "vite-tsconfig-paths";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), tsconfigPaths()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://49.50.165.241/",
+        changeOrigin: true,
+      },
+    },
+  },
 });

yarn.lock

@@ -1622,6 +1622,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/query-core@npm:5.24.8":
+  version: 5.24.8
+  resolution: "@tanstack/query-core@npm:5.24.8"
+  checksum: 3c3d51f1c6e049ac9f6f7c36cefc640b3266d9a91307cbfc02e4ce6b4e1cf68de1b8f0243fca20c86d8cf616e334579dc123424aed9daedc32a92e5c9e97ca64
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query@npm:^5.24.8":
+  version: 5.24.8
+  resolution: "@tanstack/react-query@npm:5.24.8"
+  dependencies:
+    "@tanstack/query-core": "npm:5.24.8"
+  peerDependencies:
+    react: ^18.0.0
+  checksum: f2d7d3ba93e5cd7ff5d21e91e2670bdcfd864741c13e7cca93c996f8b61738cb16796e3702d0aa5b9ba36c5c15ffdc068466662c0de40baf9c45c053559b3fdd
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.20.5":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
@@ -4242,6 +4260,7 @@ __metadata:
   dependencies:
     "@html-eslint/eslint-plugin": "npm:^0.23.1"
     "@html-eslint/parser": "npm:^0.23.0"
+    "@tanstack/react-query": "npm:^5.24.8"
     "@types/jest": "npm:^29.5.12"
     "@types/react": "npm:^18.2.56"
     "@types/react-dom": "npm:^18.2.19"