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'

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 groupId={uuid} overview={backendVars?.overview} />

          <Type

            groupId={uuid}

            type={backendVars?.groupType}

            types={backendVars?.groupTypes}

          />

          <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