TabPanelFavoritos.js

import React, {useContext, useState, useEffect} from 'react'
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import axios from 'axios'
import {apiUrl} from '../../env';
import {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
import LoadingSpinner from '../LoadingSpinner.js'

export default function TabPanelFavoritos (props) {
    const [loading, handleLoading] = useState(true)

    const [likedLearnObjs, setlikedLearnObjs] = useState([])
    const [likedLearnObjsLength, setlikedLearnObjsLength] = useState(0)

    const [likedCollections, setlikedCollections] = useState([])
    const [likedCollectionsLength, setlikedCollectionsLength] = useState(0)

    useEffect( () => {
        axios.all([
            axios.get((`${apiUrl}/users/` + props.id + '/learning_objects/liked'), props.config),
            axios.get((`${apiUrl}/users/` + props.id + '/collections/liked'), props.config),
        ])
        .then( (responseArr) => {
                handleLoading(false)
                console.log(responseArr)
                console.log(responseArr[0].data)
                console.log(responseArr[1].data)
            },
            (error) => {
                handleLoading(false)
                console.log('error while running axios all')
            }
        )
    }, [])

    return (
        <>
        {
            loading?
            (
                <LoadingSpinner text={'CARREGANDO...'}/>
            )
            :
            (
                [
                    <React.Fragment>
                        <ContainerDivStyled>
                            <Paper elevation={3}>
                                    <DivTitulo>
                                        <StyledP>Recursos Favoritados <b style={{fontWeight:"700", fontSize:"20px"}}>({likedLearnObjsLength})</b></StyledP>
                                        <StyledHR/>
                                    </DivTitulo>
                                    <div style={{height : "400px"}}>
                                        {
                                            likedLearnObjsLength == 0 ?
                                            (
                                                [
                                                    <>
                                                    <DivTextoNoPublications>
                                                    <DivConteudoNaoPublicado>
                                                    <NoPubSpan>Você ainda não curtiu nenhum Recurso.</NoPubSpan>
                                                    <p style={{fontFamily:"Roboto",fontSize:"16px"}}>Quando você favorita um recurso ele aparece nesta seção. Além disso, você
                                                    <br/>
                                                    aumenta o prestígio dele na Plataforma. Para favoritar, basta clicar no ícone de
                                                    <br/>
                                                    coração que aparece nos Recursos.
                                                    </p>
                                                    </DivConteudoNaoPublicado>
                                                    </DivTextoNoPublications>
                                                    </>
                                                ]
                                            )
                                            :
                                            (
                                                [
                                                    <>
                                                        <DivContainerRecursosPublicados>
                                                        </DivContainerRecursosPublicados>
                                                        <BtnAlinhaRecPvt>
                                                            <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
                                                            <ButtonMostrarMais>
                                                                <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
                                                            </ButtonMostrarMais>
                                                            <ButtonMostrarTodos>
                                                                <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
                                                            </ButtonMostrarTodos>
                                                        </BtnAlinhaRecPvt>
                                                    </>
                                                ]
                                            )
                                        }
                                    </div>
                            </Paper>
                        </ContainerDivStyled>

                        <ContainerDivStyled>
                            <Paper elevation={3}>
                                    <DivTitulo>
                                        <StyledP>Coleções Favoritadas <b style={{fontWeight:"700", fontSize:"20px"}}>({likedCollectionsLength})</b></StyledP>
                                        <StyledHR/>
                                    </DivTitulo>
                                    <div style={{height : "400px"}}>
                                        {
                                            likedCollectionsLength  == 0 ?
                                            (
                                                [
                                                    <>
                                                    <DivTextoNoPublications>
                                                    <DivConteudoNaoPublicado>
                                                    <NoPubSpan>Você ainda não curtiu nenhuma coleção.</NoPubSpan>
                                                    </DivConteudoNaoPublicado>
                                                    </DivTextoNoPublications>
                                                    </>
                                                ]
                                            )
                                            :
                                            (
                                                [
                                                    <>
                                                    <DivContainerRecursosPublicados>
                                                    </DivContainerRecursosPublicados>
                                                    <BtnAlinhaRecPvt>
                                                        <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 7</p>
                                                        <ButtonMostrarMaisColecao>
                                                            <span style={{color:"#fff", fontSize:"14px", fontWeight:"500"}}>MOSTRAR MAIS</span>
                                                        </ButtonMostrarMaisColecao>
                                                        <ButtonMostrarTodos>
                                                            <span style={{color:"#666", fontSize:"14px", fontWeight:"500"}}>MOSTRAR TODOS</span>
                                                        </ButtonMostrarTodos>
                                                    </BtnAlinhaRecPvt>
                                                    </>
                                                ]
                                            )
                                        }
                                    </div>
                            </Paper>
                        </ContainerDivStyled>
                    </React.Fragment>
                ]
            )
        }
        </>
    )
}

const ButtonMostrarMaisColecao = styled(Button)`
    background-color : #503096 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    height: 36px !important;
    border-radius: 3px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26) !important;
    outline : none !important;
    min-width : 88px !important;
    vertical-align : middle !important;
    margin : 6px 8px !important;
    text-decoration : none !important;
`