Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit fd123e8b by jaymehta
Options

filters final

1 parent 61d982d8
Expand all
Inline Side-by-side
Showing 19 changed files with 633 additions and 230 deletions
components/detail/Detail.js
......@@ -15,13 +15,14 @@ const Detail = () => {
const dispatch = useDispatch();
const { allActivitiesData } = useSelector(state => state.allActivitiesData);
const { activityById } = useSelector(state => state.activityById);
const { loadedUser } = useSelector(state => state.loadedUser);
useEffect(() => {
// console.log("router", activityById.data.attributes.category?.data?.attributes.name);
dispatch(getActivitiesByFilters({ category: activityById.data.attributes.category?.data?.id }));
dispatch(getActivitiesByFilters({ category: activityById?.data.attributes.category?.data?.id }));
}, [activityById]);
console.log("activityById", activityById);
// console.log("allActivitiesData", allActivitiesData);
console.log("loadedUser", loadedUser);
return (
<Fragment>
<main>
......@@ -30,12 +31,12 @@ const Detail = () => {
<div className="row hide-on-mobile">
<div className="col-12">
<div className="breadcrum$eq: categoryb-container">
<Breadcrumb>
{/* <Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="#">New York</Breadcrumb.Item>
<Breadcrumb.Item href="#">Adventure</Breadcrumb.Item>
<Breadcrumb.Item active>Mountain Climbing</Breadcrumb.Item>
</Breadcrumb>
</Breadcrumb> */}
</div>
</div>
</div>
......
components/detail/DetailInfo.js
......@@ -13,6 +13,8 @@ import { getCurrentEndUser } from "../../redux/actions/userActions.js";
import { Loader } from "react-bootstrap-typeahead";
import { useRouter } from "next/router.js";
import Link from "next/link.js";
import { checkWishlist, toggleWishlist } from "../../redux/actions/activityAction.js";
import WishlistComponent from "./WIshlistComponent.js";
const DetailInfo = ({ activityById }) => {
const router = useRouter();
......@@ -21,7 +23,7 @@ const DetailInfo = ({ activityById }) => {
dispatch(getCurrentEndUser());
}, []);
// const [session, setSession] = useState(null);
const [session, setSession] = useState(null);
const [enqDate, setenqDate] = useState();
const [loading, setloading] = useState(false);
const [quantity, setquantity] = useState();
......@@ -29,19 +31,16 @@ const DetailInfo = ({ activityById }) => {
const [enquiryModal, setenquiryModal] = useState(false);
const { loadedUser } = useSelector(state => state.loadedUser);
const { endUser } = useSelector(state => state.endUser);
// useEffect(() => {
// const fetchSession = async () => {
// setSession(await getSession());
// };
// fetchSession();
// // dispatch(getLoggedInVendor());
// }, []);
useEffect(() => {
const fetchSession = async () => {
setSession(await getSession());
};
fetchSession();
// dispatch(getLoggedInVendor());
}, []);
const [showInfo, setShowInfo] = useState(false);
const [isToggled, setIsToggled] = useState(false);
console.log("session", endUser);
const handleClick = () => {
setIsToggled(!isToggled);
};
console.log("endUser", endUser);
const handleMouseEnter = () => {
setShowInfo(true);
};
......@@ -49,6 +48,7 @@ const DetailInfo = ({ activityById }) => {
const handleMouseLeave = () => {
setShowInfo(false);
};
return (
<Fragment>
<div className="row">
......@@ -60,11 +60,7 @@ const DetailInfo = ({ activityById }) => {
<div className="most-booked">Most Booked</div>
<div className="wishlist-share">
<a href="#" className={`add-to-wishlist ${isToggled ? "active" : ""}`} onClick={handleClick}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={isToggled ? "/images/icons/wishlist-01-active.svg" : "/images/icons/wishlist-01.svg"} />
</span>
</a>
{endUser && <WishlistComponent activityId={activityById.data.id} userId={endUser.id} />}
<a href="#" className="add-to-forwardt">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/forward.svg" />
......@@ -151,6 +147,7 @@ const DetailInfo = ({ activityById }) => {
</div>
)}
</div>
{activityById && (
<div className="row hide-on-desktop">
<div className="col-12">
<ul className="availability-wrappper">
......@@ -199,6 +196,8 @@ const DetailInfo = ({ activityById }) => {
</ul>
</div>
</div>
)}
{activityById && (
<Modal
show={enquiryModal}
onHide={() => {
......@@ -246,6 +245,7 @@ const DetailInfo = ({ activityById }) => {
</Button>
</Modal.Body>
</Modal>
)}
<Modal
show={loginModal}
centered
......
components/detail/SimilarExperiences.js
......@@ -13,9 +13,13 @@ import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvaria
import { motion } from "framer-motion";
import { cleanImage } from "../../services/imageHandling.js";
import { useRouter } from "next/router.js";
import WishlistComponent from "./WIshlistComponent.js";
import { useSelector } from "react-redux";
const SimilarExperiences = ({ allActivitiesData }) => {
const router = useRouter();
const [listingData, setListingData] = useState([]);
const { endUser } = useSelector(state => state.endUser);
let ListingData = [];
useEffect(() => {
console.log("allActivitiesData", allActivitiesData);
......@@ -37,58 +41,6 @@ const SimilarExperiences = ({ allActivitiesData }) => {
setListingData(ListingData);
}, [allActivitiesData]);
// ListingData = [
// {
// image: "/images/Browse-Experiences/01.png",
// topRated: "Top Rated",
// title: "City Climb",
// discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
// price: "200",
// offPrice: "40%",
// days: "For 1 Night",
// taxes: "Includes taxes & Fees"
// },
// {
// image: "/images/Browse-Experiences/02.png",
// topRated: "Top Rated",
// title: "City Climb",
// discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
// price: "200",
// offPrice: "40%",
// days: "For 1 Night",
// taxes: "Includes taxes & Fees"
// },
// {
// image: "/images/Browse-Experiences/03.png",
// topRated: "Top Rated",
// title: "City Climb",
// discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
// price: "200",
// offPrice: "40%",
// days: "For 1 Night",
// taxes: "Includes taxes & Fees"
// },
// {
// image: "/images/Browse-Experiences/04.png",
// topRated: "Top Rated",
// title: "City Climb",
// discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
// price: "200",
// offPrice: "40%",
// days: "For 1 Night",
// taxes: "Includes taxes & Fees"
// },
// {
// image: "/images/Browse-Experiences/01.png",
// topRated: "Top Rated",
// title: "City Climb",
// discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
// price: "200",
// offPrice: "40%",
// days: "For 1 Night",
// taxes: "Includes taxes & Fees"
// }
// ];
const projects = {
responsive: {
0: {
......@@ -130,11 +82,6 @@ const SimilarExperiences = ({ allActivitiesData }) => {
<div className="browse-experiences-carousal position-relative">
<Swiper
slidesPerView={1}
// autoplay={{
// delay: 2500,
// disableOnInteraction: false
// }}
// spaceBetween={10}
navigation={{ nextEl: ".similar-experiences-arrow-left", prevEl: ".similar-experiences-arrow-right" }}
breakpoints={{
640: {
......@@ -175,11 +122,12 @@ const SimilarExperiences = ({ allActivitiesData }) => {
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
<div className="wishlist">
{endUser && <WishlistComponent userId={endUser.id} activityId={data.id} />}
{/* <div className="wishlist">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
</span>
</div>
</div> */}
</div>
</div>
<div className="discription">
......
components/detail/WIshlistComponent.js 0 → 100644
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { checkWishlist, deleteWishlist, getWishlists, toggleWishlist } from "../../redux/actions/activityAction";
const WishlistComponent = ({ activityId, userId }) => {
const { wishlists } = useSelector(state => state.wishlists);
const [isActive, setisActive] = useState(false);
const [wishlistId, setwishlistId] = useState();
const dispatch = useDispatch();
// console.log("wishlists", wishlists);
useEffect(() => {
wishlists &&
wishlists.length > 0 &&
wishlists.map(item => {
if (item.attributes.experience.data.id == activityId) {
setisActive(true);
setwishlistId(item.id);
}
});
}, [wishlists]);
return (
<div>
{activityId && userId && (
<div className="wishlist">
<span
onClick={async e => {
e.preventDefault();
if (isActive) {
setisActive(false);
const response = await deleteWishlist({ wishlistId });
dispatch(getWishlists({ endUser: userId }));
// console.log("delete", response);
} else {
setisActive(true);
const response = await toggleWishlist({ activityId, userId });
dispatch(getWishlists({ endUser: userId }));
}
// console.log("response wishlist ", response);
}}
className="image-container"
>
<Image layout="fill" alt="" className="image img-fluid" src={isActive ? "/images/icons/wishlist-01-active.svg" : "/images/icons/wishlist-01.svg"} />
</span>
</div>
)}
</div>
);
};
export default WishlistComponent;
components/layout/Header.js
......@@ -5,11 +5,14 @@ import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling";
import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";
import { loadUser } from "../../redux/actions/userActions";
import { getCurrentEndUser, loadUser } from "../../redux/actions/userActions";
import { useRouter } from "next/router";
import { getWishlists } from "../../redux/actions/activityAction";
const Header = () => {
const { loadedUser } = useSelector(state => state.loadedUser);
const { endUser } = useSelector(state => state.endUser);
const dispatch = useDispatch();
// console.log("user", loadedUser);
const [isSticky, setIsSticky] = useState(false);
......@@ -29,6 +32,13 @@ const Header = () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
useEffect(() => {
dispatch(getCurrentEndUser());
}, []);
useEffect(() => {
if (endUser) dispatch(getWishlists({ endUser: endUser.id }));
}, [endUser]);
return (
<header className={`header_wrap ${isSticky ? "stick" : ""}`}>
<Navbar expand="lg" className="bg-body-tertiary">
......@@ -69,8 +79,8 @@ const Header = () => {
<Button
onClick={async () => {
signOut({ redirect: false });
await router.push("/")
window.location.reload()
await router.push("/");
window.location.reload();
}}
className="me-3"
variant="primary"
......@@ -80,14 +90,22 @@ const Header = () => {
</div>
) : (
<div>
<Button onClick={()=> {
router.push("/signup/user")
}} className="me-3" variant="primary">
<Button
onClick={() => {
router.push("/signup/user");
}}
className="me-3"
variant="primary"
>
Sign Up
</Button>
<Button onClick={()=> {
router.push("/login/user")
}} className="" variant="primary">
<Button
onClick={() => {
router.push("/login/user");
}}
className=""
variant="primary"
>
Log In
</Button>
</div>
......
components/listing/LetDiscover.js
import Image from "next/image";
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Button } from "react-bootstrap";
......@@ -11,59 +11,38 @@ import { motion } from "framer-motion";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const LetDiscover = () => {
import { cleanImage } from "../../services/imageHandling.js";
import { useRouter } from "next/router.js";
import { Loader } from "react-bootstrap-typeahead";
import { useDispatch, useSelector } from "react-redux";
import { getSubCategoriesByCategoryId } from "../../redux/actions/categoriesAction.js";
import { setActivityFilters } from "../../redux/actions/activityAction.js";
import SubCategoryChips from "./SubCategoryChips.js";
const LetDiscover = ({ categories }) => {
const { subCategories, loading } = useSelector(sate => sate.subCategories);
const { activityFilters } = useSelector(sate => sate.activityFilters);
const router = useRouter();
const dispatch = useDispatch();
const [activeIndex, setActiveIndex] = useState(null);
const handleTitleClick = index => {
// const [loading, setloading] = useState(null);
console.log("categories", categories);
console.log("subCategories", subCategories);
console.log("activityFilters", activityFilters);
const handleTitleClick = ({ index, data }) => {
// setloading(true);
// Check if the clicked index is already active
if (activeIndex === index) {
return; // Do nothing if it's already active
}
// Toggle the active index if it's different from the clicked index
setActiveIndex(index);
// setloading(false);
};
const letDiscoverData = [
{
image: "/images/discover/01.png",
title: "All"
},
{
image: "/images/discover/02.png",
title: "Art & History"
},
{
image: "/images/discover/03.png",
title: "Experiential Dining "
},
{
image: "/images/discover/04.png",
title: "Family"
},
{
image: "/images/discover/05.png",
title: "Fitness"
},
{
image: "/images/discover/06.png",
title: "Performing Arts"
},
{
image: "/images/discover/01.png",
title: "Pop Ups"
},
{
image: "/images/discover/02.png",
title: "Tour"
},
{
image: "/images/discover/03.png",
title: "Classes"
},
{
image: "/images/discover/04.png",
title: "Wellness"
}
];
// useEffect(() => {
// dispatch(getSubCategoriesByCategoryId(router.query.category));
// }, [router]);
const [showCloseIcon, setShowCloseIcon] = useState({});
const handleToggleCloseIcon = index => {
setShowCloseIcon(prevShowCloseIcon => ({
......@@ -71,32 +50,7 @@ const LetDiscover = () => {
[index]: !prevShowCloseIcon[index]
}));
};
const subCategoriesData = [
{
name: "Boat"
},
{
name: "Games"
},
{
name: "Helicopter"
},
{
name: "Ice-skating"
},
{
name: "Jet-skiing"
},
{
name: "Kayaking"
},
{
name: "Park"
},
{
name: "Rooftop"
}
];
console.log("showCloseIcon", showCloseIcon);
return (
<>
<section className="let-discover-session let-discover-listing-session">
......@@ -144,20 +98,46 @@ const LetDiscover = () => {
modules={[Navigation, Autoplay]}
className="mySwiper01 mySwiper02"
>
{letDiscoverData &&
letDiscoverData.map((data, index) => {
<SwiperSlide>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<a
className={activeIndex=="All" ? "active" : ""}
onClick={() => {
dispatch(setActivityFilters({ filters: {} }));
handleTitleClick({ index: "All" });
}}
>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={"/images/discover/01.png"} />
</span>
<div className="title">{"All"}</div>
</a>
</motion.div>
</SwiperSlide>
{categories &&
categories.data.map((data, index) => {
const isActive = activeIndex === index;
return (
<>
<SwiperSlide>
<motion.div variants={zoomIn("left", 0.3)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<a className={isActive ? "active" : ""} onClick={() => handleTitleClick(index)}>
<a
className={isActive ? "active" : ""}
onClick={async () => {
// router.push(`?category=${data.id}`);
dispatch(setActivityFilters({ filters: { ...activityFilters, category: data.id, subCategories: [] } }));
dispatch(getSubCategoriesByCategoryId(data.id));
handleTitleClick({ index, data });
}}
>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={data.image} />
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data.attributes.image.data.attributes)} />
</span>
<div className="title">{data.title}</div>
<div className="title">{data.attributes.name}</div>
</a>
</motion.div>
</SwiperSlide>
</>
);
})}
</Swiper>
......@@ -179,20 +159,25 @@ const LetDiscover = () => {
</div>
</div>
<div className="row">
<div className="col-12">
<div className="col-12 text-center">
{!loading ? (
<div className="sub-categories">
{subCategoriesData &&
subCategoriesData.map((data, index) => (
<a key={index} onClick={() => handleToggleCloseIcon(index)}>
<span>{data.name}</span>
{showCloseIcon[index] && (
<span className="image-container">
<Image layout="fill" alt="image" className="image" src="/images/icons/close-button.svg" />
</span>
)}
</a>
{activityFilters.category && subCategories &&
subCategories.data.map((data, index) => (
<SubCategoryChips key={index} data={data} />
// <a key={index} onClick={() => handleToggleCloseIcon(index)}>
// <span>{data.attributes.name}</span>
// {showCloseIcon[index] && (
// <span className="image-container">
// <Image layout="fill" alt="image" className="image" src="/images/icons/close-button.svg" />
// </span>
// )}
// </a>
))}
</div>
) : (
<Loader />
)}
</div>
</div>
</div>
......
components/listing/Listing.js
import React, { Fragment } from "react";
import React, { Fragment, useEffect } from "react";
import ListingInner from "./ListingInner";
import SignUpToExperienceOurPlatform from "../home/SignUpToExperienceOurPlatform";
import LetDiscover from "./LetDiscover";
......@@ -6,12 +6,16 @@ import { useSelector } from "react-redux";
const Listing = () => {
const { allActivitiesData } = useSelector(sate => sate.allActivitiesData);
console.log("allActivitiesData >>>> 123", allActivitiesData)
const { categories } = useSelector(sate => sate.categories);
const { subCategories } = useSelector(sate => sate.subCategories);
console.log("allActivitiesData >>>> 123", allActivitiesData);
return (
<Fragment>
<main>
<LetDiscover />
<LetDiscover categories={categories} subCategories={subCategories}/>
<ListingInner allActivitiesData={allActivitiesData} />
<SignUpToExperienceOurPlatform />
</main>
......
components/listing/ListingInner.js
......@@ -2,12 +2,17 @@ import React, { useEffect, useState } from "react";
import ListingFilter from "./ListingFilter";
import ListingItems from "./ListingItems";
import Image from "next/image";
import { getActivitiesByFilters, getWishlists, setActivityFilters } from "../../redux/actions/activityAction";
import { useDispatch, useSelector } from "react-redux";
const ListingInner = ({allActivitiesData}) => {
console.log("allActivitiesData >>>>>", allActivitiesData)
const ListingInner = ({ allActivitiesData }) => {
console.log("allActivitiesData", allActivitiesData);
const [isFilterViewOpen, setIsFilterViewOpen] = useState(false);
const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const { activityFilters } = useSelector(sate => sate.activityFilters);
const dispatch = useDispatch();
const [size, setSize] = useState(768);
const toggleGridViewDropdown = () => {
......@@ -37,13 +42,69 @@ const ListingInner = ({allActivitiesData}) => {
};
}, []);
// USEEFFECT FOR FILTERS
useEffect(() => {
let filters = {};
// console.log("subcategory here", activityFilters.startDate);
if (activityFilters.category) {
filters["category"] = { id: { $eq: activityFilters.category } };
}
if (activityFilters.subCategories?.length > 0) {
filters["category"] = null;
filters["subCategory"] = activityFilters.subCategories.map(item => {
return { subCategory: { id: { $eq: item } } };
});
}
if (activityFilters.activityType) {
filters["activityType"] = activityFilters.activityType;
}
if (activityFilters.startDate) {
filters["fromDate"] = activityFilters.startDate;
}
if (activityFilters.endDate) {
filters["toDate"] = activityFilters.endDate;
}
if (activityFilters.minDuration > 0) {
filters["minimumDuration"] = activityFilters.minDuration;
}
if (activityFilters.maxDuration > 0) {
filters["maximumDuration"] = activityFilters.maxDuration;
}
if (activityFilters.minGroupSize > 0) {
filters["minGroupSize"] = activityFilters.minGroupSize;
}
if (activityFilters.maxGroupSize > 0) {
filters["maxGroupSize"] = activityFilters.maxGroupSize;
}
if (activityFilters.minAge > 0) {
filters["ageLowerLimit"] = activityFilters.minAge;
}
if (activityFilters.sorting) {
filters["sort"] = activityFilters.sorting;
}
// console.log("subcategory >>", filters);
dispatch(
getActivitiesByFilters({
subCategory: filters.subCategory,
category: filters.category,
activityType: filters.activityType,
fromDate: filters.fromDate,
toDate: filters.toDate,
minimumDuration: filters.minimumDuration,
maximumDuration: filters.maximumDuration,
minGroupSize: filters.minGroupSize,
maxGroupSize: filters.maxGroupSize,
ageLowerLimit: filters.ageLowerLimit,
sort: filters.sort
})
);
}, [activityFilters]);
return (
<>
<section className="listing-inner-session">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="filter-dd">
......@@ -53,26 +114,6 @@ const ListingInner = ({allActivitiesData}) => {
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/filter-view.svg" />
</span>
</a>
{/* <div className={`inner-content ${isGridViewOpen ? "open" : ""}`}>
<div className="top-head">
<div className="">View By</div>
<div className="close-btn" onClick={toggleGridViewDropdown}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/close-icon.svg" />
</span>
</div>
</div>
<ul className="list-by">
<li>
<input className="form-check-labe" type="radio" id="3 Grid View" name="gridView" />
<label htmlFor="3 Grid View">3 Grid View</label>
</li>
<li>
<input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" />
<label htmlFor="4 Grid View">4 Grid View</label>
</li>
</ul>
</div> */}
</div>
<div className="grid-view box-inner">
<a onClick={toggleGridViewDropdown}>
......@@ -118,21 +159,41 @@ const ListingInner = ({allActivitiesData}) => {
</div>
<ul className="list-by">
<li>
<input className="form-check-labe" type="radio" id="Price - High to Low" name="sort" />
<input
className="form-check-labe"
onChange={e => {
dispatch(setActivityFilters({ filters: { ...activityFilters, sorting: e.target.value } }));
// console.log(e.target.value);
}}
type="radio"
id="Price - High to Low"
name="sort"
value={"descending"}
/>
<label htmlFor="Price - High to Low">Price - High to Low</label>
</li>
<li>
<input className="form-check-labe" type="radio" id="Price - Low to High" name="sort" />
<input
className="form-check-labe"
onChange={e => {
dispatch(setActivityFilters({ filters: { ...activityFilters, sorting: e.target.value } }));
// console.log(e.target.value);
}}
type="radio"
id="Price - Low to High"
name="sort"
value={"ascending"}
/>
<label htmlFor="Price - Low to High">Price - Low to High</label>
</li>
<li>
{/* <li>
<input className="form-check-labe" type="radio" id="Most Rated" name="sort" />
<label htmlFor="Most Rated">Most Rated</label>
</li>
<li>
<input className="form-check-labe" type="radio" id="Most Popular" name="sort" />
<label htmlFor="Most Popular">Most Popular</label>
</li>
</li> */}
</ul>
</div>
</div>
......
components/listing/ListingItems.js
......@@ -2,10 +2,13 @@ import Image from "next/image";
import { useRouter } from "next/router";
import React from "react";
import { Button } from "react-bootstrap";
import { useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling";
import WishlistComponent from "../detail/WIshlistComponent";
const ListingItems = ({ allActivitiesData }) => {
console.log("allActivitiesData", allActivitiesData);
const { endUser } = useSelector(state => state.endUser);
console.log("endUser", endUser);
const router = useRouter();
return (
<>
......@@ -33,11 +36,7 @@ const ListingItems = ({ allActivitiesData }) => {
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span>
</div>
<div className="wishlist">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" />
</span>
</div>
{endUser && <WishlistComponent activityId={data.id} userId={endUser.id} />}
</div>
</div>
<div className="discription">
......
components/listing/SubCategoryChips.js 0 → 100644
import Image from "next/image";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setActivityFilters } from "../../redux/actions/activityAction";
const SubCategoryChips = ({ data }) => {
const dispatch = useDispatch();
const { activityFilters } = useSelector(sate => sate.activityFilters);
const [select, setselect] = useState(activityFilters.subCategories?.includes(data.id));
useEffect(() => {
setselect(activityFilters.subCategories?.includes(data.id));
}, [activityFilters]);
return (
<div>
<a
onClick={() => {
setselect(!select);
if (activityFilters.subCategories.length > 0) {
if (activityFilters.subCategories.includes(data.id)) {
let newArr = activityFilters.subCategories.filter(item => item != data.id);
dispatch(setActivityFilters({ filters: { ...activityFilters, subCategories: newArr } }));
} else {
dispatch(setActivityFilters({ filters: { ...activityFilters, subCategories: [...activityFilters.subCategories, data.id] } }));
}
} else {
dispatch(setActivityFilters({ filters: { ...activityFilters, subCategories: [data.id] } }));
}
}}
// key={index} onClick={() => handleToggleCloseIcon(index)}
>
<span>{data.attributes.name}</span>
{select && (
<span className="image-container">
<Image layout="fill" alt="image" className="image" src="/images/icons/close-button.svg" />
</span>
)}
</a>
</div>
);
};
export default SubCategoryChips;
components/vendor/ActivityDetails.js
......@@ -865,7 +865,7 @@ const ActivityDetails = ({ isUpdate }) => {
</div>
<div className="col-2 col-lg-4">
<label>Minimum duration</label>
<label>Maximum duration</label>
<input
value={values.maxDuration}
id="maxDuration"
......
pages/activities/[id].js
import React from "react";
import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import Detail from "../../components/detail/Detail";
import Layout from "../../components/layout/Layout";
import { getActivitiesByFilters, getActivityById } from "../../redux/actions/activityAction";
import { loadUser } from "../../redux/actions/userActions";
import { wrapper } from "../../redux/store";
const ActivityDetailPage = () => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(loadUser());
}, []);
return (
<Layout>
<Detail />
......@@ -16,9 +23,8 @@ export default ActivityDetailPage;
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
await store.dispatch(getActivityById(query.id))
// await store.dispatch(getActivitiesByFilters({category: query.category}))
await store.dispatch(getActivityById(query.id));
// await store.dispatch(getActivitiesByFilters({category: query.category}))
return {
props: {}
......
pages/listing.js
import Layout from "../components/layout/Layout";
import Listing from "../components/listing/Listing";
import { getActivitiesByFilters } from "../redux/actions/activityAction";
import { getAllCategories, getAllSubCategories, getSubCategoriesByCategoryId } from "../redux/actions/categoriesAction";
import { wrapper } from "../redux/store";
export default function ListingPage() {
......@@ -23,10 +24,12 @@ export default function ListingPage() {
/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
try {
await store.dispatch(getActivitiesByFilters({}))
await store.dispatch(getActivitiesByFilters({}));
await store.dispatch(getAllCategories());
await store.dispatch(getSubCategoriesByCategoryId());
return {
props: {},
props: {}
// Next.js will attempt to re-generate the page:
// - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
// - After the 10-second window, the next request will still show the cached (stale) page
......@@ -35,7 +38,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
// In seconds
// revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER)
};
} catch (error) {
} catch (error) {
console.log("index.js", error);
}
}
});
redux/actions/activityAction.js
import axios from "axios";
import { getSession } from "next-auth/react";
import {
ACTIVITY_FILTERS_CONSTANT,
CREATE_ACTIVITY_FAIL,
CREATE_ACTIVITY_REQUEST,
CREATE_ACTIVITY_SUCCESS,
......@@ -10,6 +11,9 @@ import {
GET_ACTIVITY_BY_ID_FAIL,
GET_ACTIVITY_BY_ID_REQUEST,
GET_ACTIVITY_BY_ID_SUCCESS,
GET_WISHLISTS_FAIL,
GET_WISHLISTS_REQUEST,
GET_WISHLISTS_SUCCESS,
UPDATE_ACTIVITY_BY_ID_FAIL,
UPDATE_ACTIVITY_BY_ID_REQUEST,
UPDATE_ACTIVITY_BY_ID_SUCCESS
......@@ -315,8 +319,9 @@ export const getActivitiesForEndUser = () => async dispatch => {
};
export const getActivitiesByFilters =
({ category, subCategory, price, ageLimit, duration, fromDate, toDate, minGroupSize, maxGroupSize, minDuration, maxDuration, activityType }) =>
({ category, subCategory, price, ageLowerLimit, duration, fromDate, toDate, minGroupSize, maxGroupSize, minimumDuration, maximumDuration, activityType, sort }) =>
async dispatch => {
let sortFilter = [];
try {
dispatch({
type: GET_ACTIVITIES_REQUEST,
......@@ -328,24 +333,72 @@ export const getActivitiesByFilters =
"Content-Type": "application/json"
}
};
if (sort == "descending") {
sortFilter = ["pricePerPerson:desc"];
} else {
sortFilter = ["pricePerPerson:asc"];
}
let query = {
filters: {
approved: { $eq: true }
// fromDate: { $gte: fromDate },
// toDate: { $lte: toDate },
// $and: [{ fromDate: { $gte: "2024-05-05" } }, { toDate: { $lte: toDate } }]
// $or: subCategory
},
populate: ["masterMonths", "subCategory", "subCategory.category", "timeSlots", "masterPincode", "vendor", "image", "category"]
// sort: ["pricePerPerson:asc"]
};
console.log("query:", category);
if (category) {
query.filters["category"] = { id: { $eq: category } };
query.filters["category"] = category;
}
if (subCategory) {
query.filters["$or"] = subCategory;
}
if (activityType) {
query.filters["activityType"] = activityType;
}
if (fromDate && toDate) {
query.filters["$and"] = [{ fromDate: { $gte: fromDate } }, { toDate: { $lte: toDate } }];
delete query.filters.fromDate;
delete query.filters.toDate;
}
if (!(fromDate && toDate)) {
if (fromDate) {
query.filters["fromDate"] = { $gte: fromDate };
}
if (toDate) {
query.filters["toDate"] = { $lte: toDate };
}
}
if (maximumDuration) {
query.filters["maximumDuration"] = { $lte: maximumDuration };
}
if (minimumDuration) {
query.filters["minimumDuration"] = { $gte: minimumDuration };
}
if (minGroupSize) {
query.filters["minGroupSize"] = { $gte: minGroupSize };
}
if (maxGroupSize) {
query.filters["maxGroupSize"] = { $lte: maxGroupSize };
}
if (ageLowerLimit) {
query.filters["ageLowerLimit"] = { $gte: ageLowerLimit };
}
if (sort) {
query["sort"] = sortFilter;
}
// console.log("subcategoryquery:", query);
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experiences?${queryString}`, config);
// console.log("activity res", response);
dispatch({
type: GET_ACTIVITIES_SUCCESS,
payload: response.data
......@@ -359,3 +412,135 @@ export const getActivitiesByFilters =
});
}
};
export const setActivityFilters =
({ filters }) =>
async dispatch => {
dispatch({
type: ACTIVITY_FILTERS_CONSTANT,
payload: filters
});
};
export const getWishlists =
({ endUser }) =>
async dispatch => {
try {
const session = await getSession();
if (!session) {
return;
}
dispatch({
type: GET_WISHLISTS_REQUEST
});
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const query = {
filters: {
endUser: {
id: {
$eq: endUser
}
}
},
populate: ["endUser", "experience"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/wishlists?${queryString}`, config);
dispatch({
type: GET_WISHLISTS_SUCCESS,
payload: response.data.data
});
return response.data.data;
} catch (error) {
dispatch({
type: GET_WISHLISTS_FAIL,
payload: error.response.data
});
}
};
export const toggleWishlist = async ({ activityId, userId }) => {
try {
const session = await getSession();
if (!session) {
return;
}
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const data = {
experience: activityId,
endUser: userId
};
// console.log("data", data);
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/wishlists`, { data }, config);
// console.log("response.data.data", response.data);
return response.data.data;
} catch (error) {}
};
export const checkWishlist = async ({ activityId, userId }) => {
try {
const session = await getSession();
if (!session) {
return;
}
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const data = {
experience: activityId,
endUser: userId
};
const query = {
filters: {
$and: [{ experience: { id: { $eq: activityId } } }, { endUser: { id: { $eq: userId } } }]
},
populate: ["experience", "endUser"]
};
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
// console.log("data", data);
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/wishlists?${queryString}`, config);
console.log("response.data.data", response.data);
return response.data.data;
} catch (error) {}
};
export const deleteWishlist = async ({ wishlistId }) => {
try {
const session = await getSession();
if (!session) {
return;
}
const config = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${session.jwt}`
}
};
const res = await axios.delete(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/wishlists/${wishlistId}`, config);
return res.data;
} catch (error) {}
};
redux/actions/categoriesAction.js
......@@ -91,3 +91,52 @@ export const getAllSubCategories = categoryName => async dispatch => {
});
}
};
export const getSubCategoriesByCategoryId = categoryId => async dispatch => {
try {
dispatch({
type: GET_SUB_CATEGORIES_REQUEST,
loading: true
});
const config = {
headers: {
"Content-Type": "application/json"
}
};
let query = {
filters: {
category: {
id: {}
}
},
populate: ["category"]
};
if (categoryId) {
// console.log("here 1", query.filters.category);
query.filters.category.id = { $eq: categoryId };
}
// console.log(">>>", query);
const queryString = qs.stringify(query, {
encodeValuesOnly: true
});
const response = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/sub-categories/?${queryString}`, config);
dispatch({
type: GET_SUB_CATEGORIES_SUCCESS,
payload: response.data,
loading: false
});
return response.data;
} catch (error) {
dispatch({
type: GET_SUB_CATEGORIES_FAIL,
payload: error.response.data
});
}
};
redux/constants/activitiesConstants.js
......@@ -14,8 +14,10 @@ export const UPDATE_ACTIVITY_BY_ID_REQUEST = "UPDATE_ACTIVITY_BY_ID_REQUEST"
export const UPDATE_ACTIVITY_BY_ID_SUCCESS = "UPDATE_ACTIVITY_BY_ID_SUCCESS"
export const UPDATE_ACTIVITY_BY_ID_FAIL = "UPDATE_ACTIVITY_BY_ID_FAIL"
// export const GET_ACTIVITY_BY_ID_REQUEST = "GET_ACTIVITY_BY_ID_REQUEST"
// export const GET_ACTIVITY_BY_ID_SUCCESS = "GET_ACTIVITY_BY_ID_SUCCESS"
// export const GET_ACTIVITY_BY_ID_FAIL = "GET_ACTIVITY_BY_ID_FAIL"
export const GET_WISHLISTS_REQUEST = "GET_WISHLISTS_REQUEST"
export const GET_WISHLISTS_SUCCESS = "GET_WISHLISTS_SUCCESS"
export const GET_WISHLISTS_FAIL = "GET_WISHLISTS_FAIL"
export const ACTIVITY_FILTERS_CONSTANT = "ACTIVITY_FILTERS_CONSTANT"
export const CLEAR_ERRORS = "CLEAR_ERRORS";
\ No newline at end of file
redux/reducers/activitiesReducer.js
import {
ACTIVITY_FILTERS_CONSTANT,
CREATE_ACTIVITY_FAIL,
CREATE_ACTIVITY_REQUEST,
CREATE_ACTIVITY_SUCCESS,
......@@ -8,6 +9,9 @@ import {
GET_ACTIVITY_BY_ID_FAIL,
GET_ACTIVITY_BY_ID_REQUEST,
GET_ACTIVITY_BY_ID_SUCCESS,
GET_WISHLISTS_FAIL,
GET_WISHLISTS_REQUEST,
GET_WISHLISTS_SUCCESS,
UPDATE_ACTIVITY_BY_ID_FAIL,
UPDATE_ACTIVITY_BY_ID_REQUEST,
UPDATE_ACTIVITY_BY_ID_SUCCESS
......@@ -123,3 +127,43 @@ export const updateActivityByIdReducer = (state = {}, action) => {
return state;
}
};
export const setActivityFilterReducer = (state = { activityFilters: {} }, action) => {
switch (action.type) {
case ACTIVITY_FILTERS_CONSTANT:
return {
activityFilters: action.payload
};
default:
return state;
}
};
export const getWishlistsReducer = (state = {}, action) => {
switch (action.type) {
case GET_WISHLISTS_REQUEST:
return { loading: true };
case GET_WISHLISTS_SUCCESS:
return {
loading: false,
wishlists: action.payload
};
case GET_WISHLISTS_FAIL:
return {
loading: false,
error: action.payload.error.message
};
case CLEAR_ERRORS:
return {
...state,
error: null
};
default:
return state;
}
};
redux/reducers/reducers.js
......@@ -5,7 +5,7 @@ import { authReducer, forgotPasswordReducer, getEndUserReducer, loadedUserReduce
import { enquiryReducer, getEnquiriesReducer } from "./enquiryReducer";
import { displayEnquireNowReducer } from "./enquireNowModalReducer";
import { getAllVendorsReducer, getVendorDetailsReducer, loggedInVendorReducer, updateVendorReducer } from "./vendorReducers";
import { createActivityReducer, getActivitiesReducer, getActivityByIdReducer, updateActivityByIdReducer } from "./activitiesReducer";
import { createActivityReducer, getActivitiesReducer, getActivityByIdReducer, getWishlistsReducer, setActivityFilterReducer, updateActivityByIdReducer } from "./activitiesReducer";
import { getAllCategoriesReducer, getAllSubCategoriesReducer } from "./categoryReducer";
import { getAllTestimonialReducer } from "./testimonialReducer";
import { blogReducer, blogsReducer } from "./blogReducer";
......@@ -40,6 +40,8 @@ const reducers = combineReducers({
allVendors: getAllVendorsReducer,
endUser: getEndUserReducer,
enquiriesByVendor: getEnquiriesReducer,
activityFilters: setActivityFilterReducer,
wishlists: getWishlistsReducer,
});
export default reducers;
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!