Deployed to vercel

Update README.md
Added zip fb2 file suggestion
2023-09-18 15:38:40 +03:00 · 2023-09-17 16:44:53 +03:00 · 2023-09-17 16:42:44 +03:00 · 2023-09-17 14:56:45 +03:00 · 2022-12-15 23:59:52 +03:00 · 2022-12-12 09:25:56 +03:00
37 changed files with 511 additions and 153 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,3 +1,5 @@
 node_modules/
 package-lock.json
-build/
+build/
+pnpm-lock.yaml
+.vscode
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,6 @@
 node_modules/
 package-lock.json
-build/
+build/
+pnpm-lock.yaml
+.vscode
+.vercel
--- a/7
+++ b/7
@ -4,13 +4,12 @@ WORKDIR /app
 COPY ./package.json ./
 RUN npm install
 COPY ./ ./
-ENV SNOWPACK_PUBLIC_API_URL=https://publitebackend.dmitriy.icu
-ENV SNOWPACK_PUBLIC_BASE_URL=https://publite.dmitriy.icu
+ARG PUBLIC_API_URL=https://publitebackend.dm1sh.ru
+ARG PUBLIC_BASE_URL=https://publite.dm1sh.ru
 RUN NODE_ENV=production npm run build

 FROM node:alpine
 RUN npm install serve -g --silent
 WORKDIR /app
 COPY --from=builder /app/build .
-EXPOSE 80
-CMD ["serve", "-p", "80", "-s", "."]
+CMD serve -p ${PORT:-8080} -s .
--- a/README.md
+++ b/README.md
@ -8,6 +8,20 @@

 Frontend for Publite service — E-Books reader

+<table style="margin: auto">
+  <tr>
+    <td>
+      <img style="max-height: 50vh" src="public/images/screenshot3.webp"/>
+    </td>
+    <td>
+      <img style="max-height: 50vh" src="public/images/screenshot2.webp"/>
+    </td>
+    <td>
+      <img style="max-height: 50vh" src="public/images/screenshot1.webp"/>
+    </td>
+  </tr>
+</table>
+
 ## Deploy

 Dev environment setup:
@ -27,10 +41,10 @@ Simple docker deployment

 ```bash
 # build docker image
-docker build . -t publite_frontend
+docker build . --build-arg PUBLIC_API_URL=<https://...> --build-arg PUBLIC_BASE_URL=<https://...> -t publite_frontend

 # run it with docker
-docker run -p <port>:80 publite_frontend
+docker run -p <port>:8080 publite_frontend
 ```

 Dokku deployment with image from Docker Hub
