feat(attendants) Create Attendant

- added loader to CreateAttendant component
Easybuoy · Jan 28, 2019 · 7876f59 · 7876f59
1 parent a68f46a
commit 7876f59
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 16 deletions.
diff --git a/client/src/actions/attendantActions.js b/client/src/actions/attendantActions.js
@@ -1,9 +1,8 @@
 import axios from 'axios';
 
-import { GET_ERRORS, SET_ATTENDANT_CREATED, RESET_ATTENDANT_CREATED, SET_ERRORS, } from './types';
+import { GET_ERRORS, SET_ATTENDANT_CREATED, RESET_ATTENDANT_CREATED, SET_ERRORS, SET_LOADING } from './types';
 
 export const createAttendant = (userData) => dispatch => {
-    // dispatch(setProductsLoading())
     const formData = new FormData();
     formData.append('userImage', userData.userimage);
     formData.append('name', userData.name);
@@ -12,8 +11,9 @@ export const createAttendant = (userData) => dispatch => {
     formData.append('type', userData.type);
     axios.post('https://store--manager.herokuapp.com/api/v1/auth/signup', formData)
     .then(res => {
-        const { data } = res.data;
-        console.log(res.data.message);
+        dispatch({
+            type: SET_LOADING,
+        });
         dispatch({
             type: SET_ATTENDANT_CREATED,
             payload: res.data.message
@@ -24,7 +24,7 @@ export const createAttendant = (userData) => dispatch => {
         });
 
     })
-    .catch(err => { 
+    .catch(err => {
         dispatch({
             type: GET_ERRORS,
             payload: err.response.data.data || err.response.data.message

diff --git a/client/src/actions/productActions.js b/client/src/actions/productActions.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-import { GET_ERRORS, SET_PRODUCTS, SET_PRODUCTS_LOADING, CREATE_PRODUCT, SET_ERRORS, DELETE_PRODUCT } from './types';
+import { GET_ERRORS, SET_PRODUCTS, SET_LOADING, CREATE_PRODUCT, SET_ERRORS, DELETE_PRODUCT } from './types';
 
 export const getProducts = () => dispatch => {
     dispatch(setProductsLoading())
@@ -60,7 +60,7 @@ export const createProduct = (productData) => dispatch => {
 
 export const setProductsLoading = () => {
     return {
-        type: SET_PRODUCTS_LOADING,
+        type: SET_LOADING,
     }
 }
 

diff --git a/client/src/actions/types.js b/client/src/actions/types.js
@@ -4,7 +4,7 @@ export const SET_CURRENT_USER = 'SET_CURRENT_USER';
 export const GET_ERRORS = 'GET_ERRORS';
 export const SET_ERRORS = 'SET_ERRORS';
 export const SET_PRODUCTS = 'SET_PRODUCTS';
-export const SET_PRODUCTS_LOADING = 'SET_PRODUCTS_LOADING';
+export const SET_LOADING = 'SET_LOADING';
 export const CREATE_PRODUCT = 'CREATE_PRODUCT';
 export const DELETE_PRODUCT = 'DELETE_PRODUCT';
 export const SET_ATTENDANT_CREATED = 'SET_ATTENDANT_CREATED';

diff --git a/client/src/components/Attendant/CreateAttendant.js b/client/src/components/Attendant/CreateAttendant.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { toast } from 'react-toastify';
 
 import { createAttendant } from '../../actions/attendantActions';
+import Loading from '../Common/Loading';
 
 class CreateAttendant extends Component {
 constructor(){
@@ -37,15 +38,22 @@ onSubmit = (e) => {
     type
   };
 
-  console.log(this.props)
   this.props.createAttendant(userData);
 }
 
 
   render() {
     const { errors} = this.props;
-    const { isAttendantCreated } = this.props.attendants;
+    const { isAttendantCreated, loading } = this.props.attendants;
 
+    if (loading) {
+      return (
+          <div>
+          <Loading />
+          </div>
+      )
+  }
+    console.log(errors)
     if (Object.keys(errors).length > 0) {
       if (errors.email) {
         toast.error(errors.email);

diff --git a/client/src/reducers/attendantReducer.js b/client/src/reducers/attendantReducer.js
@@ -1,8 +1,9 @@
-import { SET_ATTENDANT_CREATED, RESET_ATTENDANT_CREATED, } from '../actions/types';
+import { SET_ATTENDANT_CREATED, RESET_ATTENDANT_CREATED, SET_LOADING, } from '../actions/types';
 
 const INITIAL_STATE = {
     isAttendantCreated: false,
-    attendants: []
+    attendants: [],
+    loading: false
 };
 
 export default (state = INITIAL_STATE, action) => {
@@ -11,12 +12,19 @@ export default (state = INITIAL_STATE, action) => {
             return { 
                 ...state,  
                 isAttendantCreated: action.payload,
-            } 
+                loading: false
+            }; 
         case RESET_ATTENDANT_CREATED :
             return { 
                 ...state,  
                 isAttendantCreated: false,
-            } 
+                loading: false
+            } ;
+            case SET_LOADING:
+            return {
+                ...state,
+                loading: true
+            };
         default:
             return state;
     }

diff --git a/client/src/reducers/productReducer.js b/client/src/reducers/productReducer.js
@@ -1,4 +1,4 @@
-import { SET_PRODUCTS, SET_PRODUCTS_LOADING, CREATE_PRODUCT, DELETE_PRODUCT } from '../actions/types';
+import { SET_PRODUCTS, SET_LOADING, CREATE_PRODUCT, DELETE_PRODUCT } from '../actions/types';
 
 const INITIAL_STATE = {
     loading: false,
@@ -17,7 +17,7 @@ export default (state = INITIAL_STATE, action) => {
                 isProductCreated: false,
                 productDeleted: false
             };
-        case SET_PRODUCTS_LOADING:
+        case SET_LOADING:
             return {
                 ...state,
                 loading: true