dropdown

import React, {Fragment, Component} from "react"
import Theatre from '../containers/Theatre'

class DropdownComponent extends Component {

    constructor(props) {
        super(props)
    }

    componentDidMount() {
        this.props.onHandleAllUsers()
    }

    render() {
        const props = this.props
        return (
            <div className="dropdown">
                <div>Pasirinkite miesta</div>
                <select
                value ={props.activeUserId}
                onChange={props.onHandleDropdown}
                >
                    {
                        props.users.map((item, index) =>
                        <option
                        value={item.id}
                        key={index}
                        >{item.name} {item.surname}</option>
                        )
                    }
                </select>
                {props.checkedCityId && <Theatre />}
                {props.checkedCityId && console.log(props.checkedCityId + " Miestas")}
            </div>
       )
  }
}

export default DropdownComponent


container:

import { connect } from "react-redux"
import Dropdown from "../components/DropdownComponent"
import { fetchUsers } from "../actions/userActions"
import { findUser } from "../actions/userActions"

const mapStateToProps = ({usersR}) => {
  return {
    isLoaded: usersR.isLoaded,
    users: usersR.users,
    activeUsersId: usersR.activeUsersId,
    checkedCityId: usersR.checkedCityId
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onHandleDropdown: (e) => {
        dispatch(findUser(e.target.value))
    },
    onHandleAllUsers: () => {
        dispatch(fetchUsers())
    }
  }
}

const UsersDropdown = connect(mapStateToProps, mapDispatchToProps)(Dropdown)
export default UsersDropdown





actions:

import {
    SUCCESS_USERS_RESULT,
    REQUEST_USERS,
    FAILURE_RESULT
} from "../constants"
import fetch from "isomorphic-fetch"

export function fetchUsers() {
    return dispatch => {
        dispatch(responseUsers());
    };
}

export function findUser(id) {
    return dispatch => {
      dispatch(responseUser(id));
    };
  }


function requestUsers(checkedCityId) {
    return {
        type: REQUEST_USERS,
        checkedCityId
    }
}

function successUsersResult(users) {
    return {
        type: SUCCESS_USERS_RESULT,
        users
    }
}

function failureResult(error) {
    return {
        type: FAILURE_RESULT,
        error
    }
}

function responseUser(id) {
    return dispatch => {
      dispatch(requestUsers(id))
      return fetch(`http://localhost:3000/api/users?id=${id}`, {
        headers: {
          "X-Requested-With": "XMLHttpRequest"
        },
        method: "get"
      })
      .then(res => {
        return res.json()
      })
      .then(users => {
        dispatch(successUsersResult(users));
      })
      .catch(error => {
        dispatch(failureResult(error));
      })
    }
  }

function responseUsers() {
    return dispatch => {
        dispatch(requestUsers())
        return fetch("http://localhost:3000/api/users", {
            headers: {
                "X-Requested-With": "XMLHttpRequest"
            },
            method: "get"
        })
        .then(res => {
            return res.json()
        })
        .then(users => {
            dispatch(successUsersResult(users));
        })
        .catch(error => {
            dispatch(failureResult(error));
        })
    }
}