use redux update and reset password and signout button"

client/src/components/PasswordChangeForm/index.jsx

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { Button, Form, FormGroup } from "reactstrap";
-import { useFirebase } from "../../services/auth";
 import InputField from "../InputField";
+import { updatePasswordAsync, selectError } from "../../store/sessionSlice";
 
 const useStyles = () => ({
   root: {
@@ -17,19 +18,16 @@ const useStyles = () => ({
 const PasswordChangeForm = () => {
   const [password1, setPassword1] = useState("");
   const [password2, setPassword2] = useState("");
-  const [error, setError] = useState(null);
 
-  const auth = useFirebase();
+  const error = useSelector(selectError);
+
+  const dispatch = useDispatch();
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    auth
+    setPassword1("");
-      .updatePassword(password1)
+    setPassword2("");
-      .then(() => {
+    dispatch(updatePasswordAsync(password1));
-        setPassword1("");
-        setPassword2("");
-      })
-      .catch((err) => setError(err));
   };
 
   const isInvalid = password1 === password2 || password1 === "";

client/src/components/PasswordForgetForm/index.jsx

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { Button, Form, FormGroup } from "reactstrap";
-import { useFirebase } from "../../services/auth";
 import InputField from "../../components/InputField";
+import { resetPasswordAsync, selectError } from "../../store/sessionSlice";
 
 const useStyles = () => ({
   button: {
@@ -12,19 +13,14 @@ const useStyles = () => ({
 
 const PasswordForgetForm = () => {
   const [email, setEmail] = useState("");
-  const [error, setError] = useState(null);
+  const error = useSelector(selectError);
 
-  const auth = useFirebase();
+  const dispatch = useDispatch();
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    auth
+    setEmail("");
-      .resetPassword(email)
+    dispatch(resetPasswordAsync(email));
-      .then(() => {
-        setEmail("");
-        setError(null);
-      })
-      .catch((err) => setError(err));
   };
 
   const isInvalid = email === "";

client/src/components/SignOutButton/index.jsx

@@ -1,9 +1,11 @@
 import React from "react";
+import { withRouter } from "react-router-dom";
+import { useDispatch } from "react-redux";
 import { Button } from "reactstrap";
-import { useFirebase } from "../../services/auth";
+import { signOutAsync } from "../../store/sessionSlice";
 
 const SignOutButton = () => {
-  const auth = useFirebase();
+  const dispatch = useDispatch();
-  return <Button onClick={auth.signOut}>Sign Out</Button>;
+  return <Button onClick={() => dispatch(signOutAsync())}>Sign Out</Button>;
 };
-export default SignOutButton;
+export default withRouter(SignOutButton);

client/src/constants/authConditions.js

@@ -1,4 +1,4 @@
 import * as ROLES from "./roles";
 
-export const AUTHENTICATED = (authUser) => !!authUser;
+export const AUTHENTICATED = (authUser) => !!authUser.loggedIn;
 export const ADMIN = (authUser) => authUser && !!authUser.roles[ROLES.ADMIN];

client/src/routes/PrivateRoute.jsx

@@ -15,7 +15,7 @@ const PrivateRoute = ({
 
   useEffect(() => {
     if (!condition(authUser)) {
-      history.push(ROUTES.SIGN_IN);
+      setTimeout(() => history.push(ROUTES.SIGN_IN), 0);
     }
   }, [condition, history, authUser]);
 

client/src/store/sessionSlice.js

@@ -87,10 +87,33 @@ export const signInAsync = (email, password, props) => async (dispatch) => {
   firebase
     .auth()
     .signInWithEmailAndPassword(email, password)
-    .then(() => props.history.push(ROUTES.APP))
+    .then(() => {
+      dispatch(logIn());
+      props.history.push(ROUTES.APP);
+    })
     .catch((err) => dispatch(newError(err)));
 };
 
+/**
+ * Sign out
+ */
+export const signOutAsync = () => async (dispatch) => {
+  firebase
+    .auth()
+    .signOut()
+    .then(() => {
+      dispatch(logOut());
+    });
+};
+
+export const resetPasswordAsync = (email) => async (dispatch) => {
+  firebase.auth().sendPasswordResetEmail(email);
+};
+
+export const updatePasswordAsync = (password) => async (dispatch) => {
+  firebase.auth().currentUser.updatePassword(password);
+};
+
 /**
  * Create auth user with google
  */