add rtk setup

2026-02-16 12:11:26 +05:30
parent 8427fdbc41
commit de80760cd4
6 changed files with 250 additions and 92 deletions
--- 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",
--- 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",
--- a/src/Redux/Store.tsx
+++ 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<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
--- a/src/Redux/services/fakeApi.service.ts
+++ 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<any, void>({
+            query: () => ({
+                url: 'products',
+                method: 'GET',
+            }),
+        }),
+    }),
+})
+
+export const {  useGetProductsQuery} = fakeApi
--- 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(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>
 );
--- 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 (
-        <div className="min-h-screen bg-white">
-            {/* Navbar */}
-           <Layout
-                 activeCity={activeCity}
-                 onSignInClick={onSignInClick}
-                 onSignOutClick={onSignOutClick}
-                 user={user} // ✅ Pass the updated user data
-               >
+  const scrollToCities = () => {
+    document.getElementById('cities-section')?.scrollIntoView({
+      behavior: 'smooth'
+    });
+  };

-            {/* City Submenu */}
-            {/* <CitySubmenu
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Navbar */}
+      <Layout
+        activeCity={activeCity}
+        onSignInClick={onSignInClick}
+        onSignOutClick={onSignOutClick}
+        user={user} // ✅ Pass the updated user data
+      >
+
+        {/* City Submenu */}
+        {/* <CitySubmenu
                onClose={() => { }}
            /> */}
-            {/* Hero Section */}
-            <div 
+        {/* Hero Section */}
+        <div
          className="relative z-10 min-h-[90vh] flex items-end justify-start pt-24 pb-16 bg-cover bg-[center_35%] bg-no-repeat"
          style={{ backgroundImage: `url(${heroBannerImage})` }}
        >
@@ -162,34 +167,34 @@ export function LandingPage({ onSignInClick,
          </div>
        </div>

-            {/* Features Section */}
-            <LandingWhyChooseCityCards />
+        {/* Features Section */}
+        <LandingWhyChooseCityCards />

-            {/* LandingVarietyOfAdventures Section */}
-            <LandingVarietyOfAdventures />
+        {/* LandingVarietyOfAdventures Section */}
+        <LandingVarietyOfAdventures />

-            {/* MagicItinerary Section */}
-            <LandingMagicItinerary />
+        {/* MagicItinerary Section */}
+        <LandingMagicItinerary />

-            {/* BookAttractionSection Section */}
-            <LandingBookAttractionSection />
+        {/* BookAttractionSection Section */}
+        <LandingBookAttractionSection />

-            {/* CustomPostcards Section */}
-            <CustomPostcards/>
+        {/* CustomPostcards Section */}
+        <CustomPostcards />

-            {/* UpcomingCities Section */}
-            <LandingUpcomingCities />
+        {/* UpcomingCities Section */}
+        <LandingUpcomingCities />

-            {/* TrustSection Section */}
-            <LandingTrustSection />
+        {/* TrustSection Section */}
+        <LandingTrustSection />

-            {/* MobileAppSection Section */}
-            <LandingMobileAppSection />
+        {/* MobileAppSection Section */}
+        <LandingMobileAppSection />

-            {/* Newsletter Section */}
-            <LandingNewsletterSection />
+        {/* Newsletter Section */}
+        <LandingNewsletterSection />

-</Layout>
-        </div>
-    );
+      </Layout>
+    </div>
+  );
 }