Make SettingsView refresh on conversation change

ts/components/session/SessionInboxView.tsx

@@ -9,12 +9,13 @@ import { SmartLeftPane } from '../../state/smart/LeftPane';
 import { SmartSessionConversation } from '../../state/smart/SessionConversation';
 import {
   SessionSettingCategory,
-  SettingsView,
+  SmartSettingsView,
 } from './settings/SessionSettings';
 
 // Workaround: A react component's required properties are filtering up through connect()
 //   https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363
 const FilteredLeftPane = SmartLeftPane as any;
+const FilteredSettingsView = SmartSettingsView as any;
 
 type Props = {
   focusedSection: number;
@@ -101,7 +102,10 @@ export class SessionInboxView extends React.Component<Props, State> {
       this.state.settingsCategory || SessionSettingCategory.Appearance;
 
     return (
-      <SettingsView isSecondaryDevice={isSecondaryDevice} category={category} />
+      <FilteredSettingsView
+        isSecondaryDevice={isSecondaryDevice}
+        category={category}
+      />
     );
   }
 

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -185,7 +185,10 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     // reset the state on new conversation key
     if (prevProps.conversationKey !== this.props.conversationKey) {
       this.setState(getDefaultState(), this.focusCompositionBox);
-    } else if (this.props.stagedAttachments?.length !== prevProps.stagedAttachments?.length) {
+    } else if (
+      this.props.stagedAttachments?.length !==
+      prevProps.stagedAttachments?.length
+    ) {
       // if number of staged attachment changed, focus the composition box for a more natural UI
       this.focusCompositionBox();
     }

ts/components/session/settings/SessionSettings.tsx

@@ -11,6 +11,13 @@ import { BlockedNumberController, UserUtil } from '../../../util';
 import { MultiDeviceProtocol } from '../../../session/protocols';
 import { PubKey } from '../../../session/types';
 import { ToastUtils } from '../../../session/utils';
+import {
+  ConversationLookupType,
+  ConversationType,
+} from '../../../state/ducks/conversations';
+import { mapDispatchToProps } from '../../../state/actions';
+import { connect } from 'react-redux';
+import { StateType } from '../../../state/reducer';
 
 export enum SessionSettingCategory {
   Appearance = 'appearance',
@@ -32,6 +39,9 @@ export enum SessionSettingType {
 export interface SettingsViewProps {
   category: SessionSettingCategory;
   isSecondaryDevice: boolean;
+  // pass the conversation as props, so our render is called everytime they change.
+  // we have to do this to make the list refresh on unblock()
+  conversations?: ConversationLookupType;
 }
 
 interface State {
@@ -57,7 +67,7 @@ interface LocalSettingType {
   confirmationDialogParams: any | undefined;
 }
 
-export class SettingsView extends React.Component<SettingsViewProps, State> {
+class SettingsViewInner extends React.Component<SettingsViewProps, State> {
   public settingsViewRef: React.RefObject<HTMLDivElement>;
 
   public constructor(props: any) {
@@ -731,3 +741,14 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
     event.preventDefault();
   }
 }
+
+const mapStateToProps = (state: StateType) => {
+  const { conversations } = state;
+
+  return {
+    conversations: conversations.conversationLookup,
+  };
+};
+
+const smart = connect(mapStateToProps);
+export const SmartSettingsView = smart(SettingsViewInner);