Skip to content

Commit

Permalink
Merge pull request #9 from millionhz/eimaan-comment
Browse files Browse the repository at this point in the history 
added modal for comments
  • Loading branch information
@millionhz
millionhz authored Nov 20, 2022
2 parents 00518e9 + 541de3f commit b81007c
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 57 deletions.
2 changes: 1 addition & 1 deletion client/src/api/backend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,6 @@ export const getPostById = (id) => instance.get(`/post/${id}`);

export const createPost = (data) => instance.post('/post', data);

export const addComment = (data) => instance.post('/comment', data)
export const addComment = (data) => instance.post('/comment', data);

export default instance;
9 changes: 4 additions & 5 deletions client/src/features/comments/NewComment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ function NewComment() {
const [content, setContent] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const navigate = useNavigate();


const handleComments = (event) => {
event.preventDefault();
Expand All @@ -27,7 +26,7 @@ function NewComment() {
});

axiosInstance
.post('/comment', { postId:5, content })
.post('/comment', { postId: 5, content })
.then(() => {
// comment successfully inserted into database
alert('Comment Posted!');
Expand Down Expand Up @@ -63,9 +62,9 @@ function NewComment() {
<Container component="main" maxWidth="md">
<Box
sx={{
m : 'auto',
m: 'auto',
mt: '40%',
width: '800px'
width: '800px',
}}
>
<Box component="form" onSubmit={handleComments} sx={{ mt: 1 }}>
Expand Down Expand Up @@ -97,4 +96,4 @@ function NewComment() {
);
}

export default NewComment;
export default NewComment;
36 changes: 4 additions & 32 deletions client/src/features/home/HomePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ import NotificationsIcon from '@mui/icons-material/Notifications';
import PostAddIcon from '@mui/icons-material/PostAdd';
// import InfiniteScroll from 'react-infinite-scroll-component';
import { getPosts } from '../../api/backend';
import { getToken } from '../../utilities/localStorage';
// import SideBar from '../sidebar/SideBar';
import Post from '../post/Post';

const drawerWidth = 240;
Expand All @@ -37,35 +35,6 @@ const sideBarNav = [
},
];

const options = {
year: 'numeric',
month: 'short',
day: 'numeric',
};

const date = new Date();
const formattedDate = date.toLocaleDateString('en-US', options);

const dummyPosts = [
{
postID: 1,
postedBy: 'Humaira',
date: formattedDate,
numLikes: 20,
numComments: 15,
content: 'Hello There! This is dummy caption on my post!',
// media: '../../assets/dostiyan-logo.png',
},
{
postID: 2,
postedBy: 'Someone else',
date: formattedDate,
numLikes: 30,
content: 'Hello There! This is dummy caption on my post!',
// media: '',
},
];

function HomePage() {
const [posts, setPosts] = useState([]);
// const [checkMorePosts, setCheck] = useState(true);
Expand All @@ -74,6 +43,7 @@ function HomePage() {
getPosts()
.then((postList) => {
// posts successfully fetched
console.log(postList.data);
setPosts(postList.data);
})
.catch((error) => {
Expand Down Expand Up @@ -180,7 +150,9 @@ function HomePage() {
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<Toolbar />
{posts.map((post) => (
<Post {...post} key={post.post_id} />
<div>
<Post post={post} key={post.post_id} />
</div>
))}
</Box>
</Box>
Expand Down
113 changes: 94 additions & 19 deletions client/src/features/post/Post.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@ import React, { useState } from 'react';
import { styled } from '@mui/material/styles';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import Modal from '@mui/material/Modal';
import Divider from '@mui/material/Divider';
import Box from '@mui/material/Box';
import CardMedia from '@mui/material/CardMedia';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Collapse from '@mui/material/Collapse';
import Avatar from '@mui/material/Avatar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import { red } from '@mui/material/colors';
import { blueGrey, red } from '@mui/material/colors';
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import AddCommentIcon from '@mui/icons-material/AddComment';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
Expand All @@ -25,9 +28,29 @@ const ExpandMore = styled((props) => {
}),
}));

function Post({ postedBy, date, numLikes, content }) {
const dummyComments = [
{
commentedBy: 'Anonymous',
comment: 'L post!',
},
{
commentedBy: 'Anonymous2',
comment: 'L post (2)',
},
];

function Post({ post }) {
const { post_id: postId, likes: numLikes, name: postedBy, content } = post;
const [expanded, setExpanded] = useState(false);
const [likeIconColor, setLikeIconColor] = useState('');
const [likeIconColor, setLikeIconColor] = useState('#000');
const [open, setOpen] = React.useState(false);

const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};

const handleExpandClick = () => {
setExpanded(!expanded);
Expand All @@ -38,18 +61,18 @@ function Post({ postedBy, date, numLikes, content }) {
};

return (
<Card sx={{ maxWidth: 500, marginBottom: 3 }}>
<Card sx={{ maxWidth: 500 }}>
<CardHeader
avatar={
<Avatar sx={{ bgcolor: red[500] }} aria-label="post">
R
</Avatar>
}
title={postedBy}
subheader={date}
// subheader={date}
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
<Typography variant="h5" color="text.secondary">
{content}
</Typography>
</CardContent>
Expand All @@ -65,14 +88,65 @@ function Post({ postedBy, date, numLikes, content }) {
<IconButton onClick={changeColor} aria-label="like post">
<ThumbUpIcon style={{ color: { likeIconColor } }} />
</IconButton>
<IconButton
onClick={() => {
console.log('Comment button clicked');
}}
aria-label="add comment"
>
<IconButton onClick={handleOpen} aria-label="add comment">
<AddCommentIcon />
</IconButton>
<Modal
aria-labelledby="post"
aria-describedby="a pop up of the post"
open={open}
onClose={handleClose}
sx={{
mx: 'auto',
mt: '7rem',
mb: '3rem',
p: '2rem',
maxWidth: '700px',
bgcolor: blueGrey[50],
}}
>
<Box
sx={{
backgroundColor: '#fff',
mx: 'auto',
mt: '7rem',
mb: '3rem',
p: '2rem',
maxWidth: '700px',
}}
>
<CardHeader
avatar={
<Avatar sx={{ bgcolor: red[500] }} aria-label="post">
R
</Avatar>
}
title={postedBy}
// subheader={date}
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
{content}
</Typography>
</CardContent>
{/* <CardMedia
component="img"
height="200"
width="300"
// image={mediaURL}
alt="Post Media"
/> */}
<Typography>{numLikes} likes</Typography>
<Divider />
<CardContent>
{dummyComments.map((comments) => (
<Typography variant="body1" color="text.secondary">
<b>{comments.commentedBy}:</b> {comments.comment}
</Typography>
))}
</CardContent>
</Box>
</Modal>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
Expand All @@ -82,15 +156,16 @@ function Post({ postedBy, date, numLikes, content }) {
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>
Some textbox for adding comment may be opened here
</Typography>
</CardContent>
</Collapse>
</Card>
);

// <Collapse in={expanded} timeout="auto" unmountOnExit>
// <CardContent>
// <Typography paragraph>
// Some textbox for adding comment may be opened here
// </Typography>
// </CardContent>
// </Collapse>;
}

export default Post;

0 comments on commit b81007c

Please sign in to comment.