cleans PrivateRoute component; use redux in signup page

client/src/pages/SignUp/index.jsx

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
 import { Link, withRouter } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
 import { Button, Form, FormGroup, Container } from "reactstrap";
 import * as ROUTES from "../../constants/routes";
-import { useFirebase } from "../../services/auth";
 import InputField from "../../components/InputField";
+import { createAuthUserAsync, selectError } from "../../store/sessionSlice";
 
 const useStyles = () => ({
   root: {
@@ -37,38 +38,18 @@ const SignUpFormBase = (props) => {
   const [email, setEmail] = useState("");
   const [password1, setPassword1] = useState("");
   const [password2, setPassword2] = useState("");
-  const [error, setError] = useState(null);
+  const error = useSelector(selectError);
 
-  const auth = useFirebase();
-
-  const cleanFields = () => {
-    setUserName("");
-    setEmail("");
-    setPassword1("");
-    setPassword2("");
-    setError(null);
-  };
+  const dispatch = useDispatch();
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    auth
-      .createUserWithEmailAndPassword(email, password1)
-      .then(() => {
-        cleanFields();
-        props.history.push(ROUTES.APP);
-      })
-      .catch((err) => setError(err));
+    dispatch(createAuthUserAsync(email, password1, props));
   };
 
-  const handleClick = (e) => {
+  const loginWithGoogle = (e) => {
     e.preventDefault();
-    auth
-      .signInWithGoogle()
-      .then(() => {
-        cleanFields();
-        props.history.push(ROUTES.APP);
-      })
-      .catch((err) => setError(err));
+    dispatch(createAuthUserAsync(props));
   };
 
   const isInvalid =
@@ -110,7 +91,12 @@ const SignUpFormBase = (props) => {
         >
           Sign Up
         </Button>
-        <Button color="light" style={styles.button} block onClick={handleClick}>
+        <Button
+          color="light"
+          style={styles.button}
+          block
+          onClick={loginWithGoogle}
+        >
           Sign Up with Google
         </Button>
         {error && <p>{error.message}</p>}

client/src/routes/PrivateRoute.jsx

@@ -1,13 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { withRouter, Route } from "react-router-dom";
-import { useFirebase } from "../services/auth";
 import * as ROUTES from "../constants/routes";
-import { useSelector, useDispatch } from "react-redux";
-import {
-  selectAuthUser,
-  getAuthUserAsync,
-  selectLoggedIn,
-} from "../store/sessionSlice";
+import { useSelector } from "react-redux";
+import { selectAuthUser } from "../store/sessionSlice";
 
 const PrivateRoute = ({
   component: Component,
@@ -16,26 +11,13 @@ const PrivateRoute = ({
   history,
   ...rest
 }) => {
-  // const [authUser, setAuthUser] = useState(null);
-  // const firebase = useFirebase();
   const authUser = useSelector(selectAuthUser);
 
-  const dispatch = useDispatch();
-
   useEffect(() => {
-    // dispatch(getAuthUserAsync())
-
     if (!condition(authUser)) {
       history.push(ROUTES.SIGN_IN);
     }
-    // else {
-    //   setAuthUser(authUser);
-    // }
-  }, [
-    // firebase.auth,
-    condition,
-    history,
-  ]);
+  }, [condition, history, authUser]);
 
   const render = (props) => <Component {...props} />;
   return condition(authUser) ? (

client/src/store/sessionSlice.js

@@ -1,5 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { firebase } from "../services/auth";
+import * as ROUTES from "../constants/routes";
 
 export const sessionSlice = createSlice({
   name: "session",
@@ -18,7 +19,7 @@ export const sessionSlice = createSlice({
       ...state,
       ...action.payload,
     }),
-    addAuthUser: (state, action) => {},
+    createAuthUser: (state, action) => {},
     getToken: (state, action) => ({
       ...state,
       token: action.payload,
@@ -31,6 +32,10 @@ export const sessionSlice = createSlice({
       ...state,
       loggedIn: false,
     }),
+    newError: (state, action) => ({
+      ...state,
+      error: action.payload,
+    }),
   },
 });
 
@@ -63,11 +68,47 @@ export const getTokenAsync = () => async (dispatch) => {
   dispatch(getToken(token));
 };
 
-export const { getAuthUser, getToken, logIn, logOut } = sessionSlice.actions;
+/**
+ * Create auth user with email and password
+ */
+export const createAuthUserAsync = (email, password, props) => async (
+  dispatch
+) => {
+  firebase
+    .auth()
+    .createUserWithEmailAndPassword(email, password)
+    .then(() => props.history.push(ROUTES.APP))
+    .catch((err) => dispatch(newError(err)));
+};
+
+/**
+ * Create auth user with google
+ */
+export const createAuthUserWithGoogleAsync = (props) => async (dispatch) => {
+  const provider = new firebase.auth.GoogleAuthProvider();
+  firebase
+    .auth()
+    // signInWithRedirect(this.provider);
+    .signInWithPopup(provider)
+    .then(() => props.history.push(ROUTES.APP))
+    .catch((err) => dispatch(newError(err)));
+};
+
+// actions
+export const {
+  getAuthUser,
+  createAuthUser,
+  getToken,
+  logIn,
+  logOut,
+  newError,
+} = sessionSlice.actions;
 
 // selectors
 export const selectAuthUser = (state) => state.session;
 export const selectLoggedIn = (state) => state.session.loggedIn;
 export const selectToken = (state) => state.session.token;
+export const selectError = (state) => state.session.error;
 
+// reducer
 export default sessionSlice.reducer;