Refactor client to use Redux for sign-up

client/src/actions/index.js

@@ -1,8 +1,9 @@
-import {toast} from 'react-toastify';
+import { toast } from 'react-toastify';
 import axios from 'axios';
 export const types = {
   SET_LOADING: 'set_loading',
   FETCH_USER: 'fetch_user',
+  SIGN_UP_USER: 'sign_up_user',
   FETCH_USERS: 'fetch_users',
   FETCH_MEDIA_RESPONSE: 'fetch_media_response',
   GET_MOST_WATCHED: 'get_most_watched',
@@ -13,12 +14,25 @@ export const types = {
 };
 
 export const setLoading = loading => dispatch => {
-  dispatch({type: types.SET_LOADING, payload: {loading: loading}});
+  dispatch({
+    type: types.SET_LOADING,
+    payload: { loading: loading },
+  });
 };
 
 export const fetchUser = () => async dispatch => {
   const res = await axios.get('/api/auth/current_user');
-  dispatch({type: types.FETCH_USER, payload: res.data});
+  dispatch({ type: types.FETCH_USER, payload: res.data });
+};
+
+export const signUpUser = params => async dispatch => {
+  const res = await axios({
+    method: 'post',
+    url: '/api/auth/sign-up',
+    data: params,
+  });
+  console.log('signupres', res);
+  dispatch({ type: types.SIGN_UP_USER, payload: res.data });
 };
 
 export const fetchUsers = () => async dispatch => {
@@ -28,35 +42,35 @@ export const fetchUsers = () => async dispatch => {
 
 export const fetchPin = () => async dispatch => {
   const res = await axios.get('/api/plex/plex-pin');
-  dispatch({type: types.FETCH_PIN, payload: res.data});
+  dispatch({ type: types.FETCH_PIN, payload: res.data });
 };
 
 export const fetchMedia = () => async dispatch => {
-  dispatch({type: types.SET_LOADING, payload: true});
+  dispatch({ type: types.SET_LOADING, payload: true });
   const res = await axios.get('/api/plex/import/all');
   console.log('fetchMedia', res);
-  dispatch({type: types.SET_LOADING, payload: false});
-  dispatch({type: types.FETCH_MEDIA_RESPONSE, payload: res.data});
+  dispatch({ type: types.SET_LOADING, payload: false });
+  dispatch({ type: types.FETCH_MEDIA_RESPONSE, payload: res.data });
 };
 
 export const getMostWatched = params => async dispatch => {
-  dispatch({type: types.SET_LOADING, payload: true});
+  dispatch({ type: types.SET_LOADING, payload: true });
   const res = await axios.get('/api/recommend/most-watched');
   console.log('TCL: res', res);
 
-  dispatch({type: types.SET_LOADING, payload: false});
-  dispatch({type: types.GET_MOST_WATCHED, payload: res.data});
+  dispatch({ type: types.SET_LOADING, payload: false });
+  dispatch({ type: types.GET_MOST_WATCHED, payload: res.data });
 };
 
 export const addSeries = params => async dispatch => {
-  dispatch({type: types.SET_LOADING, payload: true});
-  dispatch({type: types.CURRENT_SHOW, payload: params.showName});
-  const res = await axios.get('/api/sonarr/series/add', {params});
-  dispatch({type: types.SET_LOADING, payload: false});
+  dispatch({ type: types.SET_LOADING, payload: true });
+  dispatch({ type: types.CURRENT_SHOW, payload: params.showName });
+  const res = await axios.get('/api/sonarr/series/add', { params });
+  dispatch({ type: types.SET_LOADING, payload: false });
   res.data.title
     ? toast('Successfully added: ' + res.data.title)
     : toast(res.data);
-  dispatch({type: types.ADD_SERIES, payload: res.data});
+  dispatch({ type: types.ADD_SERIES, payload: res.data });
 };
 
 const createPoller = (interval, initialDelay) => {
@@ -75,9 +89,14 @@ const createPoller = (interval, initialDelay) => {
   };
 };
 
-export const createPollingAction = (action, interval, initialDelay) => {
+export const createPollingAction = (
+  action,
+  interval,
+  initialDelay,
+) => {
   const poll = createPoller(action, initialDelay);
-  return () => (dispatch, getState) => poll(() => action(dispatch, getState));
+  return () => (dispatch, getState) =>
+    poll(() => action(dispatch, getState));
 };
 
 export const checkPlexPin = createPollingAction(dispatch => {
@@ -89,6 +108,6 @@ export const checkPlexPin = createPollingAction(dispatch => {
       }
     }
     console.log('action res', res);
-    dispatch({type: types.CHECK_PLEX_PIN, payload: res.data});
+    dispatch({ type: types.CHECK_PLEX_PIN, payload: res.data });
   });
 }, 15000);

client/src/components/auth/SignUp.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import axios from 'axios';
 import { Redirect } from 'react-router-dom';
+import * as actions from './../../actions';
 import PropTypes from 'prop-types';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { connect } from 'react-redux';
@@ -15,20 +16,16 @@ class SignUp extends React.Component {
     password: '',
   };
 
-  onFormSubmit = event => {
+  componentWilldMount() {
+    const res = this.props.fetchUser();
+    console.log('user', res);
+  }
+
+  onFormSubmit = async event => {
     event.preventDefault();
     console.log('signUpUserState', this.state);
-    this.signUpUser(this.state);
-  };
-
-  signUpUser = async params => {
-    console.log('params', params);
-    const res = await axios({
-      method: 'post',
-      url: '/api/auth/sign-up',
-      data: params,
-    });
-    console.log('signup response', res);
+    const res = await this.props.signUpUser(this.state);
+    console.log('res', this.props.auth);
   };
 
   render() {
@@ -125,4 +122,7 @@ function mapStateToProps({ auth }) {
   return { auth };
 }
 
-export default connect(mapStateToProps)(withStyles(styles)(SignUp));
+export default connect(
+  mapStateToProps,
+  actions,
+)(withStyles(styles)(SignUp));

client/src/reducers/authReducer.js

@@ -7,11 +7,14 @@ export const initialState = {
   users: '',
 };
 
-export default function (state = {}, action) {
-  console.log('action - payload', action.type);
+export default function(state = {}, action) {
+  console.log('action - type', action.type);
+  console.log('action - type', action.payload);
   switch (action.type) {
     case types.FETCH_USER:
       return action.payload || false;
+    case types.SIGN_UP_USER:
+      return action.payload || false;
     case types.FETCH_USERS:
       return { ...state, users: action.payload };
     case types.FETCH_PIN: