#328: added an independent component for adding fundings"

src/components/Project/Community/Funding.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { getFundingAgencies, getFundingDirectorates } from "../../../services/projectService";
+import { toast } from "react-toastify";
+
+class Funding extends React.Component {
+  state = {
+    funding_agency_options: [],
+    funding_directorate_options: [],
+    project_funding: [],
+    funding_agency: "",
+    funding_directorate: "",
+    award_number: "",
+    award_amount: ""
+  }
+
+  async componentDidMount() {
+    try {
+      const { data: res1 } = await getFundingAgencies();
+      const { data: res2 } = await getFundingDirectorates();
+      this.setState({
+        funding_agency_options: res1.results,
+        funding_directorate_options: res2.results
+      })
+    } catch (err) {
+      toast.error("Failed to load funding agency and directorate options. Please reload this page.");
+    }
+  }
+
+  handleAgencyChange = (e) => {
+    this.setState({ funding_agency: e.target.value });
+  }
+
+  handleDirectorateChange = (e) => {
+    this.setState({ funding_directorate: e.target.value });
+  }
+
+  handleAwardNumberChange = (e) => {
+    this.setState({ award_number: e.target.value });
+  }
+
+  handleAwardAmountChange = (e) => {
+    this.setState({ award_amount: e.target.value });
+  }
+
+  handleFundingAdd = () => {
+    const fundings = this.state.project_funding;
+    const { funding_agency, funding_directorate, award_number, award_amount } = this.state;
+    fundings.push({ funding_agency, funding_directorate, award_number, award_amount});
+    console.log("handle funding add: " + fundings);
+    this.setState({
+      project_funding: fundings,
+      funding_agency: "",
+      funding_directorate: "",
+      award_number: "",
+      award_amount: ""
+    })
+  }
+
+  render() {
+    const { funding_agency, funding_directorate, award_number, 
+      award_amount, funding_agency_options, funding_directorate_options } = this.state;
+    return (
+      <div className="form-row">
+      <div className="form-group slice-builder-form-group col-md-3">
+        <label htmlFor="inputFundingAgency" className="slice-builder-label">
+          Funding Agency
+        </label>
+        <select
+          className="form-control form-control-sm"
+          id="fundingAgencySelect"
+          value={funding_agency}
+          onChange={this.handleAgencyChange}
+        >
+          <option value="">Choose...</option>
+          { 
+            funding_agency_options.map((agency, index) => 
+              <option value={agency} key={`funding-agency-${index}`}>{agency}</option>
+            )
+          }
+        </select>
+      </div>
+      <div className="form-group slice-builder-form-group col-md-3">
+        <label htmlFor="inputComponent" className="slice-builder-label">NSF Directorate</label>
+        <select
+          className="form-control form-control-sm"
+          id="directorateSelect"
+          value={funding_directorate}
+          onChange={this.handleDirectorateChange}
+        >
+          <option value="">Choose...</option>
+          { 
+            funding_directorate_options.map((directorate, index) => 
+              <option value={directorate} key={`funding-directorate-${index}`}>{directorate}</option>
+            )
+          }
+        </select>
+      </div>
+      <div className="form-group slice-builder-form-group col-md-3">
+        <label htmlFor="inputAwardNumber" className="slice-builder-label">Award Number</label>
+        <input
+          type="text" className="form-control form-control-sm" id="inputAwardNumber"
+          value={award_number}
+          onChange={this.handleAwardNumberChange}
+        />
+      </div>
+      <div className="form-group slice-builder-form-group col-md-3">
+        <label htmlFor="inputAwardAmount" className="slice-builder-label">Amount</label>
+        <input
+          type="text" className="form-control form-control-sm" id="inputAwardAmount"
+          value={award_amount}
+          onChange={this.handleAwardAmountChange}
+        />
+      </div>
+      <div className="form-group slice-builder-form-group col-md-1">
+        <button
+          className="btn btn-sm btn-outline-success mt-4"
+          type="button"
+          onClick={this.handleFundingAdd}
+        >
+          <i className="fa fa-plus"></i>
+        </button>
+      </div>
+    </div>
+    )
+  }
+}
+
+export default Funding;

src/components/Project/NewProjectForm.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import Joi from "joi-browser";
 import withRouter from "../common/withRouter.jsx";
 import Form from "../common/Form/Form";
+import Funding from "./Community/Funding.jsx";
 import { toast } from "react-toastify";
 import { Link } from "react-router-dom";
 import { getPeople } from "../../services/peopleService";
@@ -202,6 +203,10 @@ class NewProjectForm extends Form {
           {this.renderSelect("is_public", "Public", true, "Yes", publicOptions, portalData.helperText.publicProjectDescription)}
           {this.renderButton("Create")}
         </form>
+        <h2>
+          Funding Information
+        </h2>
+        <Funding />
         <div className="mt-4">
           <ul className="nav nav-tabs mb-4">
             <li className="nav-item" onClick={() => this.handleToggleTab(0)}>

src/services/projectService.js

@@ -95,9 +95,9 @@ export function updateProjectExpirationTime(projectId, time) {
 }
 
 export function getFundingAgencies() {
-  return http.get(`${apiEndpoint}/projects/funding-agencies`);
+  return http.get(`${apiEndpoint}/funding-agencies`);
 }
 
 export function getFundingDirectorates() {
-  return http.get(`${apiEndpoint}/projects/funding-directorates`);
+  return http.get(`${apiEndpoint}/funding-directorates`);
 }