Skip to content
Snippets Groups Projects
Commit 6dc23772 authored by vgm18's avatar vgm18
Browse files

Fixing public user page

parent 0fadd3df
No related branches found
No related tags found
3 merge requests!100Changed recaptcha key to the production one, removed console.logs and fixed...,!99Changed recaptcha key to the production one, removed console.logs and fixed...,!98Changed recaptcha key to the production one, removed console.logs and fixed...
......@@ -64,26 +64,24 @@ export default function FollowingButton(props) {
followingHover ?
(
[
<StyledButton className={`${props.contrast}LinkColor`}
style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
>
<div className={`${props.contrast}LinkColor`}>
DEIXAR DE SEGUIR
</StyledButton>
</div>
]
)
: (
[
<StyledButton className={`${props.contrast}LinkColor`}
style={props.contrast === "" ? {border: "2px solid #00bcd4", borderRadius : "5px", color :"white", backgroundColor: "#00bcd4"} : {border: "1px solid white", borderRadius : "5px", color :"#00bcd4"}}
>
<div className={`${props.contrast}LinkColor`}>
<GroupIcon
className={`${props.contrast}IconColor`}
style={{
fontSize: "24px",
display: "inline-block",
verticalAlign: "middle",
}} />SEGUINDO
</StyledButton>
className={`${props.contrast}IconColor`}
style={{
fontSize: "24px",
display: "inline-block",
verticalAlign: "middle",
}}
/>
SEGUINDO
</div>
]
)
}
......@@ -147,6 +145,9 @@ export function NoIconFollowing(props) {
export const StyledButton = styled(Button)`
border : 1px solid white !important;
background-color: ${props => props.contrast === "" ? "#00bcd4" : "black"} !important;
color: white !important;
font-size : 14px important;
font-weight : 500 !important;
......@@ -154,9 +155,6 @@ export const StyledButton = styled(Button)`
font-size : 24px;
}
&:hover {
color: rgb(107, 35, 142);
}
`
const NoIconButton = styled(Button)`
......
......@@ -188,27 +188,27 @@ export const UserProfileContainer = styled.div`
`
export const CoverContainer = styled.div`
height : 230px;
position : relative;
@media screen and (max-width: 600px) {
height : 128px
}
height : 230px;
position : relative;
@media screen and (max-width: 600px) {
height : 128px
}
`
export const UserProfileInfoDiv = styled.div`
position : absolute;
bottom : 0;
left : 260px;
overflow : hidden;
margin-bottom : 20px;
p{
font-size: 28px;
color: #fff;
padding: 5px 10px;
font-weight: 500;
background-color: ${props => props.contrast === "" ? "#77777796" : "black"};
border-radius: 5px;
}
position : absolute;
bottom : 0;
left : 260px;
overflow : hidden;
margin-bottom : 20px;
p {
font-size: 28px;
color: #fff;
padding: 5px 10px;
font-weight: 500;
border-radius: 5px;
text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
`
export const CheckTeacherDiv = styled.div`
......
This diff is collapsed.
......@@ -17,7 +17,6 @@ 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";
......@@ -38,7 +37,6 @@ import {
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";
......@@ -46,6 +44,7 @@ import EditProfileButton from "../Components/UserPageComponents/EditProfileButto
import SubmitterStatus from "../Components/UserPageComponents/SubmitterStatus.js";
import { getRequest } from "../Components/HelperFunctions/getAxiosConfig.js";
import Typography from "@material-ui/core/Typography";
import LoadingSpinner from '../Components/LoadingSpinner';
export default function UserPage(props) {
const { state, dispatch } = useContext(Store);
......@@ -53,7 +52,7 @@ export default function UserPage(props) {
const [follows, setFollows] = useState(0);
const [following, setFollowing] = useState(0);
const [loading, setLoading] = useState(false);
const [loading, setLoading] = useState(true);
const [tabValue, setTabValue] = useState(Number(props.location.state) || 0);
const [tabs, setTabs] = useState([
"Atividades",
......@@ -67,7 +66,6 @@ export default function UserPage(props) {
};
function handleSuccessfulGet(data) {
console.log(data);
dispatch({
type: "GET_USER",
user: data,
......@@ -89,14 +87,13 @@ export default function UserPage(props) {
function handleSuccesGetFollowing(data) {
setFollowing(data.length);
setLoading(false);
}
useEffect(() => {
setLoading(true);
if (id !== "") {
const url = `/users/${id}`;
const url2 = `/users/${id}/following/User`;
setLoading(true);
getRequest(url, handleSuccessfulGet, (error) => {
console.log(error);
});
......@@ -104,6 +101,7 @@ export default function UserPage(props) {
console.log(error);
});
}
setLoading(false);
}, []);
useEffect(() => {
......@@ -119,134 +117,128 @@ export default function UserPage(props) {
return (
<div>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
rel="stylesheet"
/>
{
state.userIsLoggedIn ? (
[
<React.Fragment>
<ModalAlterarAvatar
contrast={state.contrast}
open={modalOpen}
handleClose={() => {
toggleModal(false);
}}
userAvatar={state.currentUser.avatar}
/>
<BackgroundDiv contrast={state.contrast}>
<CustomizedBreadcrumbs contrast={state.contrast} values={["Minha área", tabs[tabValue]]} />
<Grid container spacing={2}>
<Grid item xs={12}>
<div style={{ padding: "10px 0 8px 0" }}>
<UserProfileContainer>
<HeaderContainer contrast={state.contrast}>
<Cover id={id} />
<ProfileAvatar id={id} />
{WIDTH <= 600 ? null : <UserInfo />}
<EditProfileButton contrast={state.contrast} />
</HeaderContainer>
{WIDTH <= 600 ? (
<Grid
style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
container
justify="center"
alignItems="center"
direction="column"
>
<Grid item>
<Typography
variant="h4"
gutterBottom
style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
>
{state.currentUser.name}
</Typography>
</Grid>
<Grid
style={{
marginTop: "0.5em",
marginBottom: "0.5em",
borderTop: "1px solid white",
borderBottom: "1px solid white",
}}
container
spacing={4}
justify="center"
alignItems="center"
direction="row"
>
<Grid item>
<Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
{loading ? (
<CircularProgress size={20} />
) : (
`${follows} seguidores`
)}
</Typography>
</Grid>
<Grid item>
<Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
{loading ? (
<CircularProgress size={20} />
) : (
`${following} seguindo`
)}
</Typography>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
rel="stylesheet"
/>
{
loading ?
(
<LoadingSpinner text="Carregando..." />
)
:
(
state.userIsLoggedIn ?
(
<React.Fragment>
<ModalAlterarAvatar
contrast={state.contrast}
open={modalOpen}
handleClose={() => {
toggleModal(false);
}}
userAvatar={state.currentUser.avatar}
/>
<BackgroundDiv contrast={state.contrast}>
<CustomizedBreadcrumbs contrast={state.contrast} values={["Minha área", tabs[tabValue]]} />
<Grid container spacing={2}>
<Grid item xs={12}>
<div style={{ padding: "10px 0 8px 0" }}>
<UserProfileContainer>
<HeaderContainer contrast={state.contrast}>
<Cover id={id} />
<ProfileAvatar id={id} />
{WIDTH <= 600 ? null : <UserInfo />}
<EditProfileButton contrast={state.contrast} />
</HeaderContainer>
{WIDTH <= 600 ? (
<Grid
style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
container
justify="center"
alignItems="center"
direction="column"
>
<Grid item>
<Typography
variant="h4"
gutterBottom
style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
>
{state.currentUser.name}
</Typography>
</Grid>
<Grid
style={{
marginTop: "0.5em",
marginBottom: "0.5em",
borderTop: "1px solid white",
borderBottom: "1px solid white",
}}
container
spacing={4}
justify="center"
alignItems="center"
direction="row"
>
<Grid item>
<Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
{follows} seguidores
</Typography>
</Grid>
<Grid item>
<Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
{following} seguindo
</Typography>
</Grid>
</Grid>
</Grid>
) : (
<CheckTeacherDiv contrast={state.contrast}>
<SubmitterStatus />
</CheckTeacherDiv>
)}
<RodapeDiv contrast={state.contrast}>
<NavBarContentContainer contrast={state.contrast}>
<StyledTabs
contrast={state.contrast}
value={tabValue}
onChange={handleChangeTab}
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="on"
TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
>
{tabs.map((tab) => (
<Tab contrast={state.contrast} label={tab} key={tab} />
))}
</StyledTabs>
</NavBarContentContainer>
</RodapeDiv>
</UserProfileContainer>
</div>
</Grid>
<Grid item xs={12}>
{tabValue === 0 && <TabPanelAtividades id={id} contrast={state.contrast} />}
{tabValue === 1 && <TabPanelMeusRecursos id={id} contrast={state.contrast} />}
{tabValue === 2 && <TabPanelFavoritos id={id} contrast={state.contrast} />}
{tabValue === 3 && <TabPanelColecoes id={id} contrast={state.contrast} />}
{tabValue === 4 && <TabPanelRede id={id} contrast={state.contrast} />}
{tabValue === 5 && <TabPanelCuradoria id={id} contrast={state.contrast} />}
</Grid>
</Grid>
</Grid>
</Grid>
) : (
<CheckTeacherDiv contrast={state.contrast}>
<SubmitterStatus />
</CheckTeacherDiv>
)}
<RodapeDiv contrast={state.contrast}>
<NavBarContentContainer contrast={state.contrast}>
<StyledTabs
contrast={state.contrast}
value={tabValue}
onChange={handleChangeTab}
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="on"
TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
>
{tabs.map((tab) => (
<StyledTab contrast={state.contrast} label={tab} key={tab} />
))}
</StyledTabs>
</NavBarContentContainer>
</RodapeDiv>
</UserProfileContainer>
</div>
</Grid>
<Grid item xs={12}>
{tabValue === 0 && <TabPanelAtividades id={id} contrast={state.contrast} />}
{tabValue === 1 && <TabPanelMeusRecursos id={id} contrast={state.contrast} />}
{tabValue === 2 && <TabPanelFavoritos id={id} contrast={state.contrast} />}
{tabValue === 3 && <TabPanelColecoes id={id} contrast={state.contrast} />}
{tabValue === 4 && <TabPanelRede id={id} contrast={state.contrast} />}
{tabValue === 5 && <TabPanelCuradoria id={id} contrast={state.contrast} />}
</Grid>
</Grid>
</BackgroundDiv>
</React.Fragment>
]
)
:
(
<>
{redirect()}
</>
)
}
</BackgroundDiv>
</React.Fragment>
)
:
(
<>
{redirect()}
</>
)
)
}
</div>
)
}
const StyledTab = styled(Tab)`
`
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment