Hello,

In the components/Posts/Post/Post.js file there is a Button embedded into a ButtonBase component that creates a warning and also destroys the Home page where these components are used via the Posts component.

The warning says this: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

If I change the ButtonBase to a simple div (it loses a lot of styling) the edit button is still unusable because it registers the parent divs onClick first.

import React, { useState } from "react"
import { Card, CardActions, CardContent, CardMedia, Button, Typography, ButtonBase } from '@material-ui/core'
import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt'
import ThumbUpAltOutlined from "@material-ui/icons/ThumbUpAltOutlined"
import DeleteIcon from '@material-ui/icons/Delete'
import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
import moment from 'moment'
import { useDispatch } from "react-redux"
import { useNavigate } from "react-router-dom"

import useStyles from './styles'
import { deletePost, likePost } from '../../../actions/posts'

const Post = ({ post, setCurrentId }) => {
    const user = JSON.parse(localStorage.getItem('profile'))
    const [likes, setLikes] = useState(post?.likes)
    const userId = user?.result?.googleId || user?.result?._id
    const hasLikedPost = post.likes.find((like) => like === userId)
    const classes = useStyles()
    const dispatch = useDispatch()
    const navigate = useNavigate()

    const handleLike = async () => {
        dispatch(likePost(post._id))

        if(hasLikedPost) {
            setLikes(post.likes.filter((id) => id !== userId))
        } else {
            setLikes([...post.likes, userId])
        }
    }

    const openPost = () => navigate(`/posts/${post._id}`)

    const Likes = () => {
        if (likes.length > 0) {
            return likes.find((like) => like === userId)
                ? (
                    <><ThumbUpAltIcon fontSize="small" />&nbsp;{likes.length > 2 ? `You and ${likes.length - 1} others` : `${likes.length} like${likes.length > 1 ? 's' : ''}` }</>
                ) : (
                    <><ThumbUpAltOutlined fontSize="small" />&nbsp;{likes.length} {likes.length === 1 ? 'Like' : 'Likes'}</>
                );
        }
      
        return <><ThumbUpAltOutlined fontSize="small" />&nbsp;Like</>;
    }

    return (
        <Card className={classes.card} raised elevation={6}>
            <ButtonBase className={classes.cardAction} onClick={openPost}>
                <CardMedia className={classes.media} image={post.selectedFile} title={post.title} />
                <div className={classes.overlay}>
                    <Typography variant="h6">{post.name}</Typography>
                    <Typography variant="body2">{moment(post.createdAt).fromNow()}</Typography>
                </div>
                {(user?.result?.googleId === post?.creator || user?.result?._id === post?.creator) && (
                    <div className={classes.overlay2}>
                        <Button style={{color: 'white'}} size="small" onClick={() => setCurrentId(post._id)}>
                            <MoreHorizIcon fontSize="medium" />
                        </Button>
                    </div>
                )}
                <div className={classes.details}> 
                    <Typography variant="body2" color="textSecondary">{post.tags.map((tag) => `#${tag} `)}</Typography>
                </div>
                <Typography className={classes.title} variant="h5" gutterBottom>{post.title}</Typography>
                <CardContent>
                    <Typography variant="body2" color="textSecondary" component="p">{post.message}</Typography>
                </CardContent>
            </ButtonBase>
            <CardActions className={classes.cardActions}>
                <Button size="small" color="primary" disabled={!user?.result} onClick={handleLike}>
                <Likes />
                </Button>
                {(user?.result?.googleId === post?.creator || user?.result?._id === post?.creator) && (
                    <Button size="small" color="primary" onClick={() => dispatch(deletePost(post._id))}>
                        <DeleteIcon fontSize="small" />
                        Delete
                    </Button>
                )}
            </CardActions>
        </Card>
    )
}

export default Post

How can I solve this?

Hello,

In the CommentSection.jsx there is a part that is meant to make the comment section scroll if there is a new comment (handleClick last line) to make it visible. This function also scrolls the whole page. How can I make it to scroll only in the comment section?

import React, { useState, useRef } from 'react'
import { Typography, TextField, Button } from '@material-ui/core'
import { useDispatch } from 'react-redux'

import { commentPost } from '../../../actions/posts'
import useStyles from './styles'

