actions.js

const addUserSuccess = data => ({
  type: 'ADD_USER',
  userData: data
});

export const addUser = (payload) => {
  return (dispatch) => {
    const data = payload;
    const options = {
      credentials: 'include',
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json ' }
    };
    const f = fetch('/api/dashboard', options);
    f.then((res) => {
      return res.json();
    }).then((DataObj) => {
      dispatch(addUserSuccess(DataObj));
    }).catch(err => console.log(err));
  };
};

const editUserSuccess = data => ({
  type: 'ADD_USER',
  userObj: data
});

export const editUser = (payload) => {
  return (dispatch) => {
    const data = { user: payload };
    const options = {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json ' }
    };
    const f = fetch('/api/users', options);
    f.then((res) => {
      return res.json();
    }).then((DataObj) => {
      return dispatch(editUserSuccess(DataObj));
    }).catch(err => console.log(err));
  };
};

EventDashboardPage.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Header from './Header';
import UserAvatar from './UserAvatar';
import EventsSection from './UserEvents';
import { addUser } from '../actions/userActions';

class EventDashboardPage extends Component {
  componentDidMount = () => {
    this.props.dispatch(addUser());
    // this.setState({ imageSrc: res.url });
  }

  render() {
    console.log(this.props, 'thisprops in render');
    return (
      <React.Fragment>
        <Header/>
        <main className='main'>
          <div className='row'>
            <div className='container'>
              <UserAvatar userData={this.props.userData} />
              <EventsSection />
            </div>
          </div>
        </main>
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state) => {
  console.log(state, 'mapstatetoprops');
  return {
    events: state.events,
    userData: state.userData
  };
};

export default connect(mapStateToProps)(EventDashboardPage);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppRouter from './routers/AppRouter';
import configureStore from './store/configureStore';
import 'normalize.css/normalize.css';
import './styles/main.scss';

const store = configureStore();

const App = (
  <Provider store={store}>
    <AppRouter />
  </Provider>
);


ReactDOM.render(App, document.getElementById('root'));

routers.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import EventDashboardPage from '../components/EventDashboardPage';
import EventLoginPage from '../components/EventLoginPage';
import NotFoundPage from '../components/NotFoundPage';
import EventPage from '../components/EventPage';

const AppRouter = () => (
  <BrowserRouter>
    <React.Fragment>
      <Switch>
        <Route path="/" component={EventLoginPage} exact />
        <Route path="/dashboard" component={EventDashboardPage} />
        <Route path="/eventpage" component={EventPage} exact/>
        <Route component={NotFoundPage} />
      </Switch>
    </React.Fragment>
  </BrowserRouter>
);

export default AppRouter;

store.js

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import EventReducer from '../reducers/EventReducer';
import UserReducer from '../reducers/UserReducer';

export default () => {
  const store = createStore(combineReducers({
    events: EventReducer,
    userData: UserReducer
  }), composeWithDevTools(applyMiddleware(thunk)));
  console.log(store.getState(), 'store');
  return store;
};

UserAvatar.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import UploadModal from './UploadModal';
import { PhotoIcon } from './SvgIcons';

const defaultPhoto = require('../../dist/images/no-avatar.png');

class UserAvatar extends Component {
  state = {
    change: false,
    selectedFile: null,
    imageSrc: '',
    show: undefined
  }

  handleNameChange = () => {
    this.setState(prevState => ({ change: !prevState.change }));
  }

  handleAddPhoneNumber = () => {

  }

  handleToggleModal = () => {
    this.setState(prevState => ({ show: !prevState.show }));
  }

  handleFileChange = (event) => {
    const imageSrc = URL.createObjectURL(event.target.files[0]);
    this.setState({
      selectedFile: event.target.files[0],
      imageSrc
    });
  }

  handleFileUpload = () => {
    fetch('/api/todos', {
      method: 'POST',
      body: JSON.stringify(this.state.selectedFile),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(res => res.json())
      .catch(error => console.error('Error:', error))
      .then((res) => {
        this.setState({ imageSrc: res.url });
      });
  }

  render() {
    console.log(this.props, 'userAvatar');
    return (
      <React.Fragment>
        <div className="user-avatar">
          <div className="user-avatar__logo-box">
            {
              this.state.url
                ? <NavLink className="user-avatar__link" to="/"><img className="user-avatar__logo" src={this.state.url} alt="User Photo" width="200" height="300" /></NavLink>
                : <NavLink className="user-avatar__link" to="/"><img className="user-avatar__logo" src={defaultPhoto} alt="User Photo" width="200" height="300" /></NavLink>
            }
            <div className="user-avatar__add-photo" onClick={this.handleToggleModal}>
              <PhotoIcon className="photo__icon" role="icon" />
              <span>Upload or change photo</span>
            </div>
          </div>
          <UploadModal
            handleFileChange={this.handleFileChange}
            handleFileUpload={this.handleFileUpload}
            handleToggleModal={this.handleToggleModal}
            show={this.state.show}
            imageSrc={this.state.imageSrc}
          />
          <div className="user-avatar__info">
            <div className="user-avatar__name-box">
              {
                this.state.change
                  ? <form>
                    <input type="text" name="username" defaultValue={this.props.users.name} />
                    <input type="submit" value="SAVE" />
                  </form>
                  : <h2>{this.props.userData.user.name}</h2>
              }
            </div>
            <div className="user-avatar__phone-box">
              {
                this.props.userData.user.phone
                  ? <p>{this.props.userData.user.phone}</p>
                  : <button className="btn" onClick={this.handleAddPhoneNumber}>ADD PHONE NUMBER</button>
              }
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state) => {
  console.log(state, 'userAVatar state');
  return {
    userData: state.userData
  };
};

export default connect(mapStateToProps)(UserAvatar);

userReducer.js

export default (state = {}, action) => {
  switch (action.type) {
    case 'ADD_USER':
      return {
        ...action.userData
      };

    case 'ADD_NUMBER':
      return state;

    case 'EDIT_NUMBER':
      return state;

    default:
      return state;
  }
};