From d0758f1e5c6a6ccfadc824c3aeabe3766475df6c Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Sat, 13 Feb 2021 11:32:53 -0300
Subject: [PATCH] fix responsiveness od the card
---
src/Pages/PublicUserPage.js | 169 +++++++++++++-------
src/Pages/UserPage.js | 301 ++++++++++++++++++++++--------------
2 files changed, 300 insertions(+), 170 deletions(-)
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index 2000c861..e4fee36a 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -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;
+ }
`
diff --git a/src/Pages/UserPage.js b/src/Pages/UserPage.js
index c4b07550..ca523943 100644
--- a/src/Pages/UserPage.js
+++ b/src/Pages/UserPage.js
@@ -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;
+ }
+`;
--
GitLab