Skip to content

Commit

Permalink
Modified cart, wishlist and sort by menus
Browse files Browse the repository at this point in the history 
Added a call to furniture items and display functionality on the listing page
  • Loading branch information
@naeem4633
naeem4633 committed Jun 16, 2023
1 parent 376b8a6 commit 176ec17
Show file tree
Hide file tree
Showing 8 changed files with 133 additions and 61 deletions.
22 changes: 22 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"alpinejs": "^3.12.2",
"axios": "^1.4.0",
"flowbite": "^1.6.5",
"flowbite-react": "^0.4.7",
Expand Down
35 changes: 23 additions & 12 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import './App.css';
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Header from './components/Header';
import Body from './components/Body';
import Footer from './components/Footer';
import MovingImages from './components/MovingImages';
import Listing from './components/Listing';
import Details from './components/Details';
import Login from './components/Login';
import Wishlist from './components/Wishlist';
import Cart from './components/Cart';
import React, {useState, useEffect} from 'react'
import React, { useState, useEffect } from 'react';

export default function App() {
const [furniture, setFurniture] = useState(null);
const [furniture, setFurniture] = useState([]);
const [savedItems, setSavedItems] = useState([]);

useEffect(() => {
Expand All @@ -22,24 +21,36 @@ export default function App() {
.catch(error => console.error(error));
}, []);

useEffect(() => {
fetch('http://127.0.0.1:8000/api/')
.then(response => response.json())
.then(data => setFurniture(data))
.catch(error => console.error(error));
}, []);

// Filter furniture by category
const beds = furniture.filter(item => item.category === 'bed');
console.log(beds);
const dining = furniture.filter(item => item.category === 'dining');
const wardrobes = furniture.filter(item => item.category === 'wardrobe');

return (
<Router>
<div className="App">
<Header savedItems={savedItems} onChange={() => {}} />
<Routes>
<Route path="/" /*exact*/ element={<><MovingImages/><Body/></>} />
<Route path="/details/:id" element={<Details/>} />
<Route path="/beds" element={<Listing/>} />
<Route path="/dining" element={<Listing/>} />
<Route path="/wardrobes" element={<Listing/>} />
<Route path="/login" element={<Login/>} />
<Route path="/" element={<Body />} />
<Route path="/details/:id" element={<Details />} />
<Route path="/beds" element={<Listing furniture={beds} />} />
<Route path="/dining" element={<Listing furniture={dining} />} />
<Route path="/wardrobes" element={<Listing furniture={wardrobes} />} />
<Route path="/login" element={<Login />} />
<Route path="/wishlist" element={<Wishlist />} />
<Route path="/cart" element={<Cart />} />
{/* <Route path="/confirmOrder" element={<ConfirmOrder />} /> */}
</Routes>
<Footer/>
<Footer />
</div>
</Router>
)
);
}
3 changes: 3 additions & 0 deletions src/components/Body.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React from 'react';
import { Link } from 'react-router-dom';
import MovingImages from './MovingImages';


