// @flow

import { type ThreadInfo, threadInfoPropType } from 'lib/types/thread-types';
import type { AppState } from '../../redux/redux-setup';
import type { DispatchActionPromise } from 'lib/utils/action-utils';
import type {
  SubscriptionUpdateRequest,
  SubscriptionUpdateResult,
} from 'lib/types/subscription-types';

import * as React from 'react';
import { Text, View, Switch } from 'react-native';
import PropTypes from 'prop-types';

import { connect } from 'lib/utils/redux-utils';
import {
  updateSubscriptionActionTypes,
  updateSubscription,
} from 'lib/actions/user-actions';

import { styleSelector } from '../../themes/colors';

type Props = {|
  threadInfo: ThreadInfo,
  // Redux state
  styles: typeof styles,
  // Redux dispatch functions
  dispatchActionPromise: DispatchActionPromise,
  // async functions that hit server APIs
  updateSubscription: (
    subscriptionUpdate: SubscriptionUpdateRequest,
  ) => Promise<SubscriptionUpdateResult>,
|};
type State = {|
  currentValue: boolean,
|};
class ThreadSettingsPushNotifs extends React.PureComponent<Props, State> {
  static propTypes = {
    threadInfo: threadInfoPropType.isRequired,
    styles: PropTypes.objectOf(PropTypes.object).isRequired,
    dispatchActionPromise: PropTypes.func.isRequired,
    updateSubscription: PropTypes.func.isRequired,
  };

  constructor(props: Props) {
    super(props);
    this.state = {
      currentValue: props.threadInfo.currentUser.subscription.pushNotifs,
    };
  }

  render() {
    return (
      <View style={this.props.styles.row}>
        <Text style={this.props.styles.label}>Push notifs</Text>
        <View style={this.props.styles.currentValue}>
          <Switch
            value={this.state.currentValue}
            onValueChange={this.onValueChange}
          />
        </View>
      </View>
    );
  }

  onValueChange = (value: boolean) => {
    this.setState({ currentValue: value });
    this.props.dispatchActionPromise(
      updateSubscriptionActionTypes,
      this.props.updateSubscription({
        threadID: this.props.threadInfo.id,
        updatedFields: {
          pushNotifs: value,
        },
      }),
    );
  };
}

const styles = {
  currentValue: {
    alignItems: 'flex-end',
    flex: 1,
    margin: 0,
    paddingLeft: 4,
    paddingRight: 0,
    paddingVertical: 0,
  },
  label: {
    color: 'panelForegroundTertiaryLabel',
    fontSize: 16,
    width: 96,
  },
  row: {
    alignItems: 'center',
    backgroundColor: 'panelForeground',
    flexDirection: 'row',
    paddingHorizontal: 24,
    paddingVertical: 3,
  },
};
const stylesSelector = styleSelector(styles);

export default connect(
  (state: AppState) => ({
    styles: stylesSelector(state),
  }),
  { updateSubscription },
)(ThreadSettingsPushNotifs);

@@ -85,65 +85,8 @@
 s';%0A
-import type %7B AppState %7D from '../../redux/redux-setup';%0A
 impo
@@ -385,57 +385,8 @@
 ';%0A%0A
-import %7B connect %7D from 'lib/utils/redux-utils';%0A
 impo
@@ -480,25 +480,24 @@
 tions';%0A
-%0A
 import %7B
  styleSe
@@ -488,30 +488,114 @@
 import %7B
- styleSelector
+%0A  useServerCall,%0A  useDispatchActionPromise,%0A%7D from 'lib/utils/action-utils';%0A%0Aimport %7B useStyles
  %7D from 
@@ -623,16 +623,20 @@
 ;%0A%0Atype 
+Base
 Props = 
@@ -640,16 +640,17 @@
  = %7B%7C%0A  
++
 threadIn
@@ -665,16 +665,52 @@
 adInfo,%0A
+%7C%7D;%0Atype Props = %7B%7C%0A  ...BaseProps,%0A
   // Red
@@ -720,16 +720,17 @@
 state%0A  
++
 styles: 
@@ -736,17 +736,24 @@
  typeof 
-s
+unboundS
 tyles,%0A 
@@ -783,16 +783,17 @@
 tions%0A  
++
 dispatch
@@ -874,16 +874,17 @@
  APIs%0A  
++
 updateSu
@@ -1012,16 +1012,17 @@
  = %7B%7C%0A  
++
 currentV
@@ -2195,25 +2195,32 @@
 %7D;%0A%7D%0A%0Aconst 
-s
+unboundS
 tyles = %7B%0A  
@@ -2617,149 +2617,422 @@
 %0A%7D;%0A
-const stylesSelector = styleSelector(styles);%0A%0Aexport default connect(%0A  (state: AppState) =%3E (%7B%0A
+%0Aexport default React.memo%3CBaseProps%3E(function ConnectedThreadSettingsPushNotifs(%0A  props: BaseProps,%0A) %7B%0A  const styles = useStyles(unboundStyles);%0A  const dispatchActionPromise = useDispatchActionPromise();%0A  const callUpdateSubscription = useServerCall(updateSubscription);%0A  return (%0A    %3CThreadSettingsPushNotifs%0A      %7B...props%7D%0A 
     
+ 
 styles
-: 
+=%7B
 styles
-Selector(state),%0A  %7D),%0A
+%7D%0A      dispatchActionPromise=%7BdispatchActionPromise%7D%0A   
   
-%7B
  upd
@@ -3050,37 +3050,46 @@
 tion
- %7D,%0A)(ThreadSettingsPushNotifs
+=%7BcallUpdateSubscription%7D%0A    /%3E%0A  );%0A%7D
 );%0A

Use hooks for data-binding in ThreadSettingsPushNotifs