Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fw21 1068 day 4 #50

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+928 −941
Open

Fw21 1068 day 4 #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0b9d657
yes
nikhildeora Jan 20, 2023
03189f0
yes
nikhildeora Jan 20, 2023
9791a3d
yes
nikhildeora Jan 20, 2023
85c3129
done
nikhildeora Jan 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
552 changes: 539 additions & 13 deletions db.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function App() {
<div className="App">
<Navbar />


{/* <Arrival /> */}



Expand Down
Binary file added src/assets/findstoreimg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/components/AllRoutes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const AllRoutes = () => {
<Route path='/freetry' element={<FreeTryAtHome />} />
<Route path='/login' element={<Login />} />
<Route path='/signup' element={<Signup />} />
<Route path='/newarrival' element={<Arrival />} />
<Route path='/produt:id' element={<Detail />} />
<Route path='/newarrival/:category' element={<Arrival />} />
<Route path='/product/:id' element={<Detail />} />
</Routes>
)
}
Expand Down
215 changes: 139 additions & 76 deletions src/components/Arrival/Arrival.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,158 @@
import React from 'react'


import { Box,Text, Image, Checkbox} from '@chakra-ui/react'
import { Box, Image } from '@chakra-ui/react'

import Styles from "./Arrival.module.css"

import { Select } from '@chakra-ui/react'
import { useState } from 'react'
import { useEffect } from 'react'
import { useParams } from 'react-router-dom'
import findstore from "../../assets/findstoreimg.png"
import SingleProduct from '../SingleItem/SingleItem'


