img preview och (broken) delete button

backend/models/UploadModel.js

@@ -6,7 +6,7 @@ const postSchema = new mongoose.Schema({
         required:true
     },
     recipe:{
-        type:Array(String),
+        type:String,
         required:false
     },
     description:{
@@ -17,6 +17,7 @@ const postSchema = new mongoose.Schema({
         type: String,
         required: false
     }
+
   
 })
 

frontend/src/components/DeletePost.js

+import React, { useState } from 'react';
+import axios from 'axios';
+import styles from '../styles/feed.module.css'
+
+const DeletePostButton = ({ postId }) => {
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDeleteClick = async () => {
+    setIsDeleting(true);
+    try {
+      await axios.delete(`http://localhost:5000/posts/${postId}`);
+     
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsDeleting(false);
+      
+    }
+    console.log(postId);
+  };
+
+  return (<div className = {styles.deletePost}>
+    <button  onClick={handleDeleteClick} disabled={isDeleting}>
+      {isDeleting ? 'Deleting...' : 'Delete Post'}
+    </button>
+    </div>
+  );
+};
+
+export default DeletePostButton;
\ No newline at end of file

frontend/src/components/Post.js

@@ -11,8 +11,18 @@ const Post = () => {
     const [description,setDescription] = useState("")
     const [recipe,setRecipe] = useState("")
     const [imageData,setImageData] = useState('')
+    const [picturePreview, setPicturePreview] = useState(null);
   
-
+    const handlePictureChange = (e) => {
+     const file = e.target.files[0];
+      setImageData(file);
+  
+      const reader = new FileReader();
+      reader.onload = () => {
+        setPicturePreview(reader.result);
+      };
+      reader.readAsDataURL(file);
+    };
     
     const createPost = () => {
 
@@ -51,7 +61,8 @@ const Post = () => {
         <p >Add a picture here 👉👉:</p>
         <label className={styles.pick_file} htmlFor={styles.file_picker}>
             <AiOutlineCamera/>
-            <input hidden type="file" name={styles.file_picker} id={styles.file_picker} onChange={(e) => setImageData(e.target.files[0])}/>
+            <input hidden type="file" name={styles.file_picker} id={styles.file_picker} onChange={handlePictureChange}/>
+            {picturePreview && <img src={picturePreview} className={styles.preview_img_container} />}
         </label>
         </div>
         <button onClick={createPost}>Upload</button>

frontend/src/components/Posts.js

@@ -3,6 +3,7 @@ import styles from '../styles/feed.module.css'
 import{FaSearch } from "react-icons/fa";
 import axios from 'axios'
 import Upvote from './Upvote'
+import DeletePostButton from './DeletePost'
 
 const Posts = () => {
 
@@ -39,6 +40,10 @@ const Posts = () => {
       setResult(e.target.value);
     }
     
+    const handlePostDeleted = (postId) => {
+      setPosts(posts.filter(post => post._id !== postId));
+      
+    };
 
   return (
 
@@ -65,6 +70,7 @@ const Posts = () => {
               
             </div>
                <Upvote/> 
+               <DeletePostButton postId={post._id} onDeleted={() => handlePostDeleted(post._id)}/>
           </div>
         )
       })}</div>

frontend/src/components/Upvote.js

 import React, { useState } from 'react';
 import axios from 'axios'
 import styles from '../styles/feed.module.css'
-const Upvote = () => {
+const Upvote = ({postId}) =>{
     const [count, setCount] = useState(0);
+    const [upvotes, setUpvotes] = useState(0);
 
 
     const increment = () => {
@@ -17,6 +18,7 @@ const Upvote = () => {
         setCount(0);
     }
 
+
    // const formData = new FormData()
   
         //formData.append('Upvotes',count);

frontend/src/pages/Feed.js

@@ -11,11 +11,14 @@ const Feed = () => {
 
 
 return(
-    <div><Post/>
+
+    <div>
+    <Post/>
     <div className = {styles.container} >
         <Posts/>
     </div>
     </div>
+   
 )
 
 }

frontend/src/styles/feed.module.css

@@ -7,6 +7,8 @@ input{
  :focus::placeholder {
     color: transparent;
   }
+
+
   textarea{
     font-family: 'Poppins', sans-serif;
     text-align: start;
@@ -16,9 +18,9 @@ input{
   .pick_file {
   color: rgb(67, 1, 128);
   font-size: 35px;
-  margin:10px;
- 
-  display: inline;
+  margin-left:30px;
+  margin-top:5px;
+  display: flex;
   justify-content: center;
   align-items: center;
   
@@ -147,7 +149,31 @@ object-fit: cover;
     
     
     
+  }  
+  .deletePost{
+   height: 40px;
+   width:80px;
+   position: relative;
+   margin-top: 25px;
+   margin-left:145px;
+   margin-bottom: 20px;
+
   }
+
+  .deletePost button{
+    background: rgb(136, 14, 14);
+    height: 40px;
+    width:100px;
+    margin: auto;
+    border-radius: 5px;
+    border: none;
+    font-size: 14px;
+    font-family: 'Poppins', sans-serif;
+    color: white;
+    
+  }
+
+  
   .upvote{
     background-color: rgb(25, 100, 100);
     height: 40px;
@@ -162,6 +188,7 @@ object-fit: cover;
     color: white;
     
   }
+
   .upvote button{
     background: rgb(150, 172, 110);
     color: white;
@@ -183,6 +210,16 @@ object-fit: cover;
     border-radius: 10px;
     box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
   }
+  .preview_img_container{
+    width: 60px; /* set width of image container */
+   height: 60px;
+    border-radius: 40%; /* make image container circular */
+    overflow: hidden;
+     /* Add display flex to center image vertically */
+    align-items: center; /* Center image vertically */
+    justify-content: center; /* Center image horizontally */
+    margin-left: 20px;
+  }
   .post_img_container{
     width: 300px; /* set width of image container */
     height: 300px; /* set height of image container */