Merge pull request #78 from mbret/develop

release

packages/web/src/books/useUpdateBooks.ts

@@ -0,0 +1,24 @@
+import { useMutation } from "reactjrx"
+import { getLatestDatabase } from "../rxdb/useCreateDatabase"
+import { from, mergeMap } from "rxjs"
+import { MangoQuery } from "rxdb"
+import { BookDocType } from "@oboku/shared"
+
+export const useUpdateBooks = () => {
+  return useMutation({
+    mutationFn: ({
+      queryObj,
+      updateObj
+    }: {
+      queryObj: MangoQuery<BookDocType>
+      updateObj: any
+    }) =>
+      getLatestDatabase().pipe(
+        mergeMap((database) => {
+          const query = database.book.find(queryObj)
+
+          return from(query.update(updateObj))
+        })
+      )
+  })
+}

packages/web/src/collections/CollectionDetailsScreen.tsx

@@ -4,9 +4,9 @@ import { useNavigate, useParams } from "react-router-dom"
 import EmptyLibraryAsset from "../assets/empty-library.svg"
 import CollectionBgSvg from "../assets/series-bg.svg"
 import { useCollection } from "./states"
-import { useCollectionActionsDrawer } from "./CollectionActionsDrawer"
 import { BookListWithControls } from "../books/bookList/BookListWithControls"
 import { useVisibleBookIds } from "../books/states"
+import { useCollectionActionsDrawer } from "../library/collections/CollectionActionsDrawer/useCollectionActionsDrawer"
 
 type ScreenParams = {
   id: string

packages/web/src/collections/list/CollectionList.tsx

@@ -12,6 +12,7 @@ import { ReactWindowList } from "../../common/lists/ReactWindowList"
 import { CollectionListItemList } from "./CollectionListItemList"
 import { CollectionDocType } from "@oboku/shared"
 import { DeepReadonlyObject } from "rxdb"
+import { useWindowSize } from "react-use"
 
 export const CollectionList: FC<
   {
@@ -28,9 +29,24 @@ export const CollectionList: FC<
     `rowRenderer` | `itemsPerRow` | `data`
   >
 > = memo(({ itemMode, ...props }) => {
-  const { renderHeader, headerHeight, style, data, onItemClick, ...rest } =
-    props
+  const {
+    renderHeader,
+    viewMode,
+    headerHeight,
+    style,
+    data,
+    onItemClick,
+    ...rest
+  } = props
   const classes = useStyle()
+  const windowSize = useWindowSize()
+  const dynamicNumberOfItems = Math.floor(windowSize.width / 350)
+  const itemsPerRow =
+    viewMode === "grid"
+      ? dynamicNumberOfItems > 0
+        ? dynamicNumberOfItems
+        : dynamicNumberOfItems
+      : 1
 
   const rowRenderer = useCallback(
     (item: string) => (
@@ -63,7 +79,7 @@ export const CollectionList: FC<
       <ReactWindowList
         data={data}
         rowRenderer={rowRenderer}
-        itemsPerRow={1}
+        itemsPerRow={itemsPerRow}
         headerHeight={headerHeight}
         renderHeader={renderHeader}
         itemHeight={250}

packages/web/src/collections/list/CollectionListItemList.tsx

@@ -12,9 +12,9 @@ import { useCSS } from "../../common/utils"
 import { MoreVert } from "@mui/icons-material"
 import { CollectionDocType } from "@oboku/shared"
 import { Cover } from "../../books/Cover"
-import { useCollectionActionsDrawer } from "../CollectionActionsDrawer"
 import { useCollection } from "../states"
 import { DeepReadonlyObject } from "rxdb"
+import { useCollectionActionsDrawer } from "../../library/collections/CollectionActionsDrawer/useCollectionActionsDrawer"
 
 const ListItem = styled(MuiListItem)(() => ({
   height: `100%`,

packages/web/src/collections/useRemoveCollection.ts

@@ -5,7 +5,13 @@ export const useRemoveCollection = () => {
   const { db } = useDatabase()
 
   return useMutation({
-    mutationFn: async ({ _id }: { _id: string }) =>
-      db?.obokucollection.findOne({ selector: { _id } }).remove()
+    mutationFn: async ({ _id }: { _id: string }) => {
+      const document = await db?.obokucollection.findOne(_id).exec()
+
+      if (!document) throw new Error("no item")
+
+      return document.remove()
+    },
+    onError: console.error
   })
-}
+}

packages/web/src/collections/useUpdateCollectionBooks.ts

@@ -0,0 +1,49 @@
+import { useMutation } from "reactjrx"
+import { getLatestDatabase } from "../rxdb/useCreateDatabase"
+import { from, mergeMap } from "rxjs"
+import { useUpdateBooks } from "../books/useUpdateBooks"
+
+export const useUpdateCollectionBooks = () => {
+  const { mutateAsync: updateBooks } = useUpdateBooks()
+
+  return useMutation({
+    mutationFn: ({
+      id,
+      updateObj
+    }: {
+      id: string
+      updateObj: any
+    }) =>
+      getLatestDatabase().pipe(
+        mergeMap((database) =>
+          from(
+            database.obokucollection
+              .findOne({
+                selector: {
+                  _id: {
+                    $eq: id
+                  }
+                }
+              })
+              .exec()
+          )
+        ),
+        mergeMap((collection) => {
+          if (!collection) throw new Error("no item")
+
+          return from(
+            updateBooks({
+              queryObj: {
+                selector: {
+                  _id: {
+                    $in: collection.books
+                  }
+                }
+              },
+              updateObj
+            })
+          )
+        })
+      )
+  })
+}