uses redux in sign in page

client/src/pages/SignIn/index.jsx

@@ -1,11 +1,15 @@
 import React, { useState } from "react";
 import { withRouter } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
 import { Button, Form, FormGroup, Container } from "reactstrap";
-import { useFirebase } from "../../services/auth";
 import { SignUpLink } from "../SignUp";
 import InputField from "../../components/InputField";
-import * as ROUTES from "../../constants/routes";
 import { PasswordForgetLink } from "../PasswordForget";
+import {
+  signInAsync,
+  selectError,
+  createAuthUserWithGoogleAsync,
+} from "../../store/sessionSlice";
 
 const useStyles = () => ({
   root: {
@@ -36,37 +40,18 @@ export default function SignInPage() {
 const SignInFormBase = (props) => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [error, setError] = useState(null);
 
-  const auth = useFirebase();
-
-  const cleanFields = () => {
-    setEmail("");
-    setPassword("");
-    setError(null);
-  };
+  const error = useSelector(selectError);
+  const dispatch = useDispatch();
 
   const handleSubmit = (e) => {
     e.preventDefault();
-
-    auth
-      .signinWithEmailAndPassword(email, password)
-      .then(() => {
-        cleanFields();
-        props.history.push(ROUTES.APP);
-      })
-      .catch((err) => setError(err));
+    dispatch(signInAsync(email, password, props));
   };
 
-  const handleClick = (e) => {
+  const loginWithGoogle = (e) => {
     e.preventDefault();
-    auth
-      .signInWithGoogle()
-      .then(() => {
-        cleanFields();
-        props.history.push(ROUTES.APP);
-      })
-      .catch((err) => setError(err));
+    dispatch(createAuthUserWithGoogleAsync(props));
   };
 
   const isInvalid = email === "" || password === "";
@@ -97,7 +82,12 @@ const SignInFormBase = (props) => {
         >
           Sign In
         </Button>
-        <Button color="light" style={styles.button} block onClick={handleClick}>
+        <Button
+          color="light"
+          style={styles.button}
+          block
+          onClick={loginWithGoogle}
+        >
           Sign In with Google
         </Button>
         {error && <p>{error.message}</p>}

client/src/pages/SignUp/index.jsx

@@ -4,7 +4,11 @@ import { useDispatch, useSelector } from "react-redux";
 import { Button, Form, FormGroup, Container } from "reactstrap";
 import * as ROUTES from "../../constants/routes";
 import InputField from "../../components/InputField";
-import { createAuthUserAsync, selectError } from "../../store/sessionSlice";
+import {
+  createAuthUserAsync,
+  createAuthUserWithGoogleAsync,
+  selectError,
+} from "../../store/sessionSlice";
 
 const useStyles = () => ({
   root: {
@@ -49,7 +53,7 @@ const SignUpFormBase = (props) => {
 
   const loginWithGoogle = (e) => {
     e.preventDefault();
-    dispatch(createAuthUserAsync(props));
+    dispatch(createAuthUserWithGoogleAsync(props));
   };
 
   const isInvalid =

client/src/store/sessionSlice.js

@@ -19,7 +19,6 @@ export const sessionSlice = createSlice({
       ...state,
       ...action.payload,
     }),
-    createAuthUser: (state, action) => {},
     getToken: (state, action) => ({
       ...state,
       token: action.payload,
@@ -81,6 +80,17 @@ export const createAuthUserAsync = (email, password, props) => async (
     .catch((err) => dispatch(newError(err)));
 };
 
+/**
+ * Sign in with email and password
+ */
+export const signInAsync = (email, password, props) => async (dispatch) => {
+  firebase
+    .auth()
+    .signInWithEmailAndPassword(email, password)
+    .then(() => props.history.push(ROUTES.APP))
+    .catch((err) => dispatch(newError(err)));
+};
+
 /**
  * Create auth user with google
  */