fix: fixed collections

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/helpers.ts

@@ -9,7 +9,7 @@ import { Report } from "../debug/report.shared"
 import { useCallback, useMemo } from "react"
 import { useDownloadBook } from "../download/useDownloadBook"
 import { PromiseReturnType } from "../types"
-import { BookQueryResult, useBooks } from "./states"
+import { BookQueryResult, useBooksDic } from "./states"
 import { AtomicUpdateFunction } from "rxdb"
 import { useLock } from "../common/BlockingBackdrop"
 import { useNetworkState } from "react-use"
@@ -301,7 +301,7 @@ export const useBookIdsSortedBy = (
   ids: string[],
   sorting: "date" | "activity" | "alpha" | undefined
 ) => {
-  const { data: normalizedBooks = {} } = useBooks()
+  const { data: normalizedBooks = {} } = useBooksDic()
 
   return useMemo(() => {
     const books = ids

packages/web/src/books/states.ts

@@ -11,36 +11,47 @@ import {
   booksDownloadStateSignal,
   DownloadState
 } from "../download/states"
-import { getCollectionState, useCollections } from "../collections/states"
+import {
+  getCollectionState,
+  useCollectionsDictionary
+} from "../collections/states"
 import { map, switchMap, tap, withLatestFrom } from "rxjs"
 import { plugin } from "../plugins/local"
 import { latestDatabase$ } from "../rxdb/useCreateDatabase"
 import { useLocalSettings } from "../settings/states"
-import { useForeverQuery } from "reactjrx"
+import { useForeverQuery, useSignalValue } from "reactjrx"
 import { keyBy } from "lodash"
 import { Database } from "../rxdb"
 import { useMemo } from "react"
 import { BookDocType } from "@oboku/shared"
-import { DeepReadonlyObject } from "rxdb"
+import { DeepReadonlyObject, MangoQuery } from "rxdb"
 
 export const getBooksByIds = async (database: Database) => {
   const result = await database.collections.book.find({}).exec()
 
   return keyBy(result, "_id")
 }
 
-export const useBooks = () => {
+export const useBooks = ({
+  queryObj
+}: { queryObj?: MangoQuery<BookDocType> } = {}) => {
   return useForeverQuery({
-    queryKey: ["rxdb", "get", "many", "books"],
+    queryKey: ["rxdb", "get", "many", "books", queryObj],
     queryFn: () => {
       return latestDatabase$.pipe(
-        switchMap((db) => db.collections.book.find({}).$),
-        map((entries) => keyBy(entries, "_id"))
+        switchMap((db) => db.collections.book.find(queryObj).$),
+        map((items) => items.map((item) => item.toJSON()))
       )
     }
   })
 }
 
+export const useBooksDic = () => {
+  const { data, ...rest } = useBooks()
+
+  return { ...rest, data: data ? keyBy(data, "_id") : undefined }
+}
+
 export const useBook = ({ id }: { id?: string }) => {
   return useForeverQuery({
     queryKey: ["rxdb", "book", id],
@@ -78,7 +89,7 @@ const getBookState = ({
   book,
   tags = {}
 }: {
-  collections: ReturnType<typeof useCollections>["data"]
+  collections: ReturnType<typeof useCollectionsDictionary>["data"]
   book?: BookQueryResult | null
   tags: ReturnType<typeof useTagsByIds>["data"]
 }) => {
@@ -102,7 +113,7 @@ export const useBookState = ({
   tags: ReturnType<typeof useTagsByIds>["data"]
 }) => {
   const { data: book } = useBook({ id: bookId })
-  const { data: collections } = useCollections()
+  const { data: collections } = useCollectionsDictionary()
 
   return getBookState({
     book,
@@ -130,11 +141,11 @@ export const getEnrichedBookState = ({
   protectedTagIds: ReturnType<typeof useProtectedTagIds>["data"]
   tags: ReturnType<typeof useTagsByIds>["data"]
   normalizedLinks: ReturnType<typeof useLinks>["data"]
-  normalizedCollections: ReturnType<typeof useCollections>["data"]
-  normalizedBooks: ReturnType<typeof useBooks>["data"]
+  normalizedCollections: ReturnType<typeof useCollectionsDictionary>["data"]
+  normalizedBooks: ReturnType<typeof useBooksDic>["data"]
 }) => {
   const book = getBookState({
-    book: normalizedBooks[bookId]?.toJSON(),
+    book: normalizedBooks[bookId],
     tags,
     collections: normalizedCollections
   })
@@ -189,8 +200,8 @@ export const useEnrichedBookState = (param: {
   tags: ReturnType<typeof useTagsByIds>["data"]
 }) => {
   const { data: normalizedLinks } = useLinks()
-  const { data: normalizedCollections } = useCollections()
-  const { data: normalizedBooks } = useBooks()
+  const { data: normalizedCollections } = useCollectionsDictionary()
+  const { data: normalizedBooks } = useBooksDic()
 
   return getEnrichedBookState({
     ...param,
@@ -222,21 +233,14 @@ export const useDownloadedBookWithUnsafeProtectedIdsState = ({
  * @deprecated
  */
 export const useBooksAsArrayState = ({
-  libraryState,
-  normalizedBookDownloadsState,
-  protectedTagIds = []
+  normalizedBookDownloadsState
 }: {
-  libraryState: ReturnType<typeof libraryStateSignal.getValue>
   normalizedBookDownloadsState: ReturnType<
     typeof booksDownloadStateSignal.getValue
   >
-  protectedTagIds: ReturnType<typeof useProtectedTagIds>["data"]
 }) => {
-  const { data: books = {}, isPending } = useBooks()
-  const visibleBookIds = useVisibleBookIdsState({
-    libraryState,
-    protectedTagIds
-  })
+  const { data: books = {}, isPending } = useBooksDic()
+  const visibleBookIds = useVisibleBookIds()
 
   const bookResult: (BookQueryResult & {
     downloadState: ReturnType<typeof getBookDownloadsState>
@@ -256,7 +260,7 @@ export const useBooksAsArrayState = ({
       return [
         ...acc,
         {
-          ...book.toJSON(),
+          ...book,
           downloadState
         }
       ]
@@ -266,28 +270,23 @@ export const useBooksAsArrayState = ({
 }
 
 export const useBookIdsState = () => {
-  const { data: books = {} } = useBooks()
+  const { data: books = {} } = useBooksDic()
 
   return Object.keys(books)
 }
 
-/**
- * @deprecated
- */
-export const useVisibleBookIdsState = ({
-  libraryState: { isLibraryUnlocked },
-  protectedTagIds = []
-}: {
-  libraryState: ReturnType<typeof libraryStateSignal.getValue>
-  protectedTagIds: ReturnType<typeof useProtectedTagIds>["data"]
-}) => {
-  const { data: books = {} } = useBooks()
+export const useVisibleBookIds = ({
+  queryObj
+}: { queryObj?: MangoQuery<BookDocType> } = {}) => {
+  const { data: books = [] } = useBooks({ queryObj })
+  const { data: protectedTagIds } = useProtectedTagIds()
+  const { isLibraryUnlocked } = useSignalValue(libraryStateSignal)
 
   return useMemo(() => {
     if (isLibraryUnlocked) {
-      return Object.keys(books)
+      return books.map((item) => item._id)
     } else {
-      return Object.values(books)
+      return books
         .filter(
           (book) => intersection(protectedTagIds, book?.tags || []).length === 0
         )
@@ -344,11 +343,8 @@ export const useBookCollectionsState = ({
   tags: ReturnType<typeof useTagsByIds>["data"]
 }) => {
   const book = useBookState({ bookId, tags })
-  const { data: normalizedCollections } = useCollections()
-  const bookIds = useVisibleBookIdsState({
-    libraryState,
-    protectedTagIds
-  })
+  const { data: normalizedCollections } = useCollectionsDictionary()
+  const bookIds = useVisibleBookIds()
 
   return book?.collections?.map((id) =>
     getCollectionState({

packages/web/src/collections/CollectionActionsDrawer.tsx

@@ -26,7 +26,6 @@ import { useCallback } from "react"
 import { useRef } from "react"
 import { libraryStateSignal } from "../library/states"
 import { useLocalSettings } from "../settings/states"
-import { useProtectedTagIds } from "../tags/helpers"
 import { signal, useSignalValue } from "reactjrx"
 
 const collectionActionDrawerState = signal<{
@@ -184,9 +183,7 @@ const EditCollectionDialog: FC<{
   const libraryState = useSignalValue(libraryStateSignal)
   const collection = useCollectionState({
     id: id || "-1",
-    libraryState,
     localSettingsState: useLocalSettings(),
-    protectedTagIds: useProtectedTagIds().data
   })
   const { mutate: editCollection } = useUpdateCollection()
 

packages/web/src/collections/CollectionDetailsScreen.tsx

@@ -1,16 +1,12 @@
-import { useMemo } from "react"
 import { TopBarNavigation } from "../navigation/TopBarNavigation"
 import { Box, Typography, useTheme } from "@mui/material"
 import { useNavigate, useParams } from "react-router-dom"
 import EmptyLibraryAsset from "../assets/empty-library.svg"
 import CollectionBgSvg from "../assets/series-bg.svg"
-import { useCollectionState } from "./states"
+import { useCollection } from "./states"
 import { useCollectionActionsDrawer } from "./CollectionActionsDrawer"
 import { BookListWithControls } from "../books/bookList/BookListWithControls"
-import { useLocalSettings } from "../settings/states"
-import { useProtectedTagIds } from "../tags/helpers"
-import { useSignalValue } from "reactjrx"
-import { libraryStateSignal } from "../library/states"
+import { useVisibleBookIds } from "../books/states"
 
 type ScreenParams = {
   id: string
@@ -20,18 +16,19 @@ export const CollectionDetailsScreen = () => {
   const theme = useTheme()
   const navigate = useNavigate()
   const { id = `-1` } = useParams<ScreenParams>()
-  const libraryState = useSignalValue(libraryStateSignal)
-  const collection = useCollectionState({
-    id: id || "-1",
-    libraryState,
-    localSettingsState: useLocalSettings(),
-    protectedTagIds: useProtectedTagIds().data
+  const { data: collection } = useCollection({
+    id
   })
-  const data =
-    useMemo(
-      () => collection?.books?.map((book) => book || "-1"),
-      [collection?.books]
-    ) || []
+  const visibleBooks = useVisibleBookIds({
+    queryObj: {
+      selector: {
+        _id: {
+          $in: collection?.books ?? []
+        }
+      }
+    }
+  })
+
   const { open: openActionDrawer } = useCollectionActionsDrawer(
     id,
     (changes) => {
@@ -96,7 +93,7 @@ export const CollectionDetailsScreen = () => {
             </div>
           </Box>
           <BookListWithControls
-            data={data}
+            data={visibleBooks}
             defaultSort="alpha"
             renderEmptyList={
               <div

packages/web/src/collections/ManageCollectionBooksDialog.tsx

@@ -10,28 +10,21 @@ import { useCallback } from "react"
 import { BooksSelectionDialog } from "../books/BooksSelectionDialog"
 import { booksDownloadStateSignal } from "../download/states"
 import { useLocalSettings } from "../settings/states"
-import { useProtectedTagIds } from "../tags/helpers"
 import { useSignalValue } from "reactjrx"
-import { libraryStateSignal } from "../library/states"
 
 export const ManageCollectionBooksDialog: FC<{
   onClose: () => void
   open: boolean
   collectionId: string
 }> = ({ onClose, open, collectionId }) => {
-  const libraryState = useSignalValue(libraryStateSignal)
   const collection = useCollectionState({
     id: collectionId || "-1",
-    libraryState,
     localSettingsState: useLocalSettings(),
-    protectedTagIds: useProtectedTagIds().data
   })
   const { data: books } = useBooksAsArrayState({
-    libraryState,
     normalizedBookDownloadsState: useSignalValue(
       booksDownloadStateSignal
     ),
-    protectedTagIds: useProtectedTagIds().data
   })
   const { mutate: addToBook } = useAddCollectionToBook()
   const { mutate: removeFromBook } = useRemoveCollectionFromBook()

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

@@ -15,9 +15,6 @@ import { CollectionDocType } from "@oboku/shared"
 import { Cover } from "../../books/Cover"
 import { useCollectionActionsDrawer } from "../CollectionActionsDrawer"
 import { useLocalSettings } from "../../settings/states"
-import { useProtectedTagIds } from "../../tags/helpers"
-import { useSignalValue } from "reactjrx"
-import { libraryStateSignal } from "../../library/states"
 
 const ListItem = styled(MuiListItem)(() => ({
   height: `100%`,
@@ -35,12 +32,9 @@ export const CollectionListItemList: FC<{
   viewMode?: "container" | "text"
 }> = memo(({ id, onItemClick }) => {
   const theme = useTheme()
-  const libraryState = useSignalValue(libraryStateSignal)
   const item = useCollectionState({
     id,
-    libraryState,
     localSettingsState: useLocalSettings(),
-    protectedTagIds: useProtectedTagIds().data
   })
   const { open: openActionDrawer } = useCollectionActionsDrawer(id)
   const styles = useStyle()

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

@@ -1,15 +1,15 @@
 import { FC, memo } from "react"
 import { ListItem, ListItemText, useTheme } from "@mui/material"
 import { useCSS } from "../../common/utils"
-import { useCollections } from "../states"
+import { useCollectionsDictionary } from "../states"
 import { Checkbox } from "../../common/Checkbox"
 
 export const SelectableCollectionListItem: FC<{
   id: string
   onItemClick?: (tag: string) => void
   selected: boolean
 }> = memo(({ id, onItemClick, selected }) => {
-  const { data: collections = {} } = useCollections()
+  const { data: collections = {} } = useCollectionsDictionary()
   const data = collections[id]
   const styles = useStyle()