import React, { PureComponent } from 'react';

class CreateTicket extends PureComponent {
  render() {
    emptyTicketState = {
      budget: '',
      description: '',
      expanded: false,
      hasCompletedTicket: false,
      initialDescription: '',
      newTicketId: '',
      phases: [],
      phaseValue: '',
      projects: [],
      projectValue: '',
      selectedPhase: {},
      selectedProject: {},
      summary: '',
      ticketType: 'project',
    }

    state = {
      ...this.emptyTicketState
    }

    componentDidMount = () => {
      this.getProjects();
    }

	  componentDidUpdate = (prevProps) => {
      if (prevProps.projects !== this.props.projects) {
        this.getProjects();      
      }

      if (prevProps.selectedProject !== this.props.selectedProject) {
        const { selectedProject } = this.props;
        if (selectedProject['project.name']) {
          this.getPhases(this.state.projects.filter(project => (
            project.name === selectedProject['project.name'] &&
            project.company.name === selectedProject['project.company']
          )));

          this.setState({
            selectedProject: this.state.projects.filter(project => (
              project.name === `${selectedProject['company.name']} — ${selectedProject['project.name']}`)
            )
          });
        }
      }
    }

    getPhases = () => {
      let phases = [];
      const { selectedProject } = this.props;

      this.props.tickets.map(ticket => {
        if (selectedProject['project.name'] === ticket.project.name && selectedProject['company.name'] === ticket.company.name) {
          phases.push({
            path: ticket.phase.path,
            phaseId: ticket.phase.id,
            ticketId: ticket.id
          });
        }
      });

      this.setState({
        phases
      });
    }

    getProjects = () => {
      let projects = [];

      this.props.projects.map(project => {
        projects.push({
          name: `${project.company.name} — ${project.project.name}`,
          id: project.project.id,
          companyId: project.company.id
        });
      });

      this.setState({
        projects
      });
    }

    return (
      <div>

      </div>
    )
  }
}

export default CreateTicket;

@@ -2177,24 +2177,1368 @@
  %7D);%0A    %7D%0A%0A
+    createNewTicket = () =%3E %7B%0A      const projectTicketDetails = (%7B%0A        summary: this.state.summary,%0A        recordType: 'ProjectTicket',%0A        company: %7B id: this.state.selectedProject%5B0%5D.companyId %7D,%0A        project: %7B id: this.state.selectedProject%5B0%5D.id %7D,%0A        phase: %7B id: this.state.selectedPhase%5B0%5D.phaseId %7D,%0A        budgetHours: this.state.budget,%0A        initialDescription: this.state.initialDescription,%0A      %7D)%0A%0A      // @todo allow service ticket creation%0A      const serviceTicketDetails = (%7B%0A        summary: this.state.summary,%0A        recordType: 'ServiceTicket',%0A        company: %7B id: this.state.selectedProject%5B0%5D.companyId %7D,%0A        agreement: '', // where is this?%0A        budgetHours: this.state.budget,%0A        initialDescription: this.state.initialDescription,%0A      %7D)%0A%0A      if (this.state.ticketType === 'project') %7B%0A        createTicket(projectTicketDetails).then(res =%3E %7B%0A          this.setState(%7B%0A            newTicketId: res.result.id%0A          %7D)%0A        %7D)%0A      %7D%0A%0A      if (this.state.ticketType === 'service') %7B%0A        createTicket(serviceTicketDetails);%0A      %7D%0A    %7D;%0A%0A    expandAddTicketForm = () =%3E %7B%0A      this.setState(%7B%0A        expanded: !this.state.expanded%0A      %7D)%0A    %7D%0A%0A    selectTicketType = event =%3E %7B%0A      this.setState(%7B%0A        ticketType: event.target.value%0A      %7D)%0A    %7D%0A%0A
     return (

Add ability to create service or projects tickets