{"size": 3553, "ext": "js", "max_stars_repo_path": "src/pages/add-sector.js", "max_stars_repo_name": "opencrags/tick-rocks", "max_stars_repo_stars_event_min_datetime": "2021-07-20T09:11:32.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-05T08:36:50.000Z", "max_issues_repo_path": "src/pages/add-sector.js", "max_issues_repo_name": "opencrags/tick-rocks", "max_issues_repo_issues_event_min_datetime": "2021-08-05T15:56:18.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-28T20:14:23.000Z", "max_forks_repo_path": "src/pages/add-sector.js", "max_forks_repo_name": "opencrags/tick-rocks", "max_forks_repo_forks_event_min_datetime": "2022-03-05T08:32:49.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-05T08:32:49.000Z"}
{"max_stars_count": 2, "max_issues_count": 37, "max_forks_count": 1, "avg_line_length": 27.5426356589, "max_line_length": 77, "alphanum_fraction": 0.5944272446}
import {
  Container,
  Center,
  Heading,
  Text,
  Input,
  FormControl,
  FormLabel,
  Button,
  NumberInput,
  NumberInputField,
  HStack,
} from '@chakra-ui/react'
import Loader from '../components/loader.js'
import { useState } from 'react'
import { useHistory, useParams } from 'react-router-dom'
import { useAuthorizedFetcher } from '../utils/backend.js'
import { CragBreadcrumb } from '../components/breadcrumb.js'

export default function AddSector() {
  const { cragId } = useParams()
  const { authorizedFetcher, isLoading, error } = useAuthorizedFetcher()
  const history = useHistory()
  const [sectorName, setSectorName] = useState('')
  const [latitude, setLatitude] = useState(null)
  const [longitude, setLongitude] = useState(null)

  const addSector = () =>
    authorizedFetcher('/sectors', {
      method: 'POST',
      body: JSON.stringify({ crag_id: cragId }),
    })

  const voteSectorName = (sectorId) =>
    authorizedFetcher(`/sectors/${sectorId}/name_votes`, {
      method: 'POST',
      body: JSON.stringify({
        value: sectorName,
        public: true,
      }),
    })

  const voteSectorCoordinates = (sectorId) =>
    latitude &&
    longitude &&
    authorizedFetcher(`/sectors/${sectorId}/coordinate_votes`, {
      method: 'POST',
      body: JSON.stringify({
        value: {
          type: 'Point',
          coordinates: [parseFloat(longitude), parseFloat(latitude)],
        },
        public: true,
      }),
    })

  const navigateToAddedSector = (sectorId) =>
    history.replace(`/crags/${cragId}/sectors/${sectorId}`)

  const handleSubmit = () =>
    addSector().then((sector) =>
      Promise.all([
        voteSectorName(sector.id),
        voteSectorCoordinates(sector.id),
      ]).then((_) => navigateToAddedSector(sector.id))
    )

  if (error) {
    return (
      <Container maxWidth="container.md">
        <Center>
          <Text margin="20px">Failed to load auth token.</Text>
        </Center>
      </Container>
    )
  }

  if (!authorizedFetcher && !isLoading) {
    return (
      <Container maxWidth="container.md">
        <Center>
          <Text margin="20px">You need to login to add stuff and vote.</Text>
        </Center>
      </Container>
    )
  }

  if (!authorizedFetcher && isLoading) {
    return <Loader />
  }

  return (
    <Container maxWidth="container.md">
      <CragBreadcrumb cragId={cragId} extra={[{ text: 'Add sector' }]} />
      <Heading>Add sector</Heading>
      <FormControl id="sector-name" isRequired>
        <FormLabel margin="0px">Sector name</FormLabel>
        <Input
          variant="flushed"
          size="lg"
          placeholder="Sector name"
          onChange={(event) => setSectorName(event.target.value)}
        />
      </FormControl>
      <HStack>
        <FormControl id="longitude">
          <FormLabel margin="0px">Latitude</FormLabel>
          <NumberInput variant="flushed" precision={7}>
            <NumberInputField
              placeholder="13"
              onChange={(event) => setLatitude(event.target.value)}
            />
          </NumberInput>
        </FormControl>
        <FormControl id="longitude">
          <FormLabel margin="0px">Longitude</FormLabel>
          <NumberInput variant="flushed" precision={7}>
            <NumberInputField
              placeholder="37"
              onChange={(event) => setLongitude(event.target.value)}
            />
          </NumberInput>
        </FormControl>
      </HStack>
      <Button onClick={handleSubmit}>Submit</Button>
    </Container>
  )
}
