Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import { useState, useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import styled from "styled-components";
import {axios} from "../../../../../utils";
import Spinner from "../../../../../shared/loading-spinner/Spinner";
import AddLocationModal from "./add-location-modal/AddLocationModal";

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 Locations = (props) => {
  // props destructuring
  const { companyId, locations, addNotification } = props;

  // React hook form
  const {
    register,
    errors,
    handleSubmit,
    setValue,
    clearErrors,
    getValues,
    watch,
    setError,
  } = useForm();

  // states
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [modalLoading, setModalLoading] = useState(false);
  const [settedLocations, setSettedLocations] = useState(locations);
  // refs
  const locationPostUrl = useRef(
    `/my-company/${companyId}/profile/location/add`
  );
  const isAddressEmpty = useRef(true);
  const addressKeys = useRef([
    "address1",
    "address2",
    "country",
    "state",
    "city1",
    "city2",
    "postal_code",
    "latitude",
    "longitude",
  ]);

  useEffect(() => {
    addressKeys.current.map((addressKey) => {
      register(addressKey);
    });
    register("formatted_address", {
      required: "por favor seleccione una ubicación correcta",
    });
  }, []);

  const handleModalOpen = (event) => {
    event && event.preventDefault();
    Object.entries(getValues()).map(([key, value]) => {
      setValue(key, "");
    });
    setIsModalOpen(!isModalOpen);
  };

  const handleAddNewLocation = () => {
    locationPostUrl.current = `/my-company/${companyId}/profile/location/add`;
    handleModalOpen();
  };

  const handleDelete = async (delete_link) => {
    setLoading(true);
    await axios.post(delete_link).then((response) => {
      const resData = response.data;
      if (resData.success) {
        setSettedLocations(resData.data);
      } else {
        // alert error
      }
    });
    setLoading(false);
  };

  const handleEdit = async (linkEdit) => {
    handleModalOpen();
    locationPostUrl.current = linkEdit;
    setModalLoading(true);
     (linkEdit);
    await axios.get(linkEdit).then((response) => {
      const resData = response.data;
       (resData);
      if (resData.success) {
        Object.entries(resData.data).map(async ([key, value]) => {
          if (value && value !== "n") {
            setValue(key, value);
          }
        });
        isAddressEmpty.current = false;
      }
    });
    setModalLoading(false);
  };

  const getAddressHandler = (addresObject) => {
    addressKeys.current.map((addressKey) => {
      setValue(addressKey, "");
    });
    const { address_components } = addresObject;
    if (address_components) {
      address_components.map((address_component) => {
        const address_component_name = address_component.long_name;
        const address_component_type = address_component.types[0];
        switch (address_component_type) {
          case "route":
            setValue("address1", address_component_name);
            break;
          case "sublocality":
            setValue("address2", address_component_name);
            break;
          case "locality":
            setValue("city1", address_component_name);
            break;
          case "administrative_area_level_2":
            setValue("city2", address_component_name);
            break;
          case "administrative_area_level_1":
            setValue("state", address_component_name);
            break;
          case "country":
            setValue("country", address_component_name);
            break;
          case "postal_code":
            setValue("postal_code", address_component_name);
            break;
          case "geometry":
            setValue("latitude", address_component.latitude);
            setValue("longitude", address_component.longitude);
            break;
          default:
            break;
        }
      });
      isAddressEmpty.current = false;
      clearErrors("formatted_address");
    } else {
      isAddressEmpty.current = true;
    }
    setValue("formatted_address", addresObject.formatted_address);
  };

  const onSubmitHandler = async (data) => {
    setModalLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      if (value) {
        formData.append(key, value);
      }
    });
    await axios.post(locationPostUrl.current, formData).then((response) => {
      const resData = response.data;
       (resData);
      if (resData.success) {
        setSettedLocations(resData.data);
        handleModalOpen();
      } else {
        const resError = resData.data;
        if (resError.constructor.name === "Object") {
          Object.entries(resError).map(([key, value]) => {
            if (key in getValues()) {
              setError(key, {
                type: "manual",
                message: Array.isArray(value) ? value[0] : value,
              });
            }
          });
        } else {
          addNotification({
            style: "danger",
            msg: resError,
          });
        }
      }
    });
    setModalLoading(false);
  };

  return (
    <React.Fragment>
      <div
        className="user-profile-extended-ov st2"
        style={{ position: "relative" }}
      >
        <h3>
          Ubicaciones
          <a
            href="#"
            title=""
            className="btn-location-add"
            onClick={(e) => {
              e.preventDefault();
              handleAddNewLocation();
            }}
          >
            <i className="fa fa-plus-square"></i>
          </a>
        </h3>
        <span id="locations-records">
          {settedLocations.map(
            (
              { country, formatted_address, is_main, link_delete, link_edit },
              index
            ) => (
              <React.Fragment key={index}>
                {index >= 1 ? <hr /> : ""}
                <div>
                  {/* <?php echo $location['formatted_address']   ?><?php echo $location['is_main'] == 'y' ? ' (LABEL_MAIN_LOCATION) ' : ''?> */}
                  {`${formatted_address} ${
                    is_main === "y" ? "(Principal)" : ""
                  }`}
                  <div style={{ marginLeft: "5px", display: "inline" }}>
                    <a
                      href="#"
                      title=""
                      onClick={(e) => {
                        e.preventDefault();
                        handleEdit(link_edit);
                      }}
                      className="btn-location-edit"
                    >
                      <i className="fa fa-pencil"></i>
                    </a>
                    &nbsp;
                    <a
                      href="#"
                      title=""
                      onClick={(e) => {
                        e.preventDefault();
                        handleDelete(link_delete);
                      }}
                      className="btn-location-delete"
                    >
                      <i className="fa fa-trash"></i>
                    </a>
                  </div>
                </div>
              </React.Fragment>
            )
          )}
        </span>
        {loading && (
          <StyledSpinnerContainer>
            <Spinner />
          </StyledSpinnerContainer>
        )}
      </div>
      <AddLocationModal
        isModalOpen={isModalOpen}
        handleModalOpen={handleModalOpen}
        handleSubmit={handleSubmit}
        onSubmitHandler={onSubmitHandler}
        watch={watch}
        getAddressHandler={getAddressHandler}
        errors={errors}
        modalLoading={modalLoading}
        register={register}
      />
    </React.Fragment>
  );
};

export default Locations;