Book list is now fetched from indexedDB

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+    <!-- <link rel="manifest" href="manifest.json" /> -->
     <title>Publite</title>
   </head>
 

public/manifest.json

@@ -0,0 +1,43 @@
+{
+  "short_name": "Publite",
+  "name": "Publite: eBook reader",
+  "icons": [
+    {
+      "src": "/images/icons-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/images/icons-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#000000",
+  "display": "standalone",
+  "scope": "/",
+  "theme_color": "#000000",
+  "shortcuts": [
+    {
+      "name": "How's weather today?",
+      "short_name": "Today",
+      "description": "View weather information for today",
+      "url": "/today?source=pwa",
+      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+    }
+  ],
+  "description": "eBook reader supporting EPUB and FB2 files",
+  "screenshots": [
+    {
+      "src": "/images/screenshot1.png",
+      "type": "image/png",
+      "sizes": "540x720"
+    },
+    {
+      "src": "/images/screenshot2.jpg",
+      "type": "image/jpg",
+      "sizes": "540x720"
+    }
+  ]
+}

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);

src/serviceWorker/db.ts

@@ -1,4 +1,4 @@
-import * as idb from "idb";
+import { openDB as idbOpenDB } from "idb";
 import { BookT } from "~/types/book";
 import { DB_NAME, DB_VERSION } from "../constants";
 import { PubliteDB } from "./schema";
@@ -7,7 +7,7 @@ import { PubliteDB } from "./schema";
  * Opens IndexedDB for interactions
  */
 export const openDB = () =>
-  idb.openDB<PubliteDB>(DB_NAME, DB_VERSION, {
+  idbOpenDB<PubliteDB>(DB_NAME, DB_VERSION, {
     upgrade: (db, oldVersion, _, tsx) => {
       if (oldVersion < 1) db.createObjectStore("Books", { keyPath: "hash" });
     },

src/serviceWorker/index.ts

@@ -26,6 +26,7 @@ self.addEventListener("fetch", (event) => {
   let handlers: PathHandler[];
 
   if (request.url.startsWith(API_URL)) {
+    console.log("API: ", path);
     handlers = [
       { path: "/list", getResponse: () => handleBooks() },
       { path: "/book/", getResponse: () => handleBook(request, getHash(path)) },

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()
+  );
+});

webpack.config.common.js

@@ -42,7 +42,7 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       "process.env.PUBLIC_API_URL": JSON.stringify(
-        "https://publitebackend.dmitriy.icu"
+        "http://localhost:8081"
       ),
     }),
     new ForkTsCheckerPlugin(),

webpack.config.dev.js

@@ -11,11 +11,16 @@ module.exports = {
     contentBase: path.join(__dirname, "build"),
     compress: true,
     port: 8080,
-    hot: true,
+    hot: false,
+    inline: false,
+    historyApiFallback: {
+      index: "index.html",
+    },
   },
   plugins: [
     new webpack.DefinePlugin({
       "process.env.NODE_ENV": JSON.stringify("development"),
+      "process.env.PUBLIC_BASE_URL": JSON.stringify("http://localhost:8080"),
     }),
     ...webpackConfig.plugins,
   ],

webpack.config.prod.js

@@ -12,6 +12,9 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       "process.env.NODE_ENV": JSON.stringify("production"),
+      "process.env.PUBLIC_BASE_URL": JSON.stringify(
+        "https://publite.dmitriy.icu"
+      ),
     }),
     ...webpackConfig.plugins,
   ],