Create a form that submits a new category

[stephencweiss]

W,W,W

Users should be able to add a new budget category and see it on their budget overview

DoD

A user can specify the:

1. Hours to allocate
2. Name of the category

And add them to their time budget that they're currently viewing.

[stephencweiss]

Currently thinking of using a BudgetCategoryForm component for this. And started working on it when rending the page (issue #7 ).

[stephencweiss]

Currently mocking this effect by creating mock data

mockData () { return ( { category: String('Test').concat(_${Math.random()}), hoursAllocated: String(Math.random()*10), budgetId: this.state.budgetId, }) } And then using this in an AXIOS.post

addBudgetCategory (event) { console.log(Create a pop up form -- ask for category and hours allocated);

console.log(`Post a new Budget Line Item for our existing Budget`)
const instance = axios.create({ baseURL: 'http://localhost:8080' })
instance.post(`/newBudgetItem/${this.state.budgetId}`, this.mockData())
  .then( (response) => {
    console.log('The response data from the server is --> \n', response.data)
    this.fetchBudgetData(this.state.budgetId)
  })
  .catch( (error) => { console.log(`There was an error with the Axios POST --> `, error) })

} The result is that we have tested the endpoints, however, do not yet have the functionality to specify the category we want to add.

[stephencweiss]

Update instance.post(/newBudgetItem/${this.state.budgetId}, this.mockData()) to remove references to mockData

[stephencweiss]

Also, ideally - the BudgetCategoryForm is only rendered after a button add-budget-category is selected.

[stephencweiss]

The conditional render is now complete.

A contrived example of how this works is below.

However, in our case, because we had information coming in on Mount (i.e.componentDidMount()), we needed to put the entire conditional component in a separate component.

Before migrating the toggling into the budgetCategoryForm, we would get errors of Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. and warnings of Cannot update during an existing state transition (such as withinrender). Render methods should be a pure function of props and state.

The solution we found was nest the toggling.

import React from 'react';

import BudgetCategoryForm from './budgetCategoryForm.jsx';

class ContrivedApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.renderForm = this.renderForm.bind(this);
    this.renderToggle = this.renderToggle.bind(this);
  }

  renderToggle() {
    if (this.state.renderForm) { 
      this.setState({renderForm: false})
    } else {
      this.setState({renderForm: true})
    }
  }
  renderForm() {
    if (this.state.renderForm === true) {
      return (
          <div>
            <BudgetCategoryForm/>
            <button onClick= { this.renderToggle }>Submit </button>
          </div>
        )
    }
    else {
      return (
        <button onClick= { this.renderToggle }>Add a Category </button>
      )
    }
  }

  render() {
    return (
      <div>
        <h1>Welcome!</h1>
        <div id="category-form">
          {this.renderForm()}
        </div>
      </div>
    );
  }
}

export default ContrivedApp;