Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useEffect } from 'react'
import { axios, camalize } from '../../utils'
import { useParams } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { getBackendVars } from '../../services/backendVars'
import { addNotification } from '../../redux/notification/notification.actions'

import Overview from '../../components/overview/Overview'
import GroupActions from '../../components/group/GroupActions'

import Type from '../../components/group/type/Type'
import Website from '../../components/group/website/Website'
import Privacy from '../../components/group/privacy/Privacy'
import Industry from '../../components/group/industry/Industry'
import Accessibility from '../../components/group/accessibility/Accessibility'

import './styles/linkedin.scss'
import '../../styles/profile/profile.scss'

const Edit = () => {
  const [backendVars, setBackendVars] = useState({})
  const { uuid } = useParams()
  const dispatch = useDispatch()

  const changePrivacy = (privacy) => {
    setBackendVars((prevBackendVars) => {
      return {
        ...prevBackendVars,
        privacy,
      }
    })
  }

  const changeAccessibility = (accessibility) => {
    setBackendVars((prevBackendVars) => {
      return {
        ...prevBackendVars,
        accessibility,
      }
    })
  }

  useEffect(() => {
    getBackendVars(`/group/my-groups/edit/${uuid}`)
      .then((vars) => {
        const actions = {}

        Object.entries(vars).forEach(([key, value]) => {
          const camelCaseKey = camalize(key)
          actions[camelCaseKey] = value
        })

        setBackendVars(actions)
        console.log(actions)
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err }))
        console.log(`Error: ${err}`)
        throw new Error(err)
      })
  }, [])

  useEffect(() => {
    if (backendVars.privacy === 'Privado') {
      const accessibilityData = new FormData()
      accessibilityData.append('accessibility', 'aa')

      axios
        .post(`/group/my-groups/accessibility/${uuid}`, accessibilityData)
        .then((response) => {
          const { data, success } = response.data
          if (success) changeAccessibility(data)
        })
    }
  }, [backendVars?.privacy])

  return (
    <main className="w-100">
      <div className="container">
        <div className="main d-flex flex-column" style={{ gap: '1rem' }}>
          <GroupActions
            {...backendVars}
            coverSize={backendVars?.imageSizeCover}
            imageSize={backendVars?.imageSizeProfile}
          />
          <Overview id={uuid} overview={backendVars?.overview} isEdit />
          <Type
            groupId={uuid}
            type={backendVars?.groupType}
            types={backendVars?.types}
          />
          <Industry
            groupId={uuid}
            industry={backendVars?.industry}
            industries={backendVars?.industries}
          />
          <Privacy
            groupId={uuid}
            privacy={backendVars?.privacy}
            privacies={backendVars?.privacies}
            onChange={changePrivacy}
          />
          <Accessibility
            groupId={uuid}
            accessibilities={backendVars?.accessibilities}
            accessibility={backendVars?.accessibility}
            privacy={backendVars?.privacy}
            onChange={changeAccessibility}
          />
          <Website groupId={uuid} website={backendVars?.website} />
        </div>
      </div>
    </main>
  )
}

export default Edit