refactor(post): clean up mod role render

2026-04-20 23:28:52 -04:00 · 2023-12-01 12:43:21 +01:00
parent dd47e5d45b
commit 0e7d29214b
6 changed files with 82 additions and 48 deletions
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -22,17 +22,19 @@ interface PostProps {
 }

 const Post = ({ post, index }: PostProps) => {
-  const { cid, content, downvoteCount, flair, link, linkHeight, linkWidth, pinned, replyCount, state, subplebbitAddress, timestamp, title, upvoteCount } = post || {};
+  const { author: { displayName }, cid, content, downvoteCount, flair, link, linkHeight, linkWidth, pinned, replyCount, state, subplebbitAddress, timestamp, title, upvoteCount } = post || {};
  const { shortAuthorAddress, authorAddressChanged } = useAuthorAddress({ comment: post });
  const subplebbit = useSubplebbit({ subplebbitAddress });
  const { t } = useTranslation();
  const params = useParams();
  const location = useLocation();

-  const isAuthorOwner = subplebbit?.roles?.[post.author.address]?.role === 'owner';
-  const isAuthorAdmin = subplebbit?.roles?.[post.author.address]?.role === 'admin';
-  const isAuthorModerator = subplebbit?.roles?.[post.author.address]?.role === 'moderator';
+  const authorRole = subplebbit?.roles?.[post.author.address]?.role;
+  const isAuthorOwner = authorRole === 'owner';
+  const isAuthorAdmin = authorRole === 'admin';
+  const isAuthorModerator = authorRole === 'moderator';
  const moderatorClass = `${isAuthorOwner ? styles.owner : isAuthorAdmin ? styles.admin : isAuthorModerator ? styles.moderator : ''}`;
+  const authorRoleInitial = (isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M') || '';

  const isPost = isPostView(location.pathname, params);
  const isPending = isPendingView(location.pathname, params);
@@ -120,19 +122,17 @@ const Post = ({ post, index }: PostProps) => {
            )}
            <p className={styles.tagline}>
              {t('post_submitted')} {getFormattedTimeAgo(timestamp)} {t('post_by')}{' '}
-              {post?.author?.displayName && (
-                <span className={`${styles.displayName} ${moderatorClass}`}>{post?.author?.displayName} </span>
-              )}
+              {displayName && <span className={`${styles.displayName} ${moderatorClass}`}>{displayName} </span>}
              <Link className={`${styles.authorAddressWrapper} ${moderatorClass}`} to={`u/${shortAuthorAddress}`} onClick={(e) => e.preventDefault()}>
                <span className={styles.authorAddressHidden}>u/{post?.author?.shortAddress || shortAuthorAddress}</span>
                <span className={`${styles.authorAddressVisible} ${authorAddressChanged && styles.authorAddressChanged}`}>u/{shortAuthorAddress}</span>
              </Link>
-              {(isAuthorOwner || isAuthorAdmin || isAuthorModerator) && (
+              {authorRole && (
                <span>
                  {' '}
                  [
-                  <span className={moderatorClass} title={subplebbit?.roles?.[post.author.address]?.role}>
-                    {(isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M')}
+                  <span className={moderatorClass} title={authorRole}>
+                    {authorRoleInitial}
                  </span>
                  ]
                </span>
--- a/src/components/reply-form/reply-form.tsx
+++ b/src/components/reply-form/reply-form.tsx
@@ -41,19 +41,19 @@ const ReplyForm = ({ cid, isReplyingToReply, hideReplyForm }: ReplyFormProps) =>
    if (spoilerRef.current) {
      spoilerRef.current.checked = false;
    }
-  }
+  };

  const onPublish = () => {
    const currentContent = textRef.current?.value || '';
    const currentUrl = urlRef.current?.value || '';
-    
+
    if (!currentContent.trim()) {
      alert(`missing content`);
      return;
    }

    if (currentUrl && !isValidURL(currentUrl)) {
-      alert("The provided link is not a valid URL.");
+      alert('The provided link is not a valid URL.');
      return;
    }
    publishReply();
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -69,13 +69,29 @@ const ReplyMedia = ({ commentMediaInfo, content, expanded, hasThumbnail, link, l
 };

 const Reply = ({ reply, depth }: ReplyProps) => {
-  const { cid, content, downvoteCount, flair, link, linkHeight, linkWidth, removed, spoiler, subplebbitAddress, timestamp, upvoteCount } = reply || {};
+  const {
+    author: { displayName },
+    cid,
+    content,
+    downvoteCount,
+    flair,
+    link,
+    linkHeight,
+    linkWidth,
+    removed,
+    spoiler,
+    subplebbitAddress,
+    timestamp,
+    upvoteCount,
+  } = reply || {};
  const subplebbit = useSubplebbit({ subplebbitAddress });

-  const isAuthorOwner = subplebbit?.roles?.[reply.author.address]?.role === 'owner';
-  const isAuthorAdmin = subplebbit?.roles?.[reply.author.address]?.role === 'admin';
-  const isAuthorModerator = subplebbit?.roles?.[reply.author.address]?.role === 'moderator';
+  const authorRole = subplebbit?.roles?.[reply.author.address]?.role;
+  const isAuthorOwner = authorRole === 'owner';
+  const isAuthorAdmin = authorRole === 'admin';
+  const isAuthorModerator = authorRole === 'moderator';
  const moderatorClass = `${isAuthorOwner ? styles.owner : isAuthorAdmin ? styles.admin : isAuthorModerator ? styles.moderator : ''}`;
+  const authorRoleInitial = (isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M') || '';

  const { shortAuthorAddress } = useAuthorAddress({ comment: reply });
  const replies = useReplies(reply);
@@ -116,9 +132,7 @@ const Reply = ({ reply, depth }: ReplyProps) => {
        <div className={styles.entry}>
          <p className={styles.tagline}>
            <span className={styles.expand}>[–]</span>
-            {reply?.author?.displayName && (
-              <span className={`${styles.author} ${moderatorClass}`}>{reply?.author?.displayName}</span>
-            )}
+            {displayName && <span className={`${styles.author} ${moderatorClass}`}>{displayName}</span>}
            <Link
              to={`/u/${shortAuthorAddress}`}
              onClick={(e) => {
@@ -126,13 +140,13 @@ const Reply = ({ reply, depth }: ReplyProps) => {
              }}
              className={`${styles.author} ${moderatorClass}`}
            >
-              {reply?.author?.displayName ? `u/${shortAuthorAddress}` : shortAuthorAddress}
+              {displayName ? `u/${shortAuthorAddress}` : shortAuthorAddress}
            </Link>
-            {(isAuthorOwner || isAuthorAdmin || isAuthorModerator) && (
+            {authorRole && (
              <span className={styles.moderatorBrackets}>
                [
-                <span className={moderatorClass} title={subplebbit?.roles?.[reply.author.address]?.role}>
-                  {(isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M')}
+                <span className={moderatorClass} title={authorRole}>
+                  {authorRoleInitial}
                </span>
                ]{' '}
              </span>
@@ -171,9 +185,7 @@ const Reply = ({ reply, depth }: ReplyProps) => {
          subplebbitAddress={reply.subplebbitAddress}
          showReplyForm={showReplyForm}
        />
-        {isReplying && (
-          <ReplyForm cid={cid} isReplyingToReply={true} hideReplyForm={hideReplyForm} />
-        )}
+        {isReplying && <ReplyForm cid={cid} isReplyingToReply={true} hideReplyForm={hideReplyForm} />}
        {replies.map((reply, index) => (
          <Reply key={`${index}${reply.cid}`} reply={reply} depth={(reply.depth || 1) + 1} />
        ))}
--- a/src/components/sticky-header/sticky-header.tsx
+++ b/src/components/sticky-header/sticky-header.tsx
@@ -42,14 +42,14 @@ if (!window.STICKY_MENU_SCROLL_LISTENER) {
    //   'scrollDifference',
    //   scrollDifference,
    //   'currentScroll',
-    //    currentScroll, 
-    //    'previousScroll', 
-    //    currentScroll - scrollDifference, 
-    //    'currentScrollInRange', 
+    //    currentScroll,
+    //    'previousScroll',
+    //    currentScroll - scrollDifference,
+    //    'currentScrollInRange',
    //    currentScrollInRange,
-    //    'previousScrollInRange', 
+    //    'previousScrollInRange',
    //    previousScrollInRange,
-    //   'animationPercent', 
+    //   'animationPercent',
    //   currentScrollInRange / scrollRange
    // ].join(' '))

--- a/src/hooks/use-reply.ts
+++ b/src/hooks/use-reply.ts
@@ -73,21 +73,24 @@ const useReply = (comment: Comment) => {
  const subplebbitAddress = comment?.subplebbitAddress;
  const parentCid = comment?.cid;

-  const { content, link, spoiler, publishCommentOptions } = useReplyStore(state => ({
+  const { content, link, spoiler, publishCommentOptions } = useReplyStore((state) => ({
    content: state.content[parentCid],
    link: state.link[parentCid],
    spoiler: state.spoiler[parentCid],
    publishCommentOptions: state.publishCommentOptions[parentCid],
  }));
-  
+
  const setReplyStore = useReplyStore((state) => state.setReplyStore);
  const resetReplyStore = useReplyStore((state) => state.resetReplyStore);

-  const setContent = useMemo(() => ({
-    content: (newContent: string) => setReplyStore({ subplebbitAddress, parentCid, content: newContent, link: link || undefined, spoiler: spoiler || false }),
-    link: (newLink: string) => setReplyStore({ subplebbitAddress, parentCid, content: content, link: newLink || undefined, spoiler: spoiler || false }),
-    spoiler: (newSpoiler: boolean) => setReplyStore({ subplebbitAddress, parentCid, content: content, link: link || undefined, spoiler: newSpoiler }),
-  }), [subplebbitAddress, parentCid, setReplyStore, content, link, spoiler]);
+  const setContent = useMemo(
+    () => ({
+      content: (newContent: string) => setReplyStore({ subplebbitAddress, parentCid, content: newContent, link: link || undefined, spoiler: spoiler || false }),
+      link: (newLink: string) => setReplyStore({ subplebbitAddress, parentCid, content: content, link: newLink || undefined, spoiler: spoiler || false }),
+      spoiler: (newSpoiler: boolean) => setReplyStore({ subplebbitAddress, parentCid, content: content, link: link || undefined, spoiler: newSpoiler }),
+    }),
+    [subplebbitAddress, parentCid, setReplyStore, content, link, spoiler],
+  );

  const resetContent = useMemo(() => () => resetReplyStore(parentCid), [parentCid, resetReplyStore]);

--- a/src/views/settings/settings.tsx
+++ b/src/views/settings/settings.tsx
@@ -1,6 +1,15 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { createAccount, deleteAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts, useResolvedAuthorAddress } from '@plebbit/plebbit-react-hooks';
+import {
+  createAccount,
+  deleteAccount,
+  importAccount,
+  setAccount,
+  setActiveAccount,
+  useAccount,
+  useAccounts,
+  useResolvedAuthorAddress,
+} from '@plebbit/plebbit-react-hooks';
 import stringify from 'json-stringify-pretty-compact';
 import useTheme from '../../hooks/use-theme';
 import styles from './settings.module.css';
@@ -76,7 +85,15 @@ const ProfileSettings = () => {
  const [checkCryptoAddress, setCheckCryptoAddress] = useState(false);
  const author = { ...account?.author, address: cryptoAddress };
  const { state, error, chainProvider } = useResolvedAuthorAddress({ author, cache: false });
-  const resolvedAddressInfoMessageClass = `${state === 'succeeded' ? styles.resolvedMessageSuccess : state === 'failed' ? styles.resolvedMessageFailed : state === 'resolving' ? styles.resolvedMessageResolving : ''}`
+  const resolvedAddressInfoMessageClass = `${
+    state === 'succeeded'
+      ? styles.resolvedMessageSuccess
+      : state === 'failed'
+      ? styles.resolvedMessageFailed
+      : state === 'resolving'
+      ? styles.resolvedMessageResolving
+      : ''
+  }`;

  const resolvedAddressInfoMessage = useMemo(() => {
    if (state === 'succeeded') {
@@ -117,7 +134,7 @@ const ProfileSettings = () => {
      }
    }
    setSavedCryptoAddress(true);
-  }
+  };

  useEffect(() => {
    if (savedCryptoAddress) {
@@ -144,14 +161,16 @@ const ProfileSettings = () => {
        </button>
        <div className={styles.usernameInput}>
          <input type='text' placeholder='address.eth' onChange={(e) => setCryptoAddress(e.target.value)} />
-          <button className={styles.button} onClick={saveCryptoAddress}>save</button>
+          <button className={styles.button} onClick={saveCryptoAddress}>
+            save
+          </button>
          {savedCryptoAddress && <span className={styles.saved}>Saved.</span>}
        </div>
        <div className={styles.checkCryptoAddress}>
-        <button className={styles.button} onClick={() => setCheckCryptoAddress(true)}>check</button>{' '}
-          {checkCryptoAddress ? (
-            <span className={resolvedAddressInfoMessageClass}>{resolvedAddressInfoMessage}</span>
-          ) : 'if the crypto address is resolved p2p'}
+          <button className={styles.button} onClick={() => setCheckCryptoAddress(true)}>
+            check
+          </button>{' '}
+          {checkCryptoAddress ? <span className={resolvedAddressInfoMessageClass}>{resolvedAddressInfoMessage}</span> : 'if the crypto address is resolved p2p'}
        </div>
        <div></div>
      </div>