{"size": 3202, "ext": "js", "max_stars_repo_path": "src/pages/rocket/AddRocket.js", "max_stars_repo_name": "Renfrew100/LaunchCount", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/rocket/AddRocket.js", "max_issues_repo_name": "Renfrew100/LaunchCount", "max_issues_repo_issues_event_min_datetime": "2021-12-28T08:41:38.000Z", "max_issues_repo_issues_event_max_datetime": "2022-01-29T01:16:25.000Z", "max_forks_repo_path": "src/pages/rocket/AddRocket.js", "max_forks_repo_name": "Renfrew100/LaunchCount", "max_forks_repo_forks_event_min_datetime": "2021-12-28T00:31:12.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-28T00:31:12.000Z"}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": 1, "avg_line_length": 29.9252336449, "max_line_length": 107, "alphanum_fraction": 0.6492816989}
import React from "react"
import {navigate} from "@reach/router"

import ControlGroup from "../../components/Form/ControlGroup"
import DropdownGroup from "../../components/Form/DropdownGroup"
import CustomForm from "../../components/Form/CustomForm"
import FormGroup from "../../components/Form/FormGroup"

import { useRocketReducer } from "../../components/Reducer/RocketReducer"
import { useHttpClient } from "../../hooks/http-hook"

const AddRocket = () => {
  const {
    rocketState,
    companyNameHandler,
    rocketNameHandler,
    successLaunchHandler,
    failedLaunchHandler,
    postponedLaunchHandler,
  } = useRocketReducer({
    rocketName: "",
    companyName: "SpaceX",
    successLaunch: 0,
    failedLaunch: 0,
    postponedLaunch: 0,
  })

  const { isLoading, sendRequest } = useHttpClient()

  const COMPANIES = ["SpaceX", "Blue Origin", "Nasa"]

  // create the list for the rocket stat dropdowns
  let ROCKET_STAT_NUMBERS = []
  for (let i = 0; i < 100; i++) {
    ROCKET_STAT_NUMBERS.push(i)
  }

  const submitHandler = e => {
    // When post request is sent to the create url, axios will add a new record(newperson) to the database.

    const newrocket = {
      rocketName: rocketState.rocketName,
      companyName: rocketState.companyName,
      successLaunch: rocketState.successLaunch,
      failedLaunch: rocketState.failedLaunch,
      postponedLaunch: rocketState.postponedLaunch,
    }

    
    sendRequest("http://localhost:5000/rocket/add", "POST", newrocket)
    navigate(`/CompanyPage/${newrocket.companyName}`)
  }

  return (
    <div className="container">
      <h2 className="display-3">Add Rocket</h2>
      <CustomForm submitHandler={submitHandler}>
        <ControlGroup
          labelText="Rocket Name"
          htmlFor="rocketName"
          placeholder="Rocket Name"
          changeHandler={rocketNameHandler}
        />

        <DropdownGroup
          labelText="Company"
          htmlFor="companyName"
          dropdownToggleText={rocketState.companyName}
          dropdownChoices={COMPANIES}
          setDropdownState={companyNameHandler}
        />

        <FormGroup className="rocket-stats">
          <DropdownGroup
            labelText="Successful launches"
            htmlFor="successLaunches"
            dropdownToggleText={rocketState.successLaunch}
            dropdownChoices={ROCKET_STAT_NUMBERS}
            setDropdownState={successLaunchHandler}
            dropdownVariant="success"
          />

          <DropdownGroup
            labelText="Failed launches"
            htmlFor="failedLaunches"
            dropdownToggleText={rocketState.failedLaunch}
            dropdownChoices={ROCKET_STAT_NUMBERS}
            setDropdownState={failedLaunchHandler}
            dropdownVariant="danger"
          />

          <DropdownGroup
            labelText="Postponed launches"
            htmlFor="postponedLaunches"
            dropdownToggleText={rocketState.postponedLaunch}
            dropdownChoices={ROCKET_STAT_NUMBERS}
            setDropdownState={postponedLaunchHandler}
            dropdownVariant="warning"
          />
        </FormGroup>
      </CustomForm>
    </div>
  )
}

export default AddRocket
