Merge pull request #2345 from omnivore-app/fix/confirm-info-submit

Fix issue with enter not properly submitting the edit info modal

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

@@ -23,7 +23,8 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
   return (
     <VStack
       css={{
-        p: '20px',
+        px: '15px',
+        py: '10px',
         height: '100%',
         cursor: 'pointer',
         gap: '10px',

packages/web/components/templates/article/ArticleContainer.tsx

@@ -47,6 +47,10 @@ type RecommendationCommentsProps = {
   recommendationsWithNotes: Recommendation[]
 }
 
+export interface UpdateTitleEvent extends Event {
+  title?: string
+}
+
 const RecommendationComments = (
   props: RecommendationCommentsProps
 ): JSX.Element => {
@@ -251,10 +255,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
       setLabels(event.labels ?? [])
     }
 
-    interface UpdateTitleEvent extends Event {
-      title?: string
-    }
-
     const handleUpdateTitle = (event: UpdateTitleEvent) => {
       if (event.title) {
         setTitle(event.title)

packages/web/components/templates/homeFeed/EditItemModals.tsx

@@ -1,4 +1,5 @@
 import {
+  ModalButtonBar,
   ModalContent,
   ModalOverlay,
   ModalRoot,
@@ -215,7 +216,15 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
   }
 
   return (
-    <ModalRoot defaultOpen onOpenChange={props.onOpenChange} css={{}}>
+    <ModalRoot
+      defaultOpen
+      modal={true}
+      onOpenChange={() => {
+        console.log('props.onOpenChange')
+        props.onOpenChange(false)
+      }}
+      css={{}}
+    >
       <ModalOverlay />
       <ModalContent
         css={{ bg: '$grayBg', p: '20px', maxWidth: '420px' }}
@@ -230,6 +239,7 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
             <form
               onSubmit={(event) => {
                 event.preventDefault()
+                props.onSave(title, author, description, savedAt, publishedAt)
               }}
             >
               <HStack distribution="start" css={{ width: '100%' }}>
@@ -309,30 +319,10 @@ function EditItemModal(props: EditItemModalProps): JSX.Element {
                 }}
                 maxLength={4000}
               />
-              <HStack distribution="end" css={{ mt: '12px', width: '100%' }}>
-                <Button
-                  onClick={() => props.onOpenChange(false)}
-                  style="cancelGeneric"
-                  css={{ mr: '5px' }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  onClick={() => {
-                    props.onSave(
-                      title,
-                      author,
-                      description,
-                      savedAt,
-                      publishedAt
-                    )
-                  }}
-                  style="ctaDarkYellow"
-                  css={{ mb: '0px' }}
-                >
-                  Save Changes
-                </Button>
-              </HStack>
+              <ModalButtonBar
+                onOpenChange={props.onOpenChange}
+                acceptButtonLabel="Save Changes"
+              />
             </form>
           </Box>
         </VStack>

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

@@ -7,7 +7,10 @@ import {
 } from '../../../lib/networking/queries/useGetArticleQuery'
 import { useRouter } from 'next/router'
 import { VStack } from './../../../components/elements/LayoutPrimitives'
-import { ArticleContainer } from './../../../components/templates/article/ArticleContainer'
+import {
+  ArticleContainer,
+  UpdateTitleEvent,
+} from './../../../components/templates/article/ArticleContainer'
 import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
@@ -536,6 +539,10 @@ export default function Home(): JSX.Element {
             article.description = description
             article.savedAt = savedAt
             article.publishedAt = publishedAt
+
+            const titleEvent = new Event('updateTitle') as UpdateTitleEvent
+            titleEvent.title = title
+            document.dispatchEvent(titleEvent)
           }}
         />
       )}