Merge pull request #66 from mbret/develop

release

.github/workflows/check_commit.yml

@@ -29,8 +29,8 @@ jobs:
 
       - name: Install & Build prod js files
         run: |
-          yarn
-          yarn build:server
+          npm
+          npm run build:server
 
       # Runs a set of commands using the runners shell
       - name: Commit and push to branch
@@ -72,7 +72,7 @@ jobs:
           touch .secrets/jwt-private-key.key
           echo "$JWT_PRIVATE_KEY" > .secrets/jwt-private-key.key
 
-          yarn compile
+          npm run compile
           sam build
           sam deploy --no-confirm-changeset --parameter-overrides\
            ParameterKey=Environment,ParameterValue=PROD \

packages/web/src/books/Cover.tsx

@@ -11,14 +11,14 @@ import {
 import { useCSS } from "../common/utils"
 import { API_URI } from "../constants"
 import { useLocalSettings } from "../settings/states"
-import { normalizedBookDownloadsStateSignal } from "../download/states"
+import { booksDownloadStateSignal } from "../download/states"
 import { useSignalValue } from "reactjrx"
 import { authStateSignal } from "../auth/authState"
 
 const useBookCoverState = ({ bookId }: { bookId: string }) => {
   const tags = useTagsByIds().data
   const normalizedBookDownloadsState = useSignalValue(
-    normalizedBookDownloadsStateSignal
+    booksDownloadStateSignal
   )
   const blurredTags = useBlurredTagIds().data ?? []
   const protectedTags = useProtectedTagIds().data ?? []

packages/web/src/books/ManageBookCollectionsDialog.tsx

@@ -1,11 +1,10 @@
 import { FC, useCallback } from "react"
-import { useCollectionIdsState } from "../collections/states"
+import { useVisibleCollectionIds } from "../collections/states"
 import { useAddCollectionToBook, useRemoveCollectionFromBook } from "./helpers"
 import { useBookState } from "./states"
 import { CollectionsSelectionDialog } from "../collections/CollectionsSelectionDialog"
-import { libraryStateSignal } from "../library/states"
 import { useLocalSettings } from "../settings/states"
-import { useProtectedTagIds, useTagsByIds } from "../tags/helpers"
+import { useTagsByIds } from "../tags/helpers"
 import { SIGNAL_RESET, signal, useSignalValue } from "reactjrx"
 
 const openManageBookCollectionsDialogStateSignal = signal<string | undefined>({
@@ -30,13 +29,8 @@ export const useManageBookCollectionsDialog = () => {
 
 export const ManageBookCollectionsDialog: FC<{}> = () => {
   const id = useSignalValue(openManageBookCollectionsDialogStateSignal)
-  const libraryState = useSignalValue(libraryStateSignal)
   const open = !!id
-  const collections = useCollectionIdsState({
-    libraryState,
-    localSettingsState: useLocalSettings(),
-    protectedTagIds: useProtectedTagIds().data
-  })
+  const { data: collections = [] } = useVisibleCollectionIds()
 
   const book = useBookState({ bookId: id, tags: useTagsByIds().data })
   const { mutate: addToBook } = useAddCollectionToBook()

packages/web/src/books/bookList/BookListCoverContainer.tsx

@@ -1,113 +1,135 @@
 import React, { FC, memo } from "react"
-import { Chip, useTheme } from "@mui/material"
+import { Box, Chip, useTheme } from "@mui/material"
 import {
-  CheckCircleRounded,
+  CheckOutlined,
   CloudDownloadRounded,
   ErrorRounded,
   LoopRounded,
-  NoEncryptionRounded
+  NoEncryptionOutlined,
+  ThumbDownOutlined
 } from "@mui/icons-material"
 import { Cover } from "../Cover"
-import { useEnrichedBookState } from "../states"
+import { useBook, useIsBookProtected } from "../states"
 import { ReadingStateState } from "@oboku/shared"
 import { ReadingProgress } from "./ReadingProgress"
-import {
-  DownloadState,
-  normalizedBookDownloadsStateSignal
-} from "../../download/states"
+import { DownloadState, useBookDownloadState } from "../../download/states"
 import { useCSS } from "../../common/utils"
-import { useProtectedTagIds, useTagsByIds } from "../../tags/helpers"
-import { useSignalValue } from "reactjrx"
+import { CoverIconBadge } from "./CoverIconBadge"
 
-type Book = ReturnType<typeof useEnrichedBookState>
+type Book = ReturnType<typeof useBook>["data"]
 
 export const BookListCoverContainer: FC<{
   bookId: string
   className?: string
   style?: React.CSSProperties
   withReadingProgressStatus?: boolean
   withDownloadStatus?: boolean
-  withMetadaStatus?: boolean
-  withProtectedStatus?: boolean
-  size?: "small" | "large"
+  withBadges: boolean
+  size?: "small" | "large" | "medium"
 }> = memo(
   ({
     bookId,
     className,
-    withMetadaStatus = true,
     style,
     withDownloadStatus = true,
     withReadingProgressStatus = true,
-    size = "small",
-    withProtectedStatus = true
+    withBadges,
+    size = "small"
   }) => {
-    const item = useEnrichedBookState({
-      bookId,
-      normalizedBookDownloadsState: useSignalValue(
-        normalizedBookDownloadsStateSignal
-      ),
-      protectedTagIds: useProtectedTagIds().data,
-      tags: useTagsByIds().data
-    })
+    const { data: item } = useBook({ id: bookId })
+    const bookDownloadState = useBookDownloadState(bookId)
+    const { data: isBookProtected = true } = useIsBookProtected(item)
     const classes = useStyles({ item })
 
     return (
-      <div
+      <Box
         style={{ ...classes.coverContainer, ...style }}
         className={className}
       >
         {item && <Cover bookId={item?._id} />}
-        {item?.downloadState !== DownloadState.Downloaded && (
-          <div style={classes.downloadOverlay} />
+        {bookDownloadState?.downloadState !== DownloadState.Downloaded && (
+          <Box
+            bgcolor="white"
+            top={0}
+            position="absolute"
+            width="100%"
+            style={{
+              opacity: 0.5,
+              height:
+                bookDownloadState?.downloadState === DownloadState.Downloading
+                  ? `${100 - (bookDownloadState?.downloadProgress || 0)}%`
+                  : `100%`
+            }}
+          />
         )}
-        {withProtectedStatus && item?.isProtected && (
-          <div style={classes.protectedIconContainer}>
-            <NoEncryptionRounded
-              style={classes.protectedIcon}
-              fontSize="small"
+        <Box style={classes.bodyContainer} gap={1}>
+          {withBadges && (
+            <Box
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              flexDirection="row"
+              width="100%"
+            >
+              <Box gap={1} flexDirection="row" display="flex">
+                {isBookProtected && (
+                  <CoverIconBadge>
+                    <NoEncryptionOutlined fontSize={size} />
+                  </CoverIconBadge>
+                )}
+                {item?.isNotInterested && (
+                  <CoverIconBadge>
+                    <ThumbDownOutlined fontSize={size} />
+                  </CoverIconBadge>
+                )}
+              </Box>
+              {withReadingProgressStatus &&
+                item?.readingStateCurrentState ===
+                  ReadingStateState.Finished && (
+                  <CoverIconBadge alignSelf="flex-end" justifySelf="flex-end">
+                    <CheckOutlined fontSize={size} />
+                  </CoverIconBadge>
+                )}
+            </Box>
+          )}
+          {withBadges && item?.metadataUpdateStatus === "fetching" && (
+            <Chip
+              color="primary"
+              size="small"
+              icon={<LoopRounded color="primary" className="icon-spin" />}
+              label="metadata..."
             />
-          </div>
-        )}
-        {withReadingProgressStatus &&
-          item?.readingStateCurrentState === ReadingStateState.Finished && (
-            <div style={classes.finishIconContainer}>
-              <CheckCircleRounded style={classes.finishIcon} fontSize={size} />
-            </div>
           )}
-        <div style={classes.bodyContainer}>
-          {withMetadaStatus && item?.metadataUpdateStatus === "fetching" && (
-            <div style={classes.itemCoverCenterInfo}>
+          {withBadges &&
+            item?.metadataUpdateStatus !== "fetching" &&
+            !!item?.lastMetadataUpdateError && (
               <Chip
                 color="primary"
                 size="small"
-                icon={<LoopRounded color="primary" className="icon-spin" />}
-                label="metadata..."
+                icon={<ErrorRounded color="primary" />}
+                label="metadata"
               />
-            </div>
-          )}
-          {withMetadaStatus &&
-            item?.metadataUpdateStatus !== "fetching" &&
-            !!item?.lastMetadataUpdateError && (
-              <div style={classes.itemCoverCenterInfo}>
-                <Chip
-                  color="primary"
-                  size="small"
-                  icon={<ErrorRounded color="primary" />}
-                  label="metadata"
-                />
+            )}
+          {withDownloadStatus &&
+            bookDownloadState?.downloadState === DownloadState.None && (
+              <CoverIconBadge
+                position="absolute"
+                left="50%"
+                top="50%"
+                style={{
+                  transform: "translate(-50%, -50%)"
+                }}
+              >
+                <CloudDownloadRounded color="action" fontSize={size} />
+              </CoverIconBadge>
+            )}
+          {withDownloadStatus &&
+            bookDownloadState?.downloadState === DownloadState.Downloading && (
+              <div style={classes.pauseButton}>
+                <Chip color="primary" size="small" label="downloading..." />
               </div>
             )}
-          {item?.downloadState === "none" && (
-            <div style={classes.pauseButton}>
-              <CloudDownloadRounded color="action" fontSize={size} />
-            </div>
-          )}
-          {withDownloadStatus && item?.downloadState === "downloading" && (
-            <div style={classes.pauseButton}>
-              <Chip color="primary" size="small" label="downloading..." />
-            </div>
-          )}
-        </div>
+        </Box>
         {withReadingProgressStatus && (
           <>
             {item?.readingStateCurrentState === ReadingStateState.Reading && (
@@ -120,7 +142,7 @@ export const BookListCoverContainer: FC<{
             )}
           </>
         )}
-      </div>
+      </Box>
     )
   }
 )
@@ -135,30 +157,13 @@ const useStyles = ({ item }: { item: Book }) => {
         display: "flex",
         minHeight: 0 // @see https://stackoverflow.com/questions/42130384/why-should-i-specify-height-0-even-if-i-specified-flex-basis-0-in-css3-flexbox
       },
-      itemCoverCenterInfo: {
-        display: "flex",
-        overflow: "hidden"
-      },
-      itemCoverCenterInfoText: {},
-      finishIconContainer: { position: "absolute", right: 5, top: 5 },
-      finishIcon: { opacity: "70%", color: "black" },
-      protectedIconContainer: {
-        position: "absolute",
-        left: 5,
-        top: 5,
-        backgroundColor: "black",
-        borderRadius: 50,
-        padding: 4,
-        opacity: "70%"
-      },
-      protectedIcon: { opacity: "100%", color: "white" },
       bodyContainer: {
         position: "absolute",
         height: "100%",
         width: "100%",
         top: 0,
         display: "flex",
-        padding: theme.spacing(1),
+        padding: theme.spacing(0.5),
         flexDirection: "column",
         alignItems: "center"
       },
@@ -173,17 +178,6 @@ const useStyles = ({ item }: { item: Book }) => {
         position: "absolute",
         left: "50%",
         top: "50%"
-      },
-      downloadOverlay: {
-        backgroundColor: "white",
-        opacity: 0.5,
-        height:
-          item?.downloadState === DownloadState.Downloading
-            ? `${100 - (item?.downloadProgress || 0)}%`
-            : `100%`,
-        width: "100%",
-        position: "absolute",
-        top: 0
       }
     }),
     [theme, item]

packages/web/src/books/bookList/BookListGridItem.tsx

@@ -6,7 +6,7 @@ import { useEnrichedBookState } from "../states"
 import { useDefaultItemClickHandler } from "./helpers"
 import { BookListCoverContainer } from "./BookListCoverContainer"
 import { useCSS } from "../../common/utils"
-import { normalizedBookDownloadsStateSignal } from "../../download/states"
+import { booksDownloadStateSignal } from "../../download/states"
 import { useProtectedTagIds, useTagsByIds } from "../../tags/helpers"
 import { useSignalValue } from "reactjrx"
 
@@ -25,7 +25,7 @@ export const BookListGridItem: FC<{
   onItemClick?: (id: string) => void
 }> = memo(({ bookId, onItemClick }) => {
   const normalizedBookDownloadsState = useSignalValue(
-    normalizedBookDownloadsStateSignal
+    booksDownloadStateSignal
   )
   const { data: protectedTagIds } = useProtectedTagIds()
   const tags = useTagsByIds().data
@@ -50,7 +50,8 @@ export const BookListGridItem: FC<{
       <BookListCoverContainer
         bookId={bookId}
         style={classes.coverContainer}
-        size="large"
+        size="medium"
+        withBadges
       />
       <Box
         style={classes.itemBottomContainer}