feat: cleaned up some effects

packages/web/src/Effects.ts

@@ -1,17 +1,13 @@
-import { useBooksActionEffects } from "./books/effects"
 import { effects as datasourceEffects } from "./dataSources/effects"
 import { useDownloadsEffects } from "./download/effects"
-import { useTagEffects } from "./tags/effects"
+import { useCleanupDanglingLinks } from "./links/useCleanupDanglingLinks"
 
-const effects = [
-  ...datasourceEffects,
-  useTagEffects,
-  useDownloadsEffects,
-  useBooksActionEffects
-]
+const effects = [...datasourceEffects, useDownloadsEffects]
 
 export const Effects = () => {
   effects.forEach((effectHook) => effectHook())
 
+  useCleanupDanglingLinks()
+
   return null
 }

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

@@ -1,35 +1,18 @@
-import { FC, useState, useEffect, memo } from "react"
+import { memo } from "react"
 import Button from "@mui/material/Button"
 import {
   CloudDownloadRounded,
-  EditRounded,
   MenuBookOutlined,
   MoreVertOutlined
 } from "@mui/icons-material"
 import { TopBarNavigation } from "../../navigation/TopBarNavigation"
-import {
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Dialog,
-  DialogTitle,
-  DialogActions,
-  Typography,
-  Drawer,
-  DialogContent,
-  TextField,
-  Container,
-  Stack,
-  IconButton
-} from "@mui/material"
+import { Typography, Container, Stack, IconButton } from "@mui/material"
 import { useNavigate, useParams } from "react-router-dom"
 import { Alert } from "@mui/material"
 import { useDownloadBook } from "../../download/useDownloadBook"
 import { ROUTES } from "../../constants"
 import { useEnrichedBookState } from "../states"
 import { useLink } from "../../links/states"
-import { useEditLink } from "../../links/helpers"
 import { DataSourceSection } from "./DataSourceSection"
 import { booksDownloadStateSignal } from "../../download/states"
 import { useProtectedTagIds, useTagsByIds } from "../../tags/helpers"
