Refactor smart components

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>

ts/state/smart/HeroRow.tsx

@@ -1,41 +1,77 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
-
-import { connect } from 'react-redux';
-import { mapDispatchToProps } from '../actions';
-
+import React, { memo } from 'react';
+import { useSelector } from 'react-redux';
 import { ConversationHero } from '../../components/conversation/ConversationHero';
-
-import type { StateType } from '../reducer';
 import { getPreferredBadgeSelector } from '../selectors/badges';
 import { getIntl, getTheme } from '../selectors/user';
 import { getHasStoriesSelector } from '../selectors/stories2';
 import { isSignalConversation } from '../../util/isSignalConversation';
+import { getConversationSelector } from '../selectors/conversations';
+import { useConversationsActions } from '../ducks/conversations';
+import { useGlobalModalActions } from '../ducks/globalModals';
+import { useStoriesActions } from '../ducks/stories';
 
-type ExternalProps = {
+type SmartHeroRowProps = Readonly<{
   id: string;
-};
+}>;
 
-const mapStateToProps = (state: StateType, props: ExternalProps) => {
-  const { id } = props;
-
-  const conversation = state.conversations.conversationLookup[id];
-
-  if (!conversation) {
+export const SmartHeroRow = memo(function SmartHeroRow({
+  id,
+}: SmartHeroRowProps) {
+  const i18n = useSelector(getIntl);
+  const theme = useSelector(getTheme);
+  const getPreferredBadge = useSelector(getPreferredBadgeSelector);
+  const hasStoriesSelector = useSelector(getHasStoriesSelector);
+  const conversationSelector = useSelector(getConversationSelector);
+  const conversation = conversationSelector(id);
+  if (conversation == null) {
     throw new Error(`Did not find conversation ${id} in state!`);
   }
-
-  return {
-    i18n: getIntl(state),
-    ...conversation,
-    conversationType: conversation.type,
-    hasStories: getHasStoriesSelector(state)(id),
-    badge: getPreferredBadgeSelector(state)(conversation.badges),
-    isSignalConversation: isSignalConversation(conversation),
-    theme: getTheme(state),
-  };
-};
-
-const smart = connect(mapStateToProps, mapDispatchToProps);
-
-export const SmartHeroRow = smart(ConversationHero);
+  const badge = getPreferredBadge(conversation.badges);
+  const hasStories = hasStoriesSelector(id);
+  const isSignalConversationValue = isSignalConversation(conversation);
+  const { unblurAvatar, updateSharedGroups } = useConversationsActions();
+  const { toggleAboutContactModal } = useGlobalModalActions();
+  const { viewUserStories } = useStoriesActions();
+  const {
+    about,
+    acceptedMessageRequest,
+    avatarPath,
+    groupDescription,
+    isMe,
+    membersCount,
+    phoneNumber,
+    profileName,
+    sharedGroupNames,
+    title,
+    type,
+    unblurredAvatarPath,
+  } = conversation;
+  return (
+    <ConversationHero
+      about={about}
+      acceptedMessageRequest={acceptedMessageRequest}
+      avatarPath={avatarPath}
+      badge={badge}
+      conversationType={type}
+      groupDescription={groupDescription}
+      hasStories={hasStories}
+      i18n={i18n}
+      id={id}
+      isMe={isMe}
+      isSignalConversation={isSignalConversationValue}
+      membersCount={membersCount}
+      phoneNumber={phoneNumber}
+      profileName={profileName}
+      sharedGroupNames={sharedGroupNames}
+      theme={theme}
+      title={title}
+      toggleAboutContactModal={toggleAboutContactModal}
+      unblurAvatar={unblurAvatar}
+      unblurredAvatarPath={unblurredAvatarPath}
+      updateSharedGroups={updateSharedGroups}
+      viewUserStories={viewUserStories}
+    />
+  );
+});