diff --git a/src/Components/ContactButtons/FollowButton.js b/src/Components/ContactButtons/FollowButton.js
index 245eecbccd12abba7a88c5d76643d9302328c0d9..0a318eda1d552232c9564e02b63fe7d6f08a18ed 100644
--- a/src/Components/ContactButtons/FollowButton.js
+++ b/src/Components/ContactButtons/FollowButton.js
@@ -16,12 +16,12 @@ 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, {useContext, useState} from 'react'
-import {Store} from '../../Store'
+import React, { useContext, useState } from 'react'
+import { Store } from '../../Store'
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
-import {putRequest} from '../HelperFunctions/getAxiosConfig'
+import { putRequest } from '../HelperFunctions/getAxiosConfig'
import LoginModal from './../LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import SignUpModal from './../SignUpModal'
@@ -31,9 +31,9 @@ function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
-export default function FollowButton (props) {
+export default function FollowButton(props) {
- const {state} = useContext(Store)
+ const { state } = useContext(Store)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -50,18 +50,18 @@ export default function FollowButton (props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.toggleFollowed()
}
const handleFollow = (followerID) => {
if (followerID !== undefined) {
const url = `/users/${followerID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
}
}
@@ -80,31 +80,45 @@ export default function FollowButton (props) {
{/*----------------------------------------------------------------------------*/}
{
state.currentUser.id !== '' ? (
- <StyledButton onClick={() => handleFollow(props.followerID)}>
- <PersonAddIcon style={{fontSize : "24px",
- display : "inline-block",
- verticalAlign : "middle",
- color : "#00bcd4"}}/>
+ <StyledButton contrast={props.contrast} onClick={() => handleFollow(props.followerID)}>
+ <PersonAddIcon style={props.contrast === "" ? {
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ color: "#00bcd4"
+ } : {
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ color: "white"
+ }} />
SEGUIR
</StyledButton>
)
- :
- (
- <StyledButton onClick={() => handleLogin(true)}>
- <PersonAddIcon style={{fontSize : "24px",
- display : "inline-block",
- verticalAlign : "middle",
- color : "#00bcd4"}}/>
+ :
+ (
+ <StyledButton contrast={props.contrast} onClick={() => handleLogin(true)}>
+ <PersonAddIcon style={props.contrast === "" ? {
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ color: "#00bcd4"
+ } : {
+ fontSize: "24px",
+ display: "inline-block",
+ verticalAlign: "middle",
+ color: "white"
+ }} />
SEGUIR
- </StyledButton>
- )
+ </StyledButton>
+ )
}
</React.Fragment>
)
}
-export function NoIcon (props) {
- const {state} = useContext(Store)
+export function NoIcon(props) {
+ const { state } = useContext(Store)
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -121,14 +135,14 @@ export function NoIcon (props) {
if (reason === 'clickaway') {
return;
}
-
- handleSuccessfulLogin(false);
+
+ handleSuccessfulLogin(false);
}
const handleFollow = (followerID) => {
if (followerID !== undefined) {
const url = `/users/${followerID}/follow/`
- putRequest(url, {}, (data) => {props.toggleFollowed()}, (error) => {console.log(error)})
+ putRequest(url, {}, (data) => { props.toggleFollowed() }, (error) => { console.log(error) })
}
}
@@ -149,10 +163,10 @@ export function NoIcon (props) {
state.currentUser.id !== '' ? (
<NoIconButton onClick={() => handleFollow(props.followableID)}>seguir</NoIconButton>
)
- :
- (
- <NoIconButton onClick={() => handleLogin(true)}>seguir</NoIconButton>
- )
+ :
+ (
+ <NoIconButton onClick={() => handleLogin(true)}>seguir</NoIconButton>
+ )
}
</React.Fragment>
)
@@ -169,7 +183,7 @@ const NoIconButton = styled(Button)`
height : 36px !important;
min-width : 88px !important;
vertical-align : middle !important;
- text-color : #00bcd4 !important;
+ color : #00bcd4 !important;
align-items : center !important;
text-align : center !important;
padding : 0 6px !important;
@@ -177,9 +191,13 @@ const NoIconButton = styled(Button)`
`
const StyledButton = styled(Button)`
- background-color : #fff !important;
- border : 1px solid #00bcd4 !important;
- color : #00bcd4 !important;
+ &:hover {
+ background-color: ${(props) => props.contrast === "" ? "#fff !important" : "rgba(255,255,0,0.24) !important"};
+ }
+ background-color: ${(props) => (props.contrast === "" ? "#fff !important" : "black !important")};
+ color: ${(props) => (props.contrast === "" ? "#00bcd4 !important" : "yellow !important")};
+ border: ${(props) => (props.contrast === "" ? "1px solid #00bcd4 !important" : "1px solid white !important")};
+ text-decoration: ${(props) => (props.contrast === "" ? "none !important" : "underline !important")};
font-size : 14px !important;
display : inline-block !important;
position : relative !important;
@@ -206,6 +224,5 @@ const StyledButton = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration : none !important;
overflow : hidden !important;
`
diff --git a/src/Components/ContactButtons/FollowersCountButton.js b/src/Components/ContactButtons/FollowersCountButton.js
index 43dfbfb8ea0b7c21f92b0f778a8b3b05b0e87eea..bda34bbf553bb250f17475e5d1ea357865be5521 100644
--- a/src/Components/ContactButtons/FollowersCountButton.js
+++ b/src/Components/ContactButtons/FollowersCountButton.js
@@ -11,7 +11,7 @@ export default function FollowersCountButton (props) {
}
return (
- <FollowersButton>
+ <FollowersButton contrast={props.contrast}>
{FollowerButtonSpan()}
</FollowersButton>
)
@@ -21,7 +21,7 @@ export default function FollowersCountButton (props) {
const FollowersButton = styled(Button)`
right : 0 !important;
text-transform : none !important;
- color : #666 !important;
+ color: ${(props) => (props.contrast === "" ? "#666 !important" : "yellow !important")};
font-size : 13px !important;
font-weight : 400 !important;
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
@@ -31,7 +31,7 @@ const FollowersButton = styled(Button)`
min-height : 36px !important;
vertical-align : middle !important;
text-align : center !important;
- border : 0 !important;
+ border: ${(props) => (props.contrast === "" ? "0 !important" : "1px solid white !important")};
border-radius : 3px !important;
- background-color : rgb(250,250,250) !important;
+ background-color: ${(props) => (props.contrast === "" ? "#fff !important" : "black !important")};
`
diff --git a/src/Components/ContactButtons/FollowingButton.js b/src/Components/ContactButtons/FollowingButton.js
index 424e8f63a12cb10a40ae64112431b2152bb0c668..7d60218a7e9754211a1431a0ecb271b76339e25f 100644
--- a/src/Components/ContactButtons/FollowingButton.js
+++ b/src/Components/ContactButtons/FollowingButton.js
@@ -16,20 +16,20 @@ 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} from 'react'
+import React, { useState } from 'react'
import styled from 'styled-components'
import Button from '@material-ui/core/Button';
import FollowingIcon from '../../img/how_to_reg-24px.png'
import ModalConfirmarUnfollow from '../ModalConfirmarUnfollow.js'
-import {putRequest} from '../HelperFunctions/getAxiosConfig'
+import { putRequest } from '../HelperFunctions/getAxiosConfig'
-export default function FollowingButton (props) {
+export default function FollowingButton(props) {
const [modalOpen, toggleModal] = useState(false)
const [unfollowID, setUnfollowID] = useState(-1)
const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => {handleFollowingHover(value)}
+ const toggleFollowingHover = (value) => { handleFollowingHover(value) }
const handleUnfollowPartOne = (followedID) => {
setUnfollowID(followedID)
@@ -37,53 +37,54 @@ export default function FollowingButton (props) {
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.toggleFollowed()
toggleModal(false)
}
const handleUnfollowPartTwo = () => {
const url = `/users/${unfollowID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
}
return (
<React.Fragment>
<ModalConfirmarUnfollow open={modalOpen}
- handleClose={() => {toggleModal(false)}}
- handleConfirm = {handleUnfollowPartTwo}
+ handleClose={() => { toggleModal(false) }}
+ handleConfirm={handleUnfollowPartTwo}
/>
<StyledButton
+ contrast={props.contrast}
onMouseOver={() => toggleFollowingHover(true)}
onMouseLeave={() => toggleFollowingHover(false)}
onClick={() => handleUnfollowPartOne(props.followedID)}
>
{
- followingHover?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- : (
- [
- <>
- <img src={FollowingIcon} alt='ícone seguindo'/><span>Seguindo</span>
- </>
- ]
- )
- }
+ followingHover ?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ : (
+ [
+ <>
+ <img src={FollowingIcon} alt='ícone seguindo' /><span>Seguindo</span>
+ </>
+ ]
+ )
+ }
</StyledButton>
</React.Fragment>
)
}
-export function NoIconFollowing (props) {
+export function NoIconFollowing(props) {
const [modalOpen, toggleModal] = useState(false)
const [unfollowID, setUnfollowID] = useState(-1)
const [followingHover, handleFollowingHover] = useState(false)
- const toggleFollowingHover = (value) => {handleFollowingHover(value)}
+ const toggleFollowingHover = (value) => { handleFollowingHover(value) }
const handleUnfollowPartOne = (followedID) => {
setUnfollowID(followedID)
@@ -91,21 +92,21 @@ export function NoIconFollowing (props) {
}
- function handleSuccess (data) {
+ function handleSuccess(data) {
props.toggleFollowed()
toggleModal(false)
}
const handleUnfollowPartTwo = () => {
const url = `/users/${unfollowID}/follow/`
- putRequest(url, {}, handleSuccess, (error) => {console.log(error)})
+ putRequest(url, {}, handleSuccess, (error) => { console.log(error) })
}
return (
<React.Fragment>
<ModalConfirmarUnfollow open={modalOpen}
- handleClose={() => {toggleModal(false)}}
- handleConfirm = {handleUnfollowPartTwo}
+ handleClose={() => { toggleModal(false) }}
+ handleConfirm={handleUnfollowPartTwo}
/>
<NoIconButton
onMouseOver={() => toggleFollowingHover(true)}
@@ -113,18 +114,18 @@ export function NoIconFollowing (props) {
onClick={() => handleUnfollowPartOne(props.followedID)}
>
{
- followingHover?
- (
- [
- <span>DEIXAR DE SEGUIR</span>
- ]
- )
- : (
- [
- <span>SEGUINDO</span>
- ]
- )
- }
+ followingHover ?
+ (
+ [
+ <span>DEIXAR DE SEGUIR</span>
+ ]
+ )
+ : (
+ [
+ <span>SEGUINDO</span>
+ ]
+ )
+ }
</NoIconButton>
</React.Fragment>
)
@@ -132,8 +133,8 @@ export function NoIconFollowing (props) {
export const StyledButton = styled(Button)`
- background-color : #00bcd4 !important;
- color : #fff !important;
+ background-color: ${(props) => (props.contrast === "" ? "#00bcd4 !important" : "black !important")};
+ color: ${(props) => (props.contrast === "" ? "#fff !important" : "yellow !important")};
display : inline-block !important;
position : relative !important;
cursor : pointer !important;
@@ -151,7 +152,7 @@ export const StyledButton = styled(Button)`
-moz-user-select : none !important;
-ms-user-select : none !important;
user-select : none !important;
- border : 0 !important;
+ border: ${(props) => (props.contrast === "" ? "0 !important" : "1px solid white !important")};
padding : 0 6px !important;
margin : 6px 8px !important;
white-space : nowrap !important;
@@ -161,12 +162,12 @@ export const StyledButton = styled(Button)`
font-style : inherit !important;
font-variant : inherit !important;
font-family : inherit !important;
- text-decoration : none !important;
+ text-decoration: ${(props) => (props.contrast === "" ? "none !important" : "underline !important")};
overflow : hidden !important;
&:hover {
- background-color : #fff !important;
- color : #00bcd4 !important;
- border : 1px solid #00bcd4 !important;
+ background-color: ${(props) => props.contrast === "" ? "#fff !important" : "rgba(255,255,0,0.24) !important"};
+ color: ${(props) => props.contrast === "" ? "#00bcd4 !important" : "yellow !important"};
+ border: ${(props) => props.contrast === "" ? "1px solid #00bcd4 !important" : "1px solid white !important"};
}
img {
height : 24px;
diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js
index 654780a75533a8deac35c1cf08121d8634915f3b..4dbac401d7dce5baad49dff0db0aa2bb5e514c69 100644
--- a/src/Components/ReportButton.js
+++ b/src/Components/ReportButton.js
@@ -16,7 +16,7 @@ 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} from 'react'
+import React, { useState, useContext } from 'react'
import styled from 'styled-components'
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
@@ -24,10 +24,10 @@ import ReportIcon from '@material-ui/icons/Error';
import Button from '@material-ui/core/Button';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import ReportModal from './ReportModal.js'
-import {Store} from '../Store.js'
+import { Store } from '../Store.js'
-export default function ReportButton (props) {
- const {state} = useContext(Store)
+export default function ReportButton(props) {
+ const { state } = useContext(Store)
/*Menu control variables-----------------------------*/
const [anchorEl, setAnchorEl] = React.useState(null);
@@ -57,33 +57,33 @@ export default function ReportButton (props) {
return (
<>
- {
- reportModal &&
- <ReportModal open={reportModal} handleClose={() => handleModal()}
+ {
+ reportModal &&
+ <ReportModal open={reportModal} handleClose={() => handleModal()}
form="user" complainableId={props.complainableId}
complainableType={props.complainableType}
- {...props}/>
- }
- {/*
+ {...props} />
+ }
+ {/*
loginModal &&
<LoginModal open={loginModal} handleClose={() => {toggleLoginModal(false)}}/>
*/}
- <Button onClick={handleClick}>
- <MoreVertIcon style={{color : "#666"}}/>
- </Button>
- <StyledMenu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- style={{borderRadius : "0"}}
- >
- <MenuItem onClick={() => {handleModal()}} style={{color : "#666"}}>
- <ReportIcon/>
- <span style={{paddingLeft : "3px"}}>Reportar</span>
- </MenuItem>
- </StyledMenu>
+ <Button onClick={handleClick}>
+ <MoreVertIcon style={state.contrast === "" ? { color: "#666" } : { color: "white" }} />
+ </Button>
+ <StyledMenu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ style={{ borderRadius: "0" }}
+ >
+ <MenuItem onClick={() => { handleModal() }} style={state.contrast === "" ? { color: "#666", backgroundColor: "black" } : { color: "white", backgroundColor: "black" }}>
+ <ReportIcon />
+ <span style={state.contrast === "" ? { paddingLeft: "3px" } : { paddingLeft: "3px", color: "yellow", textDecoration: "underline" }}>Reportar</span>
+ </MenuItem>
+ </StyledMenu>
</>
)
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
index 9b987347a51274465b78e7db062a99bd6d9a2273..7f636fcd63ba1610b4bf38f464d1ff1c98d88cc7 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabColecoes.js
@@ -21,100 +21,101 @@ import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfi
import PanelTemplateColecao from '../PanelComponents/TemplateColecao.js'
import LoadingSpinner from '../../LoadingSpinner.js'
-export default function TabColecoes({id, username}) {
- const [loading, handleLoading] = useState(true)
-
- const [errorInUserColl, setErrorInUserColl] = useState(false)
-
- const [userCollections, setUserCollections] = useState([])
-
- const [currLimitUserColl, setCurrLimitUserColl] = useState(4)
-
- const [loadingMoreUserColl, setLoadingMoreUserColl] = useState(false);
-
- const [endOfUserColl, setEndOfUserColl] = useState(false);
-
- function handleSuccess(responseArr, headersArr) {
- setErrorInUserColl(responseArr[0].errors ? true : false)
-
- handleLoading(false)
- setUserCollections(responseArr[0])
-
- if (headersArr[0].has('X-Total-Count')) {
- setEndOfUserColl(headersArr[0].get('X-Total-Count'));
- }
- }
-
- function handleError(error) {
- handleLoading(false)
- setErrorInUserColl(true)
- }
-
- const getInfo = () => {
- const urls = [
- `/users/${id}/collections?offset=0&limit=4`,
- ]
- fetchAllRequest(urls, handleSuccess, handleError)
+export default function TabColecoes({ id, username, contrast }) {
+ const [loading, handleLoading] = useState(true)
+
+ const [errorInUserColl, setErrorInUserColl] = useState(false)
+
+ const [userCollections, setUserCollections] = useState([])
+
+ const [currLimitUserColl, setCurrLimitUserColl] = useState(4)
+
+ const [loadingMoreUserColl, setLoadingMoreUserColl] = useState(false);
+
+ const [endOfUserColl, setEndOfUserColl] = useState(false);
+
+ function handleSuccess(responseArr, headersArr) {
+ setErrorInUserColl(responseArr[0].errors ? true : false)
+
+ handleLoading(false)
+ setUserCollections(responseArr[0])
+
+ if (headersArr[0].has('X-Total-Count')) {
+ setEndOfUserColl(headersArr[0].get('X-Total-Count'));
}
-
- useEffect(() => {
- handleLoading(true)
- getInfo()
- }, [])
-
- const showMoreUserCollections = (limite) => {
- const limit = limite;
- setLoadingMoreUserColl(true);
- setCurrLimitUserColl(currLimitUserColl + limit)
- const url = `/users/${id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingMoreUserColl(false);
- setEndOfUserColl(true)
- setErrorInUserColl(true)
- }
- else if (data.length >= 1) {
- let currData = [...userCollections];
- currData = [...currData.concat(data)];
- setLoadingMoreUserColl(false);
- setUserCollections(currData);
- }
- else {
- setLoadingMoreUserColl(false);
- setEndOfUserColl(true)
- }
- },
- (error) => {
+ }
+
+ function handleError(error) {
+ handleLoading(false)
+ setErrorInUserColl(true)
+ }
+
+ const getInfo = () => {
+ const urls = [
+ `/users/${id}/collections?offset=0&limit=4`,
+ ]
+ fetchAllRequest(urls, handleSuccess, handleError)
+ }
+
+ useEffect(() => {
+ handleLoading(true)
+ getInfo()
+ }, [])
+
+ const showMoreUserCollections = (limite) => {
+ const limit = limite;
+ setLoadingMoreUserColl(true);
+ setCurrLimitUserColl(currLimitUserColl + limit)
+ const url = `/users/${id}/collections?offset=${currLimitUserColl}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
setLoadingMoreUserColl(false);
setEndOfUserColl(true)
setErrorInUserColl(true)
}
- )
- }
-
- return (
- <>
- {
- loading ?
- (
- <LoadingSpinner text={`Carregando coleções de ${username}`} />
- )
- :
- (
- <PanelTemplateColecao
- title={"Coleções Públicas"}
- length={userCollections.length}
- noContentText={username + " não possui nenhuma coleção."}
- sliceArr={userCollections}
- showMore={showMoreUserCollections}
- loadingMore={loadingMoreUserColl}
- end={endOfUserColl}
- followed={false}
- error={errorInUserColl}
- />
- )
- }
- </>
+ else if (data.length >= 1) {
+ let currData = [...userCollections];
+ currData = [...currData.concat(data)];
+ setLoadingMoreUserColl(false);
+ setUserCollections(currData);
+ }
+ else {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ }
+ },
+ (error) => {
+ setLoadingMoreUserColl(false);
+ setEndOfUserColl(true)
+ setErrorInUserColl(true)
+ }
)
+ }
+
+ return (
+ <>
+ {
+ loading ?
+ (
+ <LoadingSpinner contrast={contrast} text={`Carregando coleções de ${username}`} />
+ )
+ :
+ (
+ <PanelTemplateColecao
+ contrast={contrast}
+ title={"Coleções Públicas"}
+ length={userCollections.length}
+ noContentText={username + " não possui nenhuma coleção."}
+ sliceArr={userCollections}
+ showMore={showMoreUserCollections}
+ loadingMore={loadingMoreUserColl}
+ end={endOfUserColl}
+ followed={false}
+ error={errorInUserColl}
+ />
+ )
+ }
+ </>
+ )
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
index 7965d58e5111ad748a22cdf2672c25f05bc3f3ce..ceba6bcbc9adb4b1d4c9f56f03e0d79ae2bc91d1 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabInicio.js
@@ -60,15 +60,16 @@ export function NoContent(props) {
)
}
-export default function TabInicio({ id, user, learningObjs, collections }) {
+export default function TabInicio({ id, user, learningObjs, collections, contrast }) {
return (
<React.Fragment>
{/*display user description*/}
{
user.description &&
- <UserDescription text={user.description} />
+ <UserDescription contrast={contrast} text={user.description} />
}
<Template
+ contrast={contrast}
length={learningObjs.length}
titleText={learningObjs.length === 1 ? `Último Recurso de ${user.name}` : `Últimos recursos de ${user.name}`}
noContentText={`${user.name} não publicou nenhum recursos ainda`}
@@ -79,6 +80,7 @@ export default function TabInicio({ id, user, learningObjs, collections }) {
error={false}
/>
<PanelTemplateColecao
+ contrast={contrast}
title={`Últimas coleçoes de ${user.name}`}
length={collections.length}
noContentText={`${user.name} não publicou nenhuma coleção ainda`}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
index b8f38e36b55e62c26f5df389ba6b80bbdba6a301..70f07ced9b1ab2e47323e2d5e8dfcb2b16518325 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRecursos.js
@@ -21,7 +21,7 @@ import LoadingSpinner from '../../LoadingSpinner.js'
import Template from '../PanelComponents/TemplateRecurso.js'
import { getRequest } from '../../HelperFunctions/getAxiosConfig'
-export default function TabPanelAtividades({id, username}) {
+export default function TabPanelAtividades({ id, username, contrast }) {
const [loading, handleLoading] = useState(true)
const [errorInLearnObj, setErrorInLearnObj] = useState(false)
@@ -83,13 +83,14 @@ export default function TabPanelAtividades({id, username}) {
{
loading ?
(
- <LoadingSpinner text={`Carregando os recursos de ${username}`} />
+ <LoadingSpinner contrast={contrast} text={`Carregando os recursos de ${username}`} />
)
:
(
[
<React.Fragment>
<Template
+ contrast={contrast}
length={learningObjects.length}
titleText={learningObjects.length === 1 ? `Recurso publicado de ${username}` : `Recursos publicados ${username}`}
noContentText={`${username} ainda não publicou nenhum Recurso!`}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
index 81334d46c6edc88b10c8df88fa0df5366edec587..15492323f74174e8358e1875ea1248937151c023 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/TabRede.js
@@ -16,160 +16,162 @@ 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, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
import PanelTemplateRede from '../PanelComponents/TemplateRede.js'
import { fetchAllRequest, getRequest } from '../../HelperFunctions/getAxiosConfig'
import LoadingSpinner from '../../LoadingSpinner.js'
-export default function TabRede ({id, username}) {
- const [loading, handleLoading] = useState(true)
-
- const [errorInFollowing, setErrorInFollowing] = useState(false)
- const [errorInFollowers, setErrorInFollowers] = useState(false)
-
- const [followingList, setFollowing] = useState([])
- const [currFollowingLimit, setCurrFollowingLimit] = useState(12)
- const [loadingMoreFollowing, setLoadingFollowing] = useState(false)
- const [endOfFollowing, setEndOfFollowing] = useState(false)
-
- const [followersList, setFollowers] = useState([])
- const [currFollowerLimit, setFollowersLimit] = useState(12)
- const [loadingMoreFollowers, setLoadingMoreFollowers] = useState(false)
- const [endOfFollowers, setEndOfFollowers] = useState(false)
-
- const showMoreFollowing = (limite) => {
- setLoadingFollowing(true);
- const limit = limite;
- setCurrFollowingLimit(currFollowingLimit + limit)
- const url = `/users/${id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- setErrorInFollowing(true);
- }
- else if (data.length >= 1) {
- let currData = [...followingList];
- currData = [...currData.concat(data)];
- setLoadingFollowing(false);
- setFollowing(currData);
- }
- else {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- }
- },
- (error) => {
- setLoadingFollowing(false);
- setEndOfFollowing(true);
- setErrorInFollowing(true);
- }
- )
- }
-
- const showMoreFollowers = (limite) => {
- setLoadingMoreFollowers(true);
- const limit = limite;
- setFollowersLimit(currFollowerLimit + limit)
- const url = `/users/${id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
- getRequest(url,
- (data) => {
- if (data.errors) {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true);
- setErrorInFollowers(true);
- }
- else {
- if (data.length >= 1) {
- let currData = [...followersList];
- currData = [...currData.concat(data)];
- setLoadingMoreFollowers(false);
- setFollowers(currData);
- }
- else {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true)
- }
- }
- },
- (error) => {
- setLoadingMoreFollowers(false);
- setEndOfFollowers(true);
- setErrorInFollowers(true);
- }
- )
- }
+export default function TabRede({ id, username, contrast }) {
+ const [loading, handleLoading] = useState(true)
+
+ const [errorInFollowing, setErrorInFollowing] = useState(false)
+ const [errorInFollowers, setErrorInFollowers] = useState(false)
- async function handleSuccess (responseArr, headersArr) {
- setErrorInFollowing(responseArr[0].errors ? true : false) // prevent of crashing the portal, do not remove it
- setErrorInFollowers(responseArr[1].errors ? true : false) // prevent of crashing the portal, do not remove it
- setFollowers(responseArr[0])
- setFollowing(responseArr[1])
+ const [followingList, setFollowing] = useState([])
+ const [currFollowingLimit, setCurrFollowingLimit] = useState(12)
+ const [loadingMoreFollowing, setLoadingFollowing] = useState(false)
+ const [endOfFollowing, setEndOfFollowing] = useState(false)
- if (headersArr[1].has('X-Total-Count')) {
- setEndOfFollowing(headersArr[1].get('X-Total-Count'));
+ const [followersList, setFollowers] = useState([])
+ const [currFollowerLimit, setFollowersLimit] = useState(12)
+ const [loadingMoreFollowers, setLoadingMoreFollowers] = useState(false)
+ const [endOfFollowers, setEndOfFollowers] = useState(false)
+
+ const showMoreFollowing = (limite) => {
+ setLoadingFollowing(true);
+ const limit = limite;
+ setCurrFollowingLimit(currFollowingLimit + limit)
+ const url = `/users/${id}/following/User?offset=${currFollowingLimit}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ setErrorInFollowing(true);
}
- if (headersArr[0].has('X-Total-Count')) {
- setEndOfFollowers(headersArr[0].get('X-Total-Count'));
+ else if (data.length >= 1) {
+ let currData = [...followingList];
+ currData = [...currData.concat(data)];
+ setLoadingFollowing(false);
+ setFollowing(currData);
}
- handleLoading(false)
- }
+ else {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ }
+ },
+ (error) => {
+ setLoadingFollowing(false);
+ setEndOfFollowing(true);
+ setErrorInFollowing(true);
+ }
+ )
+ }
- function handleErrors() {
+ const showMoreFollowers = (limite) => {
+ setLoadingMoreFollowers(true);
+ const limit = limite;
+ setFollowersLimit(currFollowerLimit + limit)
+ const url = `/users/${id}/followers?offset=${currFollowerLimit}&limit=${limit}`;
+ getRequest(url,
+ (data) => {
+ if (data.errors) {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
+ }
+ else {
+ if (data.length >= 1) {
+ let currData = [...followersList];
+ currData = [...currData.concat(data)];
+ setLoadingMoreFollowers(false);
+ setFollowers(currData);
+ }
+ else {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true)
+ }
+ }
+ },
+ (error) => {
setLoadingMoreFollowers(false);
setEndOfFollowers(true);
setErrorInFollowers(true);
+ }
+ )
+ }
+
+ async function handleSuccess(responseArr, headersArr) {
+ setErrorInFollowing(responseArr[0].errors ? true : false) // prevent of crashing the portal, do not remove it
+ setErrorInFollowers(responseArr[1].errors ? true : false) // prevent of crashing the portal, do not remove it
+ setFollowers(responseArr[0])
+ setFollowing(responseArr[1])
+
+ if (headersArr[1].has('X-Total-Count')) {
+ setEndOfFollowing(headersArr[1].get('X-Total-Count'));
+ }
+ if (headersArr[0].has('X-Total-Count')) {
+ setEndOfFollowers(headersArr[0].get('X-Total-Count'));
}
+ handleLoading(false)
+ }
- useEffect( () => {
- handleLoading(true)
-
- const urls = [`/users/${id}/followers`, `/users/${id}/following/User`]
-
- fetchAllRequest(urls, handleSuccess, handleErrors)
- }, [])
-
- return (
- <>
- {
- loading ?
- (
- [
- <LoadingSpinner text={`Carregando dados de ${username}`} />
- ]
- )
- :
- (
- [
- <React.Fragment>
- <PanelTemplateRede
- title={`Seguidores de ${username}`}
- length={followersList.length}
- sliceArr={followersList}
- showMore={showMoreFollowers}
- follower={true}
- end={endOfFollowers}
- loadingMore={loadingMoreFollowers}
- error={errorInFollowers}
- noContentText={username + ' não possui nenhum seguidor'}
- />
-
- <PanelTemplateRede
- title={`${username} está seguindo`}
- length={followingList.length}
- sliceArr={followingList}
- showMore={showMoreFollowing}
- follower={false}
- end={endOfFollowing}
- loadingMore={loadingMoreFollowing}
- error={errorInFollowing}
- noContentText={username + ' não segue nenhum usuário'}
- />
- </React.Fragment>
- ]
- )
- }
- </>
- )
+ function handleErrors() {
+ setLoadingMoreFollowers(false);
+ setEndOfFollowers(true);
+ setErrorInFollowers(true);
+ }
+
+ useEffect(() => {
+ handleLoading(true)
+
+ const urls = [`/users/${id}/followers`, `/users/${id}/following/User`]
+
+ fetchAllRequest(urls, handleSuccess, handleErrors)
+ }, [])
+
+ return (
+ <>
+ {
+ loading ?
+ (
+ [
+ <LoadingSpinner contrast={contrast} text={`Carregando dados de ${username}`} />
+ ]
+ )
+ :
+ (
+ [
+ <React.Fragment>
+ <PanelTemplateRede
+ contrast={contrast}
+ title={`Seguidores de ${username}`}
+ length={followersList.length}
+ sliceArr={followersList}
+ showMore={showMoreFollowers}
+ follower={true}
+ end={endOfFollowers}
+ loadingMore={loadingMoreFollowers}
+ error={errorInFollowers}
+ noContentText={username + ' não possui nenhum seguidor'}
+ />
+
+ <PanelTemplateRede
+ contrast={contrast}
+ title={`${username} está seguindo`}
+ length={followingList.length}
+ sliceArr={followingList}
+ showMore={showMoreFollowing}
+ follower={false}
+ end={endOfFollowing}
+ loadingMore={loadingMoreFollowing}
+ error={errorInFollowing}
+ noContentText={username + ' não segue nenhum usuário'}
+ />
+ </React.Fragment>
+ ]
+ )
+ }
+ </>
+ )
}
diff --git a/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js b/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
index 4fcc273f0a0b3e8ed984f1d831488d8002a978dd..df5fcde96513967e1983154bf666301698ee49ed 100644
--- a/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
+++ b/src/Components/TabPanels/PublicUserPageTabs/UserDescription.js
@@ -19,15 +19,15 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React from 'react'
import styled from 'styled-components'
-export default function UserDescription (props) {
+export default function UserDescription(props) {
return (
- <NoPadBox>
- <ContainerDiv>
- <DivSobre>
- <h3>Sobre</h3>
- <p>{props.text}</p>
- </DivSobre>
- </ContainerDiv>
+ <NoPadBox contrast={props.contrast}>
+ <ContainerDiv>
+ <DivSobre contrast={props.contrast}>
+ <h3>Sobre</h3>
+ <p>{props.text}</p>
+ </DivSobre>
+ </ContainerDiv>
</NoPadBox>
)
}
@@ -49,11 +49,13 @@ const DivSobre = styled.div`
font-family : inherit;
font-weight: 500;
line-height: 1.1;
- color: inherit;
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+
}
p {
margin : 0 0 10px;
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
}
`
@@ -76,9 +78,10 @@ const NoPadBox = styled.div`
margin-right : auto;
margin-left : auto;
padding : 0;
- background-color : #fff;
+ background-color: ${(props) => (props.contrast === "" ? "#f4f4f4" : "black")};
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
margin-bottom : 30px;
+ border: ${(props) => (props.contrast === "" ? "0" : "1px solid white")};
@media screen and (min-width: 768px) {
width : max-content;
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index e853439ae47ad7504232d15d320353098d2db249..cc3dedd506529cb9f1fb53a25eef707f8d2e2498 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -16,75 +16,101 @@ 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, useContext } from 'react'
-import { Store } from '../Store'
-import styled from 'styled-components'
-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'
-import FollowingButton from '../Components/ContactButtons/FollowingButton.js'
-import FollowersCountButton from '../Components/ContactButtons/FollowersCountButton.js'
+import React, { useEffect, useState, useContext } from "react";
+import { Store } from "../Store";
+import styled from "styled-components";
+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";
+import FollowingButton from "../Components/ContactButtons/FollowingButton.js";
+import FollowersCountButton from "../Components/ContactButtons/FollowersCountButton.js";
import noAvatar from "../img/default_profile.png";
-import Tab from '@material-ui/core/Tab';
-import TabInicio from '../Components/TabPanels/PublicUserPageTabs/TabInicio.js'
-import TabRecursos from '../Components/TabPanels/PublicUserPageTabs/TabRecursos.js'
-import TabColecoes from '../Components/TabPanels/PublicUserPageTabs/TabColecoes.js'
-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 Typography from '@material-ui/core/Typography';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import LoadingSpinner from '../Components/LoadingSpinner';
-import Button from '@material-ui/core/Button'
-import { Link } from 'react-router-dom'
+import Tab from "@material-ui/core/Tab";
+import TabInicio from "../Components/TabPanels/PublicUserPageTabs/TabInicio.js";
+import TabRecursos from "../Components/TabPanels/PublicUserPageTabs/TabRecursos.js";
+import TabColecoes from "../Components/TabPanels/PublicUserPageTabs/TabColecoes.js";
+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 Typography from "@material-ui/core/Typography";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import LoadingSpinner from "../Components/LoadingSpinner";
+import Button from "@material-ui/core/Button";
+import { Link } from "react-router-dom";
function RenderFollowContainer(props) {
- const { state } = useContext(Store)
- const [followed, setFollowed] = useState(props.followed)
- const toggleFollowed = () => { setFollowed(!followed) }
+ const { state } = useContext(Store);
+ const [followed, setFollowed] = useState(props.followed);
+ const toggleFollowed = () => {
+ setFollowed(!followed);
+ };
return (
<FollowContainer>
<>
- {
- (props.id !== state.currentUser.id) &&
- followed ?
- (
- <FollowingButton followedID={props.id} toggleFollowed={toggleFollowed} />
- )
- :
- (
- <FollowButton followerID={props.id} toggleFollowed={toggleFollowed} />
- )
- }
- <FollowersCountButton followCount={props.followCount} />
+ {props.id !== state.currentUser.id && followed ? (
+ <FollowingButton
+ contrast={state.contrast}
+ followedID={props.id}
+ toggleFollowed={toggleFollowed}
+ />
+ ) : (
+ <FollowButton contrast={state.contrast} followerID={props.id} toggleFollowed={toggleFollowed} />
+ )}
+ <FollowersCountButton contrast={state.contrast} followCount={props.followCount} />
</>
</FollowContainer>
- )
+ );
}
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>
- )
-}
+ );
+};
-const RenderUserProfileInfo = (userName) => {
+const RenderUserProfileInfo = (userName, contrast) => {
return (
- <UserProfileInfoDiv>
+ <UserProfileInfoDiv contrast={contrast}>
<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>
</UserProfileInfoDiv>
- )
-}
+ );
+};
const RenderCheckTeacher = (submitter_request) => {
if (submitter_request === "accepted") {
@@ -94,247 +120,336 @@ const RenderCheckTeacher = (submitter_request) => {
<span>
<img alt="" src={CheckDecagram} />
</span>
- Professor(a)
- </p>
+ Professor(a)
+ </p>
</CheckTeacherDiv>
- )
+ );
}
-}
+};
export default function PublicUserPage(props) {
/*currentUser info variables--------------------------------------*/
- const { state } = useContext(Store)
+ const { state } = useContext(Store);
/*user info variables--------------------------------------*/
const WIDTH = window.innerWidth;
- const [id, setId] = useState(props.match.params.userId)
+ const [id, setId] = useState(props.match.params.userId);
const [loading, setLoading] = useState(false);
- const [userData, setUserData] = useState({})
+ const [userData, setUserData] = useState({});
const fillUserInfo = (data) => {
- setUserData(data)
- }
+ setUserData(data);
+ };
/*---------------------------------------------------------*/
const [following, setFollowing] = useState(0);
const fillFollowing = (data) => {
if (data)
if (data.errors)
- setFollowing('Você precisa logar para ver o que usuário está ');
- else
- setFollowing(data.length);
- }
+ setFollowing("Você precisa logar para ver o que usuário está ");
+ else setFollowing(data.length);
+ };
/*content control variables--------------------------------*/
// eslint-disable-next-line
- const [tabs, setTabs] = useState([
- 'Início', 'Recursos', 'Coleções', 'Rede'
- ])
+ const [tabs, setTabs] = useState(["Início", "Recursos", "Coleções", "Rede"]);
const [tabValue, setTabValue] = useState(0);
const handleChangeTab = (event, newValue) => {
- setTabValue(newValue)
- }
+ setTabValue(newValue);
+ };
/*---------------------------------------------------------*/
/*content variables--------------------------------*/
- const [learningObjArr, setLearningObjects] = useState([])
- const handleLearningObjects = (data) => { setLearningObjects(data) }
- const [collectionsArr, setCollections] = useState([])
- const handleCollections = (data) => { setCollections(data) }
+ const [learningObjArr, setLearningObjects] = useState([]);
+ const handleLearningObjects = (data) => {
+ setLearningObjects(data);
+ };
+ const [collectionsArr, setCollections] = useState([]);
+ const handleCollections = (data) => {
+ setCollections(data);
+ };
/*---------------------------------------------------------*/
function handleSuccess(responseArr) {
- fillUserInfo(responseArr[0])
+ fillUserInfo(responseArr[0]);
- handleLearningObjects(responseArr[1])
+ handleLearningObjects(responseArr[1]);
- handleCollections(responseArr[2])
+ handleCollections(responseArr[2]);
- fillFollowing(responseArr[3])
+ fillFollowing(responseArr[3]);
setLoading(false);
}
/*Component Will Mount*/
useEffect(() => {
- const id = props.match.params.userId
- setId(id)
- const urls = [`/users/${id}`, `/users/${id}/learning_objects`, `/users/${id}/collections`, `/users/${id}/following/User`]
+ const id = props.match.params.userId;
+ setId(id);
+ const urls = [
+ `/users/${id}`,
+ `/users/${id}/learning_objects`,
+ `/users/${id}/collections`,
+ `/users/${id}/following/User`,
+ ];
setLoading(true);
- fetchAllRequest(urls, handleSuccess, (error) => { console.log(error) })
- }, [state.currentUser.id, props.match.params.userId])
+ fetchAllRequest(urls, handleSuccess, (error) => {
+ console.log(error);
+ });
+ }, [state.currentUser.id, props.match.params.userId]);
/*---------------------------------------------------------*/
if (loading)
- return <LoadingSpinner text="Carregando dados do usuário..." />
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <LoadingSpinner
+ contrast={state.contrast}
+ text="Carregando dados do usuário..."
+ />
+ </div>
+ );
else if (!userData && !following && !learningObjArr && !collectionsArr)
- return <UserNotFoundDiv>
- <Grid container direction='column' justify='center' alignItems='center' spacing={1}>
- <Grid item>
- <p className="not-found">
- O usuário não foi encontrado em nossa base de dados.
- </p>
- </Grid>
- <Grid item>
- <Link className="link" to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}>
- <Button
- variant='contained'
- className="back-button"
+ return (
+ <UserNotFoundDiv contrast={state.contrast}>
+ <Grid
+ container
+ direction="column"
+ justify="center"
+ alignItems="center"
+ spacing={1}
+ >
+ <Grid item>
+ <p className="not-found">
+ O usuário não foi encontrado em nossa base de dados.
+ </p>
+ </Grid>
+ <Grid item>
+ <Link
+ className="link"
+ to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}
>
- Voltar para a busca de usuários.
- </Button>
- </Link>
+ <Button variant="contained" className="back-button">
+ Voltar para a busca de usuários.
+ </Button>
+ </Link>
+ </Grid>
</Grid>
- </Grid>
- </UserNotFoundDiv>
+ </UserNotFoundDiv>
+ );
else
- return <React.Fragment>
- <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]]}
+ return (
+ <React.Fragment>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
+ rel="stylesheet"
/>
- <Grid container spacing={2}>
- <Grid item xs={12}>
- <div style={{ padding: "10px 0 8px 0" }}>
- <UserProfileContainer>
- <HeaderContainer>
- <>
- {!loading && <RenderFollowContainer followed={userData.followed} id={id} followCount={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>
- {
- WIDTH <= 501 ?
- <Grid style={{ marginTop: '4em' }} container justify="center" alignItems="center" direction="column">
+ <BackgroundDiv contrast={state.contrast}>
+ <CustomizedBreadcrumbs contrast={state.contrast} values={["Usuário Público", tabs[tabValue]]} />
+ <Grid container spacing={2}>
+ <Grid item xs={12}>
+ <div style={{ padding: "10px 0 8px 0" }}>
+ <UserProfileContainer>
+ <HeaderContainer contrast={state.contrast}>
+ <>
+ {!loading && (
+ <RenderFollowContainer
+ followed={userData.followed}
+ id={id}
+ followCount={userData.follows_count}
+ />
+ )}
+ {RenderProfileAvatar(
+ userData.avatar ? userData.avatar : undefined
+ )}
+ <CoverContainer contrast={state.contrast}>
+ {userData.cover && (
+ <img
+ src={apiDomain + userData.cover}
+ alt=""
+ style={{
+ width: "100%",
+ height: "100%",
+ objectFit: "cover",
+ }}
+ />
+ )}
+ </CoverContainer>
+ {WIDTH <= 501
+ ? null
+ : RenderUserProfileInfo(userData.name, state.contrast)}
+ </>
+ </HeaderContainer>
+ {WIDTH <= 501 ? (
+ <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={{ textAlign: "center" }}>
- {
- userData.name
- }
+ <Typography
+ variant="h4"
+ gutterBottom
+ style={state.contrast === "" ? { textAlign: "center" } : { color: "white", 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
+ 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 variant="h6" style={{ textAlign: 'center' }}>
- {
- loading ?
- <CircularProgress size={20} /> :
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
`${userData.follows_count} seguidores`
- }
+ )}
</Typography>
</Grid>
<Grid item>
- <Typography variant="h6" style={{ textAlign: 'center' }} >
- {
- loading ?
- <CircularProgress size={20} /> :
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
`${following} seguindo`
- }
+ )}
</Typography>
</Grid>
</Grid>
</Grid>
- :
- RenderCheckTeacher(userData.submitter_request)}
- <RodapeDiv>
- <NavBarContentContainer>
- <StyledTabs
- value={tabValue}
- onChange={handleChangeTab}
- indicatorColor="primary"
- textColor="primary"
- variant="scrollable"
- scrollButtons="desktop"
- TabIndicatorProps={{ style: { background: "#00bcd4" } }}
- >
- {
- tabs.map((tab) =>
- <Tab label={tab} key={tab}
- disabled={(tab === "Recursos" && learningObjArr.length === 0) || (tab === "Coleções" && collectionsArr.length === 0) || (tab === "Rede" && state.currentUser.id === '')}
+ ) : (
+ RenderCheckTeacher(userData.submitter_request)
+ )}
+ <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
+ label={tab}
+ key={tab}
+ disabled={
+ (tab === "Recursos" &&
+ learningObjArr.length === 0) ||
+ (tab === "Coleções" &&
+ collectionsArr.length === 0) ||
+ (tab === "Rede" && state.currentUser.id === "")
+ }
/>
- )
- }
- </StyledTabs>
- </NavBarContentContainer>
- <ReportButton className="report-button" complainableId={userData.id} complainableType={"User"} />
- </RodapeDiv>
- </UserProfileContainer>
- </div>
- </Grid>
-
- {
- !loading &&
- <Grid item xs={12}>
- {tabValue === 0 &&
- <TabInicio id={id} user={userData} learningObjs={learningObjArr} collections={collectionsArr} />}
- {tabValue === 1 &&
- <TabRecursos id={id} username={userData.name} />}
- {tabValue === 2 &&
- <TabColecoes id={id} username={userData.name} />}
- {tabValue === 3 &&
- <TabRede id={id} username={userData.name} />}
+ ))}
+ </StyledTabs>
+ </NavBarContentContainer>
+ <ReportButton
+ className="report-button"
+ complainableId={userData.id}
+ complainableType={"User"}
+ />
+ </RodapeDiv>
+ </UserProfileContainer>
+ </div>
</Grid>
- }
- </Grid>
- </BackgroundDiv>
- </React.Fragment>
-}
+ {!loading && (
+ <Grid item xs={12}>
+ {tabValue === 0 && (
+ <TabInicio
+ contrast={state.contrast}
+ id={id}
+ user={userData}
+ learningObjs={learningObjArr}
+ collections={collectionsArr}
+ />
+ )}
+ {tabValue === 1 && (
+ <TabRecursos contrast={state.contrast} id={id} username={userData.name} />
+ )}
+ {tabValue === 2 && (
+ <TabColecoes contrast={state.contrast} id={id} username={userData.name} />
+ )}
+ {tabValue === 3 && <TabRede contrast={state.contrast} id={id} username={userData.name} />}
+ </Grid>
+ )}
+ </Grid>
+ </BackgroundDiv>
+ </React.Fragment>
+ );
+}
const ProfileAvatarDiv = styled.div`
- overflow : hidden;
- border-radius : 100%;
- bottom : -10px;
- left : 20px;
- z-index : 10;
- box-sizing : content-box;
- position : absolute;
- width : 150px;
- height : 150px;
- 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;
- }
-`
+ overflow: hidden;
+ border-radius: 100%;
+ bottom: -10px;
+ left: 20px;
+ z-index: 10;
+ box-sizing: content-box;
+ position: absolute;
+ width: 150px;
+ height: 150px;
+ 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;
+ }
+`;
const UserNotFoundDiv = styled.div`
- margin: 1em;
-
- .not-found{
- font-family: 'Roboto', sans-serif;
- font-weight: 500;
- text-align: left;
- padding: 0;
- margin: 0;
- }
+ padding: 1em;
+ background-color: ${(props) => (props.contrast === "" ? "#f4f4f4" : "black")};
- .back-button{
- background-color: #00bcd4;
- color: whitesmoke;
+ .not-found {
+ font-family: "Roboto", sans-serif;
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ font-weight: 500;
+ text-align: left;
+ padding: 0;
+ margin: 0;
}
- .link{
- text-decoration: none;
+ .back-button {
+ background-color: ${(props) =>
+ props.contrast === "" ? "#00bcd4" : "black"};
+ color: ${(props) => (props.contrast === "" ? "whitesmoke" : "yellow")};
+ border: ${(props) => (props.contrast === "" ? "none" : "1px solid white")};
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none" : "underline"};
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ text-decoration: ${(props) =>
+ props.contrast === "" ? "none" : "underline"};
+ }
}
-`
+`;
const FollowContainer = styled.div`
- padding : 4px 10px;
- right : 0;
- position : absolute;
- z-index : 1;
-`
\ No newline at end of file
+ padding: 4px 10px;
+ right: 0;
+ position: absolute;
+ z-index: 1;
+`;