fixed major bugs with posts component

SoumavaBanerjee · Jan 15, 2021 · 6b31d62 · 6b31d62
1 parent 6da952d
commit 6b31d62
Show file tree

Hide file tree

Showing 15 changed files with 129 additions and 123 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,9 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.2.2",
-    "axios": "^0.21.0",
+    "axios": "^0.21.1",
     "moment": "^2.29.1",
+    "nanoid": "^3.1.20",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-file-base64": "^1.0.3",

diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,10 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Container,
   AppBar,
   Typography,
   Grid,
   Grow,
-  CssBaseline,
   useMediaQuery,
   useTheme,
 } from '@material-ui/core';
@@ -21,7 +20,9 @@ const App = () => {
   const classes = makeStyles();
   const dispatch = useDispatch();
   const theme = useTheme();
-  const isbigScreen = useMediaQuery(theme.breakpoints.up('sm'));
+  const isbigScreen = useMediaQuery(theme.breakpoints.up('md'));
+
+  const [currentId, setCurrentId] = useState(null);
 
   const gridProps = {
     direction: isbigScreen ? 'row' : 'column-reverse',
@@ -33,28 +34,27 @@ const App = () => {
 
   return (
     <Container maxWidth="lg">
-      <CssBaseline />
       <AppBar className={classes.appBar} position="static" color="inherit">
         <Typography className={classes.heading} variant="h3" align="center">
           Memories
         </Typography>
         <img className={classes.image} src={memories} alt="memories" height="60" />
       </AppBar>
       <Grow in>
-        <Container>
+        <Container spacing={2}>
           <Grid
             container
             justify="space-between"
-            alignItems="stretch"
+            alignItems="flex-start"
             spacing={3}
             /* eslint-disable react/jsx-props-no-spreading */
             {...gridProps}
           >
-            <Grid item xs={12} sm={7}>
-              <Posts />
+            <Grid item xs={12} md={8}>
+              <Posts setCurrentId={setCurrentId} />
             </Grid>
-            <Grid item xs={12} sm={4}>
-              <Form />
+            <Grid item xs={12} md={4}>
+              <Form currentId={currentId} setCurrentId={setCurrentId} />
             </Grid>
           </Grid>
         </Container>

diff --git a/src/actions/posts.js b/src/actions/posts.js
@@ -7,13 +7,12 @@ export const getPosts = () => async (dispatch) => {
   try {
     const { data } = await api.fetchPosts();
     // debug line
-    console.log({ data });
 
     const action = { type: FETCH_ALL, payload: data };
     dispatch(action);
   } catch (error) {
     /* eslint-disable no-console */
-    console.log(error.message);
+    console.log(error);
   }
 };
 

diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
@@ -7,14 +7,15 @@ import NoteIcon from '@material-ui/icons/Note';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import FileInput from 'react-file-base64';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { createPost } from '../../actions/posts';
 
 import makeStyles from './styles';
 
-const Form = () => {
+const Form = ({ currentId, setCurrentId }) => {
   const classes = makeStyles();
+
   const [postData, setPostData] = useState({
     creator: '',
     title: '',
@@ -26,12 +27,11 @@ const Form = () => {
 
   const handleSubmit = (event) => {
     event.preventDefault();
-    console.log('Inside Handle Submit');
     dispatch(createPost(postData));
+    clear();
   };
 
-  const handleClear = () => {
-    console.log('inside HandleClear');
+  const clear = () => {
     setPostData({
       creator: '',
       title: '',
@@ -126,7 +126,7 @@ const Form = () => {
           }}
           value={postData.tags}
           onChange={(e) => {
-            setPostData({ ...postData, tags: e.target.value });
+            setPostData({ ...postData, tags: e.target.value.split(',') });
           }}
         />
         <div className={classes.fileInput}>
@@ -136,7 +136,6 @@ const Form = () => {
             type="file"
             multiple={false}
             onDone={({ base64 }) => {
-              console.log(base64);
               setPostData({ ...postData, selectedFile: base64 });
             }}
           />
@@ -154,7 +153,7 @@ const Form = () => {
           className={classes.formButton}
           variant="contained"
           color="secondary"
-          onClick={handleClear}
+          onClick={clear}
           fullWidth
         >
           Reset all

diff --git a/src/components/Form/styles.js b/src/components/Form/styles.js
@@ -22,7 +22,7 @@ export default makeStyles((theme) => ({
     background: indigo[500],
   },
   formButton: {
-    margin: theme.spacing(1),
+    margin: theme.spacing(2),
   },
   icons: {
     color: indigo[300],

diff --git a/src/components/Posts/Post/Post.js b/src/components/Posts/Post/Post.js
@@ -11,7 +11,6 @@ import moment from 'moment';
 
 const Post = ({ post }) => {
   const classes = makeStyles();
-  console.log(post);
 
   const handleClickEdit = (event) => {
     event.preventDefault();
@@ -29,7 +28,7 @@ const Post = ({ post }) => {
   };
 
   return (
-    <Card className={classes.card}>
+    <Card className={`${classes.card} ${classes.fullHeightCard}`}>
       <CardMedia className={classes.media} image={post.selectedFile} title={post.title} />
       <div className={classes.overlay}>
         <Typography variant="h6">{post.creator}</Typography>
@@ -55,11 +54,21 @@ const Post = ({ post }) => {
       </CardContent>
       <CardActions className={classes.cardActions}>
         <Button size="small">
-          <ThumbUpAltIcon fontSize="default" color="primary" onClick={handleClickLike} />
+          <ThumbUpAltIcon
+            className={classes.iconMargin}
+            fontSize="default"
+            color="primary"
+            onClick={handleClickLike}
+          />
           {`Like ${post.likeCount}`}
         </Button>
         <Button size="small">
-          <DeleteIcon fontSize="default" color="primary" onClick={handleClickDelete} />
+          <DeleteIcon
+            className={classes.iconMargin}
+            fontSize="default"
+            color="primary"
+            onClick={handleClickDelete}
+          />
           {`Delete`}
         </Button>
       </CardActions>

diff --git a/src/components/Posts/Post/styles.js b/src/components/Posts/Post/styles.js
@@ -1,52 +1,55 @@
-import { makeStyles } from "@material-ui/core/styles";
+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",
+    paddingTop: '56.25%',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    backgroundBlendMode: 'darken',
   },
   border: {
-    border: "solid",
+    border: 'solid',
   },
   fullHeightCard: {
-    height: "100%",
+    height: '100%',
   },
   card: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between",
-    borderRadius: "15px",
-    height: "100%",
-    position: "relative",
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    borderRadius: '15px',
+    height: '100%',
+    position: 'relative',
   },
   overlay: {
-    position: "absolute",
-    top: "20px",
-    left: "20px",
-    color: "white",
+    position: 'absolute',
+    top: '20px',
+    left: '20px',
+    color: 'white',
   },
   overlay2: {
-    position: "absolute",
-    top: "20px",
-    right: "20px",
-    color: "white",
+    position: 'absolute',
+    top: '20px',
+    right: '20px',
+    color: 'white',
   },
   grid: {
-    display: "flex",
+    display: 'flex',
   },
   details: {
-    display: "flex",
-    justifyContent: "space-between",
-    margin: "20px",
+    display: 'flex',
+    justifyContent: 'space-between',
+    margin: '20px',
   },
   title: {
-    padding: "0 16px",
+    padding: '0 16px',
   },
   cardActions: {
-    padding: "0 16px 8px 16px",
-    display: "flex",
-    justifyContent: "space-between",
+    padding: '0 16px 8px 16px',
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  iconMargin: {
+    marginRight: '10px',
   },
 });
diff --git a/src/components/Posts/PostSkeleton/PostSkeleton.js b/src/components/Posts/PostSkeleton/PostSkeleton.js
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { nanoid } from 'nanoid';
+
+import Skeleton from '@material-ui/lab/Skeleton';
+import { Grid } from '@material-ui/core';
+import makeStyles from '../styles';
+
+const PostSkeleton = () => {
+  const classes = makeStyles();
+  const [id] = useState(nanoid);
+
+  return (
+    <Grid key={id} className={classes.container} container alignItems="stretch" spacing={3}>
+      {[1, 2, 3, 4].map((index) => (
+        <Grid key={`${id}_${index}`} item xs={12} sm={6} md={6}>
+          <Skeleton variant="rect" width={300} height={300} />
+          <Skeleton variant="text" width={200} />
+          <Skeleton variant="text" width={250} />
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
+export default PostSkeleton;
diff --git a/src/components/Posts/PostSkeleton/postSkeleton.js b/src/components/Posts/PostSkeleton/postSkeleton.js
diff --git a/src/components/Posts/Posts.js b/src/components/Posts/Posts.js
@@ -3,47 +3,20 @@ import { useSelector } from 'react-redux';
 import { Grid } from '@material-ui/core';
 
 import Post from './Post/Post';
-import PostSkeleton from './PostSkeleton/postSkeleton';
+import PostSkeleton from './PostSkeleton/PostSkeleton';
 import makeStyles from './styles';
 
-const Posts = () => {
+const Posts = ({ setCurrentId }) => {
   const posts = useSelector((state) => state.posts);
   const classes = makeStyles();
 
-  console.log(posts);
-
   return !posts.length ? (
-    <Grid
-      className={classes.mainContainer}
-      container
-      justify="center"
-      alignItems="stretch"
-      spacing={2}
-    >
-      <Grid item sm={12} md={6}>
-        <PostSkeleton />
-      </Grid>
-      <Grid item sm={12} md={6}>
-        <PostSkeleton />
-      </Grid>
-      <Grid item sm={12} md={6}>
-        <PostSkeleton />
-      </Grid>
-      <Grid item sm={12} md={6}>
-        <PostSkeleton />
-      </Grid>
-    </Grid>
+    <PostSkeleton />
   ) : (
-    <Grid
-      className={classes.mainContainer}
-      container
-      justify="center"
-      alignItems="stretch"
-      spacing={2}
-    >
+    <Grid className={classes.container} container alignItems="stretch" spacing={3}>
       {posts.map((post) => (
-        <Grid key={post._id} item sm={12} md={6}>
-          <Post post={post}></Post>
+        <Grid key={post._id} item xs={12} sm={6} md={6}>
+          <Post post={post} />
         </Grid>
       ))}
     </Grid>