@ -41,12 +55,8 @@ dokku apps:create publitefrontend
 dokku git:from-image publitefrontend publite/frontend:latest
 ```

-# TODO
+## TODO

- Create ServiceWorker (make it PWA)
- Migrate from LocalStorage to IndexedDB
- Add page position persistance
+- Migrate pagination cache and book state from LocalStorage to IndexedDB
 - Add menu with book view setting
- Add move to page by number
 - Optimize page spliting algorythm (rewrite it)
- Fix css modules bundling
--- a/package.json
+++ b/package.json
@ -1,20 +1,27 @@
 {
+  "private": true,
  "scripts": {
-    "dev": "SNOWPACK_PUBLIC_API_URL=http://localhost:8081 SNOWPACK_PUBLIC_BASE_URL=http://localhost:8080 snowpack dev",
-    "build": "snowpack build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack --config ./webpack.config.prod.js",
+    "dev": "webpack serve --config ./webpack.config.dev.js --stats-error-details",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "h": "cat ./webpack.config.dev.js"
  },
  "devDependencies": {
-    "@snowpack/plugin-typescript": "^1.2.1",
-    "@types/node": "^16.3.3",
-    "@types/react": "^17.0.14",
+    "@svgr/webpack": "^6.3.1",
+    "@types/react": "^17.0.15",
    "@types/react-dom": "^17.0.9",
-    "@types/snowpack-env": "^2.3.3",
-    "snowpack": "^3.8.0",
-    "snowpack-plugin-svgr": "^0.1.2",
-    "typescript": "^4.3.5"
+    "copy-webpack-plugin": "^9.0.1",
+    "css-loader": "^6.2.0",
+    "esbuild-loader": "^2.13.1",
+    "fork-ts-checker-webpack-plugin": "^6.2.13",
+    "style-loader": "^3.2.1",
+    "typescript": "^4.3.5",
+    "webpack": "^5.46.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
+    "idb": "^6.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "wouter": "^2.7.4"
--- a/public/CHECKS
+++ b/public/CHECKS
@ -0,0 +1 @@
+/
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/images/icons-128.png
+++ b/public/images/icons-128.png
--- a/public/images/icons-192.png
+++ b/public/images/icons-192.png
--- a/public/images/icons-512.png
+++ b/public/images/icons-512.png
--- a/public/images/screenshot1.webp
+++ b/public/images/screenshot1.webp
--- a/public/images/screenshot2.webp
+++ b/public/images/screenshot2.webp
--- a/public/images/screenshot3.webp
+++ b/public/images/screenshot3.webp
--- a/public/index.html
+++ b/public/index.html
@ -3,12 +3,15 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#ffffff">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="apple-touch-icon" href="/images/icons-512.png">
    <title>Publite</title>
  </head>

  <body>
    <div id="root"></div>
-    <script type="module" src="/dist/index.js"></script>
+    <script type="module" src="/index.js"></script>
  </body>
 </html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,47 @@
+{
+  "short_name": "Publite",
+  "name": "Publite: eBook reader",
+  "icons": [
+    {
+      "src": "images/icons-128.png",
+      "type": "image/png",
+      "sizes": "128x128",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/images/icons-192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/images/icons-512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "scope": "/",
+  "theme_color": "#000000",
+  "description": "eBook reader supporting EPUB and FB2 files",
+  "screenshots": [
+    {
+      "src": "/images/screenshot1.webp",
+      "type": "image/webp",
+      "sizes": "1080x2400"
+    },
+    {
+      "src": "/images/screenshot2.webp",
+      "type": "image/webp",
+      "sizes": "1080x2400"
+    },
+    {
+      "src": "/images/screenshot3.webp",
+      "type": "image/webp",
+      "sizes": "1080x2400"
+    }
+  ]
+}
--- a/snowpack.config.js
+++ b/snowpack.config.js
@ -1,28 +0,0 @@
-// Snowpack Configuration File
-// See all supported options: https://www.snowpack.dev/reference/configuration
-
-/** @type {import("snowpack").SnowpackUserConfig } */
-module.exports = {
-  plugins: ["@snowpack/plugin-typescript", "snowpack-plugin-svgr"],
-  packageOptions: {
-    polyfillNode: true,
-  },
-  mount: {
-    public: "/",
-    src: "/dist",
-  },
-  optimize: {
-    // bundle: true,
-  },
-  routes: [
-    { match: "routes", src: "robots.txt", dest: "/robots.txt" },
-    { match: "routes", src: ".*", dest: "/index.html" },
-  ],
-  devOptions: {
-    open: "none",
-  },
-  alias: {
-    "~": "./src",
-  },
-  exclude: ["**/node_modules/**/*", "**/*.test.*"],
-};
--- a/src/App/index.tsx
+++ b/src/App/index.tsx
@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { Route, Switch } from "wouter";
-import { BookListContextProvider } from "~/context";

 import { Bookshelf } from "~/pages/Bookshelf";
 import { BookView } from "~/pages/BookView";
@ -24,19 +23,17 @@ export const App = () => {
        </div>
      )}
      <Navbar />
-      <BookListContextProvider>
-        <Switch>
-          <Route path="/upload">
-            <UploadForm setLoading={setLoading} loading={loading} />
-          </Route>
-          <Route path="/">
-            <Bookshelf setLoading={setLoading} loading={loading} />
-          </Route>
-          <Route path="/:hash">
-            <BookView setLoading={setLoading} loading={loading} />
-          </Route>
-        </Switch>
-      </BookListContextProvider>
+      <Switch>
+        <Route path="/upload">
+          <UploadForm setLoading={setLoading} loading={loading} />
+        </Route>
+        <Route path="/">
+          <Bookshelf setLoading={setLoading} loading={loading} />
+        </Route>
+        <Route path="/:hash">
+          <BookView setLoading={setLoading} loading={loading} />
+        </Route>
+      </Switch>
    </div>
  );
 };
--- a/src/constants.ts
+++ b/src/constants.ts
@ -1,2 +1,5 @@
-export const API_URL = import.meta.env.SNOWPACK_PUBLIC_API_URL;
-export const BASE_URL = import.meta.env.SNOWPACK_PUBLIC_BASE_URL;
+export const API_URL = process.env.PUBLIC_API_URL || "";
+export const BASE_URL = process.env.PUBLIC_BASE_URL || "";
+export const CACHE = "v1.1.1";
+export const DB_NAME = "publite";
+export const DB_VERSION = 111;
--- a/src/context.tsx
+++ b/src/context.tsx
@ -1,19 +0,0 @@
-import React from "react";
-import { useLibrary, UseLibraryReturnTuple } from "./hooks/useLibrary";
-import { BookT } from "./types/book";
-
-export const BookListContext = React.createContext<UseLibraryReturnTuple>([
-  {},
-  (book: BookT) => {},
-  [],
-]);
-
-export const BookListContextProvider: React.FC = ({ children }) => {
-  const library = useLibrary();
-
-  return (
-    <BookListContext.Provider value={library}>
-      {children}
-    </BookListContext.Provider>
-  );
-};
--- a/src/hooks/useBookState.ts
+++ b/src/hooks/useBookState.ts
@ -21,11 +21,8 @@ export const useBookState = (
  }, [hash]);

  useEffect(() => {
-    console.log(Boolean(!ready && state?.currentPage && goToPage));
    if (!ready && state?.currentPage && pagesReady) {
-      console.log("Go to", state.currentPage);
      goToPage(state.currentPage);
-      console.log("Ready");
      setReady(true);
    } else if (hash && !ready && pagesReady && typeof state === "object") {
      saveBookState(hash, { currentPage: 0 });
@ -36,7 +33,6 @@ export const useBookState = (
  useEffect(
    () => () => {
      if (hash) {
-        console.log(currentPage);
        if (ready && state) saveBookState(hash, state);
        else saveBookState(hash, { currentPage: currentPage.current || 0 });
      }
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import * as ServiceWorker from "./registerServiceWorker";

 import "./index.css";

@ -12,6 +13,4 @@ ReactDOM.render(
  document.getElementById("root")
 );

-if (import.meta.hot) {
-  import.meta.hot.accept();
-}
+ServiceWorker.register();
--- a/src/pages/BookView/index.tsx
+++ b/src/pages/BookView/index.tsx
@ -1,29 +1,52 @@
-import React, { MouseEventHandler, useContext, useEffect, useRef } from "react";
+import React, { MouseEventHandler, useState, useEffect, useRef } from "react";
 import { Redirect, useRoute } from "wouter";

 import styles from "./BookView.module.css";

-import { BookListContext } from "~/context";
 import { usePagination } from "~/hooks/usePagination";
 import { IPageProps } from "~/types/page";
 import { useBookState } from "~/hooks/useBookState";
+import { BookT } from "~/types/book";
+import { API_URL } from "~/constants";
+import { validateResponse } from "~/utils/api";

 export const BookView = ({ setLoading, loading }: IPageProps) => {
  useEffect(() => setLoading(true), []);

+  const [hasErr, setHasErr] = useState(false);
+  const [book, setBook] = useState<BookT>();
+
  const [_, params] = useRoute("/:hash");
-  const [books] = useContext(BookListContext);

  const contentRef = useRef<HTMLDivElement>(null);
  const pageContainerRef = useRef<HTMLDivElement>(null);
  const pageRef = useRef<HTMLDivElement>(null);

+  useEffect(() => {
+    if (params?.hash) {
+      (async () => {
+        try {
+          const res = await fetch(API_URL + "/book/" + params.hash);
+          if (!res.ok) throw new Error(res.status + " " + res.statusText);
+
+          const book: unknown = await res.json();
+
+          if (validateResponse(book)) setBook(book);
+        } catch (err) {
+          if (process.env.NODE_ENV === "development") console.error(err);
+          setHasErr(true);
+          setLoading(false);
+        }
+      })();
+    }
+  }, []);
+
  const [pagesReady, goToPage, currentPage, pagesNumber] = usePagination(
    contentRef,
    pageContainerRef,
    pageRef,
-    books && loading ? params?.hash : undefined,
-    params?.hash && books && loading ? books[params.hash]?.content : undefined
+    book ? params?.hash : undefined,
+    params?.hash ? book?.content : undefined
  );

  const currentPageRef = useRef(currentPage);
@ -68,35 +91,33 @@ export const BookView = ({ setLoading, loading }: IPageProps) => {
    }
  };

-  if (books) {
-    if (params?.hash && params.hash in books)
-      return (
-        <>
-          <div
-            className={`${styles.border} ${styles.leftBorder}`}
-            onClick={goPrev}
-          />
-          <div className={styles.content} ref={contentRef} />
-          <div className={styles.pageContainer} ref={pageContainerRef}>
-            <div className={styles.page} ref={pageRef} onClick={goNext} />
-          </div>
-          <div
-            className={`${styles.border} ${styles.rightBorder}`}
-            onClick={goNext}
-          />
-          <div className={styles.pageIndicator}>
-            <button className={styles.pageSwitchArrow} onClick={goPrev}>
-              {currentPage !== 0 && "←"}
-            </button>
-            <span className={styles.pageNumber} onClick={insertNumber}>
-              {currentPage + 1} / {pagesNumber}
-            </span>
-            <button className={styles.pageSwitchArrow} onClick={goNext}>
-              {currentPage !== pagesNumber - 1 && "→"}
-            </button>
-          </div>
-        </>
-      );
-    return <Redirect to="/" />;
-  } else return <></>;
+  if (hasErr) return <Redirect to="/" />;
+
+  return (
+    <>
+      <div
+        className={`${styles.border} ${styles.leftBorder}`}
+        onClick={goPrev}
+      />
+      <div className={styles.content} ref={contentRef} />
+      <div className={styles.pageContainer} ref={pageContainerRef}>
+        <div className={styles.page} ref={pageRef} onClick={goNext} />
+      </div>
+      <div
+        className={`${styles.border} ${styles.rightBorder}`}
+        onClick={goNext}
+      />
+      <div className={styles.pageIndicator}>
+        <button className={styles.pageSwitchArrow} onClick={goPrev}>
+          {currentPage !== 0 && "←"}
+        </button>
+        <span className={styles.pageNumber} onClick={insertNumber}>
+          {currentPage + 1} / {pagesNumber}
+        </span>
+        <button className={styles.pageSwitchArrow} onClick={goNext}>
+          {currentPage !== pagesNumber - 1 && "→"}
+        </button>
+      </div>
+    </>
+  );
 };
--- a/src/pages/Bookshelf/index.tsx
+++ b/src/pages/Bookshelf/index.tsx
@ -1,16 +1,29 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";

 import styles from "./Bookshelf.module.css";

 import { BookItem } from "./BookItem";
 import { AddBook } from "./AddBook";
-import { BookListContext } from "~/context";
 import { IPageProps } from "~/types/page";
+import { API_URL } from "~/constants";
+import { BookT } from "~/types/book";
+import { connected as swConnected } from "~/utils/serviceFetch";

 export const Bookshelf = ({ setLoading }: IPageProps) => {
  useEffect(() => setLoading(true), []);

-  const [books] = useContext(BookListContext);
+  const [books, setBooks] = useState<BookT[]>([]);
+
+  useEffect(() => {
+    swConnected.then(async () => {
+      try {
+        const res = await fetch(API_URL + "/list");
+        setBooks(await res.json());
+      } catch (err) {
+        if (process.env.NODE_ENV === "development") console.error(err);
+      }
+    });
+  }, []);

  useEffect(() => {
    if (books) setLoading(false);
--- a/src/pages/UploadForm/index.tsx
+++ b/src/pages/UploadForm/index.tsx
@ -1,18 +1,15 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useLocation } from "wouter";

 import PlusIcon from "~/assets/plus.svg";
 import styles from "./UploadForm.module.css";
 import { submitFile, validateResponse, validState } from "~/utils/api";
-import { BookListContext } from "~/context";
 import { IPageProps } from "~/types/page";

 export const UploadForm = ({ setLoading }: IPageProps) => {
  const [error, setError] = useState("");
  const [_, setLocation] = useLocation();

-  const [__, saveBook] = useContext(BookListContext);
-
  const processFile = async (file: File | undefined) => {
    try {
      if (validState(file)) {
@ -22,14 +19,15 @@ export const UploadForm = ({ setLoading }: IPageProps) => {
        const res = await submitFile(file);
        setLoading(false);

-        if (validateResponse(res)) {
-          saveBook(res);
-          setLocation("/");
-        }
+        if (validateResponse(res)) setLocation("/");
      }
    } catch (err) {
      setLoading(false);
-      setError(err.message);
+
+      if (err instanceof Error)
+        setError(err.message);
+      else 
+        setError(String(err))
    }
  };

--- a/src/registerServiceWorker.ts
+++ b/src/registerServiceWorker.ts
@ -0,0 +1,16 @@
+export const register = () => {
+  if ("serviceWorker" in navigator) {
+    window.addEventListener("load", () =>
+      navigator.serviceWorker
+        .register("/sw.js", { scope: "" })
+        .then((registration) => {
+          if (process.env.NODE_ENV === "development")
+            console.log(
+              "Successfully registered ServiceWorker with scope:",
+              registration.scope
+            );
+        })
+        .catch((err) => console.error(err))
+    );
+  }
+};
--- a/src/serviceWorker/cache.ts
+++ b/src/serviceWorker/cache.ts
@ -0,0 +1,29 @@
+import { CACHE } from "../constants";
+
+const getCache = () => caches.open(CACHE);
+
+/**
+ * Caches static files for application
+ */
+export const precache = async () =>
+  (await getCache()).addAll([
+    "/",
+    "/index.js",
+    "/sw.js",
+    "/manifest.json",
+    "/favicon.ico",
+  ]);
+
+/**
+ * Requests file from network or gets it from cache if offline
+ */
+export const fromCache = async (request: Request): Promise<Response> => {
+  try {
+    const response = await fetch(request);
+    (await getCache()).put(request, response.clone());
+    return response;
+  } catch (err) {
+    const response = await (await getCache()).match(request);
+    return response || new Response();
+  }
+};
--- a/src/serviceWorker/db.ts
+++ b/src/serviceWorker/db.ts
@ -0,0 +1,31 @@
+import { openDB as idbOpenDB } from "idb";
+import { BookT } from "~/types/book";
+import { DB_NAME, DB_VERSION } from "../constants";
+import { PubliteDB } from "./schema";
+
+/**
+ * Opens IndexedDB for interactions
+ */
+export const openDB = () =>
+  idbOpenDB<PubliteDB>(DB_NAME, DB_VERSION, {
+    upgrade: (db, oldVersion, _, tsx) => {
+      if (oldVersion < 1) db.createObjectStore("Books", { keyPath: "hash" });
+    },
+  });
+
+/**
+ * Saves IBook object in IndexedDB
+ */
+export const saveBook = async (book: BookT) =>
+  (await openDB()).add("Books", book);
+
+/**
+ * Returns all books saved in IndexedDB
+ */
+export const getBooks = async () => (await openDB()).getAll("Books");
+
+/**
+ * Gets book from IndexedDB by hash
+ */
+export const getBook = async (hash: string) =>
+  (await openDB()).get("Books", hash);
--- a/src/serviceWorker/fetchHandlers.ts
+++ b/src/serviceWorker/fetchHandlers.ts
@ -0,0 +1,59 @@
+import { getBook, getBooks, saveBook } from "./db";
+import { composeResponseStatus } from "./utils";
+
+export interface PathHandler {
+  /** Path start for handler */
+  path: string;
+  /** Function returning Response object */
+  getResponse: () => Response | Promise<Response>;
+}
+
+/**
+ * Routes fetch request path to specified handler
+ */
+export const handle = (requestPath: string, table: PathHandler[]) => {
+  for (const { path, getResponse: response } of table)
+    if (requestPath.startsWith(path)) return response();
+
+  return new Response();
+};
+
+/**
+ * Converts book to html with publiteBackend server.
+ *
+ * First fetch handler with network request
+ */
+export const handleBookUpload = async (request: Request) => {
+  try {
+    const res = await fetch(request);
+    if (res.ok) {
+      const book = await res.json();
+      await saveBook(book);
+      return new Response(JSON.stringify(book));
+    } else throw new Error(res.status.toString() + res.statusText);
+  } catch (err) {
+    return new Response(JSON.stringify(err), composeResponseStatus(err));
+  }
+};
+
+/**
+ * Gets all books from database
+ */
+export const handleBooks = async () => {
+  const list = await getBooks();
+
+  return new Response(JSON.stringify(list));
+};
+
+/**
+ * Gets book from database
+ */
+export const handleBook = async (request: Request, hash: string) => {
+  const book = await getBook(hash);
+  if (book) return new Response(JSON.stringify(book));
+
+  return new Response(null, {
+    status: 404,
+    statusText: "No such book :(",
+  });
+};
--- a/src/serviceWorker/index.ts
+++ b/src/serviceWorker/index.ts
@ -0,0 +1,39 @@
+import { API_URL } from "~/constants";
+import { fromCache, precache } from "./cache";
+import { openDB as createDB } from "./db";
+import {
+  handle,
+  handleBook,
+  handleBooks,
+  handleBookUpload,
+  PathHandler,
+} from "./fetchHandlers";
+import { getHash } from "./utils";
+
+declare const self: ServiceWorkerGlobalScope;
+
+self.addEventListener("install", (event) => event.waitUntil(precache()));
+
+self.addEventListener("activate", (event) => {
+  self.clients.claim();
+  event.waitUntil(createDB());
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  const path = new URL(request.url).pathname;
+
+  let handlers: PathHandler[];
+
+  if (request.url.startsWith(API_URL)) {
+    handlers = [
+      { path: "/list", getResponse: () => handleBooks() },
+      { path: "/book/", getResponse: () => handleBook(request, getHash(path)) },
+      { path: "/uploadfile", getResponse: () => handleBookUpload(request) },
+    ];
+  } else {
+    handlers = [{ path: "", getResponse: () => fromCache(request) }];
+  }
+
+  event.respondWith(handle(path, handlers));
+});
--- a/src/serviceWorker/schema.ts
+++ b/src/serviceWorker/schema.ts
@ -0,0 +1,9 @@
+import { DBSchema } from "idb";
+import { BookT } from "../types/book";
+
+export interface PubliteDB extends DBSchema {
+  Books: {
+    key: string;
+    value: BookT;
+  };
+}
--- a/src/serviceWorker/utils.ts
+++ b/src/serviceWorker/utils.ts
@ -0,0 +1,15 @@
+/**
+ * Gets hash string from book path
+ */
+export const getHash = (path: string) => {
+  let hashLength = path.length - "/book/".length;
+  if (path.endsWith("/")) hashLength--;
+
+  return path.substr("/book/".length, hashLength);
+};
+
+export const composeResponseStatus = (err: unknown): ResponseInit => {
+  if (err instanceof Error && err.name === "NetowrkError")
+    return { status: 503, statusText: err.message };
+  else return { status: 500, statusText: "Something bad happened (IDK)" };
+};
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@ -5,6 +5,11 @@ import { API_URL } from "~/constants";
 export const validState = (file: File | undefined): file is File => {
  if (!file) throw new Error("Book file is required. Please, attach one");

+  if (file.name.endsWith(".zip"))
+    throw new Error(
+      "Please, unzip file before sending to reader if it is fb2.zip"
+    )
+
  if (!file.name.match(/\.(fb2|epub)/))
    throw new Error(
      "Wrong file type. Only FB2 and Epub files are supported. \
@ -34,7 +39,9 @@ export const submitFile = async (

    return await res.json();
  } catch (err) {
-    console.log("Network error:", err.message);
+    if (err instanceof Error)
+      console.error("Network error:", err.message);
+      
    throw err;
  }
 };
@ -43,9 +50,9 @@ export const validateResponse = (content: unknown): content is BookT => {
  if (content && typeof content === "object")
    for (const key of requiredBookProps)
      if (!(key in content)) {
-        if (import.meta.env.NODE_ENV === "development")
-          console.log(`${key} is not specified in server response`);
-        return false;
+        if (process.env.NODE_ENV === "development")
+          console.error(`${key} is not specified in server response`);
+        throw new Error(`${key} is not specified in server response`);
      }

  return true;
--- a/src/utils/serviceFetch.ts
+++ b/src/utils/serviceFetch.ts
@ -0,0 +1,6 @@
+export const connected = new Promise<void>((resolve) => {
+  if (navigator.serviceWorker.controller) return resolve();
+  navigator.serviceWorker.addEventListener("controllerchange", (e) =>
+    resolve()
+  );
+});
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,17 +1,18 @@
 {
  "compilerOptions": {
-    "target": "es6",
-    "strict": true,
    "esModuleInterop": true,
-    "skipLibCheck": true,
+    "isolatedModules": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react-jsx",
-    "lib": ["DOM"],
+    "lib": ["DOM", "webworker"],
    "module": "ES2020",
    "moduleResolution": "node",
-    "resolveJsonModule": true,
    "paths": {
      "~/*": ["./src/*"]
-    }
+    },
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "es6"
  }
 }
--- a/webpack.config.common.js
+++ b/webpack.config.common.js
@ -0,0 +1,47 @@
+const path = require("path");
+
+const CopyPlugin = require("copy-webpack-plugin");
+const ForkTsCheckerPlugin = require("fork-ts-checker-webpack-plugin");
+
+module.exports = {
+  entry: {
+    "index.js": "./src/index.tsx",
+    "sw.js": "./src/serviceWorker/index.ts",
+  },
+  output: {
+    path: path.resolve(__dirname, `./build/`),
+    clean: true,
+    filename: "[name]",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "esbuild-loader",
+        options: {
+          loader: "tsx",
+          target: "es2015",
+        },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.svg$/,
+        use: ["@svgr/webpack"],
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".json"],
+    alias: { "~": path.resolve(__dirname, "src/") },
+  },
+  plugins: [
+    new ForkTsCheckerPlugin(),
+    new CopyPlugin({
+      patterns: [{ from: "./public", to: "." }],
+    }),
+  ],
+};
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@ -0,0 +1,27 @@
+const path = require("path");
+const webpack = require("webpack");
+
+const webpackConfig = require("./webpack.config.common");
+
+module.exports = {
+  ...webpackConfig,
+  mode: "development",
+  watchOptions: { ignored: /node_modules/ },
+  devServer: {
+    static: path.join(__dirname, "build"),
+    compress: true,
+    port: 8080,
+    hot: false,
+    historyApiFallback: {
+      index: "index.html",
+    },
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      "process.env.NODE_ENV": JSON.stringify("development"),
+      "process.env.PUBLIC_API_URL": JSON.stringify("http://localhost:8081"),
+      "process.env.PUBLIC_BASE_URL": JSON.stringify("http://localhost:8080"),
+    }),
+    ...webpackConfig.plugins,
+  ],
+};
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
@ -0,0 +1,20 @@
+const { ESBuildMinifyPlugin } = require("esbuild-loader");
+const webpack = require("webpack");
+
+const webpackConfig = require("./webpack.config.common");
+
+module.exports = {
+  ...webpackConfig,
+  optimization: {
+    minimizer: [new ESBuildMinifyPlugin()],
+  },
+  mode: "production",
+  plugins: [
+    new webpack.DefinePlugin({
+      "process.env.NODE_ENV": JSON.stringify("production"),
+      "process.env.PUBLIC_API_URL": JSON.stringify(process.env.PUBLIC_API_URL),
+      "process.env.PUBLIC_BASE_URL": JSON.stringify(process.env.PUBLIC_BASE_URL),
+    }),
+    ...webpackConfig.plugins,
+  ],
+};
Author	SHA1	Message	Date
dm1sh	33f2c5cf07	Deployed to vercel	2023-09-18 15:38:40 +03:00
Dmitriy Shishkov	588e09ac00	Update README.md	2023-09-17 16:44:53 +03:00
dm1sh	e840ac4254	Added zip fb2 file suggestion Updated docker build instructions and args	2023-09-17 16:42:44 +03:00
dm1sh	c6be8cfa8c	Added screenshots to readme	2023-09-17 14:56:45 +03:00
dm1sh	53ebf925aa	Finally fixed envs	2022-12-15 23:59:52 +03:00
dm1sh	b92bd7656c	Removed hardcoded env	2022-12-12 09:25:56 +03:00
dm1sh	193a959e65	Updated container port setting	2022-10-01 11:28:24 +03:00
dm1sh	aa8765ddc5	Updated packages	2022-10-01 10:57:55 +03:00
dm1sh	03edfdeb7a	Fixed catched errors type handling	2022-10-01 10:47:43 +03:00
dm1sh	86b25166ff	converted screenshots to webp format	2022-10-01 10:46:57 +03:00
dm1sh	fae03cf5b6	Added manifest and favicon to precache	2021-08-09 18:37:43 +03:00
dm1sh	49ee864762	Updated favicon	2021-08-09 18:37:10 +03:00
Dmitriy Shishkov	182b8907ee	Merge pull request #2 from publite/pwa Hot fixes	2021-08-09 17:50:46 +03:00
dm1sh	6d21ddf2e3	Switched to square favicon	2021-08-09 17:49:50 +03:00
dm1sh	6458148145	Changed todo heading level in readme	2021-08-09 17:47:05 +03:00
dm1sh	211d1a4a96	Merge branch 'pwa' of github.com:publite/frontend into pwa	2021-08-09 17:46:16 +03:00
dm1sh	be978cec32	Fixed version constants and prod API url	2021-08-09 17:46:02 +03:00
Dmitriy Shishkov	9fa8734c09	Merge pull request #1 from publite/pwa Pwa	2021-08-09 16:24:57 +03:00
Dmitriy Shishkov	7447476bbc	Update README.md	2021-08-09 16:14:14 +03:00
dm1sh	f00fd2ae22	Fixed manifest errors	2021-08-09 15:44:18 +03:00
dm1sh	9979a263ed	Merge branch 'pwa' of github.com:publite/frontend into pwa	2021-08-09 15:36:27 +03:00
dm1sh	599342f78b	Added manifest, icons and screenshots	2021-08-09 15:35:03 +03:00
Dmitriy Shishkov	fbfdc0fdb9	Update README.md	2021-08-09 14:28:46 +03:00
Dmitriy Shishkov	0c1c8ed75c	Update README.md	2021-08-09 14:28:06 +03:00
dm1sh	fa38e0054b	Tried to improve error handling on book upload	2021-08-09 14:05:57 +03:00
dm1sh	4f558b8530	Got rid of book list context. Now book content is served by serviceworker too	2021-08-09 14:05:34 +03:00
dm1sh	09da9a7d60	Merge branch 'pwa' of github.com:publite/frontend into pwa	2021-08-09 10:52:04 +03:00
dm1sh	582e64db0d	Removed useless console.logs, switched errors to console.error	2021-08-09 10:50:43 +03:00
dm1sh	8705feffbc	Book list is now fetched from indexedDB	2021-08-01 20:54:59 +03:00
dm1sh	a1f28d2b60	Book list is now fetched from indexedDB	2021-08-01 14:09:13 +03:00
dm1sh	b6ede385ca	Started react app integration with service worker. Uploading book to server now also saves result to indexedDB	2021-08-01 13:47:52 +03:00
dm1sh	aa98de6bd5	Added book getting by hash in service worker	2021-07-31 22:02:56 +03:00
dm1sh	487b6b91bd	Added book list handler in service worker	2021-07-31 22:00:27 +03:00
dm1sh	d004e9681e	Added /upload handler in service worker	2021-07-31 21:58:45 +03:00
dm1sh	1b7fa0bacf	Added fetch handler in service worker	2021-07-31 21:55:05 +03:00
dm1sh	12ce54e95d	Added IndexedDB	2021-07-31 21:32:34 +03:00
dm1sh	96f7f8462b	Added service worker and site caching	2021-07-31 21:21:45 +03:00
dm1sh	c416354cfa	Switched from snowpack to webpack (Preparing to add serviceworker)	2021-07-31 21:18:16 +03:00
dm1sh	df91e5047c	Merge branch 'main' of github.com:publite/frontend	2021-07-24 21:05:58 +03:00
dm1sh	97b654a433	Added dokku deployment health check	2021-07-24 21:05:31 +03:00