const CommentSection = (post) => {
    const classes = useStyles()
    const dispatch = useDispatch()
    const commentsRef = useRef()
    const user = JSON.parse(localStorage.getItem('profile'))
    const [comments, setComments] = useState(post?.post?.comments)
    const [comment, setComment] = useState('')

    const handleClick = async () => {
        const finalComment = `${user.result.name}: ${comment}`

        const newComments = await dispatch(commentPost(finalComment, post.post._id))

        setComments(newComments)
        setComment('')

        commentsRef.current.scrollIntoView({ behavior: 'smooth' })
    }

    return (
        <div>
            <div className={classes.commentsOuterContainer}>
                <div className={classes.commentsInnerContainer}>
                    <Typography gutterBottom variant="h6">Comments</Typography>
                    {comments.map((comment, index) => (
                        <Typography key={index} gutterBottom variant="subtitle1">
                            <strong>{comment.split(': ')[0] + ':'}</strong>
                            {comment.split(':')[1]}
                        </Typography>
                    ))}
                    <div ref={commentsRef}/>
                </div>
                {user?.result?.name && (
                    <div style={{ width: '70%' }}>
                    <Typography gutterBottom variant="h6">Write a Comment</Typography>
                    <TextField 
                        fullWidth
                        rows={4}
                        variant="outlined"
                        label="Comment"
                        multiline
                        value={comment}
                        onChange={(e) => setComment(e.target.value)}
                    />
                    <Button style={{ marginTop: '10px' }} fullWidth disabled={!comment} variant="contained" color="primary" onClick={handleClick}>
                        Comment
                    </Button>
                    </div>
                )}
            </div>
        </div>
    )
}

export default CommentSection

I have the same issue posted by the guy before me The posts in the app do not load from the database. But if I create a new one it shows just fine and it does get inserted in the database. Also when I go to localhost:5000/ I get the message: Cannot GET /

I'm getting a 409 conflict error at the end of 'User Actions' of part 3. I'm unable to submit posts even though the data shows up correctly in the request payload and the request headers also look good. Anyone else run into this problem? I have a feeling it has something to do with this logic in Form.js and how maybe it's trying to update instead of create?:

if (currentId === 0) { dispatch(createPost({ ...postData, name: user?.result?.name })); clear(); } else { dispatch(updatePost(currentId, { ...postData, name: user?.result?.name })); clear(); } };

Any help would be appreciated. Thank you!

Is someone facing this issue. Whenever you logged out and click on the signIn button it just goes to /posts page only. If I refresh the page then it's working fine. Any idea why this is happening ?

Having a hard time understanding this problem.

I have basically everything set up as you:

• Compared all files from server & client to match yours
• I've checked api/index.js, actions/auth.js, whole server/
• No clue what could be happening, been stuck on this same issue for 2 days now

Let me know if you can advise to what could be happening. When I clone your PART_4 branch, everything works.

Hello everybody! I followed the toturial on youtube but i can't sign up and i get this error. TypeError: Cannot read property 'split' of undefined at auth (file:///home/tiendepzai/web_dev/Memory_app/server/middleware/auth.js:9:47) at Layer.handle [as handle_request] I think the problem is in backend! Can someone help me? :'((

And thanks you so much for the toturials!

Everything worked fine but CardMedia is not displaying image. We can see image if we use inspect element as a long string. but it is not displayed on the page.

I wanted to branch out on this project and do some emailing with nodemailer-react. I discovered that anytime I install any packages on the server side I get a weird warning related to the mongoose package.

Here is the warning I get.

Database connection start (node:17424) [MONGOOSE] DeprecationWarning: Mongoose: thestrictQueryoption will be switched back tofalseby default in Mongoose 7. Usemongoose.set('strictQuery', false);if you want to prepare for this change. Or usemongoose.set('strictQuery', true);to suppress this warning. (Usenode --trace-deprecation ...` to show where the warning was created) Server running on port 5000

` Not sure why this would happen as I don't get the warning with the package list originally provide in this project.

My new package list looks like this.

"dependencies": { "body-parser": "^1.19.0", "cors": "^2.8.5", "express": "^4.17.1", "mongoose": "^6.8.1", "nodemailer-react": "^1.0.2", "react": "^16.12.0", "react-dom": "^16.12.0" }

I'm kind of curious what is really going on here.

I have an axios error on actions.js/posts, and its preventing me from seeing the post. The post is not rendering, instead its just loading. Can anyone help me with this? Thanks!