Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react';
import { useState } from 'react';
import styled from 'styled-components';
import { addNotification } from '../../../redux/notification/notification.actions';
import Spinner from '../../../shared/loading-spinner/Spinner';
import { axios } from '../../../utils';
import styles from './HomeSection.module.scss';

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;
`;

export default function SocialNetworks() {
    const [loading, setLoading] = useState(false);
    const handleOnRoom = async () => {
        try {
            setLoading(true)
            const response = await axios.post('/moodle');
            if(response.data.success) {
                let form = document.createElement('form');
                form.setAttribute('method', 'post');
                form.setAttribute('action', response.data.data.url);
                form.setAttribute('target', '_blank');
                Object.keys(response.data.data).forEach(key => {
                    if(key != 'url') {
                        const value = response.data.data[key];
                        let hiddenField = document.createElement('input');
                        hiddenField.setAttribute('type', 'hidden');
                        hiddenField.setAttribute('name', key);
                        hiddenField.setAttribute('value', value);
                        form.appendChild(hiddenField);
                    }
                })
                document.body.appendChild(form);
                form.submit();
            }
        } catch (error) {
            console.log('>>: error > ', error)
            addNotification({
                style: "danger",
                msg: "Ha ocurrido un error en la comunicacion con ON ROOM",
            });
        }finally{
            setLoading(false)
        }
    }
  return (
    <div className={styles.widget + ' border-gray'}>
        <div className={styles.widget__app}>
            <a href="#" onClick={() => handleOnRoom()}>
                <img
                    className={styles.widget__app__img}
                    src="/images/logo-onroom.png"
                    alt=""
                />
            </a>
            <a href="#" onClick={() => handleOnRoom()} className={styles.widget__app__title} title="">
                CESA ON ROOM
            </a>
        </div>
        <div className={styles.widget__app}>
            <div className="row">
                <div className="col-md col-sm-12 col-12">
                    <a
                        href='https://play.google.com/store/apps/details?id=com.cesams.twogetskills'
                        target="_blank"
                    >
                        <img
                            className={styles.widget__app__img}
                            src="/images/logo-2getskills-android.jpeg"
                            alt=""
                        />
                    </a>
                </div>
                <div className="col-md col-sm-12 col-12">
                    <a
                        href='https://apps.apple.com/us/app/2getskills/id1575789638'
                        target="_blank"
                    >
                        <img
                            className={styles.widget__app__img}
                            src="/images/logo-2getskillsa-apple.jpeg"
                            alt=""
                        />
                    </a>
                </div>
            </div>
            <a href="#" className={styles.widget__app__title} title="">
                Microaprendizaje
            </a>
        </div>
        {loading && (
          <StyledSpinnerContainer>
            <Spinner />
          </StyledSpinnerContainer>
        )}
    </div>
  )
}