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,19 +241,21 @@ export const ArticleCard = (props: ArticleCardProps) => {
             </div>
 
             <div class={styles.shoutCardDetailsContent}>
-              <Popover content={t('Edit')}>
+              <Show when={canEdit()}>
-                {(triggerRef: (el) => void) => (
+                <Popover content={t('Edit')}>
-                  <div class={styles.shoutCardDetailsItem} ref={triggerRef}>
+                  {(triggerRef: (el) => void) => (
-                    <a href={getPagePath(router, 'edit', { shoutId: id.toString() })}>
+                    <div class={styles.shoutCardDetailsItem} ref={triggerRef}>
-                      <Icon name="pencil-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
+                      <a href={getPagePath(router, 'edit', { shoutId: id.toString() })}>
-                      <Icon
+                        <Icon name="pencil-outline" class={clsx(styles.icon, styles.feedControlIcon)} />
-                        name="pencil-outline-hover"
+                        <Icon
-                        class={clsx(styles.icon, styles.iconHover, styles.feedControlIcon)}
+                          name="pencil-outline-hover"
-                      />
+                          class={clsx(styles.icon, styles.iconHover, styles.feedControlIcon)}
-                    </a>
+                        />
-                  </div>
+                      </a>
-                )}
+                    </div>
-              </Popover>
+                  )}
+                </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,16 +40,18 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
             {t('Share')}
           </button>
         </li>
-        <li>
+        <Show when={!props.isOwner}>
-          <button
+          <li>
-            role="button"
+            <button
-            onClick={() => {
+              role="button"
-              alert('Help to edit')
+              onClick={() => {
-            }}
+                alert('Help to edit')
-          >
+              }}
-            {t('Help to edit')}
+            >
-          </button>
+              {t('Help to edit')}
-        </li>
+            </button>
+          </li>
+        </Show>
         <li>
           <button
             role="button"
@@ -59,16 +62,18 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
             {t('Invite experts')}
           </button>
         </li>
-        <li>
+        <Show when={!props.isOwner}>
-          <button
+          <li>
-            role="button"
+            <button
-            onClick={() => {
+              role="button"
-              alert('Subscribe to comments')
+              onClick={() => {
-            }}
+                alert('Subscribe to comments')
-          >
+              }}
-            {t('Subscribe to comments')}
+            >
-          </button>
+              {t('Subscribe to comments')}
-        </li>
+            </button>
+          </li>
+        </Show>
         <li>
           <button
             role="button"
@@ -79,16 +84,18 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
             {t('Add to bookmarks')}
           </button>
         </li>
-        <li>
+        <Show when={!props.isOwner}>
-          <button
+          <li>
-            role="button"
+            <button
-            onClick={() => {
+              role="button"
-              alert('Report')
+              onClick={() => {
-            }}
+                alert('Report')
-          >
+              }}
-            {t('Report')}
+            >
-          </button>
+              {t('Report')}
-        </li>
+            </button>
+          </li>
+        </Show>
         <li>
           <button
             role="button"