Merge pull request #70 from mbret/develop

release

packages/web/src/books/bookList/helpers.ts

@@ -7,7 +7,7 @@ import { getProtectedTags, getTagsByIds } from "../../tags/helpers"
 import { useDatabase } from "../../rxdb"
 import { getLinksByIds } from "../../links/states"
 import { useCallback } from "react"
-import { getCollectionsByIds } from "../../collections/states"
+import { getCollectionsByIds } from "../../collections/databaseHelpers"
 
 export const useDefaultItemClickHandler = () => {
   const downloadFile = useDownloadBook()

packages/web/src/books/details/BookDetailsScreen.tsx

@@ -60,15 +60,13 @@ export const BookDetailsScreen = () => {
   const libraryState = useSignalValue(libraryStateSignal)
   const book = useEnrichedBookState({
     bookId: id,
-    normalizedBookDownloadsState: useSignalValue(
-      booksDownloadStateSignal
-    ),
+    normalizedBookDownloadsState: useSignalValue(booksDownloadStateSignal),
     protectedTagIds: useProtectedTagIds().data,
     tags: useTagsByIds().data
   })
   const tags = useBookTagsState({ bookId: id, tags: useTagsByIds().data })
 
-  const collections = useBookCollectionsState({
+  const { data: collections } = useBookCollectionsState({
     bookId: id,
     libraryState,
     localSettingsState: useLocalSettings(),

packages/web/src/books/states.ts

@@ -12,7 +12,7 @@ import {
   DownloadState
 } from "../download/states"
 import {
-  getCollectionState,
+  useCollections,
   useCollectionsDictionary
 } from "../collections/states"
 import { map, switchMap, withLatestFrom } from "rxjs"
@@ -144,7 +144,7 @@ export const getEnrichedBookState = ({
   protectedTagIds: ReturnType<typeof useProtectedTagIds>["data"]
   tags: ReturnType<typeof useTagsByIds>["data"]
   normalizedLinks: ReturnType<typeof useLinks>["data"]
-  normalizedCollections: ReturnType<typeof useCollectionsDictionary>["data"]
+  normalizedCollections: Omit<ReturnType<typeof useCollectionsDictionary>["data"], "displayableName">
   normalizedBooks: ReturnType<typeof useBooksDic>["data"]
 }) => {
   const book = getBookState({
@@ -206,7 +206,7 @@ export const useEnrichedBookState = (param: {
   tags: ReturnType<typeof useTagsByIds>["data"]
 }) => {
   const { data: normalizedLinks } = useLinks()
-  const { data: normalizedCollections } = useCollectionsDictionary()
+  const { data: normalizedCollections = {} } = useCollectionsDictionary()
   const { data: normalizedBooks } = useBooksDic()
 
   return getEnrichedBookState({
@@ -352,14 +352,15 @@ export const useBookCollectionsState = ({
   const { data: normalizedCollections } = useCollectionsDictionary()
   const bookIds = useVisibleBookIds()
 
-  return book?.collections?.map((id) =>
-    getCollectionState({
-      id,
-      localSettingsState,
-      normalizedCollections,
-      bookIds
-    })
-  )
+  return useCollections({
+    queryObj: {
+      selector: {
+        _id: {
+          $in: book?.collections ?? []
+        }
+      }
+    }
+  })
 }
 
 // export const useBookCollectionsState = ({

packages/web/src/collections/CollectionActionsDrawer.tsx

@@ -18,15 +18,15 @@ import {
   DeleteForeverRounded,
   LibraryAddRounded
 } from "@mui/icons-material"
-import { useRemoveCollection, useUpdateCollection } from "./helpers"
-import { useCollectionState } from "./states"
+import { useCollection } from "./states"
 import { ManageCollectionBooksDialog } from "./ManageCollectionBooksDialog"
 import { useModalNavigationControl } from "../navigation/useModalNavigationControl"
 import { useCallback } from "react"
 import { useRef } from "react"
 import { libraryStateSignal } from "../library/states"
-import { useLocalSettings } from "../settings/states"
 import { signal, useSignalValue } from "reactjrx"
+import { useRemoveCollection } from "./useRemoveCollection"
+import { useUpdateCollection } from "./useUpdateCollection"
 
 const collectionActionDrawerState = signal<{
   openedWith: undefined | string
@@ -181,9 +181,8 @@ const EditCollectionDialog: FC<{
 }> = ({ onClose, open, id }) => {
   const [name, setName] = useState("")
   const libraryState = useSignalValue(libraryStateSignal)
-  const collection = useCollectionState({
-    id: id || "-1",
-    localSettingsState: useLocalSettings(),
+  const { data: collection } = useCollection({
+    id
   })
   const { mutate: editCollection } = useUpdateCollection()
 

packages/web/src/collections/ManageCollectionBooksDialog.tsx

@@ -4,27 +4,23 @@ import {
   useAddCollectionToBook
 } from "../books/helpers"
 import { useBooksAsArrayState } from "../books/states"
-import { useCollectionState } from "./states"
 import { useMemo } from "react"
 import { useCallback } from "react"
 import { BooksSelectionDialog } from "../books/BooksSelectionDialog"
 import { booksDownloadStateSignal } from "../download/states"
-import { useLocalSettings } from "../settings/states"
 import { useSignalValue } from "reactjrx"
+import { useCollection } from "./states"
 
 export const ManageCollectionBooksDialog: FC<{
   onClose: () => void
   open: boolean
   collectionId: string
 }> = ({ onClose, open, collectionId }) => {
-  const collection = useCollectionState({
-    id: collectionId || "-1",
-    localSettingsState: useLocalSettings(),
+  const { data: collection } = useCollection({
+    id: collectionId
   })
   const { data: books } = useBooksAsArrayState({
-    normalizedBookDownloadsState: useSignalValue(
-      booksDownloadStateSignal
-    ),
+    normalizedBookDownloadsState: useSignalValue(booksDownloadStateSignal)
   })
   const { mutate: addToBook } = useAddCollectionToBook()
   const { mutate: removeFromBook } = useRemoveCollectionFromBook()

packages/web/src/collections/databaseHelpers.ts

@@ -0,0 +1,19 @@
+import { CollectionDocType, directives } from "@oboku/shared"
+import { useLocalSettings } from "../settings/states"
+import { useForeverQuery } from "reactjrx"
+import { latestDatabase$ } from "../rxdb/useCreateDatabase"
+import { map, switchMap } from "rxjs"
+import { keyBy } from "lodash"
+import { Database } from "../rxdb"
+import { useVisibleBookIds } from "../books/states"
+
+export type Collection = CollectionDocType
+
+export const getCollectionsByIds = async (database: Database) => {
+  const result = await database.collections.obokucollection.find({}).exec()
+
+  return keyBy(
+    result.map((item) => item.toJSON()),
+    "_id"
+  )
+}

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

@@ -11,14 +11,15 @@ import { useCSS } from "../../common/utils"
 import { ReactWindowList } from "../../common/lists/ReactWindowList"
 import { CollectionListItemList } from "./CollectionListItemList"
 import { CollectionDocType } from "@oboku/shared"
+import { DeepReadonlyObject } from "rxdb"
 
 export const CollectionList: FC<
   {
     renderHeader?: () => React.ReactNode
     headerHeight?: number
     style?: React.CSSProperties
     data: string[]
-    onItemClick?: (item: CollectionDocType) => void
+    onItemClick?: (item: DeepReadonlyObject<CollectionDocType>) => void
     viewMode?: "list" | "grid"
     itemMode?: ComponentProps<typeof CollectionListItemList>["viewMode"]
     static?: boolean

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

@@ -10,11 +10,11 @@ import {
 } from "@mui/material"
 import { useCSS } from "../../common/utils"
 import { MoreVert } from "@mui/icons-material"
-import { useCollectionState } from "../states"
 import { CollectionDocType } from "@oboku/shared"
 import { Cover } from "../../books/Cover"
 import { useCollectionActionsDrawer } from "../CollectionActionsDrawer"
-import { useLocalSettings } from "../../settings/states"
+import { useCollection } from "../states"
+import { DeepReadonlyObject } from "rxdb"
 
 const ListItem = styled(MuiListItem)(() => ({
   height: `100%`,
@@ -28,13 +28,12 @@ const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
 
 export const CollectionListItemList: FC<{
   id: string
-  onItemClick?: (tag: CollectionDocType) => void
+  onItemClick?: (tag: DeepReadonlyObject<CollectionDocType>) => void
   viewMode?: "container" | "text"
 }> = memo(({ id, onItemClick }) => {
   const theme = useTheme()
-  const item = useCollectionState({
-    id,
-    localSettingsState: useLocalSettings(),
+  const { data: item } = useCollection({
+    id
   })
   const { open: openActionDrawer } = useCollectionActionsDrawer(id)
   const styles = useStyle()

packages/web/src/collections/states.ts

@@ -4,27 +4,29 @@ import { useForeverQuery } from "reactjrx"
 import { latestDatabase$ } from "../rxdb/useCreateDatabase"
 import { map, switchMap } from "rxjs"
 import { keyBy } from "lodash"
-import { Database } from "../rxdb"
 import { useVisibleBookIds } from "../books/states"
+import { MangoQuery } from "rxdb"
 
 export type Collection = CollectionDocType
 
-export const getCollectionsByIds = async (database: Database) => {
-  const result = await database.collections.obokucollection.find({}).exec()
-
-  return keyBy(
-    result.map((item) => item.toJSON()),
-    "_id"
-  )
-}
+export const useCollections = ({
+  queryObj
+}: { queryObj?: MangoQuery<CollectionDocType> } = {}) => {
+  const localSettings = useLocalSettings()
 
-export const useCollections = () => {
   return useForeverQuery({
-    queryKey: ["rxdb", "get", "collections"],
+    queryKey: ["rxdb", "get", "collections", queryObj],
     queryFn: () => {
       return latestDatabase$.pipe(
-        switchMap((db) => db.collections.obokucollection.find({}).$),
-        map((items) => items.map((item) => item.toJSON()))
+        switchMap((db) => db.collections.obokucollection.find(queryObj).$),
+        map((items) =>
+          items.map((item) => ({
+            ...item?.toJSON(),
+            displayableName: localSettings.hideDirectivesFromCollectionName
+              ? directives.removeDirectiveFromString(item.name)
+              : item.name
+          }))
+        )
       )
     }
   })
@@ -93,30 +95,6 @@ export const useCollectionsWithPrivacy = () => {
   }
 }
 
-/**
- * @deprecated
- */
-export const useCollectionsAsArrayState = () => {
-  const { data: collectionsDic = {} } = useCollectionsDictionary()
-  const visibleBookIds = useVisibleBookIds()
-  const localSettingsState = useLocalSettings()
-
-  type Collection = NonNullable<ReturnType<typeof useCollectionState>>
-
-  const { data: visibleCollections = [] } = useCollectionsWithPrivacy()
-
-  return visibleCollections.map((collection) => {
-    const value = getCollectionState({
-      id: collection._id,
-      normalizedCollections: collectionsDic,
-      localSettingsState,
-      bookIds: visibleBookIds
-    })
-
-    return value
-  }) as Collection[]
-}
-
 export const useVisibleCollectionIds = () => {
   const { data: collections, ...rest } = useCollectionsWithPrivacy()
 
@@ -125,52 +103,3 @@ export const useVisibleCollectionIds = () => {
     data: collections ? collections.map(({ _id }) => _id) : undefined
   }
 }
-
-/**
- * @deprecated
- */
-export const getCollectionState = ({
-  id,
-  localSettingsState,
-  normalizedCollections = {},
-  bookIds
-}: {
-  id: string
-  localSettingsState: ReturnType<typeof useLocalSettings>
-  normalizedCollections: ReturnType<typeof useCollectionsDictionary>["data"]
-  bookIds: ReturnType<typeof useVisibleBookIds>
-}) => {
-  const collection = normalizedCollections[id]
-  const localSettings = localSettingsState
-
-  if (!collection) return undefined
-
-  return {
-    ...collection,
-    books: collection.books.filter((id) => bookIds.includes(id)),
-    displayableName: localSettings.hideDirectivesFromCollectionName
-      ? directives.removeDirectiveFromString(collection.name)
-      : collection.name
-  }
-}
-
-/**
- * @deprecated
- */
-export const useCollectionState = ({
-  id,
-  localSettingsState
-}: {
-  id: string
-  localSettingsState: ReturnType<typeof useLocalSettings>
-}) => {
-  const { data: normalizedCollections } = useCollectionsDictionary()
-  const bookIds = useVisibleBookIds()
-
-  return getCollectionState({
-    id,
-    localSettingsState,
-    normalizedCollections,
-    bookIds
-  })
-}

packages/web/src/collections/useCreateCollection.ts

@@ -0,0 +1,17 @@
+import { useDatabase } from "../rxdb"
+import { useMutation } from "reactjrx"
+
+export const useCreateCollection = () => {
+  const { db } = useDatabase()
+
+  return useMutation({
+    mutationFn: async ({ name }: { name: string }) =>
+      db?.obokucollection.post({
+        name,
+        books: [],
+        createdAt: new Date().toISOString(),
+        modifiedAt: null,
+        dataSourceId: null
+      })
+  })
+}