From de80760cd44dcdaaa820c77b7954ea1a8e004889 Mon Sep 17 00:00:00 2001 From: aryabenade Date: Mon, 16 Feb 2026 12:11:26 +0530 Subject: [PATCH] add rtk setup --- package-lock.json | 112 +++++++++++++++- package.json | 2 + src/Redux/Store.tsx | 18 +++ src/Redux/services/fakeApi.service.ts | 19 +++ src/main.tsx | 10 +- src/pages/landingPage.tsx | 181 +++++++++++++------------- 6 files changed, 250 insertions(+), 92 deletions(-) create mode 100644 src/Redux/Store.tsx create mode 100644 src/Redux/services/fakeApi.service.ts diff --git a/package-lock.json b/package-lock.json index 5f4b827..13d84a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "@radix-ui/react-toggle": "^1.1.2", "@radix-ui/react-toggle-group": "^1.1.2", "@radix-ui/react-tooltip": "^1.1.8", + "@reduxjs/toolkit": "^2.11.2", "@tailwindcss/postcss": "^4.1.13", "@tailwindcss/vite": "^4.1.14", "class-variance-authority": "^0.7.1", @@ -49,6 +50,7 @@ "react-day-picker": "^8.10.1", "react-dom": "^18.3.1", "react-hook-form": "^7.55.0", + "react-redux": "^9.2.0", "react-resizable-panels": "^2.1.7", "react-router-dom": "^7.9.4", "recharts": "^2.15.2", @@ -1917,6 +1919,32 @@ "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==", "license": "MIT" }, + "node_modules/@reduxjs/toolkit": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz", + "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==", + "license": "MIT", + "dependencies": { + "@standard-schema/spec": "^1.0.0", + "@standard-schema/utils": "^0.3.0", + "immer": "^11.0.0", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@rolldown/pluginutils": { "version": "1.0.0-beta.27", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", @@ -2197,6 +2225,18 @@ "win32" ] }, + "node_modules/@standard-schema/spec": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz", + "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==", + "license": "MIT" + }, + "node_modules/@standard-schema/utils": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz", + "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==", + "license": "MIT" + }, "node_modules/@swc/core": { "version": "1.13.5", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.13.5.tgz", @@ -3033,6 +3073,7 @@ "integrity": "sha512-yCAeZl7a0DxgNVteXFHt9+uyFbqXGy/ShC4BlcHkoE0AfGXYv/BUiplV72DjMYXHDBXFjhvr6DD1NiRVfB4j8g==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~6.21.0" } @@ -3043,6 +3084,7 @@ "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -3053,10 +3095,17 @@ "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==", "devOptional": true, "license": "MIT", + "peer": true, "peerDependencies": { "@types/react": "^19.0.0" } }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", + "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==", + "license": "MIT" + }, "node_modules/@vitejs/plugin-react-swc": { "version": "3.11.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.11.0.tgz", @@ -3311,7 +3360,8 @@ "version": "8.6.0", "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz", "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/embla-carousel-react": { "version": "8.6.0", @@ -3477,6 +3527,16 @@ "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", "license": "ISC" }, + "node_modules/immer": { + "version": "11.1.4", + "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz", + "integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/input-otp": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.2.tgz", @@ -3885,6 +3945,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -3942,6 +4003,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -3968,6 +4030,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", + "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -3998,6 +4061,30 @@ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "license": "MIT" }, + "node_modules/react-redux": { + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", + "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", + "license": "MIT", + "peer": true, + "dependencies": { + "@types/use-sync-external-store": "^0.0.6", + "use-sync-external-store": "^1.4.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25 || ^19", + "react": "^18.0 || ^19", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, "node_modules/react-remove-scroll": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz", @@ -4178,6 +4265,28 @@ "decimal.js-light": "^2.4.1" } }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", + "license": "MIT", + "peer": true + }, + "node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "license": "MIT", + "peerDependencies": { + "redux": "^5.0.0" + } + }, + "node_modules/reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", + "license": "MIT" + }, "node_modules/rollup": { "version": "4.50.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.50.1.tgz", @@ -4424,6 +4533,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", diff --git a/package.json b/package.json index 5e2c057..2e11959 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@radix-ui/react-toggle": "^1.1.2", "@radix-ui/react-toggle-group": "^1.1.2", "@radix-ui/react-tooltip": "^1.1.8", + "@reduxjs/toolkit": "^2.11.2", "@tailwindcss/postcss": "^4.1.13", "@tailwindcss/vite": "^4.1.14", "class-variance-authority": "^0.7.1", @@ -44,6 +45,7 @@ "react-day-picker": "^8.10.1", "react-dom": "^18.3.1", "react-hook-form": "^7.55.0", + "react-redux": "^9.2.0", "react-resizable-panels": "^2.1.7", "react-router-dom": "^7.9.4", "recharts": "^2.15.2", diff --git a/src/Redux/Store.tsx b/src/Redux/Store.tsx new file mode 100644 index 0000000..1a71269 --- /dev/null +++ b/src/Redux/Store.tsx @@ -0,0 +1,18 @@ +import { configureStore } from "@reduxjs/toolkit"; +import { fakeApi } from "./services/fakeapi.service"; + +export const store = configureStore({ + reducer: { + [fakeApi.reducerPath]:fakeApi.reducer + }, + + + middleware: (getDefaultMiddleware) => + getDefaultMiddleware().concat( + +fakeApi.middleware, + + ), +}); +export type RootState = ReturnType; +export type AppDispatch = typeof store.dispatch; \ No newline at end of file diff --git a/src/Redux/services/fakeApi.service.ts b/src/Redux/services/fakeApi.service.ts new file mode 100644 index 0000000..b5f90ae --- /dev/null +++ b/src/Redux/services/fakeApi.service.ts @@ -0,0 +1,19 @@ +import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' + +export const fakeApi = createApi({ + reducerPath: 'fakeApi', + baseQuery: fetchBaseQuery({ + baseUrl: " https://fakestoreapi.com", + + }), + endpoints: (builder) => ({ + getProducts: builder.query({ + query: () => ({ + url: 'products', + method: 'GET', + }), + }), + }), +}) + +export const { useGetProductsQuery} = fakeApi diff --git a/src/main.tsx b/src/main.tsx index b348863..241b0b3 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,9 +2,13 @@ import { createRoot } from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App"; import "./index.css"; +import { Provider } from "react-redux"; +import { store } from "./Redux/Store"; createRoot(document.getElementById("root")!).render( - - - + + + + + ); \ No newline at end of file diff --git a/src/pages/landingPage.tsx b/src/pages/landingPage.tsx index fc9a777..0338ecb 100644 --- a/src/pages/landingPage.tsx +++ b/src/pages/landingPage.tsx @@ -19,95 +19,100 @@ import { LandingNewsletterSection } from '../components/LandingNewsletterSection import { CustomPostcards } from '../components/CustomPostcards'; import { Layout } from '../Layout'; import { getAutoNavigationSource } from '../utils/getAutoNavigationSource'; +import { useGetProductsQuery } from '../Redux/services/fakeapi.service'; const melbourneImage = - "https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1920&q=80"; // Melbourne + "https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1920&q=80"; // Melbourne const sydneyImage = - "https://images.unsplash.com/photo-1506976785307-8732e854ad03?auto=format&fit=crop&w=1920&q=80"; // Sydney Opera House + "https://images.unsplash.com/photo-1506976785307-8732e854ad03?auto=format&fit=crop&w=1920&q=80"; // Sydney Opera House const brisbaneImage = - "https://images.unsplash.com/photo-1604644363101-03f3d7cbecb6?auto=format&fit=crop&w=1920&q=80"; // Brisbane skyline + "https://images.unsplash.com/photo-1604644363101-03f3d7cbecb6?auto=format&fit=crop&w=1920&q=80"; // Brisbane skyline interface User { - email: string; - name: string; + email: string; + name: string; } interface LandingPageProps { - onSignInClick: () => void; - onSignOutClick?: () => void; - user?: User | null; + onSignInClick: () => void; + onSignOutClick?: () => void; + user?: User | null; } export function LandingPage({ onSignInClick, - onSignOutClick, - user }: LandingPageProps) { - const [currentCityIndex, setCurrentCityIndex] = useState(0); - const location = useLocation(); - const activeCity = getAutoNavigationSource(location); + onSignOutClick, + user }: LandingPageProps) { + const [currentCityIndex, setCurrentCityIndex] = useState(0); + const [isCityDialogOpen, setIsCityDialogOpen] = useState(Boolean) + const location = useLocation(); + const activeCity = getAutoNavigationSource(location); - const cities = [ - { - id: 'melbourne', - name: 'Melbourne', - description: 'Cultural capital with world-class attractions', - image: melbourneImage, - attractions: 45, - savings: '30%', - path: '/melbourne' - }, - { - id: 'sydney', - name: 'Sydney', - description: 'Iconic landmarks and harbor views', - image: sydneyImage, - attractions: 38, - savings: '25%', - path: '/sydney' - }, - { - id: 'brisbane', - name: 'Brisbane', - description: 'Sunshine, riverside dining, and adventure', - image: brisbaneImage, - attractions: 32, - savings: '28%', - path: '/brisbane' - } - ]; + const { data } = useGetProductsQuery() + console.log(data) - // Auto-rotate cities - useEffect(() => { - const interval = setInterval(() => { - setCurrentCityIndex((prev) => (prev + 1) % cities.length); - }, 4000); - return () => clearInterval(interval); - }, []); + const cities = [ + { + id: 'melbourne', + name: 'Melbourne', + description: 'Cultural capital with world-class attractions', + image: melbourneImage, + attractions: 45, + savings: '30%', + path: '/melbourne' + }, + { + id: 'sydney', + name: 'Sydney', + description: 'Iconic landmarks and harbor views', + image: sydneyImage, + attractions: 38, + savings: '25%', + path: '/sydney' + }, + { + id: 'brisbane', + name: 'Brisbane', + description: 'Sunshine, riverside dining, and adventure', + image: brisbaneImage, + attractions: 32, + savings: '28%', + path: '/brisbane' + } + ]; - const scrollToCities = () => { - document.getElementById('cities-section')?.scrollIntoView({ - behavior: 'smooth' - }); - }; + // Auto-rotate cities + useEffect(() => { + const interval = setInterval(() => { + setCurrentCityIndex((prev) => (prev + 1) % cities.length); + }, 4000); + return () => clearInterval(interval); + }, []); - return ( -
- {/* Navbar */} - + const scrollToCities = () => { + document.getElementById('cities-section')?.scrollIntoView({ + behavior: 'smooth' + }); + }; - {/* City Submenu */} - {/* + {/* Navbar */} + + + {/* City Submenu */} + {/* { }} /> */} - {/* Hero Section */} -
@@ -162,34 +167,34 @@ export function LandingPage({ onSignInClick,
- {/* Features Section */} - + {/* Features Section */} + - {/* LandingVarietyOfAdventures Section */} - + {/* LandingVarietyOfAdventures Section */} + - {/* MagicItinerary Section */} - + {/* MagicItinerary Section */} + - {/* BookAttractionSection Section */} - + {/* BookAttractionSection Section */} + - {/* CustomPostcards Section */} - + {/* CustomPostcards Section */} + - {/* UpcomingCities Section */} - + {/* UpcomingCities Section */} + - {/* TrustSection Section */} - + {/* TrustSection Section */} + - {/* MobileAppSection Section */} - + {/* MobileAppSection Section */} + - {/* Newsletter Section */} - + {/* Newsletter Section */} + - - - ); + + + ); } \ No newline at end of file