Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import { useState } from "react";
import { Button, Modal } from "react-bootstrap";
import { useForm } from "react-hook-form";
import styled from "styled-components";
import FormErrorFeedback from "../../../../../../shared/form-error-feedback/FormErrorFeedback";
import Spinner from "../../../../../../shared/loading-spinner/Spinner";
import UbicationInput from "../../../../../../shared/ubication-input/UbicationInput";

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;

const StyledSwitch = styled.label`
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  input:checked + .slider {
    background-color: #2196f3;
  }
  input:focus + .slider {
    box-shadow: 0 0 1px #2196f3;
  }
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
`;

const AddLocationModal = (props) => {
  // props destructuring
  const {
    isModalOpen,
    handleModalOpen,
    handleSubmit,
    watch,
    getAddressHandler,
    errors,
    modalLoading,
    onSubmitHandler,
    register,
  } = props;

  // states
  const [locationType, setLocationType] = useState("");

  return (
    <Modal
      show={isModalOpen}
      onHide={handleModalOpen}
      style={{ overflowY: "scroll" }}
    >
      <Modal.Header closeButton>
        <Modal.Title>Ubicación</Modal.Title>
      </Modal.Header>
      <form onSubmit={handleSubmit(onSubmitHandler)}>
        <Modal.Body>
          <div className="form-group datefm">
            <UbicationInput
              onGetAddress={getAddressHandler}
              settedQuery={watch("formatted_address")}
            />
            <i className="fa fa-map-marker"></i>
            {errors.formatted_address && (
              <FormErrorFeedback>
                {errors.formatted_address.message}
              </FormErrorFeedback>
            )}
          </div>
          <label htmlFor="is_main"> Principal </label>
          <div className="form-group datefm">
            <StyledSwitch className="switch">
              <input
                type="checkbox"
                name="is_main"
                id="is_main"
                value="y"
                ref={register}
              />
              <span className="slider round"></span>
            </StyledSwitch>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button type="submit">Enviar</Button>
          <Button variant="danger" onClick={handleModalOpen}>
            Cancel
          </Button>
        </Modal.Footer>
      </form>
      {modalLoading && (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      )}
    </Modal>
  );
};

export default AddLocationModal;