From 31c29a8290b71fbcd7ef00ec1ee8c8097f7fd514 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 21 Jun 2024 11:03:58 +0800
Subject: [PATCH] Better event handling on home action icons

---
 .../web/components/nav-containers/home.tsx    | 51 ++++++++++++++-----
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/packages/web/components/nav-containers/home.tsx b/packages/web/components/nav-containers/home.tsx
index 4ff835594..b5069f2bb 100644
--- a/packages/web/components/nav-containers/home.tsx
+++ b/packages/web/components/nav-containers/home.tsx
@@ -74,7 +74,8 @@ export function HomeContainer(): JSX.Element {
       >
         {homeData.sections?.map((homeSection, idx) => {
           if (homeSection.items.length < 1) {
-            return <></>
+            console.log('empty home section: ', homeSection)
+            return <SpanBox key={`section-${idx}`}></SpanBox>
           }
           switch (homeSection.layout) {
             case 'just_added':
@@ -110,7 +111,8 @@ export function HomeContainer(): JSX.Element {
                 />
               )
             default:
-              return <></>
+              console.log('unknown home section: ', homeSection)
+              return <SpanBox key={`section-${idx}`}></SpanBox>
           }
         })}
       </VStack>
@@ -629,28 +631,34 @@ const TopPicksItemView = (
       <SpanBox css={{ px: '20px' }}></SpanBox>
       <HStack css={{ gap: '10px', my: '15px', px: '20px' }}>
         {props.homeItem.canSave && (
-          <Button style="homeAction">
+          <Button
+            style="homeAction"
+            onClick={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+
+              props.dispatchList({
+                type: 'REMOVE_ITEM',
+                itemId: props.homeItem.id,
+              })
+            }}
+          >
             <AddToLibraryActionIcon
               color={theme.colors.homeActionIcons.toString()}
             />
           </Button>
         )}
-        {/* <Button style="homeAction">
-          <CommentActionIcon color={theme.colors.homeActionIcons.toString()} />
-        </Button> */}
-
         {props.homeItem.canArchive && (
           <Button
             style="homeAction"
             onClick={(event) => {
-              // archiveItem(props.homeItem)
-              console.log('archiving')
+              event.preventDefault()
+              event.stopPropagation()
+
               props.dispatchList({
                 type: 'REMOVE_ITEM',
                 itemId: props.homeItem.id,
               })
-              event.preventDefault()
-              event.stopPropagation()
             }}
           >
             <ArchiveActionIcon
@@ -659,12 +667,29 @@ const TopPicksItemView = (
           </Button>
         )}
         {props.homeItem.canDelete && (
-          <Button style="homeAction">
+          <Button
+            style="homeAction"
+            onClick={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+
+              props.dispatchList({
+                type: 'REMOVE_ITEM',
+                itemId: props.homeItem.id,
+              })
+            }}
+          >
             <RemoveActionIcon color={theme.colors.homeActionIcons.toString()} />
           </Button>
         )}
         {props.homeItem.canShare && (
-          <Button style="homeAction">
+          <Button
+            style="homeAction"
+            onClick={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+            }}
+          >
             <ShareActionIcon color={theme.colors.homeActionIcons.toString()} />
           </Button>
         )}