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
Show whitespace changes
Inline Side-by-side
src/Pages/PublicUserPage.js
+ 114
− 55
View file @ d0758f1e
......@@ -34,6 +34,8 @@ 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 Typography from '@material-ui/core/Typography';
import CircularProgress from '@material-ui/core/CircularProgress';
const RenderFollowContainer = (boolUserFollowed, id, followCount) => {
return (
......@@ -96,12 +98,20 @@ const RenderCheckTeacher = (submitter_request) => {
export default function PublicUserPage(props) {
/*user info variables--------------------------------------*/
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
......@@ -122,17 +132,20 @@ export default function PublicUserPage (props) {
/*---------------------------------------------------------*/
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`]
const urls = [`/users/${id}`, `/users/${id}/learning_objects`, `/users/${id}/collections`, `/users/${id}/following/User` ]
setLoading(true);
fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
}, [])
/*---------------------------------------------------------*/
......@@ -155,10 +168,46 @@ export default function PublicUserPage (props) {
<CoverContainer>
{userData.cover && <img src={apiDomain + userData.cover} alt='' style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
</CoverContainer>
{RenderUserProfileInfo(userData.name)}
{
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
......@@ -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,89 +16,124 @@ 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'
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 { state, dispatch } = useContext(Store);
const id = state.currentUser.id;
const [tabValue, setTabValue] = useState(
Number(props.location.state) || 0
);
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
}
)
type: "GET_USER",
user: data,
});
if((data.role_ids.includes(4))) {
setFollows(data.follows_count);
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]]}
/>
<CustomizedBreadcrumbs values={["Minha área", tabs[tabValue]]} />
<Grid container spacing={2}>
<Grid item xs={12}>
<div style={{ padding: "10px 0 8px 0" }}>
......@@ -106,14 +141,64 @@ export default function UserPage (props){
<HeaderContainer>
<Cover id={id} />
<ProfileAvatar id={id} />
<UserInfo/>
{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">
{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
......@@ -123,14 +208,13 @@ export default function UserPage (props){
textColor="primary"
variant="scrollable"
scrollButtons="auto"
TabIndicatorProps={{style : {background:"#00bcd4"}}}
TabIndicatorProps={{
style: { background: "#00bcd4" },
}}
>
{
tabs.map( (tab) =>
{tabs.map((tab) => (
<StyledTab label={tab} key={tab} />
)
}
))}
</StyledTabs>
</NavBarContentContainer>
</RodapeDiv>
......@@ -139,37 +223,24 @@ 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;
......@@ -177,4 +248,4 @@ const StyledTab = styled(Tab)`
.MuiTab-wrapper {
border-bottom-color: #00bcd4 !important;
}
`
`;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment