Skip to content

Jay Mehta / zango-frontend

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

search bar

1 parent 6fa6545c
Inline Side-by-side
Showing 12 changed files with 262 additions and 137 deletions
components/detail/DetailInfo.js
......@@ -109,7 +109,7 @@ const DetailInfo = ({ activityById }) => {
</div>
<div className="mb-4">{activityById.data.attributes.description}</div>
<div className="location">
Location & Address <span>{activityById.data.attributes.activityType}</span>
Location & Address
</div>
<div className="mb-2">Chelsea </div>
<div className="">{activityById.data.attributes.address}</div>
......@@ -147,7 +147,7 @@ const DetailInfo = ({ activityById }) => {
</div>
)}
</div>
{activityById && (
{/* {activityById && (
<div className="row hide-on-desktop">
<div className="col-12">
<ul className="availability-wrappper">
......@@ -196,7 +196,7 @@ const DetailInfo = ({ activityById }) => {
</ul>
</div>
</div>
)}
)} */}
{activityById && (
<Modal
show={enquiryModal}
......
components/detail/DetailSchedule.js
import Image from 'next/image';
import React, { useState } from 'react'
import Image from "next/image";
import React, { useState } from "react";
const DetailSchedule = ({activityById}) => {
const [showInfo, setShowInfo] = useState(false);
const handleMouseEnter = () => {
setShowInfo(true);
};
const handleMouseLeave = () => {
setShowInfo(false);
};
const returnAvilablleDaysArray = ({ data }) => {
let array = [];
if (data.attributes.availableOnMonday) {
array = [...array, { name: "Monday", value: "monday" }];
}
if (data.attributes.availableOnTuesday) {
array = [...array, { name: "Tuesday", value: "tuesday" }];
}
if (data.attributes.availableOnWednesday) {
array = [...array, { name: "Wednesday", value: "wednesday" }];
}
if (data.attributes.availableOnThursday) {
array = [...array, { name: "Thursday", value: "thursday" }];
}
if (data.attributes.availableOnFriday) {
array = [...array, { name: "Friday", value: "friday" }];
}
if (data.attributes.availableOnSaturday) {
array = [...array, { name: "Saturday", value: "saturday" }];
}
if (data.attributes.availableOnSunday) {
array = [...array, { name: "Sunday", value: "sunday" }];
}
return array;
};
const DetailSchedule = ({ activityById }) => {
const [showInfo, setShowInfo] = useState(false);
const handleMouseEnter = () => {
setShowInfo(true);
};
const handleMouseLeave = () => {
setShowInfo(false);
};
const returnAvilablleDaysArray = ({ data }) => {
let array = [];
if (data.attributes.availableOnMonday) {
array = [...array, { name: "Monday", value: "monday" }];
}
if (data.attributes.availableOnTuesday) {
array = [...array, { name: "Tuesday", value: "tuesday" }];
}
if (data.attributes.availableOnWednesday) {
array = [...array, { name: "Wednesday", value: "wednesday" }];
}
if (data.attributes.availableOnThursday) {
array = [...array, { name: "Thursday", value: "thursday" }];
}
if (data.attributes.availableOnFriday) {
array = [...array, { name: "Friday", value: "friday" }];
}
if (data.attributes.availableOnSaturday) {
array = [...array, { name: "Saturday", value: "saturday" }];
}
if (data.attributes.availableOnSunday) {
array = [...array, { name: "Sunday", value: "sunday" }];
}
return array;
};
return (
<div className="row hide-on-mobile mb-5">
{activityById && (
<div className="col-12">
<ul className="availability-wrappper">
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" />
</span>
From: {activityById.data.attributes.fromDate} To: {activityById.data.attributes.toDate}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
</span>
Time: {activityById.data.attributes.fromTime} - {activityById.data.attributes.toTime}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
</span>
Duration: {activityById.data.attributes.minimumDuration}-{activityById.data.attributes.maximumDuration} Hours
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
</span>
Contact: {activityById.data.attributes.phoneNumber}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
</span>
Active on:{" "}
{returnAvilablleDaysArray({ data: activityById.data })
.map(item => {
return item.name;
})
.join(", ")}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
</span>
Age: {activityById.data.attributes.ageLowerLimit}+
<div className="info-div">
<a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
</a>
{showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
</div>
</li>
</ul>
</div>
)}
<div className="row mb-5">
{activityById && (
<div className="col-12">
<ul className="availability-wrappper">
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/month.svg" />
</span>
From: {activityById.data.attributes.fromDate} To: {activityById.data.attributes.toDate}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/time.svg" />
</span>
Time: {activityById.data.attributes.fromTime} - {activityById.data.attributes.toTime}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/duration.svg" />
</span>
Duration: {activityById.data.attributes.minimumDuration}-{activityById.data.attributes.maximumDuration} Hours
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/contact.svg" />
</span>
Contact: {activityById.data.attributes.phoneNumber}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
</span>
Active on:{" "}
{returnAvilablleDaysArray({ data: activityById.data })
.map(item => {
return item.name;
})
.join(", ")}
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/age.svg" />
</span>
Age: {activityById.data.attributes.ageLowerLimit}+
<div className="info-div">
<a className="image-container info" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/info.svg" />
</a>
{showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
</div>
</li>
<li>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/availability/date.svg" />
</span>
Activity type: {activityById.data.attributes.activityType}
</li>
</ul>
</div>
)
}
)}
</div>
);
};
export default DetailSchedule
export default DetailSchedule;
components/home/SearchBar.js
import Image from 'next/image'
import React from 'react'
import { Button } from 'react-bootstrap'
import axios from "axios";
import Image from "next/image";
import { useRouter } from "next/router";
import React, { useState } from "react";
import { Button } from "react-bootstrap";
import { Typeahead } from "react-bootstrap-typeahead";
import "react-bootstrap-typeahead/css/Typeahead.css";
import { useDispatch } from "react-redux";
import { setActivityFilters } from "../../redux/actions/activityAction";
const SearchBar = () => {
const [open, setopen] = useState(false);
const [options, setoptions] = useState([]);
const dispatch = useDispatch();
const router = useRouter();
console.log("options", options);
return (
<>
<section className='searchbar-session'>
<div className='container'>
<div className='row'>
<div className='col-12'>
<div className='searchbar-h'>
<input type='text' placeholder='Search for products, brands or categories' />
<Button className="search-icon">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
</span>
</Button>
</div>
</div>
</div>
<section className="searchbar-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="searchbar-h">
<Typeahead
open={open}
id="select"
placeholder="Search for products, brands or categories"
onChange={selected => {
console.log("selected", selected);
// router.push("/listing");
if (selected[0]?.label.includes("experience")) {
// console.log("jjja");
router.push(`/activities/${selected[0].id}`);
}
if (selected[0]?.label.includes("category")) {
router.push(`/listing?category=${selected[0].id}`);
// dispatch(setActivityFilters({ filters: { category: selected[0].id, subCategories: [] } }));
}
// Handle selections...
}}
onInputChange={async e => {
console.log(e);
if (e.length > 1) {
const config = {
headers: {
"Content-Type": "application/json"
}
};
const res = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/experience/get-search-response`, { string: e }, config);
console.log("res", res.data);
if (res.data.success) {
let opts = res.data.data.categories?.map(item => {
return { id: item.id, label: `${item.name} - category` };
});
console.log("here", opts);
if (opts?.length > 0) {
const a = res.data.data.activities?.map(item => {
return { id: item.id, label: `${item.name} - experience` };
});
opts = [...opts, ...a];
} else {
opts = res.data.data.activities?.map(item => {
return { id: item.id, label: `${item.name} - experience` };
});
}
console.log("opts", opts);
setoptions(opts);
setopen(true);
}
} else {
setopen(false);
}
}}
options={options}
/>
{/* <input type="text" /> */}
<Button className="search-icon">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
</span>
</Button>
</div>
</div>
</div>
</div>
</section>
</>
)
}
);
};
export default SearchBar
export default SearchBar;
components/listing/Listing.js
......@@ -5,7 +5,7 @@ import LetDiscover from "./LetDiscover";
import { useSelector } from "react-redux";
const Listing = () => {
const { allActivitiesData, loading } = useSelector(sate => sate.allActivitiesData);
const { allActivitiesData, loading, totalCount } = useSelector(sate => sate.allActivitiesData);
const { categories } = useSelector(sate => sate.categories);
const { subCategories } = useSelector(sate => sate.subCategories);
......@@ -16,7 +16,7 @@ const Listing = () => {
<Fragment>
<main>
<LetDiscover categories={categories} subCategories={subCategories}/>
<ListingInner allActivitiesData={allActivitiesData} loading={loading} />
<ListingInner allActivitiesData={allActivitiesData} loading={loading} totalCount={totalCount} />
<SignUpToExperienceOurPlatform />
</main>
</Fragment>
......
components/listing/ListingInner.js
......@@ -4,8 +4,9 @@ import ListingItems from "./ListingItems";
import Image from "next/image";
import { getActivitiesByFilters, getWishlists, setActivityFilters } from "../../redux/actions/activityAction";
import { useDispatch, useSelector } from "react-redux";
import { useRouter } from "next/router";
const ListingInner = ({ allActivitiesData, loading }) => {
const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
console.log("allActivitiesData", allActivitiesData);
const [isFilterViewOpen, setIsFilterViewOpen] = useState(false);
const [isGridViewOpen, setIsGridViewOpen] = useState(false);
......@@ -13,7 +14,7 @@ const ListingInner = ({ allActivitiesData, loading }) => {
const { activityFilters } = useSelector(sate => sate.activityFilters);
const dispatch = useDispatch();
const router = useRouter();
const [size, setSize] = useState(768);
const toggleGridViewDropdown = () => {
setIsGridViewOpen(!isGridViewOpen);
......@@ -24,12 +25,19 @@ const ListingInner = ({ allActivitiesData, loading }) => {
const toggleDropdown = () => {
setIsOpen(!isOpen);
};
const [gridClass, setGridClass] = useState('col-md-3');
const [gridClass, setGridClass] = useState("col-md-3");
const handleGridChange = (className) => {
const handleGridChange = 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(() => {
const handleResize = () => {
// console.log("Window Width:");
setSize(window.innerWidth);
......@@ -115,9 +123,7 @@ const ListingInner = ({ allActivitiesData, loading }) => {
<section className="listing-inner-session">
<div className="container-fluid">
<div className="row">
<div className="col-md-6">
<h3 className="heading03">Sub Category Tags:</h3>
</div>
<div className="col-md-6">{/* <h3 className="heading03">Sub Category Tags:</h3> */}</div>
<div className="col-md-6">
<div className="filter-dd">
<div className="filter-view box-inner">
......@@ -144,11 +150,11 @@ const ListingInner = ({ allActivitiesData, loading }) => {
</div>
<ul className="list-by">
<li>
<input className="form-check-labe" type="radio" id="3 Grid View" name="gridView" onClick={() => handleGridChange('col-md-4')} />
<input className="form-check-labe" type="radio" id="3 Grid View" name="gridView" onClick={() => handleGridChange("col-md-4")} />
<label htmlFor="3 Grid View">3 Grid View</label>
</li>
<li>
<input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" onClick={() => handleGridChange('col-md-3')} defaultChecked />
<input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" onClick={() => handleGridChange("col-md-3")} defaultChecked />
<label htmlFor="4 Grid View">4 Grid View</label>
</li>
</ul>
......@@ -222,7 +228,7 @@ const ListingInner = ({ allActivitiesData, loading }) => {
)}
<div className="col-md-9">
<ListingItems allActivitiesData={allActivitiesData} loading={loading} gridClass={gridClass} />
<ListingItems allActivitiesData={allActivitiesData} loading={loading} gridClass={gridClass} totalCount={totalCount} />
</div>
</div>
</div>
......
components/listing/ListingItems.js
......@@ -7,13 +7,37 @@ import { Loader } from "react-bootstrap-typeahead";
import { useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling";
import WishlistComponent from "../detail/WIshlistComponent";
import Pagination from "react-js-pagination";
const ListingItems = ({ allActivitiesData, loading, gridClass }) => {
const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) => {
// const [gridClass, setGridClass] = useState('col-md-3');
const { endUser } = useSelector(state => state.endUser);
console.log("endUser", endUser);
const router = useRouter();
// console.log("router", router);
let { page = 1, location = "" } = router.query;
page = Number(page);
let queryParams;
if (typeof window !== "undefined") {
queryParams = new URLSearchParams(window.location.search);
}
const handlePagination = pageNumber => {
// This was the old way to do this, by doing this we were getting rid of the other query string parameters.
// router.push(`?page=${pageNumber}`);
// We have done this to take care of keeping the search filters in the query params
// when we end up changing the page number.
if (queryParams.has("page")) {
queryParams.set("page", pageNumber);
} else {
queryParams.append("page", pageNumber);
}
router.replace({
search: queryParams.toString()
});
};
return (
<>
{allActivitiesData && !allActivitiesData.data.length == 0 ? (
......@@ -79,6 +103,24 @@ const ListingItems = ({ allActivitiesData, loading, gridClass }) => {
) : (
<Empty />
)}
<div className="row">
<div className="col-12">
<div className="load-more">
<Pagination
activePage={page}
itemsCountPerPage={12}
totalItemsCount={totalCount}
onChange={handlePagination}
nextPageText={">"}
prevPageText={"<"}
firstPageText={"<<"}
lastPageText={">>"}
itemClass="page-item"
linkClass="page-link"
></Pagination>
</div>
</div>
</div>
</>
);
};
......
components/vendor/ActivityDetails.js
......@@ -246,7 +246,7 @@ const ActivityDetails = ({ isUpdate }) => {
// console.log("tostring",activityById?.data.attributes.duration.toString())
const currentDate = new Date();
const sanitizedCurrentDate = sanitizeTimeRange({ data: { $d: currentDate } });
// console.log("current date", sanitizedCurrentDate);
console.log("subCategories", subCategories);
const router = useRouter();
let categoryRef = useRef();
let timeLines;
......
components/vendor/ImageUploadPopUp.js
......@@ -94,7 +94,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages }
return (
<div>
<Upload showUploadList={{ showRemoveIcon: false }} listType="picture-card" fileList={fileList} onChange={handleImageChange} onPreview={handlePreview}>
{fileList.length >= 5 ? null : (
{fileList?.length >= 5 ? null : (
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>Upload</div>
......@@ -115,7 +115,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages }
src={previewImage}
/>
)}
<button type="button" onClick={handleUpload} disabled={fileList.length === 0} loading={uploading} style={{ marginTop: 16 }}>
<button type="button" onClick={handleUpload} disabled={fileList ? fileList.length === 0 : true} loading={uploading} style={{ marginTop: 16 }}>
{uploading ? "Uploading" : "Start Upload"}
</button>
</div>
......
pages/listing.js
......@@ -24,7 +24,7 @@ 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({ currentPage: query.page }));
await store.dispatch(getAllCategories());
await store.dispatch(getSubCategoriesByCategoryId());
......
redux/actions/activityAction.js
......@@ -334,7 +334,8 @@ export const getActivitiesByFilters =
activityType,
sort,
priceLowerLimit,
priceUpperLimit
priceUpperLimit,
currentPage = 1
}) =>
async dispatch => {
let sortFilter = [];
......@@ -355,6 +356,10 @@ export const getActivitiesByFilters =
sortFilter = ["pricePerPerson:asc"];
}
let query = {
pagination: {
pageSize: 12,
page: currentPage
},
filters: {
approved: { $eq: "approved" }
// fromDate: { $gte: fromDate },
......
redux/actions/userActions.js
......@@ -44,7 +44,7 @@ export const registerUser = userData => async dispatch => {
userFormData.append("password", userData.password);
userFormData.append("role", userData.role);
userFormData.append("phone", userData.mobile);
userFormData.append("approved", "pending");
// userFormData.append("approved", "pending");
console.log("userFormData", userFormData);
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/auth/local/register`, userFormData, config);
......
redux/reducers/activitiesReducer.js
......@@ -54,7 +54,9 @@ export const getActivitiesReducer = (state = {}, action) => {
case GET_ACTIVITIES_SUCCESS:
return {
loading: false,
allActivitiesData: action.payload
allActivitiesData: action.payload,
totalCount: action.payload.meta.pagination.total,
resultsPerPage: action.payload.meta.pagination.pageSize
};
case GET_ACTIVITIES_FAIL:
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!