From d7e37abca1d8667eb66b30a6fb8d536e73add681 Mon Sep 17 00:00:00 2001
From: ludvighillert <hillert14@gmail.com>
Date: Fri, 28 Apr 2023 12:09:43 +0200
Subject: [PATCH] img preview och (broken) delete button
---
backend/models/UploadModel.js | 3 +-
frontend/src/components/DeletePost.js | 30 +++++++++++++++++++
frontend/src/components/Post.js | 15 ++++++++--
frontend/src/components/Posts.js | 6 ++++
frontend/src/components/Upvote.js | 4 ++-
frontend/src/pages/Feed.js | 5 +++-
frontend/src/styles/feed.module.css | 43 +++++++++++++++++++++++++--
7 files changed, 98 insertions(+), 8 deletions(-)
create mode 100644 frontend/src/components/DeletePost.js
diff --git a/backend/models/UploadModel.js b/backend/models/UploadModel.js
index fad5f30..60d2cc5 100644
--- a/backend/models/UploadModel.js
+++ b/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
}
+
})
diff --git a/frontend/src/components/DeletePost.js b/frontend/src/components/DeletePost.js
new file mode 100644
index 0000000..02d98c6
--- /dev/null
+++ b/frontend/src/components/DeletePost.js
@@ -0,0 +1,30 @@
+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
diff --git a/frontend/src/components/Post.js b/frontend/src/components/Post.js
index 179e553..523b7c5 100644
--- a/frontend/src/components/Post.js
+++ b/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>
diff --git a/frontend/src/components/Posts.js b/frontend/src/components/Posts.js
index 983524c..767367a 100644
--- a/frontend/src/components/Posts.js
+++ b/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>
diff --git a/frontend/src/components/Upvote.js b/frontend/src/components/Upvote.js
index 16bbed1..6afc6f3 100644
--- a/frontend/src/components/Upvote.js
+++ b/frontend/src/components/Upvote.js
@@ -1,8 +1,9 @@
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);
diff --git a/frontend/src/pages/Feed.js b/frontend/src/pages/Feed.js
index d5d42f1..9e8722d 100644
--- a/frontend/src/pages/Feed.js
+++ b/frontend/src/pages/Feed.js
@@ -11,11 +11,14 @@ const Feed = () => {
return(
- <div><Post/>
+
+ <div>
+ <Post/>
<div className = {styles.container} >
<Posts/>
</div>
</div>
+
)
}
diff --git a/frontend/src/styles/feed.module.css b/frontend/src/styles/feed.module.css
index 1b007fa..8b752fb 100644
--- a/frontend/src/styles/feed.module.css
+++ b/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 */
--
GitLab