TabPanelColecoes.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 {ButtonMostrarTodos, ButtonMostrarMais, BtnAlinhaRecPvt, DivContainerRecursosPublicados, ContainerDivStyled, DivTitulo, StyledP, StyledHR} from './TabPanelMeusRecursos.js'
import {NoPubSpan, DivConteudoNaoPublicado, DivTextoNoPublications} from './TabPanelMeusRecursos.js'
import LoadingSpinner from '../LoadingSpinner.js'
import PaginaVaziaColecao from '../../img/Pagina_vazia_colecao.png'
import axios from 'axios'
import {apiUrl} from '../../env';
import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';

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

    const [userCollections, setuserCollections] = useState([])
    const [userCollectionsLength, setuserCollectionsLength] = useState(0)

    const [followedCollections, setFollowedCollections] = useState([])
    const [followedCollectionsLength, setfollowedCollectionsLength] = useState(0)

    useEffect( () => {
        axios.all([
            axios.get((`${apiUrl}/users/` + props.id + '/collections'), props.config),
            axios.get((`${apiUrl}/users/` + props.id + '/following/Collection'), 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 COLEÇÕES'}/>

            )
            :
            (
                [
                    <React.Fragment>
                        <ContainerDivStyled>
                            <Paper elevation={3}>
                                    <DivTitulo>
                                        <StyledP>Minhas Coleções <b style={{fontWeight:"700", fontSize:"20px"}}>({userCollectionsLength})</b></StyledP>
                                        <StyledHR/>
                                    </DivTitulo>
                                    <div style={{paddingRight:"15px", paddingLeft:"15px"}}>
                                        <CardDiv>
                                            <div style={{backgroundColor:"#673ab7", height:"250px", display:"flex", justifyContent:"center", alignItems:"center"}}>
                                                <CreateNewFolderIcon style={{color:"#fff", fontSize:"70px"}}/>
                                                <p style={{fontSize:"16px", margin:"0 0 10px"}}>
                                                    CRIAR COLEÇÃO
                                                </p>
                                            </div>
                                        </CardDiv>
                                    {
                                        userCollectionsLength == 0 ?
                                        (
                                            [
                                                <DivTextoNoPublications style={{width:"50%"}}>
                                                    <div style={{position:"relative", top:"50%", transform:"translateY(-50%)"}}>
                                                        <div>
                                                            <img src={PaginaVaziaColecao} alt="PaginaVaziaColecao"
                                                            style={{height:"150px",width:"150px", verticalAlign:"middle", border:"0"}}/>
                                                            <br/>
                                                            <span style={{fontFamily:"Roboto", fontWeight:"lighter", fontSize:"24px"}}>
                                                                Criamos a sua primeira Coleção!
                                                            </span>
                                                            <p style={{fontFamily:"Roboto", fontSize:"16px", margin:"0 0 10px"}}>
                                                                Adicione nela recursos que você queira acessar mais tarde.
                                                                <br/>
                                                                Crie novas coleções clicando no cartão roxo "Criar Colecão".
                                                            </p>
                                                        </div>
                                                    </div>
                                                </DivTextoNoPublications>
                                            ]
                                        )
                                        :
                                        (
                                            <>
                                            <DivContainerRecursosPublicados>
                                            </DivContainerRecursosPublicados>
                                            <BtnAlinhaRecPvt>
                                                <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 2 de 2</p>
                                            </BtnAlinhaRecPvt>
                                            </>
                                        )
                                    }

                                    </div>
                            </Paper>
                        </ContainerDivStyled>

                        <ContainerDivStyled>
                            <Paper elevation={3}>
                                    <DivTitulo>
                                        <StyledP>Coleções que eu sigo <b style={{fontWeight:"700", fontSize:"20px"}}>({followedCollectionsLength})</b></StyledP>
                                        <StyledHR/>
                                    </DivTitulo>
                                    <div style={{height : "400px"}}>
                                        {
                                            followedCollectionsLength == 0 ?
                                            (
                                                [
                                                    <>
                                                    <DivTextoNoPublications>
                                                    <DivConteudoNaoPublicado>
                                                    <NoPubSpan>Você ainda não segue nenhuma coleção.</NoPubSpan>
                                                    </DivConteudoNaoPublicado>
                                                    </DivTextoNoPublications>
                                                    </>
                                                ]
                                            )
                                            :
                                            (
                                                [
                                                    <>
                                                    <DivContainerRecursosPublicados>
                                                    </DivContainerRecursosPublicados>
                                                    <BtnAlinhaRecPvt>
                                                        <p style={{margin:"0 0 10px", fontSize:"14px"}}>Carregados 4 de 4</p>
                                                    </BtnAlinhaRecPvt>
                                                    </>
                                                ]
                                            )
                                        }
                                    </div>
                            </Paper>
                        </ContainerDivStyled>
                    </React.Fragment>
                ]
            )
        }
        </>
    )
}

const CardDiv = styled.div`
    margin-top : 10px;
    margin-bottom : 10px;
    width : 25%;
    float : left;
    padding-left : 15px;
    padding-right : 15px;
`