Proyectos de Subversion LeadersLinked - SPA

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

import { axios } from '@utils'
import { useFetch } from '@hooks'

import Row from '@components/common/Row'
import Accessibility from '@components/group/accessibility/Accessibility'
import GroupActions from '@components/group/group-actions/GroupActions'
import Industry from '@components/group/industry/Industry'
import Privacy from '@components/group/privacy/Privacy'
import Type from '@components/group/type/Type'
import Website from '@components/group/website/Website'
import Overview from '@components/overview/Overview'
import Spinner from '@components/UI/Spinner'

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 (
    <Row direction='column'>
      <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
      />
    </Row>
  )
}

export default GroupEditPage