Skip to content
Snippets Groups Projects
Commit d0758f1e authored by lfr20's avatar lfr20
Browse files

fix responsiveness od the card

parent 7bd6a2f9
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!36Fix perfil into develop
Hide whitespace changes
Inline Side-by-side
src/Pages/PublicUserPage.js
+ 114
− 55
View file @ d0758f1e
......@@ -16,9 +16,9 @@ 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, {useEffect, useState} from 'react'
import React, { useEffect, useState } from 'react'
import styled from 'styled-components'
import {apiDomain} from '../env';
import { apiDomain } from '../env';
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import Grid from '@material-ui/core/Grid';
import FollowButton from '../Components/ContactButtons/FollowButton.js'
......@@ -32,28 +32,30 @@ import TabColecoes from '../Components/TabPanels/PublicUserPageTabs/TabColecoes.
import TabRede from '../Components/TabPanels/PublicUserPageTabs/TabRede.js'
import CheckDecagram from '../img/check-decagram-blue.svg'
import ReportButton from '../Components/ReportButton.js'
import {HeaderContainer, UserProfileContainer, CoverContainer, UserProfileInfoDiv, StyledTabs, CheckTeacherDiv, RodapeDiv, NavBarContentContainer, BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
import {fetchAllRequest} from '../Components/HelperFunctions/getAxiosConfig'
import { HeaderContainer, UserProfileContainer, CoverContainer, UserProfileInfoDiv, StyledTabs, CheckTeacherDiv, RodapeDiv, NavBarContentContainer, BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
import { fetchAllRequest } from '../Components/HelperFunctions/getAxiosConfig'
import Typography from '@material-ui/core/Typography';
import CircularProgress from '@material-ui/core/CircularProgress';
const RenderFollowContainer = (boolUserFollowed, id, followCount) => {
return (
<FollowContainer>
<>
{
boolUserFollowed ?
(
[
<FollowingButton followedID={id}/>
]
)
:
(
[
<FollowButton followerID={id}/>
]
)
}
<FollowersCountButton followCount={followCount}/>
{
boolUserFollowed ?
(
[
<FollowingButton followedID={id} />
]
)
:
(
[
<FollowButton followerID={id} />
]
)
}
<FollowersCountButton followCount={followCount} />
</>
</FollowContainer>
)
......@@ -62,7 +64,7 @@ const RenderFollowContainer = (boolUserFollowed, id, followCount) => {
const RenderProfileAvatar = (userAvatar) => {
return (
<ProfileAvatarDiv>
<img src={userAvatar ? apiDomain + userAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
<img src={userAvatar ? apiDomain + userAvatar : noAvatar} alt="user avatar" style={{ height: "inherit", width: "inherit", border: "0", verticalAlign: "middle" }} />
</ProfileAvatarDiv>
)
}
......@@ -71,7 +73,7 @@ const RenderUserProfileInfo = (userName) => {
return (
<UserProfileInfoDiv>
<p
style={{fontSize:"28px", color:"#fff", marginBottom : "2px", fontWeight:"500", borderRadius : "5px", textShadow : "0 1px 2px rgba(0,0,0,.45)"}}
style={{ fontSize: "28px", color: "#fff", marginBottom: "2px", fontWeight: "500", borderRadius: "5px", textShadow: "0 1px 2px rgba(0,0,0,.45)" }}
>
{userName}
</p>
......@@ -85,7 +87,7 @@ const RenderCheckTeacher = (submitter_request) => {
<CheckTeacherDiv>
<p>
<span>
<img alt="" src={CheckDecagram}/>
<img alt="" src={CheckDecagram} />
</span>
Professor(a)
</p>
......@@ -94,14 +96,22 @@ const RenderCheckTeacher = (submitter_request) => {
}
}
export default function PublicUserPage (props) {
export default function PublicUserPage(props) {
/*user info variables--------------------------------------*/
const id = props.match.params.userId
const WIDTH = window.innerWidth;
const id = props.match.params.userId
const [loading, setLoading] = useState(false);
const [userData, setUserData] = useState({})
const fillUserInfo = (data) => {
setUserData(data)
}
/*---------------------------------------------------------*/
const [following, setFollowing] = useState([]);
const fillFollowing = (data) => {
setFollowing(data);
}
/*content control variables--------------------------------*/
// eslint-disable-next-line
......@@ -116,70 +126,109 @@ export default function PublicUserPage (props) {
/*content variables--------------------------------*/
const [learningObjArr, setLearningObjects] = useState([])
const handleLearningObjects = (data) => {setLearningObjects(data)}
const handleLearningObjects = (data) => { setLearningObjects(data) }
const [collectionsArr, setCollections] = useState([])
const handleCollections = (data) => {setCollections(data)}
const handleCollections = (data) => { setCollections(data) }
/*---------------------------------------------------------*/
function handleSuccess (responseArr) {
function handleSuccess(responseArr) {
setLoading(false);
fillUserInfo(responseArr[0])
handleLearningObjects(responseArr[1])
handleCollections(responseArr[2])
fillFollowing(responseArr[3]);
}
/*Component Will Mount*/
useEffect( () => {
const urls = [`/users/${id}`, `/users/${id}/learning_objects`, `/users/${id}/collections`]
fetchAllRequest(urls, handleSuccess, (error) => {console.log(error)})
useEffect(() => {
const urls = [`/users/${id}`, `/users/${id}/learning_objects`, `/users/${id}/collections`, `/users/${id}/following/User` ]
setLoading(true);
fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
}, [])
/*---------------------------------------------------------*/
return (
<React.Fragment>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet" />
<BackgroundDiv>
<CustomizedBreadcrumbs
values={["Usuário Público", tabs[tabValue]]}
/>
<Grid container spacing={2}>
<Grid item xs={12}>
<div style={{padding : "10px 0 8px 0"}}>
<div style={{ padding: "10px 0 8px 0" }}>
<UserProfileContainer>
<HeaderContainer>
<>
{RenderFollowContainer(userData.followed, id, userData.follows_count)}
{RenderProfileAvatar(userData.avatar ? userData.avatar : undefined)}
<CoverContainer>
{userData.cover && <img src={apiDomain + userData.cover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
</CoverContainer>
{RenderUserProfileInfo(userData.name)}
{RenderFollowContainer(userData.followed, id, userData.follows_count)}
{RenderProfileAvatar(userData.avatar ? userData.avatar : undefined)}
<CoverContainer>
{userData.cover && <img src={apiDomain + userData.cover} alt='' style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
</CoverContainer>
{
WIDTH <= 501 ? null : RenderUserProfileInfo(userData.name)
}
</>
</HeaderContainer>
{RenderCheckTeacher(userData.submitter_request)}
{
WIDTH <= 501 ?
<Grid style={{ marginTop: '4em' }} container justify="center" alignItems="center" direction="column">
<Grid item>
<Typography variant="h4" gutterBottom style={{textAlign : "center"}}>
{
userData.name
}
</Typography>
</Grid>
<Grid style={{marginTop: '0.5em', marginBottom: '0.5em', borderTop : "0.5px solid #DCDCDC", borderBottom : "0.5px solid #DCDCDC" }} container spacing={4} justify="center" alignItems="center" direction="row">
<Grid item>
<Typography variant="h6" >
{
loading ?
<CircularProgress size={20}/> :
`${userData.follows_count} seguidores`
}
</Typography>
</Grid>
<Grid item>
<Typography variant="h6" >
{
loading ?
<CircularProgress size={20}/> :
following ?
`${following.length} seguindo` :
"0 seguindo"
}
</Typography>
</Grid>
</Grid>
</Grid>
:
RenderCheckTeacher(userData.submitter_request)}
<RodapeDiv>
<NavBarContentContainer>
<StyledTabs
value ={tabValue}
onChange ={handleChangeTab}
indicatorColor ="primary"
textColor ="primary"
variant = "fullwidth"
scrollButtons = "desktop"
TabIndicatorProps={{style : {background:"#00bcd4"}}}
value={tabValue}
onChange={handleChangeTab}
indicatorColor="primary"
textColor="primary"
variant="fullwidth"
scrollButtons="desktop"
TabIndicatorProps={{ style: { background: "#00bcd4" } }}
>
{
tabs.map( (tab) =>
tabs.map((tab) =>
<Tab label={tab} key={tab}
disabled={(tab === "Recursos" && learningObjArr.length === 0) || (tab === "Coleções" && collectionsArr.length === 0)}
/>
/>
)
}
</StyledTabs>
</NavBarContentContainer>
<ReportButton className="report-button" complainableId={userData.id} complainableType={"User"}/>
<ReportButton className="report-button" complainableId={userData.id} complainableType={"User"} />
</RodapeDiv>
</UserProfileContainer>
</div>
......@@ -187,14 +236,14 @@ export default function PublicUserPage (props) {
<Grid item xs={12}>
{tabValue === 0 &&
<TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr}/>}
<TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr} />}
{tabValue === 1 &&
<TabRecursos count={userData.learning_objects_count} learningObjs={learningObjArr} id={id}/>}
<TabRecursos count={userData.learning_objects_count} learningObjs={learningObjArr} id={id} />}
{tabValue === 2 &&
<TabColecoes count={userData.collections_count} collections={collectionsArr}
/>}
/>}
{tabValue === 3 &&
<TabRede id={id} username={userData.name}/>}
<TabRede id={id} username={userData.name} />}
</Grid>
</Grid>
......@@ -214,9 +263,19 @@ const ProfileAvatarDiv = styled.div`
position : absolute;
width : 150px;
height : 150px;
border : 8px solid #fff;
border : 4px solid #fff;
outline : 0;
background-color : #fff;
@media screen and (max-width: 501px) {
height : 73px;
width : 73px;
position:absolute;
left:0;
right:0;
bottom : -40px;
margin-left:auto;
margin-right:auto;
}
`
......
src/Pages/UserPage.js
+ 186
− 115
View file @ d0758f1e
......@@ -16,121 +16,205 @@ 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 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'
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
const id = state.currentUser.id
const [tabValue, setTabValue] = useState(
Number(props.location.state) || 0
);
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";
import Divider from "@material-ui/core/Divider";
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'
])
"Atividades",
"Meus Recursos",
"Favoritos",
"Coleções",
"Rede",
]);
const handleChangeTab = (event, newValue) => {
setTabValue(newValue)
}
setTabValue(newValue);
};
function handleSuccessfulGet(data) {
console.log(data);
dispatch({
type: "GET_USER",
user: data,
});
function handleSuccessfulGet (data) {
dispatch ( {
type: 'GET_USER',
user: data
}
)
setFollows(data.follows_count);
if((data.role_ids.includes(4))) {
if (data.role_ids.includes(4)) {
setTabs([
'Atividades', 'Meus Recursos', 'Favoritos', 'Coleções', 'Rede', 'Curadoria'
])
"Atividades",
"Meus Recursos",
"Favoritos",
"Coleções",
"Rede",
"Curadoria",
]);
}
}
useEffect( () => {
if (id !== '') {
const url = `/users/${id}`
function handleSuccesGetFollowing(data) {
setFollowing(data.length);
setLoading(false);
}
getRequest(url, handleSuccessfulGet, (error) => {console.log(error)})
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('/')
}
props.history.push("/");
};
const [modalOpen, toggleModal] = useState(false)
const [modalOpen, toggleModal] = useState(false);
const WIDTH = window.innerWidth;
return (
<>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
{
state.userIsLoggedIn?
(
<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)}}
handleClose={() => {
toggleModal(false);
}}
userAvatar={state.currentUser.avatar}
/>
<BackgroundDiv>
<CustomizedBreadcrumbs
values={["Minha área", tabs[tabValue]]}
/>
<BackgroundDiv>
<CustomizedBreadcrumbs values={["Minha área", tabs[tabValue]]} />
<Grid container spacing={2}>
<Grid item xs={12}>
<div style={{padding : "10px 0 8px 0"}}>
<div style={{ padding: "10px 0 8px 0" }}>
<UserProfileContainer>
<HeaderContainer>
<Cover id={id}/>
<ProfileAvatar id={id}/>
<UserInfo/>
<EditProfileButton/>
<Cover id={id} />
<ProfileAvatar id={id} />
{WIDTH <= 501 ? null : <UserInfo />}
<EditProfileButton />
</HeaderContainer>
<CheckTeacherDiv>
<SubmitterStatus />
</CheckTeacherDiv>
{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">
{loading ? (
<CircularProgress size={20} />
) : (
`${follows} seguidores`
)}
</Typography>
</Grid>
<Grid item>
<Typography variant="h6">
{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"}}}
value={tabValue}
onChange={handleChangeTab}
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="auto"
TabIndicatorProps={{
style: { background: "#00bcd4" },
}}
>
{
tabs.map( (tab) =>
<StyledTab label ={tab} key={tab}/>
)
}
{tabs.map((tab) => (
<StyledTab label={tab} key={tab} />
))}
</StyledTabs>
</NavBarContentContainer>
</RodapeDiv>
......@@ -139,42 +223,29 @@ export default function UserPage (props){
</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}/>}
{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>
</React.Fragment>,
]
)
: (
<>
{redirect()}
</>
)
}
) : (
<>{redirect()}</>
)}
</>
)
}
);
}
const StyledTab = styled(Tab)`
.Mui-selected {
border-bottom-color : #00bcd4 !important;
}
.MuiTab-wrapper {
border-bottom-color : #00bcd4 !important;
}
`
.Mui-selected {
border-bottom-color: #00bcd4 !important;
}
.MuiTab-wrapper {
border-bottom-color: #00bcd4 !important;
}
`;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment