UserPage.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React, { useState, useContext, useEffect } from "react";
import styled from "styled-components";
import CustomizedBreadcrumbs from "../Components/TabPanels/Breadcrumbs.js";
import { Store } from "../Store.js";
import Tab from "@material-ui/core/Tab";
import ModalAlterarAvatar from "../Components/ModalAlterarAvatar/ModalAlterarAvatar";
import TabPanelAtividades from "../Components/TabPanels/UserPageTabs/PanelAtividades.js";
import TabPanelMeusRecursos from "../Components/TabPanels/UserPageTabs/PanelMeusRecursos.js";
import TabPanelFavoritos from "../Components/TabPanels/UserPageTabs/PanelFavoritos.js";
import TabPanelColecoes from "../Components/TabPanels/UserPageTabs/PanelColecoes.js";
import TabPanelRede from "../Components/TabPanels/UserPageTabs/PanelRede.js";
import TabPanelCuradoria from "../Components/TabPanels/UserPageTabs/PanelCuradoria.js";
import Grid from "@material-ui/core/Grid";
import {
    HeaderContainer,
    UserProfileContainer,
    CheckTeacherDiv,
    StyledTabs,
    RodapeDiv,
    NavBarContentContainer,
    BackgroundDiv,
} from "../Components/TabPanels/StyledComponents.js";
import CircularProgress from "@material-ui/core/CircularProgress";
import Cover from "../Components/UserPageComponents/Cover.js";
import ProfileAvatar from "../Components/UserPageComponents/Avatar.js";
import UserInfo from "../Components/UserPageComponents/UserInfo.js";
import EditProfileButton from "../Components/UserPageComponents/EditProfileButton.js";
import SubmitterStatus from "../Components/UserPageComponents/SubmitterStatus.js";
import { getRequest } from "../Components/HelperFunctions/getAxiosConfig.js";
import Typography from "@material-ui/core/Typography";

