Develop

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%;