Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit ef8940ac by Chetan
Options

wishlist api binding complete

1 parent 7c1b7f5f
Expand all
Inline Side-by-side
Showing 4 changed files with 22 additions and 70 deletions
components/user/MyWhishList.js
import Image from "next/image"; import Image from "next/image";
import React, { Fragment } from "react"; import React, { Fragment } from "react";
import { Button } from "react-bootstrap"; import { Button } from "react-bootstrap";
import { renderImage } from "../../services/imageHandling"; import { cleanImage } from "../../services/imageHandling";
import WishlistComponent from "../detail/WIshlistComponent";
const MyWhishList = () => { import { useRouter } from "next/router";
const whishListData = [
{
id: "0",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image1.png"
},
{
id: "1",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image2.png"
},
{
id: "2",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image3.png"
},
{
id: "3",
name: "City Climb",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
price: "$200",
discount: "40% OFF",
availablity: "For 1 Night",
other: "Includes taxes & Fees",
rating: "8.8",
type: "Top Rated",
image: "/images/user/image4.png"
}
]
const MyWhishList = ({ data }) => {
const router = useRouter();
return ( return (
<Fragment> <Fragment>
<div className="container pb-5"> <div className="container pb-5">
...@@ -63,44 +15,43 @@ const MyWhishList = () => { ...@@ -63,44 +15,43 @@ const MyWhishList = () => {
<h2 className="px-2 px-lg-0">My Bookings</h2> <h2 className="px-2 px-lg-0">My Bookings</h2>
<div className="listing-items"> <div className="listing-items">
<div className="row"> <div className="row">
{whishListData?.length && whishListData.map((data, index) => ( {data?.length && data.map((data, index) => (
<div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}> <div className="col-12 col-sm-12 col-lg-3 col-md-6 px-4 px-lg-3" key={`1${index}`}>
<div className="item"> <div className="item">
<div className="browse-experiences-item"> <div className="browse-experiences-item">
<div className="img-wrapper"> <div className="img-wrapper">
<span className="image-container"> <span className="image-container">
<Image src={renderImage(data.image)} layout="fill" className="image img-fluid" /> <Image src={cleanImage(data?.attributes?.experience?.data?.attributes?.image?.data?.attributes)} layout="fill" className="image img-fluid" />
</span> </span>
<div className="top-rated">Top Rated</div> <div className="top-rated">Top Rated</div>
</div> </div>
<div className="info"> <div className="info">
<div className="top-name"> <div className="top-name">
<div className="title">{data.name}</div> <div className="title">{data?.attributes?.experience?.data?.attributes?.name}</div>
<div className="rating-wishlist"> <div className="rating-wishlist">
<div className="rating"> <div className="rating">
<span className="number">{data.rating}</span> <span className="number">{data?.attributes?.experience?.data?.attributes?.rating}</span>
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
</span> </span>
</div> </div>
<span className="image-container"> <WishlistComponent activityId={data?.attributes?.experience?.data?.id} userId={data?.attributes?.endUser?.data?.id} />
<Image src={renderImage("/images/user/heart.svg")} layout="fill" className="image" />
</span>
</div> </div>
</div> </div>
<div className="discription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="">Read More</a></div> <div className="discription"><p className="text-trunc-2">{data?.attributes?.experience?.data?.attributes?.description}</p></div>
{/* <p className="price">{data.price} <span>{data.discount}</span></p> */}
<div className="price"> <div className="price">
${data?.price} <span className="off">{data.discount}</span> ${data?.attributes?.experience?.data?.attributes?.pricePerPerson} <span className="off">{}% OFF</span>
</div> </div>
<div className="detail"> <div className="detail">
<div>{data.availablity}</div> <div className="">For 1 Night</div>
<div>{data.other}</div> <div className="">Includes taxes & Fees</div>
</div> </div>
<div className="explore-now"> <div className="explore-now">
<Button <Button
variant="primary" variant="primary"
onClick={() => {
router.push(`/activities/${data?.attributes?.experience?.data?.id}`);
}}
> >
Explore Now Explore Now
</Button> </Button>
......
pages/user/wishlist/index.js
import React from "react"; import React from "react";
import Layout from "../../../components/layout/Layout"; import Layout from "../../../components/layout/Layout";
import MyWhishList from "../../../components/user/MyWhishList"; import MyWhishList from "../../../components/user/MyWhishList";
import { useSelector } from "react-redux";
export default function UserProfilePage () { export default function UserProfilePage() {
const { wishlists } = useSelector(state => state.wishlists)
return ( return (
<Layout> <Layout>
<MyWhishList /> <MyWhishList data={wishlists}/>
</Layout> </Layout>
); );
}; };
\ No newline at end of file \ No newline at end of file
redux/actions/activityAction.js
...@@ -547,7 +547,7 @@ export const getWishlists = ...@@ -547,7 +547,7 @@ export const getWishlists =
} }
} }
}, },
populate: ["endUser", "experience"] populate: ["endUser", "experience", "experience.image"]
}; };
const queryString = qs.stringify(query, { const queryString = qs.stringify(query, {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!