Hide edit option for non authors in feed (#161)

src/components/Feed/ArticleCard.tsx

@@ -16,6 +16,7 @@ import { router, useRouter } from '../../stores/router'
 import { imageProxy } from '../../utils/imageProxy'
 import { Popover } from '../_shared/Popover'
 import { AuthorCard } from '../Author/AuthorCard'
+import { useSession } from '../../context/session'
 
 interface ArticleCardProps {
   settings?: {
@@ -66,7 +67,7 @@ const getTitleAndSubtitle = (article: Shout): { title: string; subtitle: string
 
 export const ArticleCard = (props: ArticleCardProps) => {
   const { t, lang } = useLocalize()
-
+  const { user } = useSession()
   const mainTopic =
     props.article.topics.find((articleTopic) => articleTopic.slug === props.article.mainTopic) ||
     props.article.topics[0]
@@ -79,6 +80,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   const { id, cover, layout, slug, authors, stat, body } = props.article
 
+  const canEdit = () => authors?.some((a) => a.slug === user()?.slug)
+
   const { changeSearchParam } = useRouter()
   const scrollToComments = (event) => {
     event.preventDefault()
@@ -238,6 +241,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
             </div>
 
             <div class={styles.shoutCardDetailsContent}>
+              <Show when={canEdit()}>
                 <Popover content={t('Edit')}>
                   {(triggerRef: (el) => void) => (
                     <div class={styles.shoutCardDetailsItem} ref={triggerRef}>
@@ -251,6 +255,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
                     </div>
                   )}
                 </Popover>
+              </Show>
 
               <Popover content={t('Add to bookmarks')}>
                 {(triggerRef: (el) => void) => (
@@ -292,6 +297,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
               <div class={styles.shoutCardDetailsItem}>
                 <FeedArticlePopup
+                  isOwner={canEdit()}
                   containerCssClass={stylesHeader.control}
                   title={title}
                   description={getDescription(body)}

src/components/Feed/FeedArticlePopup.tsx

@@ -2,12 +2,13 @@ import styles from './FeedArticlePopup.module.scss'
 import type { PopupProps } from '../_shared/Popup'
 import { Popup } from '../_shared/Popup'
 import { useLocalize } from '../../context/localize'
-import { createEffect, createSignal } from 'solid-js'
+import { createEffect, createSignal, Show } from 'solid-js'
 
 type FeedArticlePopupProps = {
   title: string
   shareUrl?: string
   imageUrl: string
+  isOwner: boolean
   description: string
   isVisible?: (value: boolean) => void
 } & Omit<PopupProps, 'children'>
@@ -39,6 +40,7 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
             {t('Share')}
           </button>
         </li>
+        <Show when={!props.isOwner}>
           <li>
             <button
               role="button"
@@ -49,6 +51,7 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
               {t('Help to edit')}
             </button>
           </li>
+        </Show>
         <li>
           <button
             role="button"
@@ -59,6 +62,7 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
             {t('Invite experts')}
           </button>
         </li>
+        <Show when={!props.isOwner}>
           <li>
             <button
               role="button"
@@ -69,6 +73,7 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
               {t('Subscribe to comments')}
             </button>
           </li>
+        </Show>
         <li>
           <button
             role="button"
@@ -79,6 +84,7 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
             {t('Add to bookmarks')}
           </button>
         </li>
+        <Show when={!props.isOwner}>
           <li>
             <button
               role="button"
@@ -89,6 +95,7 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
               {t('Report')}
             </button>
           </li>
+        </Show>
         <li>
           <button
             role="button"