everything switched over, time to test

account/src/User/SendResetPassword.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import {
   Form,
   Grid,
@@ -7,106 +7,99 @@ import {
   Message,
   Icon
 } from "semantic-ui-react";
+import { sendResetPassword } from "../features/user/userSlice";
 import { Link } from "react-router-dom";
+import { useParams, useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux'
 
-const returnStyle = {
-  marginTop: "30px"
-};
 
-class SendResetPassword extends Component {
 
-  constructor(props) {
-    super(props);
-    this.handleSendResetPassword = this.handleSendResetPassword.bind(this);
-    this.handleInputChange = this.handleInputChange.bind(this);
-  }
-  state = {
-    checkInputMessages: "",
-    email: "",
-    emailError: false,
-    sentReset: false
+const SendResetPassword = (props) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const [checkInputMessages, setCheckInputMessages] = useState("");
+  const [email, setEmail] = useState("");
+  const [emailError, setEmailError] = useState(false);
+  const [resetSent, setResetSent] = useState(false);
+
+  const returnStyle = {
+    marginTop: "30px"
   };
 
-  handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
-
-  handleSendResetPassword(event) {
-
-
-    if (this.state.email === "") {
-      this.setState({ emailError: true, checkInputMessages:  "Email is required"});
-
+  const handleSendResetPassword = async () => {
+    if (email === "") {
+      setEmailError(true);
+      setCheckInputMessages("Email is required");
     } else {
-      this.setState({ emailError: false });
-
-      this.props.sendResetPassword({email: this.state.email}).then(resetMessage => {
-        if (resetMessage) {
-          // report to the user is there was a problem during login
-
-          this.setState({resetSent: false, checkInputMessages: resetMessage, emailError: true});
-        } else {
-        this.setState({resetSent: true});
+      const result = await dispatch(sendResetPassword({ email })).unwrap();
+      if (result.success) {
+        setResetSent(true);
+        setEmailError(true);
+      } else {
+        setCheckInputMessages(result.message);
+        console.error(result);
       }
-      });
     }
-  }
-  render() {
-    var resetMessage = "";
-    if (this.state.checkInputMessages.length) {
-      resetMessage = (
-        <Message compact warning icon>
-          <Icon name="lightning" />
-          <Message.Content>
-            <Message.Header>Problems...</Message.Header>
+  };
 
-              {this.state.checkInputMessages}
-
-          </Message.Content>
-        </Message>
-      );
-    }
-    return (
-
-
-          <Grid verticalAlign='middle'  centered>
-    <Grid.Row>
-
-      <Grid.Column width="6">
-        { !this.state.resetSent ? (
-<div>
-        <h2>Forgot your password?</h2>
-        <Form className="raised padding segment" onSubmit={this.handleSubmit}>
-          Enter the email address for your account.
-          <Form.Field>
-            <Form.Input
-              type="text"
-              name="email"
-              onChange={this.handleInputChange}
-              error={this.state.emailError}
-              label="Email"
-              placeholder="Email..."
-            />
-          </Form.Field>
-          <Button
-            size="large"
-            content="Reset Password"
-            onClick={this.handleSendResetPassword}
-            fluid
-          />
-        </Form>
-        {resetMessage}
-        </div>
-      )
-            :( <Segment raised padded='very'>
-              <h2>Reset Link Sent </h2>
-              <div>An email with a link to reset your password was sent to: {this.state.email}</div>
-              <Link to="/" style={returnStyle}><Icon name="left arrow"/>Back to OpenMHz</Link>
-              </Segment>
-            )}
-      </Grid.Column>
-    </Grid.Row>
-  </Grid>
+  var resetMessage = "";
+  if (checkInputMessages.length) {
+    resetMessage = (
+      <Message compact warning icon>
+        <Icon name="lightning" />
+        <Message.Content>
+          <Message.Header>Problems...</Message.Header>
+          {checkInputMessages}
+        </Message.Content>
+      </Message>
     );
   }
+
+  return (
+    <Grid verticalAlign="middle" centered>
+      <Grid.Row>
+        <Grid.Column width={6}>
+          {!resetSent ? (
+            <div>
+              <h2>Forgot your password?</h2>
+              <Form className="raised padding segment">
+                Enter the email address for your account.
+                <Form.Field>
+                  <Form.Input
+                    type="text"
+                    name="email"
+                    onChange={e => setEmail(e.target.value)}
+                    value={email}
+                    error={emailError}
+                    label="Email"
+                    placeholder="Email..."
+                  />
+                </Form.Field>
+                <Button
+                  size="large"
+                  content="Reset Password"
+                  onClick={handleSendResetPassword}
+                  fluid
+                />
+              </Form>
+              {resetMessage}
+            </div>
+          ) : (
+            <Segment raised padded="very">
+              <h2>Reset Link Sent </h2>
+              <div>
+                An email with a link to reset your password was sent to: {email}
+              </div>
+              <Link to="/" style={returnStyle}>
+                <Icon name="left arrow" />
+                Back to OpenMHz
+              </Link>
+            </Segment>
+          )}
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  );
 }
 
 export default SendResetPassword;