Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 32aca5f0 by jaymehta
Options

.

1 parent 2ff6c536
Inline Side-by-side
Showing 8 changed files with 49 additions and 16 deletions
components/detail/DetailInfo.js
...@@ -111,7 +111,7 @@ const DetailInfo = ({ activityById }) => { ...@@ -111,7 +111,7 @@ const DetailInfo = ({ activityById }) => {
<div className="location"> <div className="location">
Location & Address Location & Address
</div> </div>
<div className="mb-2">Chelsea </div> {/* <div className="mb-2">Chelsea </div> */}
<div className="">{activityById.data.attributes.address}</div> <div className="">{activityById.data.attributes.address}</div>
<div className="btn-row"> <div className="btn-row">
<Button <Button
......
components/home/BrowseExperiences.js
...@@ -34,7 +34,14 @@ const BrowseExperiences = ({ allActivitiesData }) => { ...@@ -34,7 +34,14 @@ const BrowseExperiences = ({ allActivitiesData }) => {
</div> </div>
</motion.div> </motion.div>
<div className="view-all-btn"> <div className="view-all-btn">
<Button variant="primary">View All</Button> <Button
variant="primary"
onClick={() => {
router.push("/listing");
}}
>
View All
</Button>
</div> </div>
</div> </div>
</div> </div>
......
components/home/GiftAnExperience.js
...@@ -3,7 +3,9 @@ import React from "react"; ...@@ -3,7 +3,9 @@ import React from "react";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js"; import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { useRouter } from "next/router.js";
const GiftAnExperience = () => { const GiftAnExperience = () => {
const router = useRouter();
return ( return (
<> <>
<section className="gift-an-experience-session"> <section className="gift-an-experience-session">
...@@ -18,7 +20,9 @@ const GiftAnExperience = () => { ...@@ -18,7 +20,9 @@ const GiftAnExperience = () => {
<div className="title">Gift An Experience For Any Occasion</div> <div className="title">Gift An Experience For Any Occasion</div>
<div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div> <div className="disc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
<div> <div>
<Button variant="primary">Gift An Experience</Button> <Button variant="primary" onClick={()=> {
router.push("/gift-card")
}}>Gift An Experience</Button>
</div> </div>
</div> </div>
</motion.div> </motion.div>
......
components/home/LetDiscover.js
...@@ -12,7 +12,9 @@ import "swiper/css"; ...@@ -12,7 +12,9 @@ import "swiper/css";
import "swiper/css/pagination"; import "swiper/css/pagination";
import "swiper/css/navigation"; import "swiper/css/navigation";
import { cleanImage } from "../../services/imageHandling.js"; import { cleanImage } from "../../services/imageHandling.js";
import { useRouter } from "next/router.js";
const LetDiscover = ({ categories }) => { const LetDiscover = ({ categories }) => {
const router = useRouter();
return ( return (
<> <>
<section className="let-discover-session"> <section className="let-discover-session">
...@@ -30,7 +32,14 @@ const LetDiscover = ({ categories }) => { ...@@ -30,7 +32,14 @@ const LetDiscover = ({ categories }) => {
</div> </div>
</motion.div> </motion.div>
<div className="view-all-btn"> <div className="view-all-btn">
<Button href="/listing" variant="primary">View All</Button> <Button
onClick={() => {
router.push("/listing");
}}
variant="primary"
>
View All
</Button>
</div> </div>
</div> </div>
</div> </div>
...@@ -66,7 +75,7 @@ const LetDiscover = ({ categories }) => { ...@@ -66,7 +75,7 @@ const LetDiscover = ({ categories }) => {
}} }}
className="mySwiper01 mySwiper02" className="mySwiper01 mySwiper02"
> >
<SwiperSlide> {/* <SwiperSlide>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<a href=""> <a href="">
<span className="image-container"> <span className="image-container">
...@@ -75,13 +84,17 @@ const LetDiscover = ({ categories }) => { ...@@ -75,13 +84,17 @@ const LetDiscover = ({ categories }) => {
<div className="title">ALL</div> <div className="title">ALL</div>
</a> </a>
</motion.div> </motion.div>
</SwiperSlide> </SwiperSlide> */}
{categories?.data && {categories?.data &&
categories.data.map((data, index) => { categories.data.map((data, index) => {
return ( return (
<SwiperSlide key={data?.id}> <SwiperSlide key={data?.id}>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<a href="" > <a
onClick={() => {
router.push(`/listing?category=${data.id}`);
}}
>
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} /> <Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
</span> </span>
......
components/home/SearchBar.js
...@@ -25,6 +25,9 @@ const SearchBar = () => { ...@@ -25,6 +25,9 @@ const SearchBar = () => {
open={open} open={open}
id="select" id="select"
placeholder="Search for products, brands or categories" placeholder="Search for products, brands or categories"
onBlur={()=> {
setopen(false)
}}
onChange={selected => { onChange={selected => {
console.log("selected", selected); console.log("selected", selected);
// router.push("/listing"); // router.push("/listing");
......
components/layout/Header.js
...@@ -67,6 +67,9 @@ const Header = () => { ...@@ -67,6 +67,9 @@ const Header = () => {
<div className="header-search"> <div className="header-search">
<Typeahead <Typeahead
open={open} open={open}
onBlur={() => {
setopen(false);
}}
id="select" id="select"
placeholder="Search for products, brands or categories" placeholder="Search for products, brands or categories"
onChange={selected => { onChange={selected => {
......
components/listing/LetDiscover.js
...@@ -42,7 +42,14 @@ const LetDiscover = ({ categories }) => { ...@@ -42,7 +42,14 @@ const LetDiscover = ({ categories }) => {
// useEffect(() => { // useEffect(() => {
// dispatch(getSubCategoriesByCategoryId(router.query.category)); // dispatch(getSubCategoriesByCategoryId(router.query.category));
// }, [router]); // }, [router]);
useEffect(() => {
console.log("router.query.category", router.query.category);
if (router.query.category) {
dispatch(setActivityFilters({ filters: { category: router.query.category, subCategories: [] } }));
setActiveIndex(router.query.category);
dispatch(getSubCategoriesByCategoryId(router.query.category));
}
}, []);
const [showCloseIcon, setShowCloseIcon] = useState({}); const [showCloseIcon, setShowCloseIcon] = useState({});
const handleToggleCloseIcon = index => { const handleToggleCloseIcon = index => {
setShowCloseIcon(prevShowCloseIcon => ({ setShowCloseIcon(prevShowCloseIcon => ({
...@@ -102,7 +109,7 @@ const LetDiscover = ({ categories }) => { ...@@ -102,7 +109,7 @@ const LetDiscover = ({ categories }) => {
<SwiperSlide> <SwiperSlide>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}> <motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<a <a
className={activeIndex=="All" ? "active" : ""} className={activeIndex == "All" ? "active" : ""}
onClick={() => { onClick={() => {
dispatch(setActivityFilters({ filters: {} })); dispatch(setActivityFilters({ filters: {} }));
handleTitleClick({ index: "All" }); handleTitleClick({ index: "All" });
...@@ -163,7 +170,8 @@ const LetDiscover = ({ categories }) => { ...@@ -163,7 +170,8 @@ const LetDiscover = ({ categories }) => {
<div className="col-12 text-center"> <div className="col-12 text-center">
{!loading ? ( {!loading ? (
<div className="sub-categories"> <div className="sub-categories">
{activityFilters.category && subCategories && {activityFilters.category &&
subCategories &&
subCategories.data.map((data, index) => ( subCategories.data.map((data, index) => (
<SubCategoryChips key={index} data={data} /> <SubCategoryChips key={index} data={data} />
// <a key={index} onClick={() => handleToggleCloseIcon(index)}> // <a key={index} onClick={() => handleToggleCloseIcon(index)}>
......
components/listing/ListingInner.js
...@@ -30,12 +30,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => { ...@@ -30,12 +30,7 @@ const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
const handleGridChange = className => { const handleGridChange = className => {
setGridClass(className); setGridClass(className);
}; };
useEffect(() => {
console.log("router.query.category", router.query.category);
if (router.query.category) {
dispatch(setActivityFilters({ filters: { category: router.query.category, subCategories: [] } }));
}
}, []);
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!