-
- {navigate("/")}}>Home
- {navigate("/post")}}>Post Item
-
+
-
- Favorite Items
-
-
-
-
-
-
-
-
+
+
);
};
-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;
\ No newline at end of file
From 345195b0ae7c35f3943378e9201880d268ddb42b Mon Sep 17 00:00:00 2001
From: Hector S <75858294+hectorsally29@users.noreply.github.com>
Date: Sun, 15 May 2022 13:51:58 -0500
Subject: [PATCH 3/3] new favorite item changes
---
knox-marketplace/src/components/FavItems.jsx | 7 +-
.../src/components/FavItemsSingle.jsx | 149 ++++++++++++++++++
.../src/components/ItemSingle.jsx | 10 +-
knox-marketplace/src/pages/favPage.jsx | 113 ++++++++++++-
4 files changed, 268 insertions(+), 11 deletions(-)
create mode 100644 knox-marketplace/src/components/FavItemsSingle.jsx
diff --git a/knox-marketplace/src/components/FavItems.jsx b/knox-marketplace/src/components/FavItems.jsx
index a8c6723..848eec6 100644
--- a/knox-marketplace/src/components/FavItems.jsx
+++ b/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 = () => {
{data.map(item => (
-
@@ -52,4 +54,5 @@ const FavItems = () => {
)
}
-export default FavItems
\ No newline at end of file
+export default FavItems
+
diff --git a/knox-marketplace/src/components/FavItemsSingle.jsx b/knox-marketplace/src/components/FavItemsSingle.jsx
new file mode 100644
index 0000000..da31d6f
--- /dev/null
+++ b/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 (
+ //
+ //
+
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+
+ //
+ // {item.title}
+ // {item.cost}
+ //
+ //
+
+
+ //
+ // {item.title}
+ // {item.cost}
+ //
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {item.title}
+ ${item.price}
+ _____
+
+
+
+ )
+}
+
+export default FavItemsSingle;
diff --git a/knox-marketplace/src/components/ItemSingle.jsx b/knox-marketplace/src/components/ItemSingle.jsx
index d87c779..20c21b5 100644
--- a/knox-marketplace/src/components/ItemSingle.jsx
+++ b/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}) => {
+
@@ -163,4 +167,4 @@ const ItemSingle = ({item}) => {
)
}
-export default ItemSingle;
\ No newline at end of file
+export default ItemSingle;
diff --git a/knox-marketplace/src/pages/favPage.jsx b/knox-marketplace/src/pages/favPage.jsx
index 997c618..ffbd823 100644
--- a/knox-marketplace/src/pages/favPage.jsx
+++ b/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 (
-
+ <>
+
+
+
+ {navigate("/")}}>Home
+ {navigate("/post")}}>Post Item
+
-
-