Fix share modal (#357)

Fix share modal

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -14,7 +14,6 @@ import { Icon } from '../../_shared/Icon'
 import { Image } from '../../_shared/Image'
 import { InviteCoAuthorsModal } from '../../_shared/InviteCoAuthorsModal'
 import { Popover } from '../../_shared/Popover'
-import { ShareModal } from '../../_shared/ShareModal'
 import { CoverImage } from '../../Article/CoverImage'
 import { getShareUrl, SharePopup } from '../../Article/SharePopup'
 import { ShoutRatingControl } from '../../Article/ShoutRatingControl'
@@ -52,6 +51,7 @@ export type ArticleCardProps = {
   withAspectRatio?: boolean
   desktopCoverSize?: 'XS' | 'S' | 'M' | 'L'
   article: Shout
+  onShare?: (article: Shout) => void
 }
 
 const desktopCoverImageWidths: Record<ArticleCardProps['desktopCoverSize'], number> = {
@@ -367,7 +367,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
                 <FeedArticlePopup
                   isOwner={canEdit()}
                   containerCssClass={stylesHeader.control}
-                  onShareClick={() => showModal('share')}
+                  onShareClick={() => props.onShare(props.article)}
                   onInviteClick={() => showModal('inviteCoAuthors')}
                   onVisibilityChange={(isVisible) => setIsActionPopupActive(isVisible)}
                   trigger={
@@ -386,12 +386,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
         </Show>
       </div>
       <InviteCoAuthorsModal title={t('Invite experts')} />
-      <ShareModal
-        title={title}
-        description={description}
-        imageUrl={props.article.cover}
-        shareUrl={getShareUrl({ pathname: `/${props.article.slug}` })}
-      />
     </section>
   )
 }

src/components/Views/Feed/Feed.tsx

@@ -8,6 +8,7 @@ import { createEffect, createMemo, createSignal, For, on, onMount, Show } from '
 import { useLocalize } from '../../../context/localize'
 import { useReactions } from '../../../context/reactions'
 import { router, useRouter } from '../../../stores/router'
+import { showModal } from '../../../stores/ui'
 import { useArticlesStore, resetSortedArticles } from '../../../stores/zine/articles'
 import { useTopAuthorsStore } from '../../../stores/zine/topAuthors'
 import { useTopicsStore } from '../../../stores/zine/topics'
@@ -17,7 +18,9 @@ import { getServerDate } from '../../../utils/getServerDate'
 import { DropDown } from '../../_shared/DropDown'
 import { Icon } from '../../_shared/Icon'
 import { Loading } from '../../_shared/Loading'
+import { ShareModal } from '../../_shared/ShareModal'
 import { CommentDate } from '../../Article/CommentDate'
+import { getShareUrl } from '../../Article/SharePopup'
 import { AuthorLink } from '../../Author/AhtorLink'
 import { AuthorBadge } from '../../Author/AuthorBadge'
 import { ArticleCard } from '../../Feed/ArticleCard'
@@ -203,6 +206,12 @@ export const Feed = (props: Props) => {
   )
   const ogTitle = t('Feed')
 
+  const [shareData, setShareData] = createSignal<Shout | undefined>()
+  const handleShare = (shared) => {
+    showModal('share')
+    setShareData(shared)
+  }
+
   return (
     <div class="wide-container feed">
       <Meta name="descprition" content={description} />
@@ -279,7 +288,12 @@ export const Feed = (props: Props) => {
             <Show when={sortedArticles().length > 0}>
               <For each={sortedArticles().slice(0, 4)}>
                 {(article) => (
-                  <ArticleCard article={article} settings={{ isFeedMode: true }} desktopCoverSize="M" />
+                  <ArticleCard
+                    onShare={(shared) => handleShare(shared)}
+                    article={article}
+                    settings={{ isFeedMode: true }}
+                    desktopCoverSize="M"
+                  />
                 )}
               </For>
 
@@ -394,6 +408,14 @@ export const Feed = (props: Props) => {
           </Show>
         </aside>
       </div>
+      <Show when={shareData()}>
+        <ShareModal
+          title={shareData().title}
+          description={shareData().description}
+          imageUrl={shareData().cover}
+          shareUrl={getShareUrl({ pathname: `/${shareData().slug}` })}
+        />
+      </Show>
     </div>
   )
 }

src/components/_shared/ShareLinks/ShareLinks.tsx

@@ -21,6 +21,7 @@ type Props = {
 export const ShareLinks = (props: Props) => {
   const { t } = useLocalize()
   const [isLinkCopied, setIsLinkCopied] = createSignal(false)
+
   const {
     actions: { showSnackbar },
   } = useSnackbar()

src/components/_shared/ShareModal/ShareModal.tsx

@@ -11,7 +11,6 @@ type Props = {
 }
 export const ShareModal = (props: Props) => {
   const { t } = useLocalize()
-
   return (
     <Modal name="share" variant="medium" allowClose={true}>
       <h2>{t('Share publication')}</h2>