From 11f35128ccc4d0058a668612bbd05110a023bd1a Mon Sep 17 00:00:00 2001
From: karan balodi <balodikanu124@gmail.com>
Date: Sat, 30 Jan 2021 02:41:05 +0530
Subject: [PATCH] UserStatusScreen: Covert to use hooks & react navigation v5

Conversion of class based component into function based component.
Replacing NavigationService with the v5 useNavigation Hook.
Removing connect and the dispatch with appropriate useSelector and useDispatch redux hooks
Using useState hook to handle local state of the component.
---
 ios/Podfile.lock                    |   2 +-
 src/user-status/UserStatusScreen.js | 142 ++++++++++++----------------
 2 files changed, 60 insertions(+), 84 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index eeff72b35c1..65bb8f947f1 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -723,4 +723,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 0eb2bf1b0f7972fc7183f5eac73708f76355c614
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.0
diff --git a/src/user-status/UserStatusScreen.js b/src/user-status/UserStatusScreen.js
index 555981c0d34..755d87dc2f0 100644
--- a/src/user-status/UserStatusScreen.js
+++ b/src/user-status/UserStatusScreen.js
@@ -1,20 +1,17 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { useContext, useState } from 'react';
 import { FlatList, View } from 'react-native';
 import { TranslationContext } from '../boot/TranslationProvider';
 import { createStyleSheet } from '../styles';
-
-import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import * as NavigationService from '../nav/NavigationService';
-import type { GetText, Dispatch } from '../types';
-import { connect } from '../react-redux';
+import type { RouteProp } from '../react-navigation';
 import { Input, OptionButton, Screen, ZulipButton } from '../common';
 import { getSelfUserStatusText } from '../selectors';
 import { IconCancel, IconDone } from '../common/Icons';
 import statusSuggestions from './userStatusTextSuggestions';
 import { updateUserStatusText } from './userStatusActions';
-import { navigateBack } from '../nav/navActions';
+import { useNavigation } from '../react-navigation';
+import { useSelector, useDispatch } from '../react-redux';
 
 const styles = createStyleSheet({
   statusTextInput: {
@@ -32,93 +29,72 @@ const styles = createStyleSheet({
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'user-status'>,
   route: RouteProp<'user-status', void>,
-
-  dispatch: Dispatch,
-  userStatusText: string,
 |}>;
 
-type State = {|
-  statusText: string,
-|};
-
-class UserStatusScreen extends PureComponent<Props, State> {
-  static contextType = TranslationContext;
-  context: GetText;
-
-  state = {
-    statusText: this.props.userStatusText,
-  };
+export default function UserStatusScreen(props: Props) {
+  const _ = useContext(TranslationContext);
+  const userStatusText = useSelector(state => getSelfUserStatusText(state));
+  const [statusText, setStatusText] = useState(userStatusText);
+  const navigation = useNavigation();
+  const dispatch = useDispatch();
 
-  setStatusTextState = (statusText: string) => {
-    this.setState({
-      statusText,
-    });
+  const setStatusTextState = (text: string) => {
+    setStatusText(text);
   };
 
-  updateStatusText = (statusText: string) => {
-    const { dispatch } = this.props;
-    dispatch(updateUserStatusText(statusText));
-    NavigationService.dispatch(navigateBack());
+  const updateStatusText = (text: string) => {
+    dispatch(updateUserStatusText(text));
+    navigation.goBack();
   };
 
-  handleStatusTextUpdate = () => {
-    const { statusText } = this.state;
-    this.updateStatusText(statusText);
+  const handleStatusTextUpdate = () => {
+    updateStatusText(statusText);
   };
 
-  handleStatusTextClear = () => {
-    this.setStatusTextState('');
-    this.updateStatusText('');
+  const handleStatusTextClear = () => {
+    setStatusTextState('');
+    updateStatusText('');
   };
 
-  render() {
-    const { statusText } = this.state;
-    const _ = this.context;
-
-    return (
-      <Screen title="User status">
-        <Input
-          autoFocus
-          maxLength={60}
-          style={styles.statusTextInput}
-          placeholder="What’s your status?"
-          value={statusText}
-          onChangeText={this.setStatusTextState}
+  return (
+    <Screen title="User status">
+      <Input
+        autoFocus
+        maxLength={60}
+        style={styles.statusTextInput}
+        placeholder="What’s your status?"
+        value={statusText}
+        onChangeText={setStatusTextState}
+      />
+      <FlatList
+        data={statusSuggestions}
+        keyboardShouldPersistTaps="always"
+        keyExtractor={item => item}
+        renderItem={({ item, index }) => (
+          <OptionButton
+            key={item}
+            label={item}
+            onPress={() => {
+              setStatusTextState(_(item));
+            }}
+          />
+        )}
+      />
+      <View style={styles.buttonsWrapper}>
+        <ZulipButton
+          style={styles.button}
+          secondary
+          text="Clear"
+          onPress={handleStatusTextClear}
+          Icon={IconCancel}
         />
-        <FlatList
-          data={statusSuggestions}
-          keyboardShouldPersistTaps="always"
-          keyExtractor={item => item}
-          renderItem={({ item, index }) => (
-            <OptionButton
-              key={item}
-              label={item}
-              onPress={() => {
-                this.setStatusTextState(_(item));
-              }}
-            />
-          )}
+        <ZulipButton
+          style={styles.button}
+          text="Update"
+          onPress={handleStatusTextUpdate}
+          Icon={IconDone}
         />
-        <View style={styles.buttonsWrapper}>
-          <ZulipButton
-            style={styles.button}
-            secondary
-            text="Clear"
-            onPress={this.handleStatusTextClear}
-            Icon={IconCancel}
-          />
-          <ZulipButton
-            style={styles.button}
-            text="Update"
-            onPress={this.handleStatusTextUpdate}
-            Icon={IconDone}
-          />
-        </View>
-      </Screen>
-    );
-  }
+      </View>
+    </Screen>
+  );
 }
-
-export default connect(state => ({
-  userStatusText: getSelfUserStatusText(state),
-}))(UserStatusScreen);