export default function UserPage(props) {
    const { state, dispatch } = useContext(Store);
    const id = state.currentUser.id;

    const [follows, setFollows] = useState(0);
    const [following, setFollowing] = useState(0);
    const [loading, setLoading] = useState(false);

    const [tabValue, setTabValue] = useState(Number(props.location.state) || 0);
    const [tabs, setTabs] = useState([
        "Atividades",
        "Meus Recursos",
        "Favoritos",
        "Coleções",
        "Rede",
    ]);
    const handleChangeTab = (event, newValue) => {
        setTabValue(newValue);
    };

    function handleSuccessfulGet(data) {
        console.log(data);
        dispatch({
            type: "GET_USER",
            user: data,
        });

        setFollows(data.follows_count);

        if (data.role_ids.includes(4)) {
            setTabs([
                "Atividades",
                "Meus Recursos",
                "Favoritos",
                "Coleções",
                "Rede",
                "Curadoria",
            ]);
        }
    }

    function handleSuccesGetFollowing(data) {
        setFollowing(data.length);
        setLoading(false);
    }

    useEffect(() => {
        if (id !== "") {
            const url = `/users/${id}`;
            const url2 = `/users/${id}/following/User`;
            setLoading(true);
            getRequest(url, handleSuccessfulGet, (error) => {
                console.log(error);
            });
            getRequest(url2, handleSuccesGetFollowing, (error) => {
                console.log(error);
            });
        }
    }, []);

    const redirect = () => {
        props.history.push("/");
    };

    const [modalOpen, toggleModal] = useState(false);
    const WIDTH = window.innerWidth;

    return (
        <div>
            <link
                href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
                rel="stylesheet"
            />
            {
                state.userIsLoggedIn ? (
                    [
                        <React.Fragment>
                            <ModalAlterarAvatar
                                open={modalOpen}
                                handleClose={() => {
                                    toggleModal(false);
                                }}
                                userAvatar={state.currentUser.avatar}
                            />

                            <BackgroundDiv>
                                <CustomizedBreadcrumbs values={["Minha área", tabs[tabValue]]} />
                                <Grid container spacing={2}>
                                    <Grid item xs={12}>
                                        <div style={{ padding: "10px 0 8px 0" }}>
                                            <UserProfileContainer>
                                                <HeaderContainer>
                                                    <Cover id={id} />
                                                    <ProfileAvatar id={id} />
                                                    {WIDTH <= 501 ? null : <UserInfo />}
                                                    <EditProfileButton />
                                                </HeaderContainer>
                                                {WIDTH <= 501 ? (
                                                    <Grid
                                                        style={{ marginTop: "4em" }}
                                                        container
                                                        justify="center"
                                                        alignItems="center"
                                                        direction="column"
                                                    >
                                                        <Grid item>
                                                            <Typography
                                                                variant="h4"
                                                                gutterBottom
                                                                style={{ textAlign: "center" }}
                                                            >
                                                                {state.currentUser.name}
                                                            </Typography>
                                                        </Grid>
                                                        <Grid
                                                            style={{
                                                                marginTop: "0.5em",
                                                                marginBottom: "0.5em",
                                                                borderTop: "0.5px solid #eee",
                                                                borderBottom: "0.5px solid #eee",
                                                            }}
                                                            container
                                                            spacing={4}
                                                            justify="center"
                                                            alignItems="center"
                                                            direction="row"
                                                        >
                                                            <Grid item>
                                                                <Typography variant="h6" onClick={(e)=>{handleChangeTab(e, 4)}}>
                                                                    {loading ? (
                                                                        <CircularProgress size={20} />
                                                                    ) : (
                                                                            `${follows} seguidores`
                                                                        )}
                                                                </Typography>
                                                            </Grid>
                                                            <Grid item>
                                                                <Typography variant="h6" onClick={(e)=>{handleChangeTab(e, 4)}}>
                                                                    {loading ? (
                                                                        <CircularProgress size={20} />
                                                                    ) : (
                                                                            `${following} seguindo`
                                                                        )}
                                                                </Typography>
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>
                                                ) : (
                                                        <CheckTeacherDiv>
                                                            <SubmitterStatus />
                                                        </CheckTeacherDiv>
                                                    )}
                                                <RodapeDiv>
                                                    <NavBarContentContainer>
                                                        <StyledTabs
                                                            value={tabValue}
                                                            onChange={handleChangeTab}
                                                            indicatorColor="primary"
                                                            textColor="primary"
                                                            variant="scrollable"
                                                            scrollButtons="auto"
                                                            TabIndicatorProps={{
                                                                style: { background: "#00bcd4" },
                                                            }}
                                                        >
                                                            {tabs.map((tab) => (
                                                                <StyledTab label={tab} key={tab} />
                                                            ))}
                                                        </StyledTabs>
                                                    </NavBarContentContainer>
                                                </RodapeDiv>
                                            </UserProfileContainer>
                                        </div>
                                    </Grid>
                                    <Grid item xs={12}>
                                        {tabValue === 0 && <TabPanelAtividades id={id} />}
                                        {tabValue === 1 && <TabPanelMeusRecursos id={id} />}
                                        {tabValue === 2 && <TabPanelFavoritos id={id} />}
                                        {tabValue === 3 && <TabPanelColecoes id={id} />}
                                        {tabValue === 4 && <TabPanelRede id={id} />}
                                        {tabValue === 5 && <TabPanelCuradoria id={id} />}
                                    </Grid>
                                </Grid>
                            </BackgroundDiv>
                        </React.Fragment>
                    ]
                )
                    :
                    (
                        <>
                        { redirect() }
                        </>
                    )
            }
        </div>
    )
}

const StyledTab = styled(Tab)`
  .Mui-selected {
    border-bottom-color: #00bcd4 !important;
  }
  .MuiTab-wrapper {
    border-bottom-color: #00bcd4 !important;
  }
`