reactions refactor, fix Tabs

packages/app/src/Components/Event/Reactions.tsx

@@ -26,54 +26,32 @@ interface ReactionsProps {
 const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: ReactionsProps) => {
   const { formatMessage } = useIntl();
   const onClose = () => setShow(false);
-  const likes = useMemo(() => {
+
-    const sorted = [...positive];
+  const sortEvents = (events) => events.sort(
-    sorted.sort((a, b) =>
+    (a, b) => socialGraphInstance.getFollowDistance(a.pubkey) - socialGraphInstance.getFollowDistance(b.pubkey)
-      socialGraphInstance.getFollowDistance(a.pubkey) - socialGraphInstance.getFollowDistance(b.pubkey),
   );
-    return sorted;
+
-  }, [positive]);
+  const likes = useMemo(() => sortEvents([...positive]), [positive]);
-  const dislikes = useMemo(() => {
+  const dislikes = useMemo(() => sortEvents([...negative]), [negative]);
-    const sorted = [...negative];
+  const sortedReposts = useMemo(() => sortEvents([...reposts]), [reposts]);
-    sorted.sort((a, b) =>
+
-      socialGraphInstance.getFollowDistance(a.pubkey) - socialGraphInstance.getFollowDistance(b.pubkey),
-    );
-    return sorted;
-  }, [negative]);
-  const sortedReposts = useMemo(() => {
-    const sorted = [...reposts];
-    sorted.sort((a, b) =>
-      socialGraphInstance.getFollowDistance(a.pubkey) - socialGraphInstance.getFollowDistance(b.pubkey),
-    );
-    return sorted;
-  }, [reposts]);
   const total = positive.length + negative.length + zaps.length + reposts.length;
-  const defaultTabs: Tab[] = [
+
-    {
+  const createTab = (message, count, value, disabled = false) => ({
-      text: formatMessage(messages.Likes, { n: likes.length }),
+    text: formatMessage(message, { n: count }),
-      value: 0,
+    value,
-    },
+    disabled,
-    {
+  });
-      text: formatMessage(messages.Zaps, { n: zaps.length }),
+
-      value: 1,
+  const tabs = useMemo(() => {
-      disabled: zaps.length === 0,
+    const baseTabs = [
-    },
+      createTab(messages.Likes, likes.length, 0),
-    {
+      createTab(messages.Zaps, zaps.length, 1, zaps.length === 0),
-      text: formatMessage(messages.Reposts, { n: reposts.length }),
+      createTab(messages.Reposts, reposts.length, 2, reposts.length === 0),
-      value: 2,
-      disabled: reposts.length === 0,
-    },
     ];
-  const tabs = defaultTabs.concat(
+
-    dislikes.length !== 0
+    return dislikes.length !== 0 ? baseTabs.concat(createTab(messages.Dislikes, dislikes.length, 3)) : baseTabs;
-      ? [
+  }, [likes.length, zaps.length, reposts.length, dislikes.length, formatMessage]);
-          {
-            text: formatMessage(messages.Dislikes, { n: dislikes.length }),
-            value: 3,
-          },
-        ]
-      : [],
-  );
 
   const [tab, setTab] = useState(tabs[0]);
 
@@ -81,12 +59,20 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
     if (!show) {
       setTab(tabs[0]);
     }
-  }, [show]);
+  }, [show, tabs]);
+
+  const renderReactionItem = (ev, icon, size) => (
+    <div key={ev.id} className="reactions-item">
+      <div className="reaction-icon">
+        <Icon name={icon} size={size} />
+      </div>
+      <ProfileImage pubkey={ev.pubkey} showProfileCard={true} />
+    </div>
+  );
 
   return show ? (
     <Modal id="reactions" className="reactions-modal" onClose={onClose}>
       <CloseButton onClick={onClose} className="absolute right-4 top-3" />
-
       <div className="reactions-header">
         <h2>
           <FormattedMessage {...messages.ReactionsCount} values={{ n: total }} />
@@ -94,19 +80,8 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
       </div>
       <Tabs tabs={tabs} tab={tab} setTab={setTab} />
       <div className="reactions-body" key={tab.value}>
-        {tab.value === 0 &&
+        {tab.value === 0 && likes.map(ev => renderReactionItem(ev, "heart"))}
-          likes.map(ev => {
+        {tab.value === 1 && zaps.map(z => z.sender && (
-            return (
-              <div key={ev.id} className="reactions-item">
-                <div className="reaction-icon">{ev.content === "+" ? <Icon name="heart" /> : ev.content}</div>
-                <ProfileImage pubkey={ev.pubkey} showProfileCard={true} />
-              </div>
-            );
-          })}
-        {tab.value === 1 &&
-          zaps.map(z => {
-            return (
-              z.sender && (
           <div key={z.id} className="reactions-item">
             <div className="zap-reaction-icon">
               <Icon name="zap" size={20} />
@@ -117,36 +92,12 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
               pubkey={z.anonZap ? "" : z.sender}
               subHeader={<div title={z.content}>{z.content}</div>}
               link={z.anonZap ? "" : undefined}
-                    overrideUsername={
+              overrideUsername={z.anonZap ? formatMessage({ defaultMessage: "Anonymous", id: "LXxsbk" }) : undefined}
-                      z.anonZap ? formatMessage({ defaultMessage: "Anonymous", id: "LXxsbk" }) : undefined
-                    }
             />
           </div>
-              )
+        ))}
-            );
+        {tab.value === 2 && sortedReposts.map(ev => renderReactionItem(ev, "repost", 16))}
-          })}
+        {tab.value === 3 && dislikes.map(ev => renderReactionItem(ev, "dislike"))}
-        {tab.value === 2 &&
-          sortedReposts.map(ev => {
-            return (
-              <div key={ev.id} className="reactions-item">
-                <div className="reaction-icon">
-                  <Icon name="repost" size={16} />
-                </div>
-                <ProfileImage pubkey={ev.pubkey} showProfileCard={true} />
-              </div>
-            );
-          })}
-        {tab.value === 3 &&
-          dislikes.map(ev => {
-            return (
-              <div key={ev.id} className="reactions-item f-ellipsis">
-                <div className="reaction-icon">
-                  <Icon name="dislike" />
-                </div>
-                <ProfileImage pubkey={ev.pubkey} showProfileCard={true} />
-              </div>
-            );
-          })}
       </div>
     </Modal>
   ) : null;

packages/app/src/Components/Tabs/Tabs.tsx

@@ -34,8 +34,8 @@ const Tabs = ({ tabs, tab, setTab }: TabsProps) => {
   const horizontalScroll = useHorizontalScroll();
   return (
     <div className="tabs" ref={horizontalScroll}>
-      {tabs.map(t => (
+      {tabs.map((t, index) => (
-        <TabElement key={tab.value} tab={tab} setTab={setTab} t={t} />
+        <TabElement key={index} tab={tab} setTab={setTab} t={t} />
       ))}
     </div>
   );