Converted all components to use functional definition rather than Classes. Removed 'zustand' and replaced with 'react-redux' for state. Some minor adjustments to the project organization.

src/screens/ForgotPassword.js

@@ -1,79 +1,36 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { clearSession } from '../store/SessionSlice';
 import { pageStyle, pageItemStyle, primaryColor } from '../AppStyle';
 import { View, Text, TextInput, Button, ActivityIndicator, Alert } from 'react-native';
 import { strings } from '../localization/LocalizationStrings';
 import { authenticationApi, handleApiError } from '../api/apiHandler';
-import { useStore } from '../Store';
 
-export default class ForgotPassword extends Component {
-  state = {
-    email: '',
-    loading: false,
-  };
+const ForgotPassword = props => {
+  const dispatch = useDispatch();
+  const [email, setEmail] = useState();
+  const [loading, setLoading] = useState(false);
 
-  render() {
-    return (
-      <View style={pageStyle.container}>
-        <View style={pageItemStyle.container}>
-          <Text>Forgot Password</Text>
-        </View>
-        <View style={pageItemStyle.container}>
-          <ActivityIndicator size="large" animating={this.state.loading} />
-        </View>
-        <View style={pageItemStyle.container}>
-          <TextInput
-            style={pageItemStyle.inputText}
-            placeholder={strings.placeholders.email}
-            autoComplete="email"
-            autoCapitalize="none"
-            autoFocus={true}
-            keyboardType="email-address"
-            textContentType="emailAddress"
-            returnKeyType="go"
-            onChangeText={text => this.setState({ email: text })}
-            onSubmitEditing={() => {
-              this.state.email && this.onSubmit;
-            }}
-          />
-        </View>
-        <View style={pageItemStyle.containerButton}>
-          <Button
-            title={strings.buttons.sendEmail}
-            color={primaryColor()}
-            onPress={this.onSubmit}
-            disabled={this.state.loading || !this.state.email}
-          />
-        </View>
-        <View style={pageItemStyle.containerButton}>
-          <Button
-            title={strings.buttons.signIn}
-            color={primaryColor()}
-            onPress={this.backToSignin}
-            disabled={this.state.loading}
-          />
-        </View>
-      </View>
-    );
-  }
-
-  validateEmail = () => {
+  const validateEmail = () => {
     const re = /\S+@\S+\.\S+/;
-    const valid = re.test(this.state.email);
+    const valid = re.test(email);
     if (!valid) {
       Alert.alert(strings.errors.titleForgotPassword, strings.errors.badEmail);
     }
     return valid;
-  }
+  };
+
+  const onSubmit = async () => {
+    if (validateEmail()) {
+      setLoading(true);
 
-  onSubmit = async () => {
-    if (this.validateEmail()) {
-      this.setState({ loading: true });
       try {
-        useStore.getState().clearSession();
+        // Clear the session information
+        dispatch(clearSession());
 
         const response = await authenticationApi.getAccessToken(
           {
-            userId: this.state.email,
+            userId: email,
           },
           undefined,
           true,
@@ -82,12 +39,53 @@ export default class ForgotPassword extends Component {
         Alert.alert(strings.messages.message, strings.messages.resetEmail);
       } catch (error) {
         handleApiError(strings.errors.titleForgotPassword, error);
+      } finally {
+        setLoading(false);
       }
-      this.setState({ loading: false });
     }
   };
 
-  backToSignin = () => {
-    this.props.navigation.replace('SignIn');
+  const backToSignin = () => {
+    props.navigation.replace('SignIn');
   };
-}
+
+  return (
+    <View style={pageStyle.container}>
+      <View style={pageItemStyle.container}>
+        <Text>Forgot Password</Text>
+      </View>
+      <View style={pageItemStyle.container}>
+        <ActivityIndicator size="large" animating={loading} />
+      </View>
+      <View style={pageItemStyle.container}>
+        <TextInput
+          style={pageItemStyle.inputText}
+          placeholder={strings.placeholders.email}
+          autoComplete="email"
+          autoCapitalize="none"
+          autoFocus={true}
+          keyboardType="email-address"
+          textContentType="emailAddress"
+          returnKeyType="go"
+          onChangeText={text => setEmail(text)}
+          onSubmitEditing={() => {
+            email && onSubmit;
+          }}
+        />
+      </View>
+      <View style={pageItemStyle.containerButton}>
+        <Button
+          title={strings.buttons.sendEmail}
+          color={primaryColor}
+          onPress={onSubmit}
+          disabled={loading || !email}
+        />
+      </View>
+      <View style={pageItemStyle.containerButton}>
+        <Button title={strings.buttons.signIn} color={primaryColor} onPress={backToSignin} disabled={loading} />
+      </View>
+    </View>
+  );
+};
+
+export default ForgotPassword;