feat(ui): Add books list

docs/entities.plantuml

@@ -27,7 +27,6 @@ entity Tag {
 note top
     Allows to group books by some feature like: genre, author, and etc.
 end note
-
 entity Book {
     * id : UUID
     --

ui/package.json

@@ -23,6 +23,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1",
     "react-oidc-context": "^2.3.0",
+    "react-pdf": "^7.5.1",
     "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
@@ -40,6 +41,7 @@
     "miragejs": "^0.1.47",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
+    "vite-plugin-static-copy": "^0.17.0",
     "vite-tsconfig-paths": "^4.2.1"
   }
 }

ui/src/entities/book/index.ts

@@ -0,0 +1,2 @@
+export * as bookModel from "./model";
+export * from "./ui";

ui/src/entities/book/model/index.ts

@@ -0,0 +1,12 @@
+import { combine, createEffect, createStore } from "effector";
+import api from "shared/api";
+import type { Book } from "shared/api/book";
+
+export const getBookListFx = createEffect((cursor?: string) => api.book.list(cursor));
+export const $getBookListFxLoading = getBookListFx.pending;
+
+export const $books = createStore<Book[]>([])
+    .on(getBookListFx.doneData, (_, book) => book.data);
+
+export const $booksList = combine($books, (books) => Object.values(books));
+export const $booksListEmpty = $booksList.map((list) => list.length === 0);

ui/src/entities/book/ui/book-row/index.tsx

@@ -0,0 +1,12 @@
+import { Row } from "antd";
+import { Book } from "shared/api/book";
+
+export interface BookRowProps {
+  data: Book
+}
+
+export const BookRow: React.FC<BookRowProps> = ({ data }) => (
+    <Row>
+        {data.title}
+    </Row>
+);

ui/src/entities/book/ui/index.ts

@@ -0,0 +1 @@
+export * from "./book-row";

ui/src/entities/storage/ui/storage-row/index.tsx

@@ -5,7 +5,8 @@ export interface StorageRowProps {
   data: Storage
 }
 
-export const StorageRow: React.FC<StorageRowProps> = ({ data }) => <Row>
-    {data.name}
-</Row>;
-
+export const StorageRow: React.FC<StorageRowProps> = ({ data }) => (
+    <Row>
+        {data.name}
+    </Row>
+);

ui/src/pages/main/index.tsx

@@ -1,7 +1,61 @@
-import { Layout } from "antd";
+import { list, variant } from "@effector/reflect";
+import { Col, Empty, Layout, Spin } from "antd";
+import { combine } from "effector";
+import { bookModel } from "entities/book";
+import { BookRow } from "entities/book/ui/book-row";
+import { Book } from "shared/api/book";
 
 const MainPage: React.FC = () => (
     <Layout>
+        <BooksList/>
     </Layout>
 );
+
+const Item: React.FC<{ book: Book }> = ({ book }) => (
+    <Col>
+        <BookRow
+            data={book}
+        />
+    </Col>
+);
+
+const TasksList = list({
+    view: Item,
+    source: bookModel.$booksList,
+    mapItem: {
+        book: (book) => book,
+    },
+    getKey: (book) => book.id,
+});
+
+// eslint-disable-next-line effector/enforce-store-naming-convention
+const BooksList = variant({
+    source: combine(
+        {
+            isLoading: bookModel.$getBookListFxLoading,
+            isEmpty: bookModel.$booksListEmpty,
+        },
+        ({ isLoading, isEmpty }) => {
+            switch (true) {
+            case isLoading:
+                return "loading";
+
+            case isEmpty:
+                return "empty";
+            }
+
+            return "ready";
+        },
+    ),
+    cases: {
+        loading: () => <Spin size="large" />,
+        empty: () => <Empty description="No books found" />,
+        ready: TasksList,
+    },
+    hooks: {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        mounted: bookModel.getBookListFx.prepend(() => { }),
+    },
+});
+
 export default MainPage;

ui/src/pages/storage-list/index.tsx

@@ -10,11 +10,13 @@ const StorageListPage: React.FC = () => (
     </Layout>
 );
 
