[#2009] Fixed unnecessary recalls and rerenders (#2054)

airyhq · Jun 28, 2021 · 5164662 · 5164662
1 parent 2e3763f
commit 5164662
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 16 deletions.
diff --git a/frontend/ui/src/pages/Inbox/ConversationListItem/index.module.scss b/frontend/ui/src/pages/Inbox/ConversationListItem/index.module.scss
@@ -34,7 +34,6 @@
   border-radius: 8px;
   background-color: var(--color-background-blue);
   .contactDetails {
-    border-bottom: none;
     padding-bottom: 0;
   }
 }

diff --git a/frontend/ui/src/pages/Inbox/ConversationListItem/index.tsx b/frontend/ui/src/pages/Inbox/ConversationListItem/index.tsx
@@ -65,14 +65,18 @@ const ConversationListItem = (props: ConversationListItemProps) => {
     );
   };
 
-  useEffect(() => {
+  const markAsRead = () => {
     if (active && unread) {
-      return readConversations(conversation.id);
+      readConversations(conversation.id);
     }
+  };
+
+  useEffect(() => {
+    markAsRead();
   }, [active, conversation, currentConversationState]);
 
   return (
-    <div className={styles.clickableListItem} onClick={() => readConversations(conversation.id)}>
+    <div className={styles.clickableListItem} onClick={markAsRead}>
       <Link to={`${INBOX_CONVERSATIONS_ROUTE}/${conversation.id}`}>
         <div
           className={`${active ? styles.containerListItemActive : styles.containerListItem} ${

diff --git a/frontend/ui/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx b/frontend/ui/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx
@@ -50,11 +50,14 @@ const ConversationMetadata = (props: ConnectedProps<typeof connector>) => {
   const [displayName, setDisplayName] = useState(conversation.metadata.contact.displayName);
 
   useEffect(() => {
-    listTags();
     setShowEditDisplayName(false);
     setDisplayName(conversation.metadata.contact.displayName);
   }, [conversation]);
 
+  useEffect(() => {
+    listTags();
+  }, []);
+
   const showAddTags = () => {
     setTagName('');
     setShowTagsDialog(true);

diff --git a/frontend/ui/src/pages/Inbox/QuickFilter/Popup.module.scss b/frontend/ui/src/pages/Inbox/QuickFilter/Popup.module.scss
@@ -74,6 +74,7 @@
   cursor: pointer;
   outline: none;
   max-height: 29px;
+  white-space: nowrap;
 
   svg {
     display: inline-block;
@@ -93,7 +94,7 @@
   background: none;
   border: 2px solid #bf1a2f;
   border-radius: 50%;
-  margin-right: 2px;
+  margin-right: 4px;
 }
 
 .filterButtonSelected {

diff --git a/frontend/ui/src/pages/Inbox/QuickFilter/Popup.tsx b/frontend/ui/src/pages/Inbox/QuickFilter/Popup.tsx
@@ -125,9 +125,9 @@ const PopUpFilter = (props: PopUpFilterProps) => {
   return (
     <DialogCustomizable
       close={closeCallback}
-      style={{marginTop: '10px'}}
+      style={{marginTop: '20px', left: '0px', marginLeft: '215px'}}
       coverStyle={{backgroundColor: 'rgba(247,247,247,0.7)'}}>
-      <div className={styles.content}>
+      <div id="dialogContent" className={styles.content}>
         <div className={styles.filterColumn}>
           <div className={styles.filterStateContainer}>
             <div className={styles.filterItem}>

diff --git a/lib/typescript/render/components/Avatar/index.tsx b/lib/typescript/render/components/Avatar/index.tsx
@@ -13,11 +13,22 @@ const fallbackAvatarImage = (event: SyntheticEvent<HTMLImageElement, Event>) =>
   event.currentTarget.alt = 'fallback avatar';
 };
 
-export const Avatar = ({contact}: AvatarProps) => (
-  <img
-    alt={contact?.displayName || 'Unknown contact'}
-    className={styles.avatarImage}
-    src={contact?.avatarUrl || fallbackAvatar}
-    onError={(event: React.SyntheticEvent<HTMLImageElement, Event>) => fallbackAvatarImage(event)}
-  />
-);
+const AvatarComponent = ({contact}: AvatarProps) => {
+  return (
+    <img
+      alt={contact?.displayName || 'Unknown contact'}
+      className={styles.avatarImage}
+      src={contact?.avatarUrl || fallbackAvatar}
+      onError={(event: React.SyntheticEvent<HTMLImageElement, Event>) => fallbackAvatarImage(event)}
+    />
+  );
+};
+
+const areEqual = (prevProps, nextProps) => {
+  if (prevProps.contact.avatarUrl === nextProps.contact.avatarUrl) {
+    return true;
+  }
+  return false;
+};
+
+export const Avatar = React.memo(AvatarComponent, areEqual);