<file_sep>import React from 'react'
import { Link } from 'react-router-dom'

export default class Employee extends React.Component {

  render() {
    return (
      <Link
        className='bg-white ma3 box employee flex flex-column no-underline br2'
        to={`/employee/${this.props.employee.id}`}
      >
        <div
          className='image'
          style={{
            backgroundImage: `url(${this.props.employee.imageUrl})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            marginTop: '25px'
          }}
        />
        <div className='flex items-center black-80 fw3 name'>
          {this.props.employee.name} {this.props.employee.surname}
        </div>
      </Link>
    )
  }

}<file_sep>import React from 'react';

function Button (props) {
    return (
        <div className='saveButton' onClick={props.clickHandler}>{props.content}</div>
    );
}

export default Button;<file_sep>import React from 'react'
import { withRouter } from 'react-router-dom'
import { graphql} from 'react-apollo'
import Modal from 'react-modal'
import modalStyle from '../constants/modalStyle'
import gql from 'graphql-tag'

class CreatePage extends React.Component {

  state = {
    name: '',
    surname: '',
    position: '',
    dateOfBirth: '',
    imageUrl: '',
  }

  render() {
    return (
      <Modal
        isOpen
        contentLabel='Create Employee'
        style={modalStyle}
        onRequestClose={this.props.history.goBack}
      >
        <div className='pa4 flex justify-center bg-white'>
          <div style={{maxWidth: 400}} className=''>
            {this.state.imageUrl &&
              <img
                src={this.state.imageUrl}
                alt=''
                className='w-100 mv3'
              />}
            <input
              className='w-100 pa3 mv2'
              value={this.state.imageUrl}
              placeholder='Employee image url'
              onChange={e => this.setState({imageUrl: e.target.value})}
              autoFocus
            />
            <input
              className='w-100 pa3 mv2'
              value={this.state.name}
              placeholder='Employee name'
              onChange={e => this.setState({name: e.target.value})}
              autoFocus
            />
            <input
              className='w-100 pa3 mv2'
              value={this.state.surname}
              placeholder='Employee surname'
              onChange={e => this.setState({surname: e.target.value})}
            />
            <input
              className='w-100 pa3 mv2'
              value={this.state.position}
              placeholder='Employee position'
              onChange={e => this.setState({position: e.target.value})}
            />
            <input
              className='w-100 pa3 mv2'
              value={this.state.dateOfBirth}
              placeholder='Employee date of birth'
              type='date'
              onChange={e => this.setState({dateOfBirth: e.target.value})}
            />
            {this.state.surname &&
              this.state.name &&
              this.state.position &&
              this.state.dateOfBirth &&
              <button
                className='pa3 bg-black-10 bn dim ttu pointer'
                onClick={this.handleAddNew}
              >
                Add new Employee
              </button>}
          </div>
        </div>
      </Modal>
    )
  }

  handleAddNew = async () => {
    const {name, surname, position, dateOfBirth} = this.state;
    let {imageUrl} = this.state;
    if (!imageUrl) imageUrl = 'https://cdn1.iconfinder.com/data/icons/IconsLandVistaPeopleIconsDemo/256/Customer_Male_Light.png';
    await this.props.createEmployeeMutation({variables: {name, surname, position, dateOfBirth, imageUrl}})
    this.props.history.replace('/')
  }
  
}

const CREATE_EMPLOYEE_MUTATION = gql`
  mutation CreateEmployeeMutation($surname: String!, $name: String!, $position: String!, $dateOfBirth: String!, $imageUrl: String!) {
    createEmployee(name: $name, surname: $surname, position: $position, dateOfBirth: $dateOfBirth, imageUrl: $imageUrl) {
      id
      surname
      name
      position
      dateOfBirth
      imageUrl
    }
  }
`

const CreatePageWithMutation = graphql(CREATE_EMPLOYEE_MUTATION, {name: 'createEmployeeMutation'})(CreatePage)
export default withRouter(CreatePageWithMutation)
<file_sep>import React from 'react';
import { graphql, compose } from 'react-apollo';
import Modal from 'react-modal';
import modalStyle from '../constants/modalStyle';
import { withRouter } from 'react-router-dom';
import gql from 'graphql-tag';
import ContentEditable from "./ContentEditable";
import Button from './SaveButton';

const detailModalStyle = {
  overlay: modalStyle.overlay,
  content: {
    ...modalStyle.content,
    height: 761,
  },
}

class DetailPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Employee: {...this.props.employeeQuery.Employee},
      edited: false
    }
  }

  render() {
    if (this.props.employeeQuery.loading) {
      return (
        <div className='flex w-100 h-100 items-center justify-center pt7'>
          <div>
            Loading...
          </div>
        </div>
      )
    }

    const {Employee} = this.state;

    return (
      <Modal
        isOpen
        contentLabel='Create Employee'
        style={detailModalStyle}
        onRequestClose={this.props.history.goBack}
      >
        <div
          className='close right-0 top-0 pointer'
          onClick={this.props.history.goBack}
        >
          <img src={require('../assets/close.svg')} alt='' />
        </div>
        <div
          className='delete ttu white pointer fw6 absolute left-0 top-0 br2'
          onClick={this.handleDelete}
        >
          Delete
        </div>
        <div
          className='bg-white detail flex flex-column no-underline br2 h-100'
        >
          <div
            className='image'
            style={{
              backgroundImage: `url(${Employee.imageUrl})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              marginTop: '25px'
            }}
          />
          <ContentEditable onUpdate={(html) => this.handleNameUpdate(html)} className='items-center black-80 fw3 name' html={Employee.name} />
          <ContentEditable onUpdate={(html) => this.handleSurnameUpdate(html)} className='items-center black-80 fw3 surname' html={Employee.surname} />
          <ContentEditable onUpdate={(html) => this.handlePositionUpdate(html)} className='flex items-center black-80 fw3 position' html={Employee.position} />
          <ContentEditable onUpdate={(html) => this.handleDateOfBirthUpdate(html)} className='flex items-center black-80 fw3 dob' html={Employee.dateOfBirth} />
            
          {this.state.edited &&
            <Button clickHandler={this.onSave} content='SAVE'/>
          }
        </div>
      </Modal>
    )
  }

