Skip to content

Commit 17bda0a

Browse files
Prashant3216Prashant3216
committed
added slide
1 parent 16fc7ab commit 17bda0a

File tree

14 files changed

+149
-39
lines changed

14 files changed

+149
-39
lines changed

‎project_olx/src/ContextAPI/Reducer.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export function Reducer(state,action){
66
case "dataRequest": return {...state, isDataLoading:true}
77
case "dataSuccess": return {...state, isDataLoading:false, data:action.payload}
88
case "dataFailure": return {...state, isDataLoading:false, isError:true}
9-
case "logoutRequest": return {...state, isAuth:false}
9+
case "logoutRequest": return {...state, isAuth:false, isError:false, isLoading:false}
1010
case "signupRequest": return {...state, isLoading:true}
1111
case "signupSuccess": return {...state, isLoading:false}
1212
case "signupFailure": return {...state, isLoading:false, isError:true}

‎project_olx/src/components/ListOfProduct.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { Product } from "./Product";
44
export function ListOfProduct({ data = [] }) {
55
return (
66

7-
<Container maxW={1300} m="30px auto">
8-
<Text mt="20" mb="20px" fontSize="2xl">Fresh Recommendations</Text>
9-
<SimpleGrid columns={[1,2,3,4]} spacingY='20px'>
7+
<Container maxW={1300} m="30px auto" fontFamily="textType">
8+
<Text mt="20" mb="20px" ml="20px" fontSize="2xl" >Fresh Recommendations</Text>
9+
<SimpleGrid columns={[1,2,3,4]} spacingY='20px' pl="20px">
1010
{data.map((item) => (
1111
<Product product={item} key={item.id}/>
1212
))}

‎project_olx/src/components/ListSlider.jsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Container, SimpleGrid, Text } from "@chakra-ui/react";
2+
import {ChevronRightIcon,ChevronLeftIcon} from "@chakra-ui/icons"
3+
import { Product } from "./Product";
4+
5+
export function ListSlider({ data ,handlePage,current}) {
6+
return (
7+
<Container
8+
maxW={1240}
9+
m="30px auto"
10+
fontFamily="textType"
11+
bgColor="primary"
12+
borderRadius="5px"
13+
pt="20px"
14+
pb="40px"
15+
position="relative"
16+
>
17+
<Text mb="10px" fontSize="2xl">
18+
Based on your Last Search
19+
</Text>
20+
<SimpleGrid columns={[1, 2, 3, 4]} pl="15px">
21+
{data.map((item) => (
22+
<Product product={item} key={item.id} />
23+
))}
24+
</SimpleGrid>
25+
{current!==1 && <ChevronLeftIcon onClick={()=>handlePage(-1)} w="20px" h="40px" bgColor="secondary" color="white" position="absolute" top="50%" left="0px"/>}
26+
<ChevronRightIcon onClick={()=>handlePage(1)} w="20px" h="40px" bgColor="secondary" color="white"position="absolute" top="50%" right="0"/>
27+
</Container>
28+
29+
30+
);
31+
}

‎project_olx/src/components/Modal.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function UseModal() {
1717
const { isOpen, onOpen, onClose } = useDisclosure();
1818
return (
1919
<>
20-
<Button onClick={onOpen}>Login</Button>
20+
<Button onClick={onOpen} bgColor="transparent">Login</Button>
2121

2222
<Modal isOpen={isOpen} onClose={onClose}>
2323
<ModalOverlay />

‎project_olx/src/components/Product.jsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,20 @@ import {
77
Stack,
88
Text,
99
} from "@chakra-ui/react";
10-
10+
import { AppContext } from "../ContextAPI/ContextProvider";
11+
import { useContext } from "react";
1112
export function Product({ product }) {
13+
const { state } = useContext(AppContext);
1214
return (
1315
<Box
1416
border="1px solid black"
1517
w="288px"
1618
p="9px"
1719
fontFamily="texttype"
1820
borderRadius="5px"
21+
bgColor="white"
1922
>
23+
2024
<Stack spacing="4px">
2125
<Flex w="270px" h="160px" justify={"center"}>
2226
<Image src={product.image} alt={product.title} h="100%"></Image>
@@ -35,6 +39,7 @@ export function Product({ product }) {
3539
</Flex>
3640
</Flex>
3741
</Stack>
42+
3843
</Box>
3944
);
4045
}

‎project_olx/src/components/SearchNavbar.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function SearchNavbar() {
2323
alert("Logged out Successfully")
2424
}
2525
return (
26-
<Box border="1px solid" borderColor="primary" pb="3px" boxShadow={shadow}>
26+
<Box border="1px solid" borderColor="primary" pb="3px" width="100%" boxShadow={shadow} bgColor="white" >
2727
<Box bg="primary">
2828
<Container maxW={1500}>
2929
<HStack p="10px 80px" spacing={3}>
@@ -88,7 +88,7 @@ export function SearchNavbar() {
8888
<option value="option2">हिन्दी</option>
8989
</Select>
9090
<Box fontFamily="textType">
91-
{state.isAuth?<Button onClick={handleLogout}>Logout</Button>:<UseModal />}
91+
{state.isAuth?<Button onClick={handleLogout} bgColor="transparent">Logout</Button>:<UseModal />}
9292
</Box>
9393
<Flex
9494
border="4px solid black"

‎project_olx/src/components/Slider.jsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { getData } from "../utilities/api";
2+
import { useState, useEffect } from "react";
3+
import { ListSlider } from "./ListSlider";
4+
import { Skeleton } from "@chakra-ui/react";
5+
6+
export function Slider() {
7+
const [page, setPage] = useState(1);
8+
const [isLoading, setLoading] = useState(false);
9+
const [isError, setError] = useState(false);
10+
const [slideData, setSlideData] = useState([]);
11+
12+
useEffect(() => {
13+
setLoading(true);
14+
getData(page)
15+
.then((res) => {
16+
console.log(res.data);
17+
setLoading(false);
18+
setSlideData(res.data);
19+
})
20+
.catch((err) => {
21+
setLoading(false);
22+
setError(true);
23+
console.log(err);
24+
});
25+
}, [page]);
26+
27+
let handlePage=(val)=>{
28+
setPage(page+val)
29+
}
30+
31+
32+
return isLoading ? (
33+
<Skeleton maxW={1300} m="auto">
34+
<ListSlider data={slideData} handlePage={handlePage} current={page}/>
35+
</Skeleton>
36+
) : isError ? null : (
37+
<ListSlider data={slideData} handlePage={handlePage} current={page}/>
38+
);
39+
}

‎project_olx/src/components/footer.jsx

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
1-
import { Box, Container, Flex, Image, SimpleGrid, Text } from "@chakra-ui/react";
1+
import {
2+
Box,
3+
Container,
4+
Flex,
5+
Image,
6+
SimpleGrid,
7+
Text,
8+
} from "@chakra-ui/react";
29

310
export function Footer() {
411
return (
512
<>
6-
713
<Flex
814
fontFamily="textType"
915
bgColor="#ebeeef"
1016
justify="center"
1117
align="center"
1218
>
13-
<SimpleGrid spacingX="50px" columns={[1,3,4,5]} p="20px">
19+
<SimpleGrid spacingX="50px" columns={[1, 3, 4, 5]} p="20px">
1420
<Flex direction="column" align="left">
1521
<Text as="b" fontSize="md" mb="12px">
1622
POPULAR LOCATIONS
@@ -141,7 +147,16 @@ export function Footer() {
141147
bgColor="secondary"
142148
justify="center"
143149
align="center"
144-
></Flex>
150+
>
151+
<SimpleGrid spacingX="400px" columns={[1, 2, 2, 2]} fontSize="12px">
152+
<Flex color="white" gap="8px">
153+
<Text as="b" >Other Countries</Text>
154+
<Text>Pakistan </Text> <span> - </span><Text>South Africa </Text><span> - </span>
155+
<Text>Indonesia</Text>
156+
</Flex>
157+
<Flex color="white" gap="8px"><Text as="b">Free Classifieds in India </Text><span>© 2006-2022 OLX</span></Flex>
158+
</SimpleGrid>
159+
</Flex>
145160
</>
146161
);
147162
}

‎project_olx/src/pages/Banner.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export function Banner({hording}) {
1010
bgSize="cover"
1111
justify="center"
1212
align="center"
13+
1314
></Flex>
1415
);
1516
}

‎project_olx/src/pages/HomePage.jsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect } from "react";
22
import { useContext } from "react";
33
import { Footer } from "../components/footer";
44
import { ListOfProduct } from "../components/ListOfProduct";
5+
import { Slider } from "../components/Slider";
56
import {
67
DATA_FAILURE,
78
DATA_REQUEST,
@@ -14,6 +15,7 @@ import { AppContext } from "../ContextAPI/ContextProvider";
1415
import { getRequest } from "../utilities/api";
1516
import { Banner } from "./Banner";
1617
import { Banner2 } from "./Banner2";
18+
import {Skeleton,Text} from "@chakra-ui/react"
1719

1820
export function HomePage() {
1921
const { state, dispatch } = useContext(AppContext);
@@ -31,12 +33,12 @@ export function HomePage() {
3133
});
3234
}, []);
3335

34-
return (
35-
<>
36+
return (<>
3637
<Banner hording={"https://statics.olx.in/olxin/banners/[email protected]"}/>
37-
<ListOfProduct data={state.data} />
38+
<Slider/>
39+
{state.isDataLoading ? <Skeleton maxW={1300} m="auto"><ListOfProduct data={state.data} /> </Skeleton> : state.isError?<Text>Error-404</Text>:<ListOfProduct data={state.data} /> }
40+
3841
<Banner2/>
3942
<Footer/>
40-
</>
41-
);
43+
</>);
4244
}

0 commit comments

Comments
 (0)