fixes, dynamic memory page

adrianhajdin · naveenjoe99 · Dec 26, 2020 · Dec 26, 2020 · Dec 26, 2020 · Dec 26, 2020
commit 1380bb6337097540e623b7e3695782c8903d9246
diff --git a/client/src/components/Form/Form.js b/client/src/components/Form/Form.js
@@ -15,15 +15,16 @@ const Form = ({ currentId, setCurrentId }) => {
   const user = JSON.parse(localStorage.getItem('profile'));
   const history = useHistory();
 
-  useEffect(() => {
-    if (post) setPostData(post);
-  }, [post]);
-
   const clear = () => {
     setCurrentId(0);
     setPostData({ title: '', message: '', tags: '', selectedFile: '' });
   };
 
+  useEffect(() => {
+    if (!post?.title) clear();
+    if (post) setPostData(post);
+  }, [post]);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -49,7 +50,7 @@ const Form = ({ currentId, setCurrentId }) => {
   return (
     <Paper className={classes.paper}>
       <form autoComplete="off" noValidate className={`${classes.root} ${classes.form}`} onSubmit={handleSubmit}>
-        <Typography variant="h6">{currentId ? `Editing "${post.title}"` : 'Creating a Memory'}</Typography>
+        <Typography variant="h6">{currentId ? `Editing "${post?.title}"` : 'Creating a Memory'}</Typography>
         <TextField name="title" variant="outlined" label="Title" fullWidth value={postData.title} onChange={(e) => setPostData({ ...postData, title: e.target.value })} />
         <TextField name="message" variant="outlined" label="Message" fullWidth multiline rows={4} value={postData.message} onChange={(e) => setPostData({ ...postData, message: e.target.value })} />
         <TextField name="tags" variant="outlined" label="Tags (coma separated)" fullWidth value={postData.tags} onChange={(e) => setPostData({ ...postData, tags: e.target.value.split(',') })} />

diff --git a/client/src/components/PostDetails/PostDetails.jsx b/client/src/components/PostDetails/PostDetails.jsx
@@ -1,84 +1,58 @@
-import React from 'react';
-import { Card, CardActions, CardContent, CardMedia, Button, Typography, ButtonBase } from '@material-ui/core/';
+import React, { useEffect } from 'react';
+import { Paper, CardActions, CardContent, CardMedia, Button, Typography } from '@material-ui/core/';
 import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt';
 import DeleteIcon from '@material-ui/icons/Delete';
-import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import ThumbUpAltOutlined from '@material-ui/icons/ThumbUpAltOutlined';
 import { useDispatch, useSelector } from 'react-redux';
 import moment from 'moment';
-import { useHistory } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import { getPost, likePost, deletePost } from '../../actions/posts';
 import useStyles from './styles';
 
-const Post = ({ setCurrentId }) => {
+const Post = () => {
   const { post } = useSelector((state) => state.posts);
-  console.log(post);
+  const { id } = useParams();
   const dispatch = useDispatch();
   const classes = useStyles();
   const user = JSON.parse(localStorage.getItem('profile'));
-  const history = useHistory();
 
-  const Likes = () => {
-    if (post.likes.length > 0) {
-      return post.likes.find((like) => like === (user?.result?.googleId || user?.result?._id))
-        ? (
-          <><ThumbUpAltIcon fontSize="small" />&nbsp;{post.likes.length > 2 ? `You and ${post.likes.length - 1} others` : `${post.likes.length} like${post.likes.length > 1 ? 's' : ''}` }</>
-        ) : (
-          <><ThumbUpAltOutlined fontSize="small" />&nbsp;{post.likes.length} {post.likes.length === 1 ? 'Like' : 'Likes'}</>
-        );
-    }
+  useEffect(() => {
+    dispatch(getPost(id));
+  }, [id]);
 
-    return <><ThumbUpAltOutlined fontSize="small" />&nbsp;Like</>;
-  };
-
-  const openPost = () => {
-    dispatch(getPost(post._id));
-
-    history.push(`/posts/${post._id}`);
-  };
-
-  if (!post) {
-    return null;
-  }
+  if (!post) return null;
 
   return (
-    <Card className={classes.card}>
-      <ButtonBase
-        className={classes.cardAction}
-        onClick={openPost}
-      >
-        <CardMedia className={classes.media} image={post.selectedFile || 'https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png'} title={post.title} />
-        <div className={classes.overlay}>
+    <Paper style={{ padding: '10px' }}>
+      <div className={classes.card}>
+        <div className={classes.section}>
+          <Typography variant="h6">CREATOR PROFILE - coming soon!</Typography>
           <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 onClick={() => setCurrentId(post._id)} style={{ color: 'white' }} size="small">
-            <MoreHorizIcon fontSize="default" />
-          </Button>
-        </div>
-        )}
-        <div className={classes.details}>
+        <img className={classes.media} src={post.selectedFile || 'https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png'} alt={post.title} />
+        <div className={classes.section}>
           <Typography variant="body2" color="textSecondary" component="h2">{post.tags.map((tag) => `#${tag} `)}</Typography>
-        </div>
-        <Typography className={classes.title} gutterBottom variant="h5" component="h2">{post.title}</Typography>
-        <CardContent>
+          <Typography gutterBottom variant="h5" component="h2">{post.title}</Typography>
           <Typography variant="body2" color="textSecondary" component="p">{post.message}</Typography>
-        </CardContent>
-        <CardActions className={classes.cardActions}>
-          <Button size="small" color="primary" disabled={!user?.result} onClick={() => dispatch(likePost(post._id))}>
-            <Likes />
-          </Button>
           {(user?.result?.googleId === post?.creator || user?.result?._id === post?.creator) && (
           <Button size="small" color="secondary" onClick={() => dispatch(deletePost(post._id))}>
             <DeleteIcon fontSize="small" /> Delete
           </Button>
           )}
-        </CardActions>
-      </ButtonBase>
-    </Card>
+        </div>
+      </div>
+      <div className={classes.section}>
+        <Typography variant="h6">COMMENTS - coming soon!</Typography>
+      </div>
+      <div className={classes.section}>
+        <Typography variant="h6">RELATED POSTS - coming soon!</Typography>
+      </div>
+      <div className={classes.section}>
+        <Typography variant="h6">REALTIME CHAT - coming soon!</Typography>
+      </div>
+    </Paper>
   );
 };
 

diff --git a/client/src/components/PostDetails/styles.js b/client/src/components/PostDetails/styles.js
@@ -2,55 +2,18 @@ import { makeStyles } from '@material-ui/core/styles';
 
 export default makeStyles({
   media: {
-    height: 0,
-    paddingTop: '56.25%',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    backgroundBlendMode: 'darken',
-  },
-  border: {
-    border: 'solid',
-  },
-  fullHeightCard: {
-    height: '100%',
+    borderRadius: '20px',
   },
   card: {
     display: 'flex',
-    flexDirection: 'column',
     justifyContent: 'space-between',
-    borderRadius: '15px',
     height: '100%',
-    position: 'relative',
-  },
-  overlay: {
-    position: 'absolute',
-    top: '20px',
-    left: '20px',
-    color: 'white',
-  },
-  overlay2: {
-    position: 'absolute',
-    top: '20px',
-    right: '20px',
-    color: 'white',
-  },
-  grid: {
-    display: 'flex',
-  },
-  details: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    margin: '20px',
-  },
-  title: {
-    padding: '0 16px',
-  },
-  cardActions: {
-    padding: '0 16px 8px 16px',
-    display: 'flex',
-    justifyContent: 'space-between',
   },
-  cardAction: {
-    display: 'block',
-    textAlign: 'initial',
+  section: {
+    padding: '40px',
+    border: '1px solid gray',
+    borderRadius: '20px',
+    margin: '10px',
+    flex: 1,
   },
 });
diff --git a/client/src/components/Posts/Post/Post.js b/client/src/components/Posts/Post/Post.js
@@ -31,43 +31,54 @@ const Post = ({ post, setCurrentId }) => {
     return <><ThumbUpAltOutlined fontSize="small" />&nbsp;Like</>;
   };
 
-  const openPost = () => {
+  const openPost = (e) => {
     dispatch(getPost(post._id));
 
     history.push(`/posts/${post._id}`);
   };
 
   return (
     <Card className={classes.card}>
-      <CardMedia className={classes.media} image={post.selectedFile || 'https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png'} 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 onClick={() => setCurrentId(post._id)} style={{ color: 'white' }} size="small">
+
+      <ButtonBase
+        name="test"
+        className={classes.cardAction}
+        onClick={openPost}
+      >
+        <CardMedia className={classes.media} image={post.selectedFile || 'https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png'} 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} name="edit">
+          <Button
+            onClick={(e) => {
+              e.stopPropagation();
+              setCurrentId(post._id);
+            }}
+            style={{ color: 'white' }}
+            size="small"
+          >
             <MoreHorizIcon fontSize="default" />
           </Button>
         </div>
-      )}
-      <div className={classes.details}>
-        <Typography variant="body2" color="textSecondary" component="h2">{post.tags.map((tag) => `#${tag} `)}</Typography>
-      </div>
-      <Typography className={classes.title} gutterBottom variant="h5" component="h2">{post.title}</Typography>
-      <CardContent>
-        <Typography variant="body2" color="textSecondary" component="p">{post.message}</Typography>
-      </CardContent>
+        )}
+        <div className={classes.details}>
+          <Typography variant="body2" color="textSecondary" component="h2">{post.tags.map((tag) => `#${tag} `)}</Typography>
+        </div>
+        <Typography className={classes.title} gutterBottom variant="h5" component="h2">{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={() => dispatch(likePost(post._id))}>
           <Likes />
         </Button>
-        <Button size="small" color="primary" disabled={!user?.result} onClick={openPost}>
-          <InfoIcon />
-        </Button>
         {(user?.result?.googleId === post?.creator || user?.result?._id === post?.creator) && (
           <Button size="small" color="secondary" onClick={() => dispatch(deletePost(post._id))}>
-            <DeleteIcon fontSize="small" /> Delete
+            <DeleteIcon fontSize="small" /> &nbsp; Delete
           </Button>
         )}
       </CardActions>