  onSave = async (e) => {
    if (this.state.edited) {
      e.target.innerHTML = 'SAVING...';
      await this.handleUpdate();
      e.target.innerHTML = 'SAVED!';
      setTimeout(function(){
        this.setState({
          edited: false
        });
      }, 1000);
    }
  }

  handleNameUpdate = (newName) => {
    this.setState({Employee: {
      ...this.state.Employee,
      name: newName,
      edited: true
    }}, () => {
      this.handleUpdate();
    });
  }
  handleSurnameUpdate = (newSurname) => {
    this.setState({Employee: {
      ...this.state.Employee,
      surname: newSurname,
      edited: true
    }}, () => {
      this.handleUpdate();
    });
  }
  handlePositionUpdate = (newPosition) => {
    this.setState({Employee: {
      ...this.state.Employee,
      position: newPosition,
      edited: true
    }}, () => {
      this.handleUpdate();
    });
  }
  handleDateOfBirthUpdate = (newDateOfBirth) => {
    this.setState({Employee: {
      ...this.state.Employee,
      dateOfBirth: newDateOfBirth,
      edited: true
    }}, () => {
      this.handleUpdate();
    });
  }

  handleUpdate = async () => {
    await this.props.updateEmployeeMutation({variables: this.state.Employee});
  }
  handleDelete = async () => {
    await this.props.deleteEmployeeMutation({variables: {id: this.props.employeeQuery.Employee.id}});
    this.props.history.replace('/');
  }

  
}

const DELETE_EMPLOYEE_MUTATION = gql`
  mutation DeleteEmployeeMutation($id: ID!) {
    deleteEmployee(id: $id) {
      id
    }
  }
`

const UPDATE_EMPLOYEE_MUTATION = gql`
  mutation UpdateEmployeeMutation($id: ID!, $surname: String!, $name: String!, $position: String!, $dateOfBirth: String!, $imageUrl: String!) {
    updateEmployee(id: $id, name: $name, surname: $surname, position: $position, dateOfBirth: $dateOfBirth, imageUrl: $imageUrl) {
      id
      surname
      name
      position
      dateOfBirth
      imageUrl
    }
  }
`

const EMPLOYEE_QUERY = gql`
  query employeeQuery($id: ID!) {
    Employee(id: $id) {
      id
      name
      surname
      dateOfBirth
      position
      imageUrl
    }
  }
`

const DetailPageWithGraphQL = compose(
  graphql(EMPLOYEE_QUERY, {
    name: 'employeeQuery',
    // see documentation on computing query variables from props in wrapper
    // http://dev.apollodata.com/react/queries.html#options-from-props
    options: ({match}) => ({
      variables: {
        id: match.params.id,
      },
    }),
  }),
  graphql(DELETE_EMPLOYEE_MUTATION, {
    name: 'deleteEmployeeMutation'
  }),
  graphql(UPDATE_EMPLOYEE_MUTATION, {
    name: 'updateEmployeeMutation'
  })
)(DetailPage)



const DetailPageWithDelete = graphql(DELETE_EMPLOYEE_MUTATION)(DetailPageWithGraphQL);

export default withRouter(DetailPageWithDelete);
