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 167 additions and 42 deletions
components/detail/DetailInfo.js
...@@ -109,7 +109,7 @@ const DetailInfo = ({ activityById }) => { ...@@ -109,7 +109,7 @@ const DetailInfo = ({ activityById }) => {
</div> </div>
<div className="mb-4">{activityById.data.attributes.description}</div> <div className="mb-4">{activityById.data.attributes.description}</div>
<div className="location"> <div className="location">
Location & Address <span>{activityById.data.attributes.activityType}</span> 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>
...@@ -147,7 +147,7 @@ const DetailInfo = ({ activityById }) => { ...@@ -147,7 +147,7 @@ const DetailInfo = ({ activityById }) => {
</div> </div>
)} )}
</div> </div>
{activityById && ( {/* {activityById && (
<div className="row hide-on-desktop"> <div className="row hide-on-desktop">
<div className="col-12"> <div className="col-12">
<ul className="availability-wrappper"> <ul className="availability-wrappper">
...@@ -196,7 +196,7 @@ const DetailInfo = ({ activityById }) => { ...@@ -196,7 +196,7 @@ const DetailInfo = ({ activityById }) => {
</ul> </ul>
</div> </div>
</div> </div>
)} )} */}
{activityById && ( {activityById && (
<Modal <Modal
show={enquiryModal} show={enquiryModal}
......
components/detail/DetailSchedule.js
import Image from 'next/image'; import Image from "next/image";
import React, { useState } from 'react' import React, { useState } from "react";
const DetailSchedule = ({activityById}) => { const DetailSchedule = ({ activityById }) => {
const [showInfo, setShowInfo] = useState(false); const [showInfo, setShowInfo] = useState(false);
const handleMouseEnter = () => { const handleMouseEnter = () => {
setShowInfo(true); setShowInfo(true);
...@@ -36,7 +36,7 @@ const DetailSchedule = ({activityById}) => { ...@@ -36,7 +36,7 @@ const DetailSchedule = ({activityById}) => {
return array; return array;
}; };
return ( return (
<div className="row hide-on-mobile mb-5"> <div className="row mb-5">
{activityById && ( {activityById && (
<div className="col-12"> <div className="col-12">
<ul className="availability-wrappper"> <ul className="availability-wrappper">
...@@ -87,11 +87,17 @@ const DetailSchedule = ({activityById}) => { ...@@ -87,11 +87,17 @@ const DetailSchedule = ({activityById}) => {
{showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>} {showInfo && <div className="info-text">13+. Climbers aged 13-17 must be accompanied by an adult (18+)</div>}
</div> </div>
</li> </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> </ul>
</div> </div>
)} )}
</div> </div>
) );
} };
export default DetailSchedule export default DetailSchedule;
components/home/SearchBar.js
import Image from 'next/image' import axios from "axios";
import React from 'react' import Image from "next/image";
import { Button } from 'react-bootstrap' 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 SearchBar = () => {
const [open, setopen] = useState(false);
const [options, setoptions] = useState([]);
const dispatch = useDispatch();
const router = useRouter();
console.log("options", options);
return ( return (
<> <>
<section className='searchbar-session'> <section className="searchbar-session">
<div className='container'> <div className="container">
<div className='row'> <div className="row">
<div className='col-12'> <div className="col-12">
<div className='searchbar-h'> <div className="searchbar-h">
<input type='text' placeholder='Search for products, brands or categories' /> <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"> <Button className="search-icon">
<span className="image-container"> <span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" /> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
...@@ -22,7 +86,7 @@ const SearchBar = () => { ...@@ -22,7 +86,7 @@ const SearchBar = () => {
</div> </div>
</section> </section>
</> </>
) );
} };
export default SearchBar export default SearchBar;
components/listing/Listing.js
...@@ -5,7 +5,7 @@ import LetDiscover from "./LetDiscover"; ...@@ -5,7 +5,7 @@ import LetDiscover from "./LetDiscover";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
const Listing = () => { const Listing = () => {
const { allActivitiesData, loading } = useSelector(sate => sate.allActivitiesData); const { allActivitiesData, loading, totalCount } = useSelector(sate => sate.allActivitiesData);
const { categories } = useSelector(sate => sate.categories); const { categories } = useSelector(sate => sate.categories);
const { subCategories } = useSelector(sate => sate.subCategories); const { subCategories } = useSelector(sate => sate.subCategories);
...@@ -16,7 +16,7 @@ const Listing = () => { ...@@ -16,7 +16,7 @@ const Listing = () => {
<Fragment> <Fragment>
<main> <main>
<LetDiscover categories={categories} subCategories={subCategories}/> <LetDiscover categories={categories} subCategories={subCategories}/>
<ListingInner allActivitiesData={allActivitiesData} loading={loading} /> <ListingInner allActivitiesData={allActivitiesData} loading={loading} totalCount={totalCount} />
<SignUpToExperienceOurPlatform /> <SignUpToExperienceOurPlatform />
</main> </main>
</Fragment> </Fragment>
......
components/listing/ListingInner.js
...@@ -4,8 +4,9 @@ import ListingItems from "./ListingItems"; ...@@ -4,8 +4,9 @@ import ListingItems from "./ListingItems";
import Image from "next/image"; import Image from "next/image";
import { getActivitiesByFilters, getWishlists, setActivityFilters } from "../../redux/actions/activityAction"; import { getActivitiesByFilters, getWishlists, setActivityFilters } from "../../redux/actions/activityAction";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { useRouter } from "next/router";
const ListingInner = ({ allActivitiesData, loading }) => { const ListingInner = ({ allActivitiesData, loading, totalCount }) => {
console.log("allActivitiesData", allActivitiesData); console.log("allActivitiesData", allActivitiesData);
const [isFilterViewOpen, setIsFilterViewOpen] = useState(false); const [isFilterViewOpen, setIsFilterViewOpen] = useState(false);
const [isGridViewOpen, setIsGridViewOpen] = useState(false); const [isGridViewOpen, setIsGridViewOpen] = useState(false);
...@@ -13,7 +14,7 @@ const ListingInner = ({ allActivitiesData, loading }) => { ...@@ -13,7 +14,7 @@ const ListingInner = ({ allActivitiesData, loading }) => {
const { activityFilters } = useSelector(sate => sate.activityFilters); const { activityFilters } = useSelector(sate => sate.activityFilters);
const dispatch = useDispatch(); const dispatch = useDispatch();
const router = useRouter();
const [size, setSize] = useState(768); const [size, setSize] = useState(768);
const toggleGridViewDropdown = () => { const toggleGridViewDropdown = () => {
setIsGridViewOpen(!isGridViewOpen); setIsGridViewOpen(!isGridViewOpen);
...@@ -24,12 +25,19 @@ const ListingInner = ({ allActivitiesData, loading }) => { ...@@ -24,12 +25,19 @@ const ListingInner = ({ allActivitiesData, loading }) => {
const toggleDropdown = () => { const toggleDropdown = () => {
setIsOpen(!isOpen); setIsOpen(!isOpen);
}; };
const [gridClass, setGridClass] = useState('col-md-3'); const [gridClass, setGridClass] = useState("col-md-3");
const handleGridChange = (className) => { const handleGridChange = className => {
setGridClass(className); setGridClass(className);
}; };
useEffect(() => { useEffect(() => {
console.log("router.query.category", router.query.category);
if (router.query.category) {
dispatch(setActivityFilters({ filters: { category: router.query.category, subCategories: [] } }));
}
}, []);
useEffect(() => {
const handleResize = () => { const handleResize = () => {
// console.log("Window Width:"); // console.log("Window Width:");
setSize(window.innerWidth); setSize(window.innerWidth);
...@@ -115,9 +123,7 @@ const ListingInner = ({ allActivitiesData, loading }) => { ...@@ -115,9 +123,7 @@ const ListingInner = ({ allActivitiesData, loading }) => {
<section className="listing-inner-session"> <section className="listing-inner-session">
<div className="container-fluid"> <div className="container-fluid">
<div className="row"> <div className="row">
<div className="col-md-6"> <div className="col-md-6">{/* <h3 className="heading03">Sub Category Tags:</h3> */}</div>
<h3 className="heading03">Sub Category Tags:</h3>
</div>
<div className="col-md-6"> <div className="col-md-6">
<div className="filter-dd"> <div className="filter-dd">
<div className="filter-view box-inner"> <div className="filter-view box-inner">
...@@ -144,11 +150,11 @@ const ListingInner = ({ allActivitiesData, loading }) => { ...@@ -144,11 +150,11 @@ const ListingInner = ({ allActivitiesData, loading }) => {
</div> </div>
<ul className="list-by"> <ul className="list-by">
<li> <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> <label htmlFor="3 Grid View">3 Grid View</label>
</li> </li>
<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> <label htmlFor="4 Grid View">4 Grid View</label>
</li> </li>
</ul> </ul>
...@@ -222,7 +228,7 @@ const ListingInner = ({ allActivitiesData, loading }) => { ...@@ -222,7 +228,7 @@ const ListingInner = ({ allActivitiesData, loading }) => {
)} )}
<div className="col-md-9"> <div className="col-md-9">
<ListingItems allActivitiesData={allActivitiesData} loading={loading} gridClass={gridClass} /> <ListingItems allActivitiesData={allActivitiesData} loading={loading} gridClass={gridClass} totalCount={totalCount} />
</div> </div>
</div> </div>
</div> </div>
......
components/listing/ListingItems.js
...@@ -7,13 +7,37 @@ import { Loader } from "react-bootstrap-typeahead"; ...@@ -7,13 +7,37 @@ import { Loader } from "react-bootstrap-typeahead";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling"; import { cleanImage } from "../../services/imageHandling";
import WishlistComponent from "../detail/WIshlistComponent"; 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 [gridClass, setGridClass] = useState('col-md-3');
const { endUser } = useSelector(state => state.endUser); const { endUser } = useSelector(state => state.endUser);
console.log("endUser", endUser); console.log("endUser", endUser);
const router = useRouter(); 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 ( return (
<> <>
{allActivitiesData && !allActivitiesData.data.length == 0 ? ( {allActivitiesData && !allActivitiesData.data.length == 0 ? (
...@@ -79,6 +103,24 @@ const ListingItems = ({ allActivitiesData, loading, gridClass }) => { ...@@ -79,6 +103,24 @@ const ListingItems = ({ allActivitiesData, loading, gridClass }) => {
) : ( ) : (
<Empty /> <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 }) => { ...@@ -246,7 +246,7 @@ const ActivityDetails = ({ isUpdate }) => {
// console.log("tostring",activityById?.data.attributes.duration.toString()) // console.log("tostring",activityById?.data.attributes.duration.toString())
const currentDate = new Date(); const currentDate = new Date();
const sanitizedCurrentDate = sanitizeTimeRange({ data: { $d: currentDate } }); const sanitizedCurrentDate = sanitizeTimeRange({ data: { $d: currentDate } });
// console.log("current date", sanitizedCurrentDate); console.log("subCategories", subCategories);
const router = useRouter(); const router = useRouter();
let categoryRef = useRef(); let categoryRef = useRef();
let timeLines; let timeLines;
......
components/vendor/ImageUploadPopUp.js
...@@ -94,7 +94,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages } ...@@ -94,7 +94,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages }
return ( return (
<div> <div>
<Upload showUploadList={{ showRemoveIcon: false }} listType="picture-card" fileList={fileList} onChange={handleImageChange} onPreview={handlePreview}> <Upload showUploadList={{ showRemoveIcon: false }} listType="picture-card" fileList={fileList} onChange={handleImageChange} onPreview={handlePreview}>
{fileList.length >= 5 ? null : ( {fileList?.length >= 5 ? null : (
<div> <div>
<PlusOutlined /> <PlusOutlined />
<div style={{ marginTop: 8 }}>Upload</div> <div style={{ marginTop: 8 }}>Upload</div>
...@@ -115,7 +115,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages } ...@@ -115,7 +115,7 @@ const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages }
src={previewImage} 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"} {uploading ? "Uploading" : "Start Upload"}
</button> </button>
</div> </div>
......
pages/listing.js
...@@ -24,7 +24,7 @@ export default function ListingPage() { ...@@ -24,7 +24,7 @@ export default function ListingPage() {
/** For server side rendering */ /** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => { export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
try { try {
await store.dispatch(getActivitiesByFilters({})); await store.dispatch(getActivitiesByFilters({ currentPage: query.page }));
await store.dispatch(getAllCategories()); await store.dispatch(getAllCategories());
await store.dispatch(getSubCategoriesByCategoryId()); await store.dispatch(getSubCategoriesByCategoryId());
......
redux/actions/activityAction.js
...@@ -334,7 +334,8 @@ export const getActivitiesByFilters = ...@@ -334,7 +334,8 @@ export const getActivitiesByFilters =
activityType, activityType,
sort, sort,
priceLowerLimit, priceLowerLimit,
priceUpperLimit priceUpperLimit,
currentPage = 1
}) => }) =>
async dispatch => { async dispatch => {
let sortFilter = []; let sortFilter = [];
...@@ -355,6 +356,10 @@ export const getActivitiesByFilters = ...@@ -355,6 +356,10 @@ export const getActivitiesByFilters =
sortFilter = ["pricePerPerson:asc"]; sortFilter = ["pricePerPerson:asc"];
} }
let query = { let query = {
pagination: {
pageSize: 12,
page: currentPage
},
filters: { filters: {
approved: { $eq: "approved" } approved: { $eq: "approved" }
// fromDate: { $gte: fromDate }, // fromDate: { $gte: fromDate },
......
redux/actions/userActions.js
...@@ -44,7 +44,7 @@ export const registerUser = userData => async dispatch => { ...@@ -44,7 +44,7 @@ export const registerUser = userData => async dispatch => {
userFormData.append("password", userData.password); userFormData.append("password", userData.password);
userFormData.append("role", userData.role); userFormData.append("role", userData.role);
userFormData.append("phone", userData.mobile); userFormData.append("phone", userData.mobile);
userFormData.append("approved", "pending"); // userFormData.append("approved", "pending");
console.log("userFormData", userFormData); console.log("userFormData", userFormData);
const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/auth/local/register`, userFormData, config); 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) => { ...@@ -54,7 +54,9 @@ export const getActivitiesReducer = (state = {}, action) => {
case GET_ACTIVITIES_SUCCESS: case GET_ACTIVITIES_SUCCESS:
return { return {
loading: false, loading: false,
allActivitiesData: action.payload allActivitiesData: action.payload,
totalCount: action.payload.meta.pagination.total,
resultsPerPage: action.payload.meta.pagination.pageSize
}; };
case GET_ACTIVITIES_FAIL: 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!