feat: cleanup demo

packages/demo/src/App.tsx

@@ -2,7 +2,7 @@ import React, { FC, memo, useEffect } from "react"
 import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"
 import { useSetRecoilState } from "recoil"
 import { Home as ComicsHome } from "./comics/Home"
-import { Home } from "./Home"
+import { Home } from "./home/Home"
 import { ChakraProvider, ColorModeProvider } from "@chakra-ui/react"
 import { theme } from "./theme/theme"
 import { ReaderInstance } from "./types"
@@ -11,36 +11,41 @@ import { isZoomingState } from "./state"
 import { ErrorBoundary } from "./common/ErrorBoundary"
 import { useReader } from "./reader/useReader"
 import { Subscribe } from "@react-rxjs/core"
-import { Reader } from "./Reader"
+import { Reader } from "./reader/Reader"
 import "@fontsource/dancing-script/400.css"
+import { QueryClient, QueryClientProvider } from "reactjrx"
+
+const queryClient = new QueryClient()
 
 export const App = memo(() => {
   const { reader, setReader } = useReader()
 
   return (
-    <Subscribe>
-      <ChakraProvider theme={theme}>
-        <ColorModeProvider value="dark" options={{ initialColorMode: `dark`, useSystemColorMode: false }}>
-          <Router>
-            <Routes>
-              <Route
-                path="/reader/:url"
-                element={
-                  <ErrorBoundary>
-                    <Reader onReader={setReader} />
-                  </ErrorBoundary>
-                }
-              />
-              <Route path="/books" element={<ClassicHome />} />
-              <Route path="/comics" element={<ComicsHome />} />
-              <Route path="/" element={<Home />} />
-              <Route path="*" element={<Navigate to="/" />} />
-            </Routes>
-          </Router>
-        </ColorModeProvider>
-      </ChakraProvider>
-      <Effects reader={reader} />
-    </Subscribe>
+    <QueryClientProvider client={queryClient}>
+      <Subscribe>
+        <ChakraProvider theme={theme}>
+          <ColorModeProvider value="dark" options={{ initialColorMode: `dark`, useSystemColorMode: false }}>
+            <Router>
+              <Routes>
+                <Route
+                  path="/reader/:url"
+                  element={
+                    <ErrorBoundary>
+                      <Reader onReader={setReader} />
+                    </ErrorBoundary>
+                  }
+                />
+                <Route path="/books" element={<ClassicHome />} />
+                <Route path="/comics" element={<ComicsHome />} />
+                <Route path="/" element={<Home />} />
+                <Route path="*" element={<Navigate to="/" />} />
+              </Routes>
+            </Router>
+          </ColorModeProvider>
+        </ChakraProvider>
+        <Effects reader={reader} />
+      </Subscribe>
+    </QueryClientProvider>
   )
 })
 

packages/demo/src/classic/ClassicSettings.tsx

@@ -8,7 +8,7 @@ import { Settings } from "../common/Settings"
 import { ArrowDownIcon, ArrowUpIcon, ArrowBackIcon, ArrowForwardIcon } from "@chakra-ui/icons"
 import { OtherSettings } from "../common/OtherSettings"
 import { useReaderSettings } from "../common/useReaderSettings"
-import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../constants"
+import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../constants.shared"
 
 type Theme = Parameters<Reader[`theme`][`set`]>[0]
 

packages/demo/src/classic/Reader.tsx

@@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"
 import { useGestureHandler } from "./useGestureHandler"
 import { Reader as ReactReader } from "@prose-reader/react"
 import { Manifest } from "@prose-reader/core"
