Merge branch 'fix_pagination_comments' into 'Develop'

Fixed pagination comments

See merge request portalmec/portalmec-react!67

src/Components/CollectionCommentSection.js

@@ -50,6 +50,8 @@ export default function CollectionCommentSection(props) {
 		color: ''
 	});
 	const [reviews, setReviews] = useState([]);
+	const [totalReviews, setTotalReviews] = useState(0);
+	const [currPageReviews, setCurrPageReviews] = useState(0);
 	const comment_ref = useRef(null);
 
 	const forceUpdate = () => { setRenderState(!render_state); }
@@ -100,6 +102,20 @@ export default function CollectionCommentSection(props) {
 		return <MuiAlert elevation={6} variant="filled" {...props} />;
 	}
 
+	function handleLoadMoreReviews() {
+		if (reviews.length !== parseInt(totalReviews))
+			setCurrPageReviews((previous) => previous + 1)
+		else {
+			const info = {
+				open: true,
+				text: 'Não há mais comentários para carregar.',
+				severity: 'warning',
+				color: '',
+			}
+			handleSnackInfo(info)
+		}
+	}
+
 	const NoCommentsMessage = () => {
 		const NoCommentsContainer = styled.div`
 			text-align: center;
@@ -136,7 +152,7 @@ export default function CollectionCommentSection(props) {
 	const CollectionComments = () => {
 		return (
 			<ComentariosBox>
-				<h3>{reviews.length} {reviews.length !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
+				<h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
 				{reviews.map(r => {
 					return (
 						<div className="comentario-template" key={r.created_at}>
@@ -159,27 +175,34 @@ export default function CollectionCommentSection(props) {
 						</div>
 					);
 				})}
+				<div className="load-more">
+					<IconButton className="button" onClick={handleLoadMoreReviews}>
+						<KeyboardArrowDownIcon />
+					</IconButton>
+				</div>
 			</ComentariosBox>
 		);
 	}
 
 	function handleSuccessGet(data, headers) {
 		setReviews((previousState) => previousState.concat(data));
+		if (headers.has('X-Total-Count'))
+			setTotalReviews(headers.get('X-Total-Count'))
 		setIsLoading(false);
 	}
 
 	function handleFailGet(error) {
-		console.log(error); setIsLoading(false)
+		setIsLoading(false)
 	}
 
 	useEffect(() => {
 		setIsLoading(true)
 		getRequest(
-			`/collections/${props.id}/reviews`,
+			`/collections/${props.id}/reviews?page=${currPageReviews}`,
 			handleSuccessGet,
 			(error) => { handleFailGet(error) }
 		)
-	}, [render_state]);
+	}, [render_state, currPageReviews]);
 
 	return (
 		<CommentAreaContainer container xs={12} direction="row" justify="center" alignItems="center">
@@ -290,6 +313,7 @@ const ComentariosBox = styled.div`
     }
 
 		.load-more{
+			width: 100%;
 			display: flex; 
 			flex-direction: row;
 			justify-content: center; 

src/Components/ResourcePageComponents/CommentsArea.js

@@ -33,6 +33,9 @@ import SignUpModal from './../SignUpModal'
 import MuiAlert from '@material-ui/lab/Alert';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import noAvatar from '../../img/default_profile.png';
+import IconButton from '@material-ui/core/IconButton';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import SnackBarComponent from '../../Components/SnackbarComponent';
 
 function Alert(props) {
     return <MuiAlert elevation={6} variant="filled" {...props} />;
@@ -41,12 +44,35 @@ function Alert(props) {
 export default function CommentsArea(props) {
     const { state } = useContext(Store)
     const [comentarios, setComentarios] = useState([])
+    const [totalReviews, setTotalReviews] = useState(0);
+    const [currPageReviews, setCurrPageReviews] = useState(0);
     const [gambiarra, setState] = useState(0)
     const forceUpdate = () => { setState(gambiarra + 1) }
     const [loginOpen, setLogin] = useState(false)
     const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
     const [signUpOpen, setSignUp] = useState(false)
     const [isLoading, setIsLoading] = useState(false)
+    const [snackInfo, setSnackInfo] = useState({
+        open: false,
+        text: '',
+        severity: '',
+        color: ''
+    });
+
+    function handleSnackInfo(info) {
+        setSnackInfo({
+            ...info
+        })
+    }
+
+    function handleCloseSnack() {
+        setSnackInfo({
+            open: false,
+            text: '',
+            severity: '',
+            color: '',
+        })
+    }
 
     const handleSignUp = () => {
         setSignUp(!signUpOpen)
@@ -68,19 +94,42 @@ export default function CommentsArea(props) {
         handleSuccessfulLogin(false);
     }
 
-    function handleSuccess(data) {
+    function handleLoadMoreReviews() {
+        if (comentarios.length !== parseInt(totalReviews))
+            setCurrPageReviews((previous) => previous + 1)
+        else {
+            const info = {
+                open: true,
+                text: 'Não há mais comentários para carregar.',
+                severity: 'warning',
+                color: '',
+            }
+            handleSnackInfo(info)
+        }
+    }
+
+    function handleSuccess(data, headers) {
         setIsLoading(false)
-        setComentarios(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1))
+        setComentarios((previous) => previous.concat(data.sort((a, b) => a.updated_at > b.updated_at ? -1 : 1)))
+        if (headers.has('X-Total-Count'))
+            setTotalReviews(headers.get('X-Total-Count'))
     }
 
     useEffect(() => {
         setIsLoading(true)
-        const url = `/learning_objects/${props.recursoId}/reviews`
+        const url = `/learning_objects/${props.recursoId}/reviews?page=${currPageReviews}`
         getRequest(url, handleSuccess, (error) => { console.log(error); setIsLoading(false) })
-    }, [gambiarra])
+    }, [gambiarra, currPageReviews])
 
     return (
         <React.Fragment>
+            <SnackBarComponent
+                snackbarOpen={snackInfo.open}
+                handleClose={handleCloseSnack}
+                severity={snackInfo.severity}
+                text={snackInfo.text}
+                color={snackInfo.color}
+            />
             <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar}
                 anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
             >
@@ -102,7 +151,7 @@ export default function CommentsArea(props) {
                                     <Grid container style={{ paddingTop: "20px" }} spacing={1}>
                                         <Grid item xs={12} sm={2} style={{ paddingLeft: "15px", paddingRight: "15px" }}>
                                             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                                                <img src={ state.currentUser.avatar ? apiDomain + state.currentUser.avatar : noAvatar} className="minha-imagem" alt="user avatar" />
+                                                <img src={state.currentUser.avatar ? apiDomain + state.currentUser.avatar : noAvatar} className="minha-imagem" alt="user avatar" />
                                             </div>
                                         </Grid>
                                         <Grid item xs={12} sm={10}>
@@ -135,10 +184,10 @@ export default function CommentsArea(props) {
                             <CircularProgress className="loading" />
                         </LoadingDiv>
                         :
-                        comentarios.length !== 0 ?
+                        totalReviews !== 0 ?
                             (
                                 <ComentariosBox>
-                                    <h3>{comentarios.length} {comentarios.length !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
+                                    <h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
                                     {
                                         comentarios.map(comentario =>
                                             <div className="comentario-template" key={comentario.id}>
@@ -162,6 +211,11 @@ export default function CommentsArea(props) {
                                             </div>
                                         )
                                     }
+                                    <div className="load-more">
+                                        <IconButton className="button" onClick={handleLoadMoreReviews}>
+                                            <KeyboardArrowDownIcon />
+                                        </IconButton>
+                                    </div>
                                 </ComentariosBox>
                             )
                             :
@@ -216,6 +270,18 @@ const ComentariosBox = styled.div`
         padding : 20px 0;
         border-bottom : 1px solid #f4f4f4;
     }
+
+	.load-more{
+		width: 100%;
+		display: flex; 
+		flex-direction: row;
+		justify-content: center; 
+		align-items: center;
+	}
+		
+	.button{
+		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+	}
 `
 const AoRelatar = styled.div`
     width : 70%;

src/Components/SnackbarComponent.js

@@ -25,7 +25,7 @@ export default function SnackbarComponent(props) {
         <Snackbar open={props.snackbarOpen} autoHideDuration={3000} onClose={props.handleClose}
             anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
         >
-            <Alert severity={props.severity} style={props.color ? { backgroundColor: props.color } : { backgroundColor: "#00acc1" }}>
+            <Alert severity={props.severity}>
                 {props.text}
             </Alert>
         </Snackbar>