From f5d8e55e00718b38ece54bb4f2a4946a2fdaf599 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Mon, 23 Aug 2021 17:29:18 -0300
Subject: [PATCH] Commit before merge, implementing contrast and fixing
comments pagination
---
src/Components/AreasSubPagesFunction.js | 616 +++++++-------
src/Components/CollectionCommentSection.js | 9 +-
src/Components/Comment.js | 756 +++++++++---------
src/Components/CriarColecaoForm.js | 8 +-
src/Components/CriarColecaoModal.js | 1 +
src/Components/ModalExcluirComentario.js | 62 +-
.../ResourcePageComponents/CommentsArea.js | 9 +-
.../SearchPageComponents/HeaderFilters.js | 271 ++++---
8 files changed, 884 insertions(+), 848 deletions(-)
diff --git a/src/Components/AreasSubPagesFunction.js b/src/Components/AreasSubPagesFunction.js
index dfc41b40..7078cb08 100644
--- a/src/Components/AreasSubPagesFunction.js
+++ b/src/Components/AreasSubPagesFunction.js
@@ -74,7 +74,7 @@ function ReqResources(props) {
var aux = []
var resources_per_page = objectsPerPage()
for (let i = 0; i < 12 / resources_per_page; i++) {
- aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
+ aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
}
setRows(aux)
setIsLoading(false)
@@ -91,7 +91,7 @@ function ReqResources(props) {
isLoading ?
<Grid container justify="center" alignItems="center" style={{ margin: "2em" }} >
<Grid item>
- <CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
+ <CircularProgress size={24} style={props.contrast === "" ? { color: "#ff7f00" } : { color: "yellow" }} />
</Grid>
</Grid>
:
@@ -124,9 +124,9 @@ function ReqResources(props) {
))
:
<Grid container justify="center" alignItems="center">
- <Grid item>
- <img src={RecursoVazio} alt="Não há recursos" />
- </Grid>
+ <Grid item>
+ <img src={RecursoVazio} alt="Não há recursos" />
+ </Grid>
</Grid>
}
</Carousel>
@@ -142,7 +142,7 @@ function ReqCollections(props) {
var aux = []
var collections_per_page = objectsPerPage()
for (let i = 0; i < 12 / collections_per_page; i++) {
- aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
+ aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
}
setIsLoading(false)
setRows(aux)
@@ -159,43 +159,44 @@ function ReqCollections(props) {
isLoading ?
<Grid container justify="center" alignItems="center" style={{ marginTop: "2em" }}>
<Grid item>
- <CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
+ <CircularProgress size={24} style={props.contrast === "" ? { color: "#673ab7" } : { color: "yellow" }} />
</Grid>
</Grid>
:
rows.length >= 1 ?
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- {
- rows.map((row, index) => (
- <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
- {row.map((card) => (
- <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
- <CollectionCardFunction
- contrast={props.contrast}
- name={card.name}
- tags={card.tags}
- rating={card.score}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? card.owner.avatar : ""}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner ? card.owner.id : ""}
- />
- </div>
- ))}
- </Row>
- ))}
+ {
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center", minHeight: "50px" }} key={(index + 1)}>
+ {row.map((card) => (
+ <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
+ <CollectionCardFunction
+ contrast={props.contrast}
+ name={card.name}
+ tags={card.tags}
+ rating={card.score}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner ? card.owner.id : ""}
+ />
+ </div>
+ ))}
+ </Row>
+ ))
+ }
</Carousel>
:
<Grid container justify="center" alignItems="center">
- <Grid item>
- <img src={ColecaoVazia} alt="Não há coleções" />
- </Grid>
+ <Grid item>
+ <img src={ColecaoVazia} alt="Não há coleções" />
+ </Grid>
</Grid>
)
}
@@ -216,103 +217,105 @@ function TabRecurso({ contrast }) {
return (
<React.Fragment>
- <div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
- <StyledTab container contrast={contrast}>
- <Grid item md={3} xs={12}>
- <img
- src={recursos}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Recursos Educacionais Digitais
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <div className={`${contrast}BackColor`}>
- <Container style={{ padding: "20px" }}>
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- style={{
- paddingBottom: "5px",
- borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
- color: contrast === "" ? "#ff7f00" : "white",
- }}
- >
- <Grid item>
- <p
- style={{ margin: 0, padding: 0 }}
- >
+ <div style={{ backgroundColor: contrast === "" ? "#ff7f00" : "black", position: "relative" }}>
+ <StyledTab container contrast={contrast}>
+ <Grid item md={3} xs={12}>
+ <img
+ src={recursos}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
{
- `Recursos ${currOrder}`
+ window.innerWidth <= 501 &&
+ <h4>
+ Recursos Educacionais Digitais
+ </h4>
}
- </p>
- </Grid>
-
- <Grid item>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <p style={{ margin: 0, padding: 0 }}>
- Ordenar por:
- </p>
- </Grid>
- <Grid item>
- <TextField
- select
- fullWidth
- value={currValue}
- variant="outlined"
- className={contrast === "Contrast" && classes.contrastTextField}
- >
- {ordenar.map((option) => (
- <MenuItem
- key={option.value}
- value={option.value}
- name={option.value}
- onClick={() => {
- setCurrOrder(option.label)
- setCurrValue(option.value)
- }}
- >
- <span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
- {option.label}
- </span>
- </MenuItem>
- ))}
- </TextField>
- </Grid>
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
</Grid>
- </Grid>
- </Grid>
- <Hidden sm xs>
- <ReqResources order={currValue} contrast={contrast} />
- </Hidden>
- <Visible sm xs>
- <ReqResources order={currValue} contrast={contrast} />
- </Visible>
- </Container>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
+ </div>
+ }
+ </StyledTab>
</div>
- }
+ {
+ window.innerWidth > 501 &&
+ <div className={`${contrast}BackColor`}>
+ <Container style={{ padding: "20px" }}>
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ style={{
+ paddingBottom: "5px",
+ borderBottom: contrast === "" ? "1px solid #ff7f00" : "1px solid white",
+ color: contrast === "" ? "#ff7f00" : "white",
+ }}
+ >
+ <Grid item>
+ <p
+ style={{ margin: 0, padding: 0 }}
+ >
+ {
+ `Recursos ${currOrder}`
+ }
+ </p>
+ </Grid>
+
+ <Grid item>
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid item>
+ <p style={{ margin: 0, padding: 0 }}>
+ Ordenar por:
+ </p>
+ </Grid>
+ <Grid item>
+ <StyledTextField
+ contrast={contrast}
+ select
+ fullWidth
+ value={currValue}
+ variant="outlined"
+ className={contrast === "Contrast" && classes.contrastTextField}
+ >
+ {ordenar.map((option) => (
+ <StyledMenuItem
+ contrast={contrast}
+ key={option.value}
+ value={option.value}
+ name={option.value}
+ onClick={() => {
+ setCurrOrder(option.label)
+ setCurrValue(option.value)
+ }}
+ >
+ <span style={currValue === option.value ? { color: contrast === "" ? "#ff7f00" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
+ {option.label}
+ </span>
+ </StyledMenuItem>
+ ))}
+ </StyledTextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <Hidden sm xs>
+ <ReqResources order={currValue} contrast={contrast} />
+ </Hidden>
+ <Visible sm xs>
+ <ReqResources order={currValue} contrast={contrast} />
+ </Visible>
+ </Container>
+ </div>
+ }
</React.Fragment>
)
}
@@ -333,99 +336,101 @@ function TabColecoes({ contrast }) {
return (
<React.Fragment>
- <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
- <StyledTab container contrast={contrast}>
- <Grid item md={3} xs={12}>
- <img
- src={colecoes}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Coleções dos Usuários
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <div className={`${contrast}BackColor`}>
- <Container style={{ padding: "20px" }}>
- <Grid
- container
- direction="row"
- justify="space-between"
- alignItems="center"
- style={{
- paddingBottom: "5px",
- borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
- color: contrast === "" ? "#673ab7" : "white",
- }}
- >
- <Grid item>
- <p
- style={{ margin: 0, padding: 0 }}
- >
+ <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
+ <StyledTab container contrast={contrast}>
+ <Grid item md={3} xs={12}>
+ <img
+ src={colecoes}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
{
- `Coleções ${currOrder}`
+ window.innerWidth <= 501 &&
+ <h4>
+ Coleções dos Usuários
+ </h4>
}
- </p>
- </Grid>
-
- <Grid item>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <p style={{ margin: 0, padding: 0 }}>
- Ordenar por:
- </p>
+ <Grid item md={6} xs={12}>
+ <p>
+ { text}
+ </p>
</Grid>
- <Grid item>
- <TextField
- select
- fullWidth
- value={currValue}
- variant="outlined"
- className={contrast === "Contrast" && classes.contrastTextField}
- >
- {ordenar.map((option) => (
- <MenuItem
- key={option.value}
- value={option.value}
- name={option.value}
- style={contrast === "" ? {} : { backgroundColor: "black" }}
- onClick={() => {
- setCurrOrder(option.label)
- setCurrValue(option.value)
- }}
- >
- <span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
- {option.label}
- </span>
- </MenuItem>
- ))}
- </TextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- <ReqCollections order={currValue} contrast={contrast} />
- </Container>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/busca?page=0&results_per_page=12&order=review_average&query=*&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
+ </div>
+ }
+ </StyledTab>
</div>
- }
+ {
+ window.innerWidth > 501 &&
+ <div className={`${contrast}BackColor`}>
+ <Container style={{ padding: "20px" }}>
+ <Grid
+ container
+ direction="row"
+ justify="space-between"
+ alignItems="center"
+ style={{
+ paddingBottom: "5px",
+ borderBottom: contrast === "" ? "1px solid #673ab7" : "1px solid white",
+ color: contrast === "" ? "#673ab7" : "white",
+ }}
+ >
+ <Grid item>
+ <p
+ style={{ margin: 0, padding: 0 }}
+ >
+ {
+ `Coleções ${currOrder}`
+ }
+ </p>
+ </Grid>
+
+ <Grid item>
+ <Grid container direction="row" alignItems="center" spacing={1}>
+ <Grid item>
+ <p style={{ margin: 0, padding: 0 }}>
+ Ordenar por:
+ </p>
+ </Grid>
+ <Grid item>
+ <StyledTextField
+ contrast={contrast}
+ select
+ fullWidth
+ value={currValue}
+ variant="outlined"
+ className={contrast === "Contrast" && classes.contrastTextField}
+ >
+ {ordenar.map((option) => (
+ <StyledMenuItem
+ contrast={contrast}
+ key={option.value}
+ value={option.value}
+ name={option.value}
+ style={contrast === "" ? {} : { backgroundColor: "black" }}
+ onClick={() => {
+ setCurrOrder(option.label)
+ setCurrValue(option.value)
+ }}
+ >
+ <span style={currValue === option.value ? { color: contrast === "" ? "#673ab7" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "500" } : { color: contrast === "" ? "" : "yellow", textDecoration: contrast === "" ? "none" : "underline", fontWeight: "lighter" }} >
+ {option.label}
+ </span>
+ </StyledMenuItem>
+ ))}
+ </StyledTextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ <ReqCollections order={currValue} contrast={contrast} />
+ </Container>
+ </div>
+ }
</React.Fragment>
)
}
@@ -442,96 +447,96 @@ function TabMateriais({ contrast }) {
const handleExpandMaterial = (id) => {
if (id !== currMaterial.material.id)
- setCurrMaterial({
- open: true,
- material: { ...materials[id] }
- })
+ setCurrMaterial({
+ open: true,
+ material: { ...materials[id] }
+ })
else {
- setCurrMaterial({
- open: false,
- material: {}
- })
+ setCurrMaterial({
+ open: false,
+ material: {}
+ })
}
}
return (
<React.Fragment>
- <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
- <StyledTab container contrast={contrast}>
- <Grid item md={3} xs={12}>
- <img
- src={materiais}
- alt="aba recursos"
- style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
- />
- </Grid>
- {
- window.innerWidth <= 501 &&
- <h4>
- Materiais de formação
- </h4>
- }
- <Grid item md={6} xs={12}>
- <p>
- {text}
- </p>
- </Grid>
- {
- window.innerWidth <= 501 &&
- <div style={{ display: "flex", justifyContent: "center" }}>
- <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
- </div>
- }
- </StyledTab>
- </div>
- {
- window.innerWidth > 501 &&
- <div className={`${contrast}BackColor`}>
- <Container style={{ padding: "20px" }}>
- <p
- style={{
- paddingBottom: "5px",
- borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
- color: contrast === "" ? "#e81f4f" : "white",
- }}
- >
- Materiais mais recentes{" "}
- </p>
- <Carousel
- style={{ padding: "20px" }}
- showThumbs={false}
- infiniteLoop={true}
- showStatus={false}
- >
- <Row>
+ <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
+ <StyledTab container contrast={contrast}>
+ <Grid item md={3} xs={12}>
+ <img
+ src={materiais}
+ alt="aba recursos"
+ style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
+ />
+ </Grid>
{
- materials.map((material, index) => {
- return (
- <Col md={3} key={index}>
- <MaterialCard
- contrast={contrast}
- name={material.name}
- thumb={material.img}
- score={material.score}
- modules={material.topics}
- handleExpand={handleExpandMaterial}
- id={index}
- />
- </Col>
- )
- })
+ window.innerWidth <= 501 &&
+ <h4>
+ Materiais de formação
+ </h4>
}
- </Row>
- </Carousel>
- {
- currMaterial.open ?
- <ExpandedMaterial contrast={contrast} material={currMaterial.material} />
- :
- null
- }
- </Container>
+ <Grid item md={6} xs={12}>
+ <p>
+ {text}
+ </p>
+ </Grid>
+ {
+ window.innerWidth <= 501 &&
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
+ </div>
+ }
+ </StyledTab>
</div>
- }
+ {
+ window.innerWidth > 501 &&
+ <div className={`${contrast}BackColor`}>
+ <Container style={{ padding: "20px" }}>
+ <p
+ style={{
+ paddingBottom: "5px",
+ borderBottom: contrast === "" ? "1px solid #e81f4f" : "1px solid white",
+ color: contrast === "" ? "#e81f4f" : "white",
+ }}
+ >
+ Materiais mais recentes{" "}
+ </p>
+ <Carousel
+ style={{ padding: "20px" }}
+ showThumbs={false}
+ infiniteLoop={true}
+ showStatus={false}
+ >
+ <Row>
+ {
+ materials.map((material, index) => {
+ return (
+ <Col md={3} key={index}>
+ <MaterialCard
+ contrast={contrast}
+ name={material.name}
+ thumb={material.img}
+ score={material.score}
+ modules={material.topics}
+ handleExpand={handleExpandMaterial}
+ id={index}
+ />
+ </Col>
+ )
+ })
+ }
+ </Row>
+ </Carousel>
+ {
+ currMaterial.open ?
+ <ExpandedMaterial contrast={contrast} material={currMaterial.material} />
+ :
+ null
+ }
+ </Container>
+ </div>
+ }
</React.Fragment >
)
}
@@ -614,3 +619,18 @@ const StyledTab = styled(Grid)`
}
`
+
+const StyledMenuItem = styled(MenuItem)`
+ background-color: ${props => props.contrast === "" ? "" : "black !important"};
+`
+
+const StyledTextField = styled(TextField)`
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+`
\ No newline at end of file
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index add5ab75..64f74b22 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -41,7 +41,7 @@ import { Comentarios } from "ImportImages.js";
export default function CollectionCommentSection(props) {
const [post_snack_open, setPostSnackOpen] = useState(false);
const [delete_snack_open, setDeleteSnackOpen] = useState(false);
- const [render_state, setRenderState] = useState(false);
+ const [render_state, setRenderState] = useState(0);
const [sign_up_open, setSignUpOpen] = useState(false);
const [log_in_open, setLoginOpen] = useState(false);
const [is_loading, setIsLoading] = useState(false);
@@ -56,7 +56,7 @@ export default function CollectionCommentSection(props) {
const [currPageReviews, setCurrPageReviews] = useState(0);
const comment_ref = useRef(null);
- const forceUpdate = () => { setRenderState(!render_state); }
+ const forceUpdate = () => { setCurrPageReviews(0); setRenderState(render_state + 1); }
const handlePostSnackbar = () => {
setPostSnackOpen(!post_snack_open);
@@ -192,7 +192,10 @@ export default function CollectionCommentSection(props) {
}
function handleSuccessGet(data, headers) {
- setReviews((previousState) => previousState.concat(data));
+ if (currPageReviews !== 0)
+ setReviews((previousState) => previousState.concat(data));
+ else
+ setReviews(data);
if (headers.has('X-Total-Count'))
setTotalReviews(headers.get('X-Total-Count'))
setIsLoading(false);
diff --git a/src/Components/Comment.js b/src/Components/Comment.js
index 24abed09..1a5c5196 100644
--- a/src/Components/Comment.js
+++ b/src/Components/Comment.js
@@ -36,424 +36,412 @@ import { makeStyles } from "@material-ui/styles";
import { noAvatar } from "ImportImages.js";
const useStyles = makeStyles((theme) => ({
- darkTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "white",
- width: "100%",
- },
- lightTextField: {
- maxWidth: "100%",
- fontSize: "15px",
- fontWeight: "lighter",
- color: "black",
- width: "100%",
- },
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "white",
+ width: "100%",
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ fontWeight: "lighter",
+ color: "black",
+ width: "100%",
+ },
}));
export default function Comment(props) {
- /*
- Required props:
- rerenderCallback = callback function to trigger re-render on parent component
- reviewRatings = required to update comment even though the user cannot update their rating score...
- objectID = collection/learning object id
- reviewID = self-explanatory I hope
- authorID = author id; links to public user page
- authorAvatar = either a string denoting the author's avatar file location or null
- rating = star rating
- name = title (?)
- authorName = author username
- description = the user comment itself
- createdAt
- recurso : boolean; determines whether to display orange or purple font
- */
- var moment = require("moment");
- const classes = useStyles();
- const { state } = useContext(Store);
- const [displayedComment, setDisplayedComment] = useState(props.description);
- const [editando, setEditando] = useState(false);
- const [anchorEl, setAnchorEl] = React.useState(null);
- const handleClick = (event) => {
- setAnchorEl(event.currentTarget);
- };
- const handleClose = () => {
- setAnchorEl(null);
- };
- const [modalOpen, toggleModal] = useState(false);
-
- const [comment, setComment] = useState({
- error: false,
- value: props.description,
- });
- const handleChange = (e) => {
- const userInput = e.target.value;
- const flag = userInput.length === 0 ? true : false;
- setComment({ ...comment, error: flag, value: userInput });
- };
-
- function handleOnSuccessfulComment(data) {
- setDisplayedComment(comment.value);
- setEditando(false);
- props.handlePost();
- }
-
- const updateComment = () => {
- const finalComment = comment;
- let url;
-
- if (props.isCollection)
- url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
- else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
-
- if (!finalComment.error) {
- let payload = {
- review: {
- description: finalComment.value,
- review_ratings_attributes: props.reviewRatings,
- },
- };
- putRequest(url, payload, handleOnSuccessfulComment, (error) => {
- console.log(error);
- });
+ var moment = require("moment");
+ const classes = useStyles();
+ const { state } = useContext(Store);
+ const [displayedComment, setDisplayedComment] = useState(props.description);
+ const [editando, setEditando] = useState(false);
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ const handleClick = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+ const [modalOpen, toggleModal] = useState(false);
+
+ const [comment, setComment] = useState({
+ error: false,
+ value: props.description,
+ });
+ const handleChange = (e) => {
+ const userInput = e.target.value;
+ const flag = userInput.length === 0 ? true : false;
+ setComment({ ...comment, error: flag, value: userInput });
+ };
+
+ function handleOnSuccessfulComment(data) {
+ setDisplayedComment(comment.value);
+ setEditando(false);
+ props.handlePost();
}
- };
- function handleSuccessDeleteComment(data) {
- props.rerenderCallback();
- props.handleSnackbar(3);
- }
+ const updateComment = () => {
+ const finalComment = comment;
+ let url;
+
+ if (props.isCollection)
+ url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
+ else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
+
+ if (!finalComment.error) {
+ let payload = {
+ review: {
+ description: finalComment.value,
+ review_ratings_attributes: props.reviewRatings,
+ },
+ };
+ putRequest(url, payload, handleOnSuccessfulComment, (error) => {
+ console.log(error);
+ });
+ }
+ };
+
+ function handleSuccessDeleteComment(data) {
+ props.rerenderCallback();
+ props.handleSnackbar(3);
+ }
- const deleteComment = () => {
- let url;
+ const deleteComment = () => {
+ let url;
- if (props.isCollection)
- url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
- else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
+ if (props.isCollection)
+ url = `/collections/${props.objectID}/reviews/${props.reviewID}`;
+ else url = `/learning_objects/${props.objectID}/reviews/${props.reviewID}`;
- deleteRequest(url, handleSuccessDeleteComment, (error) => {
- console.log(error);
- });
+ deleteRequest(url, handleSuccessDeleteComment, (error) => {
+ console.log(error);
+ });
- toggleModal(false);
- };
- if (props.authorID)
- return (
- <React.Fragment>
- <ModalExcluir
- open={modalOpen}
- handleClose={() => {
- toggleModal(false);
- }}
- handleConfirm={deleteComment}
- />
- <Grid container style={{ paddingLeft: "20px" }}>
- <Grid item xs={1}>
- {props.authorID && (
- <AvatarDiv>
- <Link to={"/usuario-publico/" + props.authorID}>
- <img
- src={
- props.authorAvatar
- ? apiDomain + props.authorAvatar
- : noAvatar
- }
- alt="author avatar"
- />
- </Link>
- </AvatarDiv>
- )}
- </Grid>
-
- <Grid item xs={10}>
- <Comentario contrast={state.contrast}>
- <div className="star-rating-container">
- <Rating
- name="read-only"
- value={props.rating}
- readOnly
- size="small"
- style={
- state.contrast === ""
- ? { color: "#666" }
- : { color: "yellow" }
- }
- emptyIcon={
- <StarBorderIcon
- fontSize="inherit"
- style={
- state.contrast === ""
- ? { color: "#a5a5a5" }
- : { color: "yellow" }
- }
- />
- }
+ toggleModal(false);
+ };
+
+ if (props.authorID)
+ return (
+ <React.Fragment>
+ <ModalExcluir
+ contrast={state.contrast}
+ open={modalOpen}
+ handleClose={() => {
+ toggleModal(false);
+ }}
+ handleConfirm={deleteComment}
/>
- </div>
-
- {props.name && <strong>{props.name}</strong>}
-
- <div>
- {editando ? (
- <React.Fragment>
- <div style={{ marginTop: "5%", padding: "2px" }}>
- <StyledTextField
- contrast={props.contrast}
- colecao={!props.recurso}
- id="input-comentario"
- label={"Editar Comentário"}
- margin="normal"
- value={comment.value}
- InputProps={
- props.contrast === ""
- ? { className: classes.lightTextField }
- : { className: classes.darkTextField }
- }
- variant="outlined"
- multiline={true}
- rows="5"
- onChange={(e) => {
- handleChange(e);
- }}
- style={{ width: "100%" }}
- />
- </div>
- <div style={{ float: "right" }}>
- <StyledButton
- contrast={state.contrast}
- style={
- state.contrast === ""
- ? props.recurso
- ? { backgroundColor: "#ff7f00" }
- : { backgroundColor: "#673ab7" }
- : {
- backgroundColor: "black",
- border: "1px solid white",
- textDecoration: "underline",
- }
- }
- onClick={() => {
- setEditando(false);
- }}
- >
- Fechar
- </StyledButton>
- <StyledButton
- contrast={state.contrast}
- style={
- state.contrast === ""
- ? props.recurso
- ? { backgroundColor: "#ff7f00" }
- : { backgroundColor: "#673ab7" }
- : {
- backgroundColor: "black",
- border: "1px solid white",
- textDecoration: "underline",
- }
- }
- onClick={() => updateComment()}
- >
- Salvar
- </StyledButton>
- </div>
- </React.Fragment>
- ) : (
- <React.Fragment>
- <p>
+ <Grid container style={{ paddingLeft: "20px" }}>
+ <Grid item xs={1}>
{props.authorID && (
- <Link
- to={"/usuario-publico/" + props.authorID}
- style={{
- fontWeight: "bolder",
- color:
- state.contrast === ""
- ? props.recurso
- ? "#ff7f00"
- : "#673ab7"
- : "white",
- }}
- >
- {props.authorName}
- </Link>
+ <AvatarDiv>
+ <Link to={"/usuario-publico/" + props.authorID}>
+ <img
+ src={
+ props.authorAvatar
+ ? apiDomain + props.authorAvatar
+ : noAvatar
+ }
+ alt="author avatar"
+ />
+ </Link>
+ </AvatarDiv>
)}
- : {displayedComment}
- </p>
- <span className="date">
- {moment(props.createdAt).format("DD/MM/YYYY")}
- </span>
- </React.Fragment>
- )}
- </div>
- </Comentario>
- </Grid>
-
- {props.authorID === state.currentUser.id && (
- <Grid item xs={1}>
- <StyledDiv>
- <Button onClick={handleClick}>
- <EditIcon
- style={state.contrast === "" ? {} : { color: "white" }}
- />
- </Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <MenuItem
- style={
- state.contrast === ""
- ? {}
- : {
- backgroundColor: "black",
- color: "yellow",
- textDecoration: "underline",
- }
- }
- onClick={() => {
- setEditando(true);
- handleClose();
- }}
- >
- Editar
- </MenuItem>
- <MenuItem
- style={
- state.contrast === ""
- ? {}
- : {
- backgroundColor: "black",
- color: "yellow",
- textDecoration: "underline",
- }
- }
- onClick={() => {
- toggleModal(true);
- handleClose();
- }}
- >
- Excluir
- </MenuItem>
- </Menu>
- </StyledDiv>
+ </Grid>
+
+ <Grid item xs={10}>
+ <Comentario contrast={state.contrast}>
+ <div className="star-rating-container">
+ <Rating
+ name="read-only"
+ value={props.rating}
+ readOnly
+ size="small"
+ style={
+ state.contrast === ""
+ ? { color: "#666" }
+ : { color: "yellow" }
+ }
+ emptyIcon={
+ <StarBorderIcon
+ fontSize="inherit"
+ style={
+ state.contrast === ""
+ ? { color: "#a5a5a5" }
+ : { color: "yellow" }
+ }
+ />
+ }
+ />
+ </div>
+
+ {props.name && <strong>{props.name}</strong>}
+
+ <div>
+ {editando ? (
+ <React.Fragment>
+ <div style={{ marginTop: "5%", padding: "2px" }}>
+ <StyledTextField
+ contrast={props.contrast}
+ colecao={!props.recurso}
+ id="input-comentario"
+ label={"Editar Comentário"}
+ margin="normal"
+ value={comment.value}
+ InputProps={
+ props.contrast === ""
+ ? { className: classes.lightTextField }
+ : { className: classes.darkTextField }
+ }
+ variant="outlined"
+ multiline={true}
+ rows="5"
+ onChange={(e) => {
+ handleChange(e);
+ }}
+ style={{ width: "100%" }}
+ />
+ </div>
+ <div style={{ float: "right" }}>
+ <StyledButton
+ contrast={state.contrast}
+ style={
+ state.contrast === ""
+ ? props.recurso
+ ? { backgroundColor: "#ff7f00" }
+ : { backgroundColor: "#673ab7" }
+ : {
+ backgroundColor: "black",
+ border: "1px solid white",
+ textDecoration: "underline",
+ }
+ }
+ onClick={() => {
+ setEditando(false);
+ }}
+ >
+ Fechar
+ </StyledButton>
+ <StyledButton
+ contrast={state.contrast}
+ style={
+ state.contrast === ""
+ ? props.recurso
+ ? { backgroundColor: "#ff7f00" }
+ : { backgroundColor: "#673ab7" }
+ : {
+ backgroundColor: "black",
+ border: "1px solid white",
+ textDecoration: "underline",
+ }
+ }
+ onClick={() => updateComment()}
+ >
+ Salvar
+ </StyledButton>
+ </div>
+ </React.Fragment>
+ ) : (
+ <React.Fragment>
+ <p>
+ {props.authorID && (
+ <Link
+ to={"/usuario-publico/" + props.authorID}
+ style={{
+ fontWeight: "bolder",
+ color:
+ state.contrast === ""
+ ? props.recurso
+ ? "#ff7f00"
+ : "#673ab7"
+ : "white",
+ }}
+ >
+ {props.authorName}
+ </Link>
+ )}
+ : {displayedComment}
+ </p>
+ <span className="date">
+ {moment(props.createdAt).format("DD/MM/YYYY")}
+ </span>
+ </React.Fragment>
+ )}
+ </div>
+ </Comentario>
+ </Grid>
+
+ {props.authorID === state.currentUser.id && (
+ <Grid item xs={1}>
+ <StyledDiv>
+ <Button onClick={handleClick}>
+ <EditIcon
+ style={state.contrast === "" ? {} : { color: "white" }}
+ />
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <MenuItem
+ style={
+ state.contrast === ""
+ ? {}
+ : {
+ backgroundColor: "black",
+ color: "yellow",
+ textDecoration: "underline",
+ }
+ }
+ onClick={() => {
+ setEditando(true);
+ handleClose();
+ }}
+ >
+ Editar
+ </MenuItem>
+ <MenuItem
+ style={
+ state.contrast === ""
+ ? {}
+ : {
+ backgroundColor: "black",
+ color: "yellow",
+ textDecoration: "underline",
+ }
+ }
+ onClick={() => {
+ toggleModal(true);
+ handleClose();
+ }}
+ >
+ Excluir
+ </MenuItem>
+ </Menu>
+ </StyledDiv>
+ </Grid>
+ )}
+ </Grid>
+ </React.Fragment>
+ );
+ else
+ return (
+ <Grid
+ container
+ style={{ paddingLeft: "20px" }}
+ justify="center"
+ alignItems="center "
+ >
+ <Grid item xs={1}>
+ {
+ <AvatarDiv>
+ <img src={noAvatar} alt="author avatar" />
+ </AvatarDiv>
+ }
+ </Grid>
+
+ <Grid item xs={10}>
+ <Comentario contrast={state.contrast}>
+ <p>O usuário que fez esse comentário deletou a conta.</p>
+ </Comentario>
+ </Grid>
</Grid>
- )}
- </Grid>
- </React.Fragment>
- );
- else
- return (
- <Grid
- container
- style={{ paddingLeft: "20px" }}
- justify="center"
- alignItems="center "
- >
- <Grid item xs={1}>
- {
- <AvatarDiv>
- <img src={noAvatar} alt="author avatar" />
- </AvatarDiv>
- }
- </Grid>
-
- <Grid item xs={10}>
- <Comentario contrast={state.contrast}>
- <p>O usuário que fez esse comentário deletou a conta.</p>
- </Comentario>
- </Grid>
- </Grid>
- );
+ );
}
const StyledTextField = styled(TextField)`
- .MuiInputBase-root {
- margin-bottom: 5px;
- }
-
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${(props) =>
- props.contrast === ""
- ? props.colecao
- ? "#673ab7"
- : "rgb(255,127,0)"
- : "yellow"};
+ .MuiInputBase-root {
+ margin-bottom: 5px;
+ }
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
+ }
+ fieldset {
+ border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ }
}
- fieldset {
- border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+
+ label {
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
}
- }
- label {
- color: ${(props) => (props.contrast === "" ? "#666" : "white")};
- }
+ label.Mui-focused {
+ color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
+ }
- label.Mui-focused {
- color: ${(props) =>
- props.contrast === ""
- ? props.colecao
- ? "#673ab7"
- : "rgb(255,127,0)"
- : "yellow"};
- }
-
- label.Mui-focused.Mui-error {
- color: red;
- }
-
- width: 95%;
+ label.Mui-focused.Mui-error {
+ color: red;
+ }
+
+ width: 95%;
`;
const StyledDiv = styled.div`
- text-align: center;
- .MuiButton-root {
- @media screen and (max-width: 990px) {
- padding-right: 35px !important;
+ text-align: center;
+ .MuiButton-root {
+ @media screen and (max-width: 990px) {
+ padding-right: 35px !important;
+ }
}
- }
`;
const StyledButton = styled(Button)`
- color: ${(props) =>
- props.contrast === ""
- ? "rgba(255,255,255,0.87) !important"
- : "yellow !important"};
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
- margin: 6px 8px !important;
- font-weight: 600 !important;
- :hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+ color: ${(props) =>
+ props.contrast === ""
+ ? "rgba(255,255,255,0.87) !important"
+ : "yellow !important"};
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+ margin: 6px 8px !important;
+ font-weight: 600 !important;
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`;
const Comentario = styled.div`
- padding-left: 55px !important;
- font-size: 14px;
- color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
+ padding-left: 55px !important;
+ font-size: 14px;
+ color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
- .star-rating-container {
- width: 100px;
- }
+ .star-rating-container {
+ width: 100px;
+ }
- p {
- margin: 0 0 10px;
- padding-left: 2px;
- }
+ p {
+ margin: 0 0 10px;
+ padding-left: 2px;
+ }
- a {
- text-decoration: none !important;
- }
+ a {
+ text-decoration: none !important;
+ }
- .date {
- color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
- font-size: 12px;
- font-weight: lighter;
- padding-left: 3px;
- }
+ .date {
+ color: ${(props) => (props.contrast === "" ? "#ababab" : "white")};
+ font-size: 12px;
+ font-weight: lighter;
+ padding-left: 3px;
+ }
`;
const AvatarDiv = styled.div`
diff --git a/src/Components/CriarColecaoForm.js b/src/Components/CriarColecaoForm.js
index 2aa9f41c..63795cdb 100644
--- a/src/Components/CriarColecaoForm.js
+++ b/src/Components/CriarColecaoForm.js
@@ -138,15 +138,15 @@ export const ButtonCancelar = styled(Button)`
padding-right : 16px !important;
font-weight : 500 !important;
border-radius : 3px !important;
- color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
+ color: ${props => props.contrast === "" ? "#666" : "white"} !important;
background-color: transparent;
min-width : 88px !important;
height : 36px !important;
`
export const ButtonEnviar = styled(Button)`
- background-color: ${props => props.contrast === "" ? "#673ab7 !important" : "black !important"};
- color: ${props => props.contrast === "" ? "#fff !important" : "yellow !important"};
+ background-color: ${props => props.contrast === "" ? "#673ab7" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 36px !important;
@@ -158,7 +158,7 @@ export const ButtonEnviar = styled(Button)`
min-width : 88px !important;
vertical-align : middle !important;
margin : 6px 8px !important;
- text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
:hover{
background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
diff --git a/src/Components/CriarColecaoModal.js b/src/Components/CriarColecaoModal.js
index ee7a10c1..82b6749b 100644
--- a/src/Components/CriarColecaoModal.js
+++ b/src/Components/CriarColecaoModal.js
@@ -111,6 +111,7 @@ const Container = styled.div`
box-sizing : border-box;
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
background-color: ${props => props.contrast === "" ? "white" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
align-items : center;
display : flex;
flex-direction : column;
diff --git a/src/Components/ModalExcluirComentario.js b/src/Components/ModalExcluirComentario.js
index 1345ee36..2217e2eb 100644
--- a/src/Components/ModalExcluirComentario.js
+++ b/src/Components/ModalExcluirComentario.js
@@ -4,6 +4,7 @@ import Fade from '@material-ui/core/Fade';
import styled from 'styled-components'
import { Button } from '@material-ui/core';
import Backdrop from '@material-ui/core/Backdrop';
+import CloseIcon from '@material-ui/icons/Close';
const StyledModal = styled(Modal)`
margin : 0 !important;
@@ -29,7 +30,9 @@ const HeaderDiv = styled.div`
`
const ContentContainer = styled.div`
box-sizing : border-box;
- background-color : white;
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
max-width : none;
min-wdith : 240px;
align : center;
@@ -38,9 +41,8 @@ const ContentContainer = styled.div`
box-shadow : 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)!important;
`
const ButtonCancelar = styled(Button)`
- background-color : rgba(158,158,158,0.2) !important;
- color : #666 !important;
- text-decoration : none !important;
+ color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
outline : none !important;
text-align : center !important;
margin : 0 8px !important;
@@ -48,13 +50,32 @@ const ButtonCancelar = styled(Button)`
`
const ButtonConfirmar = styled(Button)`
- background-color : #ff7f00 !important;
- color : #fff !important;
+ background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
+ color: ${props => props.contrast === "" ? "#fff" : "yellow"} !important;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
border-radius : 3px !important;
margin : 0 8px !important;
font-weight : 600 !important;
`
+const StyledCloseModalButton = styled(Button)`
+ display : inline-block;
+ position : relative;
+ margin-right : -8px !important;
+ background : transparent !important;
+ min-width: 0 !important;
+ width : 40px;
+`
+
+function CloseModalButton(props) {
+ return (
+ <StyledCloseModalButton onClick={props.handleClose}>
+ <CloseIcon style={props.contrast === "" ? { color: "#666" } : { color: "white" }} />
+ </StyledCloseModalButton>
+ )
+}
+
export default function ModalExcluir (props) {
const text = {
header : "Tem certeza que deseja excluir este comentário?",
@@ -63,32 +84,33 @@ export default function ModalExcluir (props) {
return (
<StyledModal
- aria-labelledby="transition-modal-title"
- aria-describedby="transition-modal-description"
- open={props.open}
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={props.open}
- centered="true"
- onClose={props.handleClose}
- closeAfterTransition
- BackdropComponent={Backdrop}
- BackdropProps={{
- timeout: 500,
- }}
+ centered="true"
+ onClose={props.handleClose}
+ closeAfterTransition
+ BackdropComponent={Backdrop}
+ BackdropProps={{
+ timeout: 500,
+ }}
>
<Fade in={props.open}>
- <ContentContainer>
+ <ContentContainer contrast={props.contrast}>
<HeaderDiv>
<h3 style={{fontSize : "24px", margin : "20px 15px 10px", fontWeight : "normal"}}>
{text.header}
</h3>
+ <CloseModalButton handleClose={props.handleClose} contrast={props.contrast} />
</HeaderDiv>
<div style={{display : "flex", flexDirection : "column", padding : "20px 30px"}}>
<div style={{marginTop : "0", textAlign : "center", marginBottom : "20px"}}>
- <span style={{fontSize : "14px", color : "#666"}}>{text.explanation}</span>
+ <span style={{fontSize : "14px"}}>{text.explanation}</span>
</div>
<div style={{display : "flex", flexDirection : "row", justifyContent: "center"}}>
- <ButtonCancelar onClick={props.handleClose}>CANCELAR</ButtonCancelar>
- <ButtonConfirmar onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
+ <ButtonCancelar contrast={props.contrast} onClick={props.handleClose}>CANCELAR</ButtonCancelar>
+ <ButtonConfirmar contrast={props.contrast} onClick={props.handleConfirm}> EXCLUIR </ButtonConfirmar>
</div>
</div>
</ContentContainer>
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 9fef634c..043e3ad0 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -49,7 +49,7 @@ export default function CommentsArea(props) {
const [totalReviews, setTotalReviews] = useState(0);
const [currPageReviews, setCurrPageReviews] = useState(0);
const [gambiarra, setState] = useState(0)
- const forceUpdate = () => { setState(gambiarra + 1) }
+ const forceUpdate = () => { setCurrPageReviews(0); setState(gambiarra + 1); }
const [loginOpen, setLogin] = useState(false)
const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
const [signUpOpen, setSignUp] = useState(false)
@@ -112,7 +112,10 @@ export default function CommentsArea(props) {
function handleSuccess(data, headers) {
setIsLoading(false)
- setComentarios((previous) => previous.concat(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)))
+ if (currPageReviews !== 0)
+ setComentarios((previous) => previous.concat(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)))
+ else
+ setComentarios(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1))
if (headers.has('X-Total-Count'))
setTotalReviews(headers.get('X-Total-Count'))
}
@@ -326,7 +329,7 @@ const LogInToComment = styled.div`
`
const GrayContainer = styled.div`
- background-color: ${props => props.contrast === "" ? "#fafafa" : "black"};
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
font-weight : 400;
font-size : 14px;
padding-bottom : 20px;
diff --git a/src/Components/SearchPageComponents/HeaderFilters.js b/src/Components/SearchPageComponents/HeaderFilters.js
index b92c85c1..a1d5f834 100644
--- a/src/Components/SearchPageComponents/HeaderFilters.js
+++ b/src/Components/SearchPageComponents/HeaderFilters.js
@@ -6,156 +6,155 @@ import TextField from '@material-ui/core/TextField';
import MenuItem from '@material-ui/core/MenuItem';
export default function HeaderFilters({ options, contrast, orders, currOption, currOrder, handleChangeOption, handleChangeOrder }) {
+ if (currOption !== 'User')
+ return (
+ <FiltersPaper contrast={contrast} elevation={4} square>
+ <Grid className="gridStyle" container direction='row' alignItems='center'>
+ <Grid item xs={12} sm={6}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label contrast={contrast}>
+ Buscar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <StyledTextField
+ contrast={contrast}
+ select
+ fullWidth
+ value={currOption}
+ onChange={handleChangeOption}
+ variant="outlined"
+ >
+ {options.map((option) => (
+ <StyledMenuItem
+ contrast={contrast}
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ <span style={currOption === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ {option.value}
+ </span>
+ </StyledMenuItem>
+ ))}
+ </StyledTextField>
+ </Grid>
+ </Grid>
+ </Grid>
- if (currOption !== 'User')
- return (
- <FiltersPaper contrast={contrast} elevation={4} square>
- <Grid className="gridStyle" container direction='row' alignItems='center'>
- <Grid item xs={12} sm={6}>
- <Grid container alignItems='center'>
- <Grid item xs={12} md={2}>
- <Label contrast={contrast}>
- Buscar por:
- </Label>
- </Grid>
- <Grid item xs={12} md={10}>
- <StyledTextField
- contrast={contrast}
- select
- fullWidth
- value={currOption}
- onChange={handleChangeOption}
- variant="outlined"
- >
- {options.map((option) => (
- <StyledMenuItem
- contrast={contrast}
- key={option.value}
- value={option.name}
- name={option.value}
- >
- <span style={currOption === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
- {option.value}
- </span>
- </StyledMenuItem>
- ))}
- </StyledTextField>
- </Grid>
- </Grid>
- </Grid>
-
- <Grid item xs={12} sm={6}>
- <Grid container alignItems='center'>
- <Grid item xs={12} md={2}>
- <Label contrast={contrast}>
- Ordenar por:
- </Label>
- </Grid>
- <Grid item xs={12} md={10}>
- <StyledTextField
- contrast={contrast}
- select
- fullWidth
- value={currOrder}
- onChange={handleChangeOrder}
- variant="outlined"
- >
- {orders.map((option) => (
- <StyledMenuItem
- contrast={contrast}
- color={option.color}
- key={option.value}
- value={option.name}
- name={option.value}
- >
- <span style={currOrder === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
- {option.value}
- </span>
- </StyledMenuItem>
- ))}
- </StyledTextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid >
- </FiltersPaper >
- )
- else
- return (
- <FiltersPaper contrast={contrast} elevation={4} square>
- <Grid className="gridStyle" container direction='row' alignItems='center'>
- <Grid item xs={12}>
- <Grid container alignItems='center'>
- <Grid item xs={12} md={2}>
- <Label contrast={contrast}>
- Buscar por:
- </Label>
- </Grid>
- <Grid item xs={12} md={10}>
- <StyledTextField
- contrast={contrast}
- select
- fullWidth
- value={currOption}
- onChange={handleChangeOption}
- variant="outlined"
- >
- {options.map((option) => (
- <StyledMenuItem
- contrast={contrast}
- color={option.color}
- key={option.value}
- value={option.name}
- name={option.value}
- >
- <span style={currOption === option.name ? { color: option.color, textDecoration: "none", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
- {option.value}
- </span>
- </StyledMenuItem>
- ))}
- </StyledTextField>
- </Grid>
- </Grid>
- </Grid>
- </Grid>
- </FiltersPaper >
- )
+ <Grid item xs={12} sm={6}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label contrast={contrast}>
+ Ordenar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <StyledTextField
+ contrast={contrast}
+ select
+ fullWidth
+ value={currOrder}
+ onChange={handleChangeOrder}
+ variant="outlined"
+ >
+ {orders.map((option) => (
+ <StyledMenuItem
+ contrast={contrast}
+ color={option.color}
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ <span style={currOrder === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ {option.value}
+ </span>
+ </StyledMenuItem>
+ ))}
+ </StyledTextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid >
+ </FiltersPaper >
+ )
+ else
+ return (
+ <FiltersPaper contrast={contrast} elevation={4} square>
+ <Grid className="gridStyle" container direction='row' alignItems='center'>
+ <Grid item xs={12}>
+ <Grid container alignItems='center'>
+ <Grid item xs={12} md={2}>
+ <Label contrast={contrast}>
+ Buscar por:
+ </Label>
+ </Grid>
+ <Grid item xs={12} md={10}>
+ <StyledTextField
+ contrast={contrast}
+ select
+ fullWidth
+ value={currOption}
+ onChange={handleChangeOption}
+ variant="outlined"
+ >
+ {options.map((option) => (
+ <StyledMenuItem
+ contrast={contrast}
+ color={option.color}
+ key={option.value}
+ value={option.name}
+ name={option.value}
+ >
+ <span style={currOption === option.name ? { color: option.color, textDecoration: "underline", fontWeight: "500" } : { color: option.color, textDecoration: "underline", fontWeight: "lighter" }}>
+ {option.value}
+ </span>
+ </StyledMenuItem>
+ ))}
+ </StyledTextField>
+ </Grid>
+ </Grid>
+ </Grid>
+ </Grid>
+ </FiltersPaper >
+ )
}
const Label = styled.p`
- text-align: center;
- font-weight: 600;
- color: ${props => props.contrast === "" ? "" : "white"};
+ text-align: center;
+ font-weight: 600;
+ color: ${props => props.contrast === "" ? "" : "white"};
`
const StyledTextField = styled(TextField)`
-.MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
}
`
const StyledMenuItem = styled(MenuItem)`
- background: ${props => props.contrast === "" ? "" : "black !important"};
+ background-color: ${props => props.contrast === "" ? "" : "black !important"};
`
const FiltersPaper = styled(Paper)`
- text-align: center;
- margin-top: 5px;
- margin-bottom: 30px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ text-align: center;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
- .textInfo{
- text-align: start;
- }
+ .textInfo{
+ text-align: start;
+ }
- .gridStyle{
- padding: 0.5em 1em;
- background: ${props => props.contrast === "" ? "#fff" : "black"};
- }
+ .gridStyle{
+ padding: 0.5em 1em;
+ background: ${props => props.contrast === "" ? "#fff" : "black"};
+ }
`;
\ No newline at end of file
--
GitLab