fix article card actions (#364)

* fix invite modal

* change FeedArticlePopup hide logic

* resolve conversation

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -52,6 +52,7 @@ export type ArticleCardProps = {
   desktopCoverSize?: 'XS' | 'S' | 'M' | 'L'
   article: Shout
   onShare?: (article: Shout) => void
+  onInvite?: () => void
 }
 
 const desktopCoverImageWidths: Record<ArticleCardProps['desktopCoverSize'], number> = {
@@ -368,7 +369,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
                   isOwner={canEdit()}
                   containerCssClass={stylesHeader.control}
                   onShareClick={() => props.onShare(props.article)}
-                  onInviteClick={() => showModal('inviteCoAuthors')}
+                  onInviteClick={props.onInvite}
                   onVisibilityChange={(isVisible) => setIsActionPopupActive(isVisible)}
                   trigger={
                     <button>
@@ -385,7 +386,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
           </section>
         </Show>
       </div>
-      <InviteCoAuthorsModal title={t('Invite experts')} />
     </section>
   )
 }

src/components/Feed/FeedArticlePopup/FeedArticlePopup.tsx

@@ -1,7 +1,7 @@
 import type { PopupProps } from '../../_shared/Popup'
 
 import { clsx } from 'clsx'
-import { Show } from 'solid-js'
+import { createSignal, Show } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
 import { Popup } from '../../_shared/Popup'
@@ -9,20 +9,34 @@ import { SoonChip } from '../../_shared/SoonChip'
 
 import styles from './FeedArticlePopup.module.scss'
 
-type FeedArticlePopupProps = {
+type Props = {
   isOwner: boolean
   onInviteClick: () => void
   onShareClick: () => void
 } & Omit<PopupProps, 'children'>
 
-export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
+export const FeedArticlePopup = (props: Props) => {
   const { t } = useLocalize()
+  const [isHidden, setHidden] = createSignal(false)
   return (
     <>
-      <Popup {...props} horizontalAnchor={'right'} variant="tiny" popupCssClass={styles.feedArticlePopup}>
+      <Popup
+        {...props}
+        closePopup={() => isHidden()}
+        horizontalAnchor={'right'}
+        variant="tiny"
+        popupCssClass={styles.feedArticlePopup}
+      >
         <ul class={clsx('nodash', styles.actionList)}>
           <li>
-            <button class={styles.action} role="button" onClick={props.onShareClick}>
+            <button
+              class={styles.action}
+              role="button"
+              onClick={() => {
+                props.onShareClick()
+                setHidden(true)
+              }}
+            >
               {t('Share')}
             </button>
           </li>
@@ -33,6 +47,7 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
                 role="button"
                 onClick={() => {
                   alert('Help to edit')
+                  setHidden(true)
                 }}
               >
                 {t('Help to edit')}
@@ -40,7 +55,14 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
             </li>
           </Show>
           <li>
-            <button class={styles.action} role="button" onClick={props.onInviteClick}>
+            <button
+              class={styles.action}
+              role="button"
+              onClick={() => {
+                props.onInviteClick()
+                setHidden(true)
+              }}
+            >
               {t('Invite experts')}
             </button>
           </li>

src/components/Views/Feed/Feed.tsx

@@ -17,6 +17,7 @@ import { getImageUrl } from '../../../utils/getImageUrl'
 import { getServerDate } from '../../../utils/getServerDate'
 import { DropDown } from '../../_shared/DropDown'
 import { Icon } from '../../_shared/Icon'
+import { InviteCoAuthorsModal } from '../../_shared/InviteCoAuthorsModal'
 import { Loading } from '../../_shared/Loading'
 import { ShareModal } from '../../_shared/ShareModal'
 import { CommentDate } from '../../Article/CommentDate'
@@ -290,6 +291,7 @@ export const Feed = (props: Props) => {
                 {(article) => (
                   <ArticleCard
                     onShare={(shared) => handleShare(shared)}
+                    onInvite={() => showModal('inviteCoAuthors')}
                     article={article}
                     settings={{ isFeedMode: true }}
                     desktopCoverSize="M"
@@ -416,6 +418,7 @@ export const Feed = (props: Props) => {
           shareUrl={getShareUrl({ pathname: `/${shareData().slug}` })}
         />
       </Show>
+      <InviteCoAuthorsModal title={t('Invite experts')} />
     </div>
   )
 }

src/components/_shared/Popup/Popup.tsx

@@ -15,6 +15,7 @@ export type PopupProps = {
   onVisibilityChange?: (isVisible: boolean) => void
   horizontalAnchor?: HorizontalAnchor
   variant?: 'bordered' | 'tiny'
+  closePopup?: (isVisible: boolean) => void
 }
 
 export const Popup = (props: PopupProps) => {
@@ -29,13 +30,19 @@ export const Popup = (props: PopupProps) => {
 
   const containerRef: { current: HTMLElement } = { current: null }
 
+  const closePopup = () => {
+    setIsVisible(false)
+    if (props.closePopup) {
+      props.closePopup
+    }
+  }
+
   useOutsideClickHandler({
     containerRef,
     predicate: () => isVisible(),
-    handler: () => {
+    handler: () => closePopup(),
-      setIsVisible(false)
-    },
   })
+
   const toggle = () => setIsVisible((oldVisible) => !oldVisible)
   return (
     <span class={clsx(styles.container, props.containerCssClass)} ref={(el) => (containerRef.current = el)}>