From a1f28d2b60e32a9bdfe6fb475aab000b091dd9fd Mon Sep 17 00:00:00 2001 From: dm1sh Date: Sun, 1 Aug 2021 14:09:13 +0300 Subject: [PATCH] Book list is now fetched from indexedDB --- public/index.html | 1 + public/manifest.json | 43 +++++++++++++++++++++++++++++++++++ src/pages/Bookshelf/index.tsx | 19 +++++++++++++--- src/serviceWorker/db.ts | 4 ++-- src/serviceWorker/index.ts | 1 + src/utils/serviceFetch.ts | 6 +++++ webpack.config.common.js | 2 +- webpack.config.dev.js | 7 +++++- webpack.config.prod.js | 3 +++ 9 files changed, 79 insertions(+), 7 deletions(-) create mode 100644 public/manifest.json create mode 100644 src/utils/serviceFetch.ts diff --git a/public/index.html b/public/index.html index 9fbc3d2..99dcf1f 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,7 @@ + Publite diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..ff3d075 --- /dev/null +++ b/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" + } + ] +} diff --git a/src/pages/Bookshelf/index.tsx b/src/pages/Bookshelf/index.tsx index 77d9620..12785cf 100644 --- 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([]); + + 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); diff --git a/src/serviceWorker/db.ts b/src/serviceWorker/db.ts index 9c3f83e..5571c0f 100644 --- a/src/serviceWorker/db.ts +++ b/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(DB_NAME, DB_VERSION, { + idbOpenDB(DB_NAME, DB_VERSION, { upgrade: (db, oldVersion, _, tsx) => { if (oldVersion < 1) db.createObjectStore("Books", { keyPath: "hash" }); }, diff --git a/src/serviceWorker/index.ts b/src/serviceWorker/index.ts index 1707290..68d48a3 100644 --- a/src/serviceWorker/index.ts +++ b/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)) }, diff --git a/src/utils/serviceFetch.ts b/src/utils/serviceFetch.ts new file mode 100644 index 0000000..2e8685d --- /dev/null +++ b/src/utils/serviceFetch.ts @@ -0,0 +1,6 @@ +export const connected = new Promise((resolve) => { + if (navigator.serviceWorker.controller) return resolve(); + navigator.serviceWorker.addEventListener("controllerchange", (e) => + resolve() + ); +}); diff --git a/webpack.config.common.js b/webpack.config.common.js index 9682847..fe3aff8 100644 --- a/webpack.config.common.js +++ b/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(), diff --git a/webpack.config.dev.js b/webpack.config.dev.js index d8fee98..da9a17d 100644 --- a/webpack.config.dev.js +++ b/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, ], diff --git a/webpack.config.prod.js b/webpack.config.prod.js index 5b56988..486866d 100644 --- a/webpack.config.prod.js +++ b/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, ],