Merge branch 'main' of https://github.com/ludvigdamberg/TDDD27

backend/models/UploadModel.js

@@ -5,6 +5,10 @@ const postSchema = new mongoose.Schema({
         type:String,
         required:true
     },
+    recipe:{
+        type:String,
+        required:true
+    },
     description:{
         type:String,
         required:true
@@ -13,6 +17,7 @@ const postSchema = new mongoose.Schema({
         type: String,
         required: false
     }
+  
 })
 
 const postModel = mongoose.model("Post",postSchema)

frontend/src/components/Post.js

@@ -3,12 +3,13 @@ import { Paper } from '@mui/material'
 import { useState } from 'react'
 import axios from 'axios'
 import {AiOutlineCamera} from 'react-icons/ai'
-
+import styles from '../styles/styles.module.css'
 
 const Post = () => {
   
     const [name,setName] = useState("")
     const [description,setDescription] = useState("")
+    const [recipe,setRecipe] = useState("")
     const [imageData,setImageData] = useState('')
   
 
@@ -19,11 +20,13 @@ const Post = () => {
   
         formData.append('name',name)
         formData.append('description',description)
+        formData.append('recipe',recipe)
         formData.append('photo',imageData)
   
         axios.post("http://localhost:5000/save", 
         formData
         )
+        
         .then((res) => {
          console.log(res.data)
         }).catch(err=> console.log(err))
@@ -37,16 +40,22 @@ const Post = () => {
     
       }
     return (
-    <div className='post-container'>
-        <input className='post-input1' value={name} onChange={(e) => setName(e.target.value)} placeholder='name' type='text'/>
-        <p>Add a picture here 👉👉:</p>
-        <label className='pick-file' htmlFor="file_picker">
+    <div className={styles.post_container}>
+      <h1>Make your drink!</h1>
+        <input className={styles.post_input1} value={name} onChange={(e) => setName(e.target.value)} placeholder='Title of your drink' type='text'/>
+        <textarea className={styles.post_input2} value={recipe} onChange={(e) => setRecipe(e.target.value)} placeholder='Recipe:' type='text'/>
+        <textarea className={styles.post_input2} value={description} onChange={(e) => setDescription(e.target.value)} placeholder='How to make it...' type='text' cols = '40' rows="5"/>
+
+        <div className={styles.addpicture}>
+        <p >Add a picture here 👉👉:</p>
+        <label className={styles.pick_file} htmlFor={styles.file_picker}>
             <AiOutlineCamera/>
-            <input hidden type='file' name='file_picker' id='file_picker' onChange={(e) => setImageData(e.target.files[0])}/>
+            <input hidden type="file" name={styles.file_picker} id={styles.file_picker} onChange={(e) => setImageData(e.target.files[0])}/>
         </label>
+        </div>
+        <button onClick={createPost}>Upload</button>
+
         
-         <input className='post-input2' value={description} onChange={(e) => setDescription(e.target.value)} placeholder='description' type='text'/>
-         <button onClick={createPost}>Upload</button>
         
     </div>
   )

frontend/src/components/Posts.js

-import React from 'react'
-
+import React,{ useState, useEffect } from 'react'
+import styles from '../styles/styles.module.css'
+import axios from 'axios'
+import Upvote from './Upvote'
 const Posts = () => {
 
   const [posts,setPosts] = useState([])
@@ -27,13 +29,17 @@ const Posts = () => {
     <div>
     <div>{posts.map((post) => {
         return(
-          <div className={styles.posts_container} key={post._id}>
+            <div className={styles.posts_container} key={post._id}>
+            <div className={styles.post_img_container}>
             <img className={styles.img} src={`http://localhost:5000/uploads/${post.photo}`}/>
+            </div>
             <div>
                <h1>{post.name}</h1>
-               <p>{post.description}</p> 
+               <p>Recipe: {post.recipe}</p> 
+               <p>Descrption: {post.description}</p> 
+              
             </div>
-             
+           <Upvote/>     
           </div>
         )
       })}</div>

frontend/src/components/Upvote.js

+import React, { useState } from 'react';
+import axios from 'axios'
+import styles from '../styles/styles.module.css'
+const Upvote = () => {
+    const [count, setCount] = useState(0);
+
+
+    const increment = () => {
+        setCount(count + 1)
+    }
+
+    const decrement = () => {
+        setCount(count - 1)
+    }
+
+    if (count<0){
+        setCount(0);
+    }
+
+   // const formData = new FormData()
+  
+        //formData.append('Upvotes',count);
+
+        //axios.post("http://localhost:5000/save", 
+       // formData
+       // )
+    return (
+        <div className = {styles.upvote}>
+            <button className={styles.upvote} onClick={increment}>
+                +
+            </button>
+             <div>{count}</div>
+            <button className={styles.upvote} onClick={decrement}>
+                -
+            </button>
+           
+        </div>
+    )
+}
+
+export default Upvote;
\ No newline at end of file

frontend/src/pages/Login.js

 import React from 'react'
+import {useState, useRef, useEffect} from 'react'
 import styles from '../styles/login.module.css'
 import LoginForm from '../components/LoginForm'
 
 
+
 const Login = () => {
+const userRef = useRef();
+const errRef = useRef();
 
+  const[password,setPassword] = useState("")
+  const[email,setEmail] = useState("")
+  const [errMsg, setErrMsg] = useState('');
+  const [success, setSuccess] = useState(false);
   return (
     <div className={styles.parent}>
       <div className={styles.left}>

frontend/src/styles/styles.module.css

 
 p{
-  color:white;  
+  color:white; 
+   
 }
 
 input{
   font-family: 'Poppins', sans-serif;
+  text-align: start;
+  margin-left:10px;
+}
+textarea{
+  font-family: 'Poppins', sans-serif;
+  text-align: start;
+  margin-left:10px;
 }
 .Header{
     height: 90vh;
@@ -25,11 +33,13 @@ input{
     color: rgb(255, 240, 153);
     font-size: 350%;
 }
+
 .pick_file {
   color: rgb(67, 1, 128);
   font-size: 35px;
-  margin:0;
-  display: flex;
+  margin:10px;
+ 
+  display: inline;
   justify-content: center;
   align-items: center;
   
@@ -44,7 +54,7 @@ input{
   display: flex; /* Add display flex to center image vertically */
   align-items: center; /* Center image vertically */
   justify-content: center; /* Center image horizontally */
-
+  
   }
   
 .image_container img {
@@ -54,6 +64,7 @@ object-fit: cover;
 
 
 }
+
 .text_container{
     display: flex;
     flex-direction: column;
@@ -96,10 +107,11 @@ object-fit: cover;
   margin-bottom: 15px;
   
 }
+
 .post_container{
   min-height: 35vh;
   margin: auto;
-  width: 50vw;
+  width: 600px;
   text-align: center;
   display: flex;
   flex-direction: row;
@@ -109,46 +121,76 @@ object-fit: cover;
   -webkit-backdrop-filter: blur(10px);
   border-radius: 10px;
   box-shadow: 0 8px 23px 0 rgba(0, 0, 0, 0.2);
+  box-align: center;
+}
+.post_container h1{
+  box-align: center;
+  margin-left: 26%;
 }
-
 .post_input1{
   border: none;
-  background-color: rgb(11, 58, 58);
-  width: 300px;
+  background-color: rgb(26, 100, 100);
+  width: 500px;
   height: 30px;
   color: aliceblue;
   outline: none;
-  margin: 10px;
+  margin-left: 50px;
+  margin-bottom: 10px;
   margin-top: 15px;
-  
+  border-radius:4px;
 }
 .post_input2{
   border: none;
-  background-color: rgb(11, 58, 58);
-  width: 1000px;
-  height: 200px;
-  color: aliceblue;
+  background-color: rgb(26, 100, 100);
+  width: 500px;
+  height: 100px;
+  color: rgb(250, 250, 250);
   outline: none;
-  margin: 10px;
-  
+  margin-left: 50px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  border-radius:4px;
 }
 .post_container button{
   background: rgb(150, 172, 110);
   color: white;
   font-weight: bold;
+  font-size: 18px;
   border: none;
-  width: 100px;
-  height: 40px;
-  margin-left: 15px;
-  margin-bottom: 5px;
+  width: 200px;
+  height: 80px;
+  margin-left: 35%;
+  margin-bottom: 25px;
   font-family: 'Poppins', sans-serif;
   border-radius: 5px;
+  
+  
+  
+}
+.upvote{
+  background-color: rgb(25, 100, 100);
+  height: 30px;
+  width:30px;
+  box-align: center;
+  
+  font-size: 18px;
+  font-family: 'Poppins', sans-serif;
+  border-radius: 5px;
+  border: none;
+  color: white;
+  
+}
+.upvote button{
+  background: rgb(150, 172, 110);
+  color: white;
+  margin: auto;
 }
 .posts_container{
   min-height: 35vh;
   margin: auto;
   margin-top: 30px;
-  width: 50vw;
+  
+  width: 900px;
   text-align: center;
   display: flex;
   flex-direction: row;
@@ -158,4 +200,37 @@ object-fit: cover;
   -webkit-backdrop-filter: blur(10px);
   border-radius: 10px;
   box-shadow: 0 8px 23px 0 rgba(0, 0, 0, 0.2);
+}
+.post_img_container{
+  width: 300px; /* set width of image container */
+  height: 300px; /* set height of image container */
+  border-radius: 50%; /* make image container circular */
+  overflow: hidden;
+  display: flex; /* Add display flex to center image vertically */
+  align-items: center; /* Center image vertically */
+  justify-content: center; /* Center image horizontally */
+  margin-left: 5%;
+  margin-right: 10%;
+  margin-top:5%;
+  margin-bottom:5%;
+}
+.post_img_container img{
+
+  height: 100%;
+ width: 100%;
+  object-fit: cover;
+}
+
+.addpicture{
+  text-align: center;
+  margin-right: 30px;
+  margin-left:31%;
+  margin-bottom: 30px;
+  height:50px;
+  width:500px;
+  display:flex;
+}
+::placeholder {
+  color:aliceblue;
+  text-align: start;
 }
\ No newline at end of file

package-lock.json

+{
+  "name": "TDDD27",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}