function Arrival() {
let[data,setData]=useState([]);

const [data, setData] = useState([]);
const { category } = useParams();
const [heroimg, setHeroimg] = useState("")
const [pselect,setPselect] = useState(1)
const [categ,setCateg] = useState("all")

useEffect(() => {
if (category === "all") {
setHeroimg("https://cdn.caratlane.com/media/static/images/V4/2022/CL/12-DEC/AppBanner/Newin/05/Desktop_1920-x560_toplisting.jpg")
setCateg("all")
} else if (category === "rings") {
setHeroimg("https://banner.caratlane.com/live-images/10c2cf82f2ad425b960f2587933652a7.jpg")
setCateg("rings")
} else if (category === "earrings") {
setHeroimg("https://banner.caratlane.com/live-images/4320a30823014770b49d6c35ba3508c9.jpg")
setCateg("earrings")
} else if (category === "bracelet") {
setHeroimg("https://banner.caratlane.com/live-images/dab8c9bccb50479fbad968e7ea6ea450.webp")
setCateg("bracelet")
} else if (category === "solitaire") {
setHeroimg("https://banner.caratlane.com/live-images/9aeed0015ab544ce98770daec556e90b.jpg")
setCateg("solitaire")
} else if (category === "mangalsutra") {
setHeroimg("https://banner.caratlane.com/live-images/ed19e9fc6ddd4de592b67776543499c1.jpg")
setCateg("mangalsutra")
} else if (category === "kids") {
setHeroimg("https://banner.caratlane.com/live-images/2f288a36fca243239f60f94730c6b49c.webp")
setCateg("kids")
} else if (category === "ready") {
setHeroimg("https://cdn.caratlane.com/media/static/images/V4/2022/CL/12-DEC/AppBanner/RTS/02/Desktop_1920-x560_toplisting.jpg")
setCateg("all")
} else if (category === "gifts") {
setHeroimg("https://banner.caratlane.com/live-images/5d89e218eb56457c9814f8e2f7b8b6ec.jpg")
setCateg("all")
} else if (category === "findstore") {
setHeroimg(findstore)
setCateg("all")
}

const getData=async()=>{
let resp=await fetch(` http://localhost:8080/jewellery`);
let apiData=await resp.json();
setData(apiData)
const getData = async () => {
let resp;
if (category === "all" || category === "ready" || category === "gifts" || category === "findstore") {
resp = await fetch(`http://localhost:8080/jewellery`);
} else {
resp = await fetch(`http://localhost:8080/jewellery?category=${category}`);
}
let apiData = await resp.json();
setData(apiData)
}
getData()
setPselect(1)
}, [category])

async function sorrtbygte(gte,lte){
if(gte===0){
setPselect(1)
}else if(gte===5000){
setPselect(2)
}else if(gte===10000){
setPselect(3)
}else if(gte===20000){
setPselect(4)
}else if(gte===30000){
setPselect(5)
}else if(gte===40000){
setPselect(6)
}


let resp;
if (category === "all" || category === "ready" || category === "gifts" || category === "findstore") {
resp = await fetch(`http://localhost:8080/jewellery?price_gte=${gte}&price_lte=${lte}`);
setCateg("all")
} else {
resp = await fetch(`http://localhost:8080/jewellery?category=${category}&price_gte=${gte}&price_lte=${lte}`);
}
let apiData = await resp.json();
setData(apiData)

}

async function changeCateg(switchcateg){

if (category === "all" || category === "ready" || category === "gifts" || category === "findstore") {
let res = await fetch(`http://localhost:8080/jewellery?category=${switchcateg}`);
let apiData = await res.json();
setData(apiData)
setCateg(switchcateg)
setPselect(1)
}

}

useEffect(()=>{
getData()
},[])
console.log(data)

return (
<div>
<div>
<Box maxW='sm' borderWidth='1px' borderRadius='lg' overflow='hidden'>
<Image boxSize='100%' src='https://cdn.caratlane.com/media/static/images/V4/2022/CL/12-DEC/AppBanner/Newin/05/Desktop_1920-x560_toplisting.jpg' alt='Dan Abramov' />
</Box>
</div>


{/* sliding data */}
{/* <Box className={Styles.marquee}>
<marquee>
<h2>15 Day Money Back </h2>
</marquee>
</Box> */}
{/* data */}

<div className={Styles.Data_container}>
<div className={Styles.sidebar}>
<div className={Styles.Filter}><Text fontSize='2xl'>Filter By</Text></div>
<div className={Styles.Priceheading}>Price</div>
<div className={Styles.priceData}>
<p> &#8377; 5000- &#8377; 10000</p>
<p> &#8377; 100001- &#8377; 20000</p>
<p> &#8377; 200001- &#8377; 30000</p>
<p> &#8377; 300001- &#8377; 40000</p>
<p> &#8377; 400001- &#8377; 50000</p>
</div>

<div className={Styles.Priceheading}>Product</div>
<div className={Styles.priceData}>
<p> Rings</p>
<p> Earrings</p>
<p> Bracelets</p>
<p> Solitaires</p>
<p>Manglasutra</p>
<p>Kids</p>
</div>
</div>
<div className={Styles.box}>

{
data.map((el)=>(
<div className={Styles.card}>
{/* <img src={el.image} alt='da'/> */}
<Image src={el.image} alt="im" w="100%" />
<div>
<Text className={Styles.price}> &#8377; : {el.price}</Text>
<Text className={Styles.name}>{el.name}</Text>
</div>
<div>
<div className={Styles.button_container}>
<button style={{color:"white"}}>Add to cart</button>
<button style={{color:"white"}}>Wish List</button>
</div>
</div>
</div>
))
}


</div>
</div>


<div style={{ marginTop: "7rem" }}>
<div>
<Box maxW='sm' borderWidth='1px' borderRadius='lg' overflow='hidden'>
<Image boxSize='100%' src={heroimg} alt='Dan Abramov' />

</Box>
</div>


<div className={Styles.arrival__maindiv} >
<div className={Styles.arrival__sortdiv}>
<p className={Styles.arrival__filterbytag}>Filter By</p>
<div>
<h2>Price</h2>
<button style={pselect===1 ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>sorrtbygte(0,200000)} >Whole Range</button>
<button style={pselect===2 ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>sorrtbygte(5000,10000)}>&#8377; 5000- &#8377; 10000</button>
<button style={pselect===3 ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>sorrtbygte(10000,20000)}>&#8377; 10000- &#8377; 20000</button>
<button style={pselect===4 ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>sorrtbygte(20000,30000)}>&#8377; 20000- &#8377; 30000</button>
<button style={pselect===5 ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>sorrtbygte(30000,40000)}>&#8377; 30000- &#8377; 40000</button>
<button style={pselect===6 ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>sorrtbygte(40000,200000)}>&#8377; 40000- &#8377; 200000</button>
</div>
<div>
<h2>Category</h2>
<button style={categ==="rings" ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>changeCateg("rings")}>Rings</button>
<button style={categ==="earrings" ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>changeCateg("earrings")}>Earrings</button>
<button style={categ==="bracelet" ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>changeCateg("bracelet")}>Bracelets</button>
<button style={categ==="solitaire" ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>changeCateg("solitaire")}>Solitaires</button>
<button style={categ==="mangalsutra" ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>changeCateg("mangalsutra")}>Manglasutra</button>
<button style={categ==="kids" ? {background: 'linear-gradient(to right,#fff6c8 0%,#ffd7f5 48%)'} : null} onClick={()=>changeCateg("kids")}>Kids</button>
</div>
</div>
<div className={Styles.arrival__datadiv}>
{data?.map((el)=>(
<SingleProduct key={el.id} {...el} />
))}
</div>
</div>



</div>
)
}

export default Arrival
export default Arrival;


Loading