fixed comments of collection page

src/Components/CollectionCommentSection.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, { useRef, useState, useEffect, Fragment, useContext } from 'react';
+import React, { useRef, useState, useEffect, Fragment } from 'react';
 import { Grid } from '@material-ui/core';
 import Card from '@material-ui/core/Card';
 import Button from '@material-ui/core/Button';
@@ -33,11 +33,10 @@ import SignUpModal from './SignUpModal.js';
 import LoginModal from './LoginModal.js';
 import SnackBarComponent from './SnackbarComponent';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { apiDomain } from '../env';
-import { Store } from '../Store'
+import IconButton from '@material-ui/core/IconButton';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 
 export default function CollectionCommentSection(props) {
-	const { state } = useContext(Store)
 	const [post_snack_open, setPostSnackOpen] = useState(false);
 	const [delete_snack_open, setDeleteSnackOpen] = useState(false);
 	const [render_state, setRenderState] = useState(false);
@@ -164,9 +163,22 @@ export default function CollectionCommentSection(props) {
 		);
 	}
 
+	function handleSuccessGet(data, headers) {
+		setReviews((previousState) => previousState.concat(data));
+		setIsLoading(false);
+	}
+
+	function handleFailGet(error) {
+		console.log(error); setIsLoading(false)
+	}
+
 	useEffect(() => {
 		setIsLoading(true)
-		getRequest(`/collections/${props.id}/reviews`, (data) => { setReviews(data); setIsLoading(false) }, (error) => { console.log(error); setIsLoading(false) })
+		getRequest(
+			`/collections/${props.id}/reviews`,
+			handleSuccessGet,
+			(error) => { handleFailGet(error) }
+		)
 	}, [render_state]);
 
 	return (
@@ -198,7 +210,7 @@ export default function CollectionCommentSection(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' }}>
-											<Avatar src={apiDomain + state.currentUser.avatar} alt="user avatar" />
+											<Avatar src={props.avatar} alt="user avatar" />
 										</div>
 									</Grid>
 									<Grid item xs={12} sm={10}>
@@ -276,6 +288,17 @@ const ComentariosBox = styled.div`
         padding : 20px 0;
         border-bottom : 1px solid #f4f4f4;
     }
+
+		.load-more{
+			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 Avatar = styled.img`

src/Components/ResourcePageComponents/CommentsArea.js

@@ -32,6 +32,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 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';
 
 function Alert(props) {
     return <MuiAlert elevation={6} variant="filled" {...props} />;
@@ -101,7 +102,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={apiDomain + state.currentUser.avatar} 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}>

src/Pages/CollectionPage.js

@@ -32,6 +32,7 @@ import { Store } from '../Store.js';
 import Button from '@material-ui/core/Button';
 import { getRequest } from '../Components/HelperFunctions/getAxiosConfig.js';
 import noAvatar from '../img/default_profile.png';
+import { apiDomain } from '../env.js';
 
 export default function CollectionPage(props) {
 	const { state } = useContext(Store);
@@ -90,7 +91,7 @@ export default function CollectionPage(props) {
 						<CollectionAuthor
 							author_id={collection.owner.id ? collection.owner.id : 0}
 							name={collection.owner.name ? collection.owner.name : ""}
-							imgsrc={collection.owner.avatar ? collection.owner.avatar : noAvatar} />
+							imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} />
 					</Grid>
 
 
@@ -148,6 +149,7 @@ export default function CollectionPage(props) {
 						<CollectionCommentSection
 							id={collection_id}
 							currentUserId={state.currentUser.id}
+							avatar={state.currentUser.avatar ? apiDomain + state.currentUser.avatar : noAvatar}
 						/>
 					</Grid>
 				</Grid>