-import { QuickMenu } from "../QuickMenu"
+import { QuickMenu } from "../reader/QuickMenu"
 import {
   bookReadyState,
   isHelpOpenState,
@@ -14,17 +14,17 @@ import {
   useResetStateOnUnMount
 } from "../state"
 import { ClassicSettings } from "./ClassicSettings"
-import { Loading } from "../Loading"
+import { Loading } from "../reader/Loading"
 import { createAppReader, ReactReaderProps, ReaderInstance } from "../types"
-import { useBookmarks } from "../useBookmarks"
+import { useBookmarks } from "../reader/useBookmarks"
 import { useParams } from "react-router"
-import { BookError } from "../BookError"
+import { BookError } from "../reader/BookError"
 import { getEpubUrlFromLocation } from "../serviceWorker/utils"
-import { HighlightMenu } from "../HighlightMenu"
-import { SearchDialog } from "../SearchDialog"
-import { HelpDialog } from "../HelpDialog"
+import { HighlightMenu } from "../reader/HighlightMenu"
+import { SearchDialog } from "../reader/SearchDialog"
+import { HelpDialog } from "../reader/HelpDialog"
 import { useReader } from "../reader/useReader"
-import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../constants"
+import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../constants.shared"
 
 export const Reader = ({
   onReader,

packages/demo/src/comics/Reader.tsx

@@ -3,15 +3,15 @@ import { useEffect } from "react"
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"
 import { useGestureHandler } from "./useGestureHandler"
 import { Reader as ReactReader } from "@prose-reader/react"
-import { QuickMenu } from "../QuickMenu"
+import { QuickMenu } from "../reader/QuickMenu"
 import { bookReadyState, isMenuOpenState, manifestState, useResetStateOnUnMount } from "../state"
 import { ComicsSettings } from "./ComicsSettings"
-import { Loading } from "../Loading"
-import { useBookmarks } from "../useBookmarks"
+import { Loading } from "../reader/Loading"
+import { useBookmarks } from "../reader/useBookmarks"
 import { useParams } from "react-router"
-import { BookError } from "../BookError"
+import { BookError } from "../reader/BookError"
 import { getEpubUrlFromLocation } from "../serviceWorker/utils"
-import { HighlightMenu } from "../HighlightMenu"
+import { HighlightMenu } from "../reader/HighlightMenu"
 import { ZoomingIndicator } from "../common/ZoomingIndicator"
 import { Manifest } from "@prose-reader/core"
 import { createAppReader, ReactReaderProps, ReaderInstance } from "../types"

packages/demo/src/constants.shared.ts

@@ -1 +1,3 @@
-export const PROJECT_NAME = `@prose/web-reader`
+export const PROJECT_NAME = `@prose/web-reader`
+export const FONT_SCALE_MIN = 0.2
+export const FONT_SCALE_MAX = 5

packages/demo/src/Home.tsx → packages/demo/src/home/Home.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Link } from "react-router-dom"
 import { Button as ChakraButton, Text, Box, Heading, Link as ChakraLink } from "@chakra-ui/react"
-import { OrDivider } from "./common/OrDivider"
+import { OrDivider } from "../common/OrDivider"
 import { ExternalLinkIcon } from "@chakra-ui/icons"
 
 export const Home = () => {

packages/demo/src/HelpDialog.tsx → packages/demo/src/reader/HelpDialog.tsx

@@ -1,8 +1,8 @@
 import { List, ListIcon, ListItem } from "@chakra-ui/react"
 import React from "react"
-import { FullScreenModal } from "./common/FullScreenModal"
-import { usePagination } from "./reader/state"
-import { useReader } from "./reader/useReader"
+import { FullScreenModal } from "../common/FullScreenModal"
+import { usePagination } from "./state"
+import { useReader } from "./useReader"
 
 export const HelpDialog = ({ onExit, isOpen }: { onExit: () => void; isOpen: boolean }) => {
   const { reader$ } = useReader()

packages/demo/src/HighlightMenu.tsx → packages/demo/src/reader/HighlightMenu.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from "react"
 import { useRecoilState } from "recoil"
-import { Button } from "./common/Button"
-import { currentHighlight } from "./state"
-import { useReader } from "./reader/useReader"
+import { Button } from "../common/Button"
+import { currentHighlight } from "../state"
+import { useReader } from "./useReader"
 
 export const HighlightMenu = () => {
   const { reader } = useReader()

packages/demo/src/QuickMenu.tsx → packages/demo/src/reader/QuickMenu.tsx

@@ -4,10 +4,10 @@ import { useRecoilValue, useSetRecoilState } from "recoil"
 import { IconButton, Box } from "@chakra-ui/react"
 import { ArrowBackIcon, ArrowForwardIcon, SettingsIcon, SearchIcon, HamburgerIcon, QuestionOutlineIcon } from "@chakra-ui/icons"
 import { Scrubber } from "./Scrubber"
-import { bookTitleState, isComicState, isHelpOpenState, isSearchOpenState, isTocOpenState } from "./state"
-import { AppBar } from "./common/AppBar"
-import { useReader } from "./reader/useReader"
-import { usePagination } from "./reader/state"
+import { bookTitleState, isComicState, isHelpOpenState, isSearchOpenState, isTocOpenState } from "../state"
+import { AppBar } from "../common/AppBar"
+import { useReader } from "./useReader"
+import { usePagination } from "./state"
 import { useObserve } from "reactjrx"
 import { NEVER } from "rxjs"
 

packages/demo/src/Reader.tsx → packages/demo/src/reader/Reader.tsx

@@ -1,12 +1,12 @@
 import React, { memo } from "react"
-import { ReaderInstance } from "./types"
+import { ReaderInstance } from "../types"
 import { useManifest } from "./useManifest"
-import { Reader as ClassicReader } from "./classic/Reader"
-import { Reader as ComicsReader } from "./comics/Reader"
+import { Reader as ClassicReader } from "../classic/Reader"
+import { Reader as ComicsReader } from "../comics/Reader"
 import { useParams } from "react-router-dom"
 import { TocDialog } from "./TocDialog"
 import { useRecoilState } from "recoil"
-import { isTocOpenState } from "./state"
+import { isTocOpenState } from "../state"
 
 export const Reader = memo(({ onReader }: { onReader: (instance: ReaderInstance | undefined) => void }) => {
   const { url = `` } = useParams<`url`>()

packages/demo/src/Scrubber.tsx → packages/demo/src/reader/Scrubber.tsx

@@ -2,9 +2,9 @@ import React, { useCallback, useEffect, useState } from "react"
 import RcSlider from "rc-slider"
 import "rc-slider/assets/index.css"
 import { useRecoilValue } from "recoil"
-import { isComicState, manifestState } from "./state"
-import { useReader } from "./reader/useReader"
-import { usePagination } from "./reader/state"
+import { isComicState, manifestState } from "../state"
+import { useReader } from "./useReader"
+import { usePagination } from "./state"
 
 export const Scrubber = () => {
   const { reader, reader$ } = useReader()

packages/demo/src/SearchDialog.tsx → packages/demo/src/reader/SearchDialog.tsx

@@ -3,8 +3,8 @@ import React, { useCallback, useEffect, useState } from "react"
 import { tap } from "rxjs/operators"
 import { SearchResult } from "@prose-reader/enhancer-search"
 import { groupBy } from "@prose-reader/core"
-import { FullScreenModal } from "./common/FullScreenModal"
-import { useReader } from "./reader/useReader"
+import { FullScreenModal } from "../common/FullScreenModal"
+import { useReader } from "./useReader"
 
 export const SearchDialog = ({ onExit, isOpen }: { onExit: () => void; isOpen: boolean }) => {
   const [text, setText] = useState("")

packages/demo/src/TocDialog.tsx → packages/demo/src/reader/TocDialog.tsx

@@ -2,10 +2,10 @@ import { CheckCircleIcon } from "@chakra-ui/icons"
 import { List, ListIcon, ListItem, Text } from "@chakra-ui/react"
 import React, { useEffect, useState } from "react"
 import { useRecoilValue } from "recoil"
-import { manifestState } from "./state"
-import { FullScreenModal } from "./common/FullScreenModal"
-import { useReader } from "./reader/useReader"
-import { usePagination } from "./reader/state"
+import { manifestState } from "../state"
+import { FullScreenModal } from "../common/FullScreenModal"
+import { useReader } from "./useReader"
+import { usePagination } from "./state"
 
 export const TocDialog = ({ onExit, isOpen }: { onExit: () => void; isOpen: boolean }) => {
   const { nav, renditionLayout } = useRecoilValue(manifestState) || {}

packages/demo/src/useBookmarks.ts → packages/demo/src/reader/useBookmarks.ts

@@ -1,7 +1,6 @@
 import { useEffect } from "react"
 import { tap, switchMap } from "rxjs/operators"
-import { Report } from "./report"
-import { ReaderInstance } from "./types"
+import { ReaderInstance } from "../types"
 
 type Bookmark = Parameters<ReaderInstance[`bookmarks`][`load`]>[0][number]
 
@@ -17,7 +16,7 @@ export const useBookmarks = (reader: ReaderInstance | undefined, bookKey: string
                 const importableBookmarks = reader.bookmarks.mapToImportable(bookmarks)
                 persist(bookKey, importableBookmarks)
 
-                Report.log(`persisted bookmarks`, importableBookmarks)
+                console.log(`persisted bookmarks`, importableBookmarks)
               })
             )
           )
@@ -36,7 +35,7 @@ export const useBookmarks = (reader: ReaderInstance | undefined, bookKey: string
   useEffect(() => {
     const bookmarksForBook = restore(bookKey)
 
-    Report.log(`restored bookmarks`, bookmarksForBook)
+    console.log(`restored bookmarks`, bookmarksForBook)
 
     reader?.bookmarks.load(bookmarksForBook)
   }, [reader, bookKey])

packages/demo/src/useHighlights.ts → packages/demo/src/reader/useHighlights.ts

@@ -1,8 +1,8 @@
 import { useEffect } from "react"
-import { ReaderInstance } from "./types"
+import { ReaderInstance } from "../types"
 import { tap } from "rxjs/operators"
 import { useSetRecoilState } from "recoil"
-import { currentHighlight, isMenuOpenState } from "./state"
+import { currentHighlight, isMenuOpenState } from "../state"
 
 export const useHighlights = (reader: ReaderInstance | undefined) => {
   const setMenuOpenState = useSetRecoilState(isMenuOpenState)

packages/demo/src/useManifest.ts → packages/demo/src/reader/useManifest.ts

@@ -1,7 +1,6 @@
 import { Manifest } from "@prose-reader/core"
 import { useQuery } from "react-query"
-import { Report } from "./report"
-import { STREAMER_URL_PREFIX } from "./serviceWorker/constants"
+import { STREAMER_URL_PREFIX } from "../serviceWorker/constants"
 
 export const useManifest = (epubUrl: string) =>
   useQuery(
@@ -18,6 +17,6 @@ export const useManifest = (epubUrl: string) =>
       refetchOnMount: false,
       refetchOnReconnect: false,
       refetchOnWindowFocus: false,
-      onError: Report.error
+      onError: console.error
     }
   )

packages/demo/src/serviceWorker/loadEpub.ts

@@ -1,5 +1,4 @@
 import { loadAsync } from "jszip"
-import { Report } from "../report"
 import { createArchiveFromText, Archive, createArchiveFromJszip } from "@prose-reader/streamer"
 import localforage from "localforage"
 import { getEpubFilenameFromUrl } from "./utils"
@@ -14,7 +13,7 @@ const cleanup = () => {
   cleanupInterval = setInterval(
     () => {
       if (!loading && archive) {
-        Report.log(`serviceWorker`, `cleaning up unused epub archive reference (after 5mn)`)
+        console.log(`serviceWorker`, `cleaning up unused epub archive reference (after 5mn)`)
         archive = undefined
         lastUrl = undefined
       }