Merge pull request #2620 from omnivore-app/fix/web-double-delete-msg

Make sure we remove event listener so it isnt triggered multiple times

packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx

@@ -31,7 +31,7 @@ export const MetaStyle = {
   maxLines: 1,
   textOverflow: 'ellipsis',
   wordBreak: 'break-word',
-  lineHeight: 1.1,
+  lineHeight: 1.25,
 }
 
 export const TitleStyle = {
@@ -56,10 +56,10 @@ export const AuthorInfoStyle = {
   fontSize: '12px',
   fontWeight: '400',
   fontFamily: '$display',
-  lineHeight: '1',
+  lineHeight: 1.25,
   wordWrap: 'break-word',
   whiteSpace: 'nowrap',
-  overflowX: 'hidden',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
 }
 

packages/web/components/patterns/LibraryCards/LibraryListCard.tsx

@@ -31,7 +31,7 @@ import { ProgressBar } from '../../elements/ProgressBar'
 import { theme } from '../../tokens/stitches.config'
 import { FallbackImage } from './FallbackImage'
 import { useRouter } from 'next/router'
-import { LoadingBar } from "../../elements/LoadingBar"
+import { LoadingBar } from '../../elements/LoadingBar'
 
 export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
   const router = useRouter()
@@ -132,17 +132,16 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
 type LoadingBarOverlayProps = {
   top: number
   width: string
-  bottomRadius: string,
-  fillColor?: string,
+  bottomRadius: string
+  fillColor?: string
   percentFill?: number
 }
 
-
 type ProgressBarOverlayProps = {
   top: number
   width: string
   value: number
-  bottomRadius: string,
+  bottomRadius: string
 }
 
 export const LoadingBarOverlay = (
@@ -206,17 +205,16 @@ const ListImage = (props: ListImageProps): JSX.Element => {
   const [displayFallback, setDisplayFallback] = useState(props.src == undefined)
 
   return (
-    <>{
-      props.isLoading && (
+    <>
+      {props.isLoading && (
         <LoadingBarOverlay
           width="55px"
           top={50}
           bottomRadius="4px"
-          fillColor={"rgba(60, 179, 113, 1)"}
+          fillColor={'rgba(60, 179, 113, 1)'}
           percentFill={30}
         />
-      )
-      }
+      )}
       {(props.readingProgress ?? 0) > 0 && !props.isLoading && (
         <ProgressBarOverlay
           width="55px"
@@ -297,7 +295,7 @@ export function LibraryListCardContent(
           height: '100%',
           width: '100%',
           lineHeight: 1,
-          gap: '5px',
+          gap: '3px',
           position: 'relative',
         }}
       >

packages/web/pages/[username]/[slug]/index.tsx

@@ -195,6 +195,7 @@ export default function Home(): JSX.Element {
     return () => {
       document.removeEventListener('archive', archive)
       document.removeEventListener('mark-read', markRead)
+      document.removeEventListener('delete', deletePage)
       document.removeEventListener('openOriginalArticle', openOriginalArticle)
     }
   }, [actionHandler])
@@ -213,7 +214,6 @@ export default function Home(): JSX.Element {
   const deleteCurrentItem = useCallback(async () => {
     if (article) {
       const pageId = article.id
-
       removeItemFromCache(cache, mutate, pageId)
       await deleteLinkMutation(pageId).then((res) => {
         if (res) {