Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';

import { connect } from 'react-redux';

import { useForm } from 'react-hook-form';

import { styled } from '@mui/material';

import { axios } from '@utils';

import { addNotification } from '@app/redux/notification/notification.actions';

import Spinner from '@components/UI/Spinner';

import UbicationInput from '@components/UI/inputs/UbicationInput';

import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';

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 Location = ({ addNotification }) => {

  const [loading, setLoading] = useState(false);

  const {

    register,

    handleSubmit,

    setValue,

    clearErrors,

    watch,

    setError,

    formState: { errors }

  } = useForm();

  const getLocations = () => {

    axios

      .get('account-settings/location')

      .then((response) => {

        const { data, success } = response.data;

        if (!success) {

          throw new Error('Error interno. Por favor, intente mas tarde');

        }

        Object.entries(data).forEach(([key, value]) => {

          setValue(key, value);

        });

      })

      .catch((err) => {

        addNotification({ style: 'danger', msg: err.message });

      });

  };

  const getAddress = (address) => {

    Object.entries(address).forEach(([key, value]) => {

      if (value) {

        register(key);

        clearErrors(key);

        setValue(key, value);

      }

    });

  };

  const onSubmit = async (data) => {

    setLoading(true);

    const formData = new FormData();

    Object.entries(data).forEach(([key, value]) => formData.append(key, value));

    axios.post('/account-settings/location', formData).then((response) => {

      const { data, success } = response.data;

      if (success) {

        addNotification({

          style: 'success',

          msg: data.message

        });

      } else {

        if (typeof data === 'object') {

          Object.entries(data).forEach(([key, value]) => {

            setError(key, { type: 'manual', message: value[0] });

          });

        } else {

          const errorMessage =

            typeof data === 'string' ? data : 'Ha ocurrido un error, Por favor intente mas tarde';

          addNotification({

            style: 'danger',

            msg: errorMessage

          });

        }

      }

    });

    setLoading(false);

  };

  useEffect(() => {

    getLocations();

    register('formatted_address', {

      required: 'por favor seleccione una ubicación correcta'

    });

  }, []);

  return (

    <div className='settings-container'>

      <h2>Cambiar Ubicación</h2>

      <div className='acc-setting_content'>

        <form onSubmit={handleSubmit(onSubmit)}>

          <div className='d-flex flex-wrap' style={{ gap: '1rem' }}>

            <div className='cp-field cp-field2'>

              <label htmlFor='first_name'>Ubicación</label>

              <div className='cpp-fiel'>

                <UbicationInput

                  onGetAddress={getAddress}

                  settedQuery={watch('formatted_address')}

                />

                <i className='fa fa-map-marker'></i>

              </div>

              {<FormErrorFeedback>{errors?.formatted_address?.message}</FormErrorFeedback>}

            </div>

            <div className='col-2 mx-auto d-flex align-items-center justify-content-center'>

              <button type='submit' className='btn btn-secondary mt-3'>

                Guardar

              </button>

            </div>

          </div>

        </form>

      </div>

      {loading && (

        <StyledSpinnerContainer>

          <Spinner />

        </StyledSpinnerContainer>

      )}

    </div>

  );

};

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification)

};

export default connect(null, mapDispatchToProps)(Location);