-const Item: React.FC<{ storage: Storage }> = ({ storage }) => <Col>
-    <StorageRow
-        data={storage}
-    />
-</Col>;
+const Item: React.FC<{ storage: Storage }> = ({ storage }) => (
+    <Col>
+        <StorageRow
+            data={storage}
+        />
+    </Col>
+);
 
 const TasksList = list({
     view: Item,

ui/src/shared/api/book.ts

@@ -0,0 +1,49 @@
+import AbstractAPI, { Query } from "./abstract";
+import { PaginatedData } from "./types";
+
+class API extends AbstractAPI {
+    public async list(cursor?: string): Promise<PaginatedData<Book>> {
+        const query: Query = {};
+
+        if (cursor) {
+            query["cursor"] = cursor;
+        }
+
+        const resp = await this.request("GET", "/api/books", query);
+        const json = await resp.json();
+
+        return json;
+    }
+
+    public async get(id: string): Promise<Book> {
+        const resp = await this.request("GET", `/api/books/${id}`);
+        const json = await resp.json();
+
+        return json;
+    }
+}
+
+export interface Book {
+  id: string,
+  title: string,
+  uri: string,
+  tags: string[],
+  highlights: Highlight[],
+  bookmarks: Bookmark[],
+}
+
+export interface Highlight {
+    page: number,
+    start: number,
+    end: number,
+    title: string,
+    note: string,
+}
+
+export interface Bookmark {
+    page: number,
+    title: string,
+    note: string,
+}
+
+export default API;

ui/src/shared/api/index.ts

@@ -1,11 +1,14 @@
+import BookAPI from "./book";
 import StorageAPI from "./storage";
 import config from "shared/config";
 
 class API {
     public storage: StorageAPI;
+    public book: BookAPI;
 
     public constructor(baseURL: string) {
         this.storage = new StorageAPI(baseURL);
+        this.book = new BookAPI(baseURL);
     }
 }
 

ui/src/shared/mock/book/index.ts

@@ -0,0 +1,33 @@
+import { AppServer } from "shared/mock/types";
+import { Model } from "miragejs";
+import { ModelDefinition } from "miragejs/-types";
+import { Serializer } from "shared/mock/utils";
+import { Book } from "shared/api/book";
+
+export const BookModel: ModelDefinition<Book> = Model.extend({});
+
+export const bookEndpoints = (server: AppServer): void => {
+    server.get("/books", (schema) => schema.all("book"));
+    server.get("/books/:id", (schema, request) => {
+        const attrs = JSON.parse(request.requestBody);
+
+        return schema.create("book", attrs);
+    });
+};
+
+export const bookSeed = (server: AppServer): void => {
+    server.create("book", {
+        id: crypto.randomUUID(),
+        title: "Book1",
+        uri: "https://localhost:5173/sample.pdf",
+        tags: [
+            "tag1",
+            "tag2",
+            "tag3",
+        ],
+        highlights: [],
+        bookmarks: [],
+    });
+};
+
+export const bookSerializer = Serializer;

ui/src/shared/mock/types.ts

@@ -2,18 +2,27 @@ import { Registry, Server } from "miragejs";
 import { StorageModel, storageEndpoints, storageSeed, storageSerializer } from "./storage";
 import { AnyFactories } from "miragejs/-types";
 import Schema from "miragejs/orm/schema";
+import { BookModel, bookEndpoints, bookSeed, bookSerializer } from "./book";
 
 export const models = {
     storage: StorageModel,
+    book: BookModel,
 };
 
 export const serializers = {
     storage: storageSerializer,
+    book: bookSerializer,
 };
 
-export const endpoints = [storageEndpoints];
+export const endpoints = [
+    storageEndpoints,
+    bookEndpoints,
+];
 
-export const seeds = [storageSeed];
+export const seeds = [
+    storageSeed,
+    bookSeed,
+];
 
 export type AppRegistry = Registry<typeof models, AnyFactories>;
 export type AppSchema = Schema<AppRegistry>;

ui/vite.config.ts

@@ -1,12 +1,31 @@
-import { defineConfig } from "vite";
+import { PluginOption, defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { viteStaticCopy } from "vite-plugin-static-copy";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [
+export default defineConfig(({ mode }) => {
+    let plugins: PluginOption[] = [
         react(),
         tsconfigPaths(),
-    ],
-    envPrefix: "BS_",
+    ];
+
+    if (mode === "development") {
+        plugins = [
+            ...plugins,
+            viteStaticCopy({
+                targets: [
+                    {
+                        src: "data/sample.pdf",
+                        dest: "/",
+                    },
+                ],
+            }),
+        ];
+    }
+
+    return {
+        plugins,
+        envPrefix: "BS_",
+    };
 });