Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';

import { useFetch } from '@hooks';
import { axios } from '@utils';
import { Spinner } from '@shared/components';
import GroupActions from '@groups/components/sections-cards/group-actions/GroupActions';
import Overview from '@components/overview/Overview';
import Type from '@groups/components/sections-cards/type/Type';
import Industry from '@groups/components/sections-cards/industry/Industry';
import Accessibility from '@groups/components/sections-cards/accessibility/Accessibility';
import Website from '@groups/components/sections-cards/website/Website';
import Privacy from '@groups/components/sections-cards/privacy/Privacy';

const GroupEditPage = () => {
  const { uuid } = useParams();
  const { data, isLoading, mutate, refetch } = useFetch(`/group/my-groups/edit/${uuid}`);

  const updateData = (key, value) => {
    mutate({ ...data, [key]: value });
  };

  const updateAccessibility = async () => {
    const url = `/group/my-groups/accessibility/${uuid}`;
    const accessibilityData = new FormData();
    accessibilityData.append('accessibility', 'aa');

    const response = await axios.post(url, accessibilityData);

    const { data, success } = response.data;
    if (success) return data;
  };

  useEffect(() => {
    if (data.privacy === 'Privado' && data.accessibility !== 'aa') {
      updateAccessibility().then((accessibility) => updateData('accessibility', accessibility));
    }
  }, [data.privacy]);

  if (isLoading) {
    return <Spinner />;
  }

  return (
    <>
      <GroupActions {...data} refetch={refetch} edit />

      <Overview
        id={uuid}
        overview={data?.overview}
        onEdit={(newOverview) => updateData('overview', newOverview)}
        edit
      />

      <Type
        groupId={uuid}
        type={data?.group_type}
        types={data?.types}
        onEdit={(newType) => updateData('type', newType)}
        edit
      />

      <Industry
        groupId={uuid}
        industry={data?.industry}
        industries={data?.industries}
        onEdit={(newIndustry) => updateData('industry', newIndustry)}
        edit
      />

      <Privacy
        groupId={uuid}
        privacy={data?.privacy}
        privacies={data?.privacies}
        onEdit={(newPrivacy) => updateData('privacy', newPrivacy)}
        edit
      />

      <Accessibility
        groupId={uuid}
        accessibility={data?.accessibility}
        accessibilities={data?.accessibilities}
        privacy={data?.privacy}
        onEdit={(newAccessibility) => updateData('accessibility', newAccessibility)}
        edit
      />

      <Website
        groupId={uuid}
        website={data?.website}
        onEdit={(newWebsite) => updateData('website', newWebsite)}
        edit
      />
    </>
  );
};

export default GroupEditPage;