Final sprint3 branch

knox-marketplace/src/components/FavItems.jsx

@@ -4,6 +4,8 @@ import ItemSingle from './ItemSingle'
 import { collection, getDocs } from "firebase/firestore";
 import { useState } from 'react';
 import { db } from '../firebase';
+import FavItemsSingle from './FavItemsSingle'
+
 
 const Container = styled.div`
     padding: 20px;
@@ -42,7 +44,7 @@ const FavItems = () => {
 
     <Container>
         {data.map(item => (
-            <ItemSingle 
+            <FavItemsSingle 
                 item = {item} 
                 key = {item.id}
             />
@@ -52,4 +54,5 @@ const FavItems = () => {
   )
 }
 
-export default FavItems
+export default FavItems
+

knox-marketplace/src/components/FavItemsSingle.jsx

@@ -0,0 +1,149 @@
+
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
+import { db } from '../firebase';
+import { doc, setDoc, addDoc, getDocs, collection, serverTimestamp, deleteDoc } from "firebase/firestore";
+import { getAuth } from "firebase/auth";
+
+
+
+
+
+const Info = styled.div`
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0,0.1);
+    opacity: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.5s ease;
+    cursor: pointer;
+`
+
+const Container = styled.div`
+    flex: 1;
+    margin: 5px;
+    min-width: 250px;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #FEF9E7;
+    position: relative;
+
+    &:hover ${Info} {
+        opacity: 1;
+    }
+`
+
+const Card = styled.div`
+    flex: 1;
+    margin: 5px;
+    height: 400px;
+    align-items: center;
+`
+
+const Image = styled.img`
+    height: 75%;
+`
+
+const ItemDetails = styled.div`
+    text-align: center;
+    height: 100px;
+`
+
+const Line = styled.h1`
+    text-align: center;
+`
+
+const Icon = styled.div`
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px;
+    transition: all 0.5s ease;
+
+    &:hover {
+        background-color: #e9f5f5;
+        transform: scale(1.1);
+    }
+`
+
+const FavItemsSingle = ({item}) => {
+
+    const [data, setData] = useState([]);
+
+
+    const handleDelete = async () => {
+
+        try{
+            await db.collection('FavoriteItems').doc(item.id).delete();
+            console.log("delete Success");
+        } catch {
+            console.log("error");
+        }
+    };
+
+
+
+  return (
+    // <Container>
+    //     <Image src = {item.img}/>
+
+    //     <Info>
+    //         <Icon>
+    //             <SearchIcon/>
+    //         </Icon> 
+    //         <Icon>
+    //             <FavoriteBorderOutlinedIcon/>
+    //         </Icon>
+    //     </Info>
+
+    //     <Container>
+    //         <h4>{item.title}</h4>
+    //         <h1>{item.cost}</h1>
+    //     </Container>
+    // </Container>
+
+
+    // <Container>
+    //     <h3>{item.title}</h3>
+    //     <h1>{item.cost}</h1>
+    // </Container>
+    <Card> 
+        <Container>
+            <Image src = {item.image}/>
+
+            <Info>
+                <Icon>
+                    <SearchIcon/>
+                </Icon> 
+                <Icon>
+                    <ClearIcon onClick = {handleDelete}/>
+                </Icon>
+            </Info>
+        </Container>
+
+        <ItemDetails>
+            <h4>{item.title}</h4>
+            <h4>${item.price}</h4>
+            <Line>_____</Line>
+        </ItemDetails>
+
+    </Card>
+  )
+}
+
+export default  FavItemsSingle;

knox-marketplace/src/components/ItemSingle.jsx

@@ -1,9 +1,11 @@
+
+
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined';
 import SearchIcon from '@mui/icons-material/Search';
 import { db } from '../firebase';
-import { doc, setDoc, addDoc, getDocs, collection, serverTimestamp } from "firebase/firestore";
+import { doc, setDoc, addDoc, getDocs, collection, serverTimestamp, deleteDoc} from "firebase/firestore";
 import { getAuth } from "firebase/auth";
 
 
@@ -89,6 +91,7 @@ const ItemSingle = ({item}) => {
     //     setCart([...cart, product]);
     // }
 
+
     const handleAdd = async(e) => {
         e.preventDefault();
 
@@ -104,7 +107,7 @@ const ItemSingle = ({item}) => {
 
             const docRef = await addDoc(collection(db, "FavoriteItems"), {
                 uid: user.uid,
-                ...data,
+                ...item,
                 timeStamp: serverTimestamp(),
             });
 
@@ -150,6 +153,7 @@ const ItemSingle = ({item}) => {
                 <Icon>
                     <FavoriteBorderOutlinedIcon onClick = {handleAdd}/>
                 </Icon>
+
             </Info>
         </Container>
 
@@ -163,4 +167,4 @@ const ItemSingle = ({item}) => {
   )
 }
 
-export default  ItemSingle;
+export default  ItemSingle;

knox-marketplace/src/pages/favPage.jsx

@@ -1,22 +1,123 @@
-import React from 'react'
+
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import '../App.css'; 
+import { useNavigate } from "react-router-dom";
 import Items from '../components/Items';
 import ItemSingle from '../components/ItemSingle';
 import FavItems from "../components/FavItems";
 
+const Container = styled.div`
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    height: 80px;
+    background-color: #F7DC6F;
+    width: 100%;
+    align-items: center;
+`
+
+const Wrapper = styled.div`
+    padding: 20px 20px;
+    display: flex;
+    justify-content: space-between;
+`
+
+const Left = styled.div`
+    flex: 1;
+
+`
+
+const Center = styled.div`
+    flex: 1;
+`
+
+const OurName = styled.h1`
+    font-weight: bold;
+`
+
+
 
 
 const FavPage = () => {
 
-
+    let navigate = useNavigate();
+
     return (
-        <div className="main">
+        <>
+          <Container>
+            <Wrapper>
+            <Left>
+                <HomeButton onClick={() => {navigate("/")}}>Home</HomeButton>
+                <PostItem onClick={() => {navigate("/post")}}>Post Item</PostItem>
+            </Left> 
 
-            <FavItems/>              
-        </div>
+                <Center>
+                    <OurName>Favorite Items</OurName>
+                </Center>
+            </Wrapper>
+        </Container>
+
+            <FavItems/>
+
+        </>
+
     );
 
 };
 
-export default FavPage;
+const PostItem = styled.button`
+    left: 0px;
+    appearance: none;
+    background-color: #CACFD2;
+    border: 2px solid #CACFD2;
+    border-radius: 5px;
+    box-sizing: border-box;
+    color: black;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: normal;
+    min-height: 40px;
+    outline: none;
+    padding: 6px 8px;
+    text-align: center;
+    margin-left: 10px;
+    margin-right: 10px;
+
+    &:hover {
+        background-color: #858585;
+        transition: all 0.5s ease;
+    }
+ `;
+
+ const HomeButton = styled.button`
+    right: 0px;
+    appearance: none;
+    background-color: #CACFD2;
+    border: 2px solid #CACFD2;
+    border-radius: 5px;
+    box-sizing: border-box;
+    color: black;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: normal;
+    min-height: 40px;
+    outline: none;
+    padding: 6px 8px;
+    text-align: center;
+    margin-left: 10px;
+    margin-right: 10px;
+
+    &:hover {
+        background-color: #858585;
+        transition: all 0.5s ease;
+    }
+ `;
+
+
+
+export default FavPage;