@@ -53,9 +36,6 @@ export const BookDetailsScreen = memo(() => {
   const navigate = useNavigate()
   const { mutate: downloadFile } = useDownloadBook()
   const { goBack } = useSafeGoBack()
-  const [isLinkActionDrawerOpenWith, setIsLinkActionDrawerOpenWith] = useState<
-    undefined | string
-  >(undefined)
   const { id = `-1` } = useParams<ScreenParams>()
   const book = useEnrichedBookState({
     bookId: id,
@@ -72,7 +52,7 @@ export const BookDetailsScreen = memo(() => {
   })
 
   if (isDebugEnabled()) {
-    Report.info(`BookDetailsScreen`, { book })
+    Report.info(`BookDetailsScreen`, { book, link })
   }
 
   return (
@@ -187,98 +167,6 @@ export const BookDetailsScreen = memo(() => {
         <MetadataSourcePane bookId={id} />
         <DataSourceSection bookId={id} />
       </Container>
-      <LinkActionsDrawer
-        openWith={isLinkActionDrawerOpenWith}
-        bookId={book?._id}
-        onClose={() => setIsLinkActionDrawerOpenWith(undefined)}
-      />
     </Stack>
   )
 })
-
-const LinkActionsDrawer: FC<{
-  openWith: string | undefined
-  bookId: string | undefined
-  onClose: () => void
-}> = ({ openWith, onClose, bookId }) => {
-  const [isEditDialogOpenWith, setIsEditDialogOpenWith] = useState<
-    string | undefined
-  >(undefined)
-
-  return (
-    <>
-      <Drawer anchor="bottom" open={!!openWith} onClose={onClose}>
-        <List>
-          <ListItem
-            button
-            onClick={() => {
-              setIsEditDialogOpenWith(openWith)
-            }}
-          >
-            <ListItemIcon>
-              <EditRounded />
-            </ListItemIcon>
-            <ListItemText primary="Edit the location" />
-          </ListItem>
-        </List>
-      </Drawer>
-      <EditLinkDialog
-        openWith={isEditDialogOpenWith}
-        onClose={() => setIsEditDialogOpenWith(undefined)}
-      />
-    </>
-  )
-}
-
-const EditLinkDialog: FC<{
-  openWith: string | undefined
-  onClose: () => void
-}> = ({ onClose, openWith }) => {
-  const [location, setLocation] = useState("")
-  const { data: link } = useLink({ id: openWith || "-1" })
-  const editLink = useEditLink()
-
-  const onInnerClose = () => {
-    setLocation("")
-    onClose()
-  }
-
-  useEffect(() => {
-    setLocation((prev) => link?.resourceId || prev)
-  }, [link, openWith])
-
-  return (
-    <Dialog onClose={onInnerClose} open={!!openWith}>
-      <DialogTitle>Link edit</DialogTitle>
-      <DialogContent>
-        <TextField
-          autoFocus
-          id="name"
-          label="Name"
-          type="text"
-          fullWidth
-          value={location}
-          onChange={(e) => setLocation(e.target.value)}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onInnerClose} color="primary">
-          Cancel
-        </Button>
-        <Button
-          onClick={() => {
-            onInnerClose()
-            link &&
-              editLink({
-                _id: link._id,
-                resourceId: location
-              })
-          }}
-          color="primary"
-        >
-          Save
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}

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

@@ -1,5 +1,4 @@
 import {
-  Button,
   List,
   ListItem,
   ListItemIcon,
@@ -8,20 +7,26 @@ import {
   Stack
 } from "@mui/material"
 import { MoreVertRounded } from "@mui/icons-material"
-import { FC, useState } from "react"
+import { FC, memo, useState } from "react"
 import { useDataSourcePlugin } from "../../dataSources/helpers"
 import { Report } from "../../debug/report.shared"
-import { useBookLinksState } from "../states"
+import { useBook } from "../states"
 import { useCreateRequestPopupDialog } from "../../plugins/useCreateRequestPopupDialog"
-import { upsertBookLink } from "../triggers"
-import { useTagsByIds } from "../../tags/helpers"
 import { createDialog } from "../../common/dialogs/createDialog"
+import { useUpsertBookLink } from "../useUpdateBookLink"
+import { useRefreshBookMetadata } from "../useRefreshBookMetadata"
+import { useLink } from "../../links/states"
 
-export const DataSourceSection: FC<{ bookId: string }> = ({ bookId }) => {
-  const link = useBookLinksState({ bookId, tags: useTagsByIds().data })[0]
+export const DataSourceSection = memo(({ bookId }: { bookId: string }) => {
+  const { data: book } = useBook({ id: bookId })
+  const { data: link } = useLink({ id: book?.links[0] })
   const dataSourcePlugin = useDataSourcePlugin(link?.type)
   const [isSelectItemOpened, setIsSelectItemOpened] = useState(false)
   const createRequestPopupDialog = useCreateRequestPopupDialog()
+  const refreshMetadata = useRefreshBookMetadata()
+  const { mutate: upsertBookLink } = useUpsertBookLink({
+    onSuccess: () => [refreshMetadata(bookId)]
+  })
 
   return (
     <>
@@ -82,6 +87,7 @@ export const DataSourceSection: FC<{ bookId: string }> = ({ bookId }) => {
           })}
           onClose={(error, item) => {
             setIsSelectItemOpened(false)
+
             if (error) {
               Report.error(error)
             } else {
@@ -98,4 +104,4 @@ export const DataSourceSection: FC<{ bookId: string }> = ({ bookId }) => {
       )}
     </>
   )
-}
+})

packages/web/src/books/drawer/BookActionsDrawer.tsx

@@ -31,7 +31,6 @@ import { ReadingStateState } from "@oboku/shared"
 import { useModalNavigationControl } from "../../navigation/useModalNavigationControl"
 import { useTranslation } from "react-i18next"
 import { useManageBookTagsDialog } from "../ManageBookTagsDialog"
-import { markAsInterested } from "../triggers"
 import { useBookDownloadState } from "../../download/states"
 import { signal, useLiveRef, useSignalValue } from "reactjrx"
 import { useRemoveHandler } from "./useRemoveHandler"
@@ -193,11 +192,12 @@ export const BookActionsDrawer = memo(() => {
               <ListItemButton
                 onClick={() => {
                   handleClose(() => {
-                    bookId &&
-                      markAsInterested({
-                        id: bookId,
+                    incrementalBookPatch({
+                      doc: book,
+                      patch: {
                         isNotInterested: !book.isNotInterested
-                      })
+                      }
+                    })
                   })
                 }}
               >

packages/web/src/books/drawer/useRemoveHandler.ts

@@ -1,13 +1,13 @@
 import { getBookById, useRemoveBook } from "../helpers"
 import { useMutation } from "reactjrx"
 import { getLatestDatabase } from "../../rxdb/RxDbProvider"
-import { from, mergeMap, of } from "rxjs"
+import { first, from, mergeMap, of } from "rxjs"
 import { isRemovableFromDataSource } from "../../links/isRemovableFromDataSource"
 import { getDataSourcePlugin } from "../../dataSources/getDataSourcePlugin"
-import { getLinkById } from "../../links/helpers"
 import { createDialog } from "../../common/dialogs/createDialog"
 import { withUnknownErrorDialog } from "../../common/errors/withUnknownErrorDialog"
 import { withOfflineErrorDialog } from "../../common/network/withOfflineErrorDialog"
+import { observeLinkById } from "../../links/dbHelpers"
 
 const deleteBookNormallyDialog: Parameters<
   typeof createDialog<{ deleteFromDataSource: boolean }>
@@ -33,7 +33,9 @@ export const useRemoveHandler = (
 
               const linkId = book.links[0]
 
-              const link$ = !linkId ? of(null) : getLinkById(database, linkId)
+              const link$ = !linkId
+                ? of(null)
+                : observeLinkById(database, linkId).pipe(first())
 
               return link$.pipe(
                 mergeMap((firstLink) => {