const Body = () => {

return (
<>
<MovingImages />
<div className='flex flex-col items-center mt-20'>
<div className='mb-8 text-2xl underline'>
<p>SHOP BY CATEGORIES</p>
Expand Down
4 changes: 4 additions & 0 deletions src/components/Details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ const Details = () => {
let [savedItems, setSavedItems] = useState([]);
let [quantity, setQuantity] = useState(1);

useEffect(() => {
window.scrollTo(0, 0);
}, []);

useEffect(() => {
fetchfurnitureItem();
}, []);
Expand Down
34 changes: 20 additions & 14 deletions src/components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,21 +72,24 @@ const Header = ({savedItems, onChange}) => {
onMouseLeave= {() => setWishlistIsHovered(false)} className="block py-2 pl-3 pr-4 text-black rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
<img className='h-8' src='../images/heart.png' alt='wishlist'></img>
{wishlistIsHovered && (
<div className="popover absolute w-80 bg-white border border-gray-300 rounded flex-col">
<div className="popover absolute w-80 bg-white rounded flex-col transform -translate-x-1/3 mt-3 drop-shadow-lg">
<div className='flex flex-col'>
<p className='m-4 text-lg'>Your Wishlist</p>
{
wishlistItems.map((item) => (
<div className='flex flex-row text-sm mx-6 my-3'>
<>
<div className='w-full bg-gray-300'></div>
<div className='flex flex-row text-sm mx-6 mt-3 mb-5'>
<img className='w-20 h-20' src={item.furniture.image_path}></img>
<div className='flex flex-col justify-between text-left'>
<div className='flex flex-row'>
<p className='ml-4'>{item.furniture.name}</p>
<img src='../images/delete.png' className='h-4 mr-4 justify-right items-right'></img>
<div className='flex flex-col text-left justify-between'>
<div className='flex flex-row w-64'>
<p className='ml-4 w-3/5'>{item.furniture.name}</p>
<img src='../images/delete.png' className='h-4 mt-2'></img>
</div>
<p className='mx-4 mb-2'>$ {item.furniture.price}</p>
</div>
</div>
</>
))
}
</div>
Expand All @@ -98,30 +101,33 @@ const Header = ({savedItems, onChange}) => {
<Link onClick = {() => setCartIsHovered(true)}
onMouseLeave= {() => setCartIsHovered(false)} className="block py-2 pl-3 pr-4 text-black rounded hover:bg-gray-100 md:hover:bg-transparent md:p-0 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
<img className='h-8' src='../images/cart.png' alt='cart'></img>
{cartIsHovered && (
<div className="popover absolute w-80 bg-white border border-gray-300 rounded flex-col">
{ cartIsHovered && (
<div className="popover absolute w-80 bg-white rounded flex-col transform -translate-x-1/3 mt-3 drop-shadow-lg">
<div className='flex flex-col'>
<p className='m-4 text-lg'>Your Cart</p>
{
cartItems.map((item) => (
<div className='flex flex-row text-sm mx-6 my-3'>
<>
<div className='w-3/4 mx-auto border border-gray-200 mb-2'></div>
<div className='flex flex-row text-sm mx-6 mt-3 mb-5'>
<img className='w-20 h-20' src={item.furniture.image_path}></img>
<div className='flex flex-col justify-between text-left'>
<div className='flex flex-row'>
<p className='ml-4'>{item.furniture.name}</p>
<img src='../images/delete.png' className='h-4 mr-4 justify-right items-right'></img>
<div className='flex flex-col text-left justify-between'>
<div className='flex flex-row w-64'>
<p className='ml-4 w-3/5'>{item.furniture.name}</p>
<img src='../images/delete.png' className='h-4 mt-2'></img>
</div>
<p className='mx-4 mb-2'>$ {item.furniture.price}</p>
</div>
</div>
</>
))
}
</div>
</div>
)}
</Link>
</li>
</ul>
</ul>
</div>
</div>
</nav>
Expand Down
93 changes: 59 additions & 34 deletions src/components/Listing.js
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,79 @@
import React from 'react'
import React, { useState, useRef } from 'react';
import { Link } from 'react-router-dom';

const Listing = () => {
const Listing = ( {furniture} ) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const dropdownRef = useRef(null);
const delayTimeoutRef = useRef(null);

const toggleDropdown = () => {
setDropdownOpen(!dropdownOpen);
};

// if (sortBy === "low_to_high") {
// filteredProducts.sort((a, b) => a.price - b.price);
// } else if (sortBy === "high_to_low") {
// filteredProducts.sort((a, b) => b.price - a.price);
// }

const handleMouseLeave = () => {
clearTimeout(delayTimeoutRef.current);
delayTimeoutRef.current = setTimeout(() => {
setDropdownOpen(false);
}, 1000);
};

return (
<>
<div className='flex-flex-row justify-center'>
<div className="bg-white dark:bg-gray-900 border border-gray-200 border-t-1 border-l-0 border-r-0 border-b-0">
<div className="mx-auto w-full max-w-screen px-24 py-6 lg:py-8 flex flex-row justify-center">
<button className='flex flex-row justify-between mx-10'>
<img className='w-6 mx-3' src='../images/filter.png'></img>
<p>Filter By</p>
<button className="flex flex-row justify-between mx-10">
<img className="w-6 mx-3" src="../images/filter.png" alt="Filter icon"></img>
<p>Filter By</p>
</button>
<button className='flex flex-row justify-between mx-10'>
<p>Sort</p>
<img className='w-6 mx-3' src='../images/down-arrow.png'></img>

<div className="relative inline-block flex flex-row" onClick={toggleDropdown} onMouseLeave={handleMouseLeave}>
<p className='mx-2'>Sort By</p>
<button
className="dropdown-toggle"
type="button"
id="filterDropdown"
aria-haspopup="true"
aria-expanded={dropdownOpen}
>
<img src="../images/down-arrow.png" alt="Down arrow icon" className="w-6 h-6" />
</button>
{dropdownOpen && (
<ul className="bg-white absolute w-48 transform translate-y-1/2 -translate-x-1/4 rounded border-2 border-gray-300 drop-shadow-lg" aria-labelledby="filterDropdown">
<li>
<button className="mx-auto mt-4" value="low_to_high">
Price: Low to high
</button>
</li>
<li>
<button className="mx-auto my-4" value="high_to_low">
Price: High to low
</button>
</li>
</ul>
)}
</div>
</div>
</div>

<div className="w-3/4 bg-white dark:bg-gray-900 border border-gray-300 border-t-1 border-l-0 border-r-0 border-b-0 mx-auto">
<div className="mx-auto w-full max-w-screen-xl py-6 lg:py-8 flex flex-row">
<div className="grid grid-cols-3 gap-x-32 gap-y-8 my-8 ">
<Link className="w-[27rem] mx-auto">
<img className='w-full' src='../images/bed-1.jpg'></img>
<div className="grid grid-cols-3 gap-x-32 gap-y-8 my-8">
{furniture.map((item) => (
<Link to={`/details/${item.id}`} className="w-[27rem] mx-auto drop-shadow-lg transform transition-all duration-500 hover:scale-105" key={item.id}>
<img className='w-full rounded' src={item.image_path}></img>
<div className='flex flex-col justify-between my-6 h-14'>
<p className=''>///////////PRODUCT NAME\\\\\\\\\\\\\\</p>
<p className='font-bold'>ss</p>
<p className=''>{item.name}</p>
<p className='font-bold'>$ {item.price}</p>
</div>
</Link>
<div className="w-[27rem] mx-auto">
<img className='w-full' src='../images/bed-1.jpg'></img>
<div className='flex flex-col justify-between my-6 h-14'>
<p className=''>///////////PRODUCT NAME\\\\\\\\\\\\\\</p>
<p className='font-bold'>ss</p>
</div>
</div>
<div className="w-[27rem] mx-auto">
<img className='w-full' src='../images/bed-1.jpg'></img>
<div className='flex flex-col justify-between my-6 h-14'>
<p className=''>///////////PRODUCT NAME\\\\\\\\\\\\\\</p>
<p className='font-bold'>ss</p>
</div>
</div>
<div className="w-[27rem] mx-auto">
<img className='w-full' src='../images/bed-1.jpg'></img>
<div className='flex flex-col justify-between my-6 h-14'>
<p className=''>///////////PRODUCT NAME\\\\\\\\\\\\\\</p>
<p className='font-bold'>ss</p>
</div>
</div>
))}
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/MovingImages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@ const MovingImages = () => {
</div>
)
}
export default MovingImages;
export default MovingImages;

0 comments on commit 176ec17

Please sign in to comment.