From 5d213d14d846598ff6b29e0b4f4cd4143d4cd564 Mon Sep 17 00:00:00 2001 From: aryabenade Date: Fri, 20 Mar 2026 13:58:39 +0530 Subject: [PATCH] show upcomingCities from backend on landingPage --- src/Redux/baseQuery.ts | 17 + src/Redux/services/attractions.service.ts | 8 +- src/Redux/services/cities.service.ts | 16 +- src/components/LandingUpcomingCities.tsx | 418 +++++++++++----------- src/components/Navbar.tsx | 4 +- src/vite-env.d.ts | 8 + 6 files changed, 258 insertions(+), 213 deletions(-) create mode 100644 src/Redux/baseQuery.ts create mode 100644 src/vite-env.d.ts diff --git a/src/Redux/baseQuery.ts b/src/Redux/baseQuery.ts new file mode 100644 index 0000000..37c41cc --- /dev/null +++ b/src/Redux/baseQuery.ts @@ -0,0 +1,17 @@ +// src/store/baseQuery.ts +import { fetchBaseQuery } from "@reduxjs/toolkit/query/react"; + +export const baseQuery = fetchBaseQuery({ + baseUrl: import.meta.env.VITE_BASE_URL, + // credentials: "include", + prepareHeaders: (headers) => { + const token = localStorage.getItem("accessToken"); + if (token) { + headers.set("Authorization", `Bearer ${token}`); + // headers.set("access-token", token); + } + // headers.set("Content-Type", "application/json"); + return headers; + }, +}); + diff --git a/src/Redux/services/attractions.service.ts b/src/Redux/services/attractions.service.ts index dcbae38..01b7dee 100644 --- a/src/Redux/services/attractions.service.ts +++ b/src/Redux/services/attractions.service.ts @@ -1,10 +1,12 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; +import { baseQuery } from "../baseQuery"; export const attractionsApi = createApi({ reducerPath: 'attractionsApi', - baseQuery: fetchBaseQuery({ - baseUrl: 'https://testingapi.citycards.betadelivery.com', - }), + // baseQuery: fetchBaseQuery({ + // baseUrl: 'https://testingapi.citycards.betadelivery.com', + // }), + baseQuery, endpoints: (builder) => ({ getAttractionFilters: builder.query({ // cityId is passed as the query param diff --git a/src/Redux/services/cities.service.ts b/src/Redux/services/cities.service.ts index 44caf81..e1dfb06 100644 --- a/src/Redux/services/cities.service.ts +++ b/src/Redux/services/cities.service.ts @@ -1,10 +1,12 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; +import { baseQuery } from "../baseQuery"; export const citiesApi = createApi({ reducerPath: 'citiesApi', - baseQuery: fetchBaseQuery({ - baseUrl: 'https://testingapi.citycards.betadelivery.com', - }), + // baseQuery: fetchBaseQuery({ + // baseUrl: 'https://testingapi.citycards.betadelivery.com', + // }), + baseQuery, endpoints: (builder) => ({ getCityListWithBanner: builder.query({ @@ -15,8 +17,14 @@ export const citiesApi = createApi({ return `/cities/list/customer/cities?${params.toString()}` } + }), + + getUpcomingCities: builder.query({ + + query: (listType) => `/cities/list/all?listType=${listType}`, + }) }), }); -export const { useGetCityListWithBannerQuery} = citiesApi; \ No newline at end of file +export const { useGetCityListWithBannerQuery,useGetUpcomingCitiesQuery } = citiesApi; \ No newline at end of file diff --git a/src/components/LandingUpcomingCities.tsx b/src/components/LandingUpcomingCities.tsx index 0322168..2d724a0 100644 --- a/src/components/LandingUpcomingCities.tsx +++ b/src/components/LandingUpcomingCities.tsx @@ -3,102 +3,103 @@ import { ImageWithFallback } from './figma/ImageWithFallback'; import { Button } from './ui/button'; import { useRef, useState, useEffect } from 'react'; import Image592Traced from '../imports/Image592Traced-5025-559'; +import { useGetUpcomingCitiesQuery } from '../Redux/services/cities.service'; -const upcomingCities = [ - { - id: 1, - name: 'Boston', - country: 'USA', - launchDate: 'Spring 2025', - attractions: 65, - description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.', - image: 'https://images.unsplash.com/photo-1568271667303-14b2a1a36da1?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', - showHoverState: true - }, - { - id: 2, - name: 'Rome', - country: 'Italy', - launchDate: 'Summer 2025', - attractions: 80, - image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', - showHoverState: false - }, - { - id: 3, - name: 'Paris', - country: 'France', - launchDate: 'Fall 2025', - attractions: 95, - image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', - showHoverState: false - }, - { - id: 4, - name: 'Dubai', - country: 'UAE', - launchDate: 'Winter 2025', - attractions: 70, - image: 'https://images.unsplash.com/photo-1512453979798-5ea266f8880c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', - showHoverState: false, - badge: 'New' - }, - { - id: 5, - name: 'Tokyo', - country: 'Japan', - launchDate: 'Early 2026', - attractions: 120, - image: 'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', - showHoverState: false - }, - { - id: 6, - name: 'Sydney', - country: 'Australia', - launchDate: 'Spring 2026', - attractions: 85, - image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', - showHoverState: false - }, - { - id: 7, - name: 'New York', - country: 'USA', - launchDate: 'Summer 2026', - attractions: 150, - image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', - showHoverState: false, - badge: 'Most Requested' - }, - { - id: 8, - name: 'Singapore', - country: 'Singapore', - launchDate: 'Fall 2026', - attractions: 75, - image: 'https://images.unsplash.com/photo-1525625293386-3f8f99389edd?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', - showHoverState: false - }, - { - id: 9, - name: 'Amsterdam', - country: 'Netherlands', - launchDate: 'Winter 2026', - attractions: 90, - image: 'https://images.unsplash.com/photo-1534351590666-13e3e96b5017?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', - showHoverState: false - }, - { - id: 10, - name: 'Barcelona', - country: 'Spain', - launchDate: 'Early 2027', - attractions: 110, - image: 'https://images.unsplash.com/photo-1583422409516-2895a77efded?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', - showHoverState: false - } -]; +// const upcomingCities = [ +// { +// id: 1, +// name: 'Boston', +// country: 'USA', +// launchDate: 'Spring 2025', +// attractions: 65, +// description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.', +// image: 'https://images.unsplash.com/photo-1568271667303-14b2a1a36da1?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', +// showHoverState: true +// }, +// { +// id: 2, +// name: 'Rome', +// country: 'Italy', +// launchDate: 'Summer 2025', +// attractions: 80, +// image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', +// showHoverState: false +// }, +// { +// id: 3, +// name: 'Paris', +// country: 'France', +// launchDate: 'Fall 2025', +// attractions: 95, +// image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', +// showHoverState: false +// }, +// { +// id: 4, +// name: 'Dubai', +// country: 'UAE', +// launchDate: 'Winter 2025', +// attractions: 70, +// image: 'https://images.unsplash.com/photo-1512453979798-5ea266f8880c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', +// showHoverState: false, +// badge: 'New' +// }, +// { +// id: 5, +// name: 'Tokyo', +// country: 'Japan', +// launchDate: 'Early 2026', +// attractions: 120, +// image: 'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', +// showHoverState: false +// }, +// { +// id: 6, +// name: 'Sydney', +// country: 'Australia', +// launchDate: 'Spring 2026', +// attractions: 85, +// image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', +// showHoverState: false +// }, +// { +// id: 7, +// name: 'New York', +// country: 'USA', +// launchDate: 'Summer 2026', +// attractions: 150, +// image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', +// showHoverState: false, +// badge: 'Most Requested' +// }, +// { +// id: 8, +// name: 'Singapore', +// country: 'Singapore', +// launchDate: 'Fall 2026', +// attractions: 75, +// image: 'https://images.unsplash.com/photo-1525625293386-3f8f99389edd?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', +// showHoverState: false +// }, +// { +// id: 9, +// name: 'Amsterdam', +// country: 'Netherlands', +// launchDate: 'Winter 2026', +// attractions: 90, +// image: 'https://images.unsplash.com/photo-1534351590666-13e3e96b5017?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', +// showHoverState: false +// }, +// { +// id: 10, +// name: 'Barcelona', +// country: 'Spain', +// launchDate: 'Early 2027', +// attractions: 110, +// image: 'https://images.unsplash.com/photo-1583422409516-2895a77efded?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80', +// showHoverState: false +// } +// ]; export function LandingUpcomingCities() { const scrollContainerRef = useRef(null); @@ -107,6 +108,15 @@ export function LandingUpcomingCities() { const [scrollLeft, setScrollLeft] = useState(0); const [showDragHint, setShowDragHint] = useState(false); + const listType = "upcomingCity" + // const[listType,setListType]=useState("upcomingCity") + + const { data, isLoading } = useGetUpcomingCitiesQuery(listType) + + if(isLoading){ + return
Loading...
+ } + const handleMouseDown = (e: React.MouseEvent) => { if (!scrollContainerRef.current) return; // Only start dragging if not clicking on a button or interactive element @@ -143,11 +153,11 @@ export function LandingUpcomingCities() { } }; - useEffect(() => { - const handleGlobalMouseUp = () => setIsDragging(false); - document.addEventListener('mouseup', handleGlobalMouseUp); - return () => document.removeEventListener('mouseup', handleGlobalMouseUp); - }, []); + // useEffect(() => { + // const handleGlobalMouseUp = () => setIsDragging(false); + // document.addEventListener('mouseup', handleGlobalMouseUp); + // return () => document.removeEventListener('mouseup', handleGlobalMouseUp); + // }, []); return (
@@ -172,11 +182,11 @@ export function LandingUpcomingCities() { )} -
- {upcomingCities.map((city) => ( -
- {/* Background - Either solid color or image */} - {city.showHoverState ? ( - // Boston card with image background and same layout as other cards - <> - - - {/* Dark overlay */} -
- - {/* City name overlay - matching Rome card layout */} -
-

{city.name}

-
- {city.country} - {city.launchDate} -
-
+ {data && data?.upcomingCities?.map((city: any) => ( +
+ {/* Background - Either solid color or image */} + {true ? ( + // Boston card with image background and same layout as other cards + <> + - {/* Hover state overlay - same as other cards */} -
-
-

{city.name}

-

{city.attractions}+ attractions

-

Coming {city.launchDate}

- -
-
- - ) : ( - // Image background for other cards - <> - - - {/* Dark overlay */} -
- - {/* Badge (if present) */} - {city.badge && ( -
- {city.badge} -
- )} + {/* Dark overlay */} +
- {/* City name overlay */} -
-

{city.name}

-
- {city.country} - {city.launchDate} -
+ {/* City name overlay - matching Rome card layout */} +
+

{city.cityName}

+
+ {/* {city.country} + {city.launchDate} */}
+
- {/* Hover state overlay */} -
-
-

{city.name}

-

{city.attractions}+ attractions

-

Coming {city.launchDate}

- -
+ {/* Hover state overlay - same as other cards */} +
+
+

{city.cityName}

+ {/*

{city.attractions}+ attractions

+

Coming {city.launchDate}

*/} +
- - )} -
- ))} +
+ + ) : ( + // Image background for other cards + <> + + + {/* Dark overlay */} +
+ + {/* Badge (if present) */} + {/* {city.badge && ( +
+ {city.badge} +
+ )} */} + + {/* City name overlay */} + {/*
+

{city.name}

+
+ {city.country} + {city.launchDate} +
+
*/} + + {/* Hover state overlay */} +
+
+

{city.cityName}

+ {/*

{city.attractions}+ attractions

*/} + {/*

Coming {city.launchDate}

*/} + +
+
+ + )} +
+ ))}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index d35d2eb..900f3b1 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -91,7 +91,7 @@ export default function Navbar({ const { user, login, logout } = useAuth(); // from AuthContext - const protectedPaths = ["/passes", "/whats-included", "/","/melbourne"]; + const protectedPaths = ["/passes", "/whats-included", "/", "/melbourne"]; const handleOpenLoginModal = () => { if (!user && protectedPaths.includes(location.pathname)) { @@ -289,7 +289,7 @@ export default function Navbar({ console.log('City selected from navbar:', cityId); onCityChange(cityId); - if (cityId.toLowerCase() === 'melbourne') { + if (cityId.toLowerCase() === '1') { setNavigationSource('melbourne'); navigate('/melbourne'); } else { diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..8abf8d3 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,8 @@ +interface ImportMetaEnv { + readonly VITE_BASE_URL: string + readonly VITE_GOOGLE_MAP: string +} + +interface ImportMeta { + readonly env: ImportMetaEnv +} \ No newline at end of file