From 75444fa8d98ae7ea8aaf4ea8b07b0b08c7b6e5a4 Mon Sep 17 00:00:00 2001 From: npcdazai Date: Tue, 14 Jan 2025 18:42:15 +0530 Subject: [PATCH] Redux setup --- src/redux/apiSlice.ts | 14 ++++++++++++++ src/store.ts | 11 +++++++++++ src/userComponents/Navbar.tsx | 1 - src/userComponents/UserTable.tsx | 32 +++++++++++++++++++++++++++++++ src/utlis/regesterUser.json | 33 ++++++++++++++++++++++++++++++++ 5 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 src/redux/apiSlice.ts create mode 100644 src/store.ts create mode 100644 src/userComponents/UserTable.tsx create mode 100644 src/utlis/regesterUser.json diff --git a/src/redux/apiSlice.ts b/src/redux/apiSlice.ts new file mode 100644 index 0000000..ff0d2cb --- /dev/null +++ b/src/redux/apiSlice.ts @@ -0,0 +1,14 @@ +import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query' + + +export const apiSlice = createApi({ + reducerPath: "api", + baseQuery: fetchBaseQuery = ({ baseUrl: "src/utlis/regesterUser.json" }), + endpoints: (builder) => ({ + getStaticJson: builder.query({ + query: () => 'regesterUser.json' + }), + }) +}) + +export const { getStaticJson } = apiSlice \ No newline at end of file diff --git a/src/store.ts b/src/store.ts new file mode 100644 index 0000000..1715b3e --- /dev/null +++ b/src/store.ts @@ -0,0 +1,11 @@ +import { configureStore } from "@reduxjs/toolkit"; +import { apiSlice } from "./redux/apiSlice"; + +export const store = configureStore({ + reducer: { + [apiSlice.reducerPath]: apiSlice.reducer + }, + middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(apiSlice.middleware), +}) + +export default store \ No newline at end of file diff --git a/src/userComponents/Navbar.tsx b/src/userComponents/Navbar.tsx index 3d6c00d..8b7450c 100644 --- a/src/userComponents/Navbar.tsx +++ b/src/userComponents/Navbar.tsx @@ -39,7 +39,6 @@ const Navbar: React.FC = () => { - diff --git a/src/userComponents/UserTable.tsx b/src/userComponents/UserTable.tsx new file mode 100644 index 0000000..84bb6c0 --- /dev/null +++ b/src/userComponents/UserTable.tsx @@ -0,0 +1,32 @@ +import { Table } from "@chakra-ui/react"; + +const Demo = () => { + return ( + + + + Product + Category + Price + + + + {items.map((item) => ( + + {item.name} + {item.category} + {item.price} + + ))} + + + ); +}; + +const items = [ + { id: 1, name: "Laptop", category: "Electronics", price: 999.99 }, + { id: 2, name: "Coffee Maker", category: "Home Appliances", price: 49.99 }, + { id: 3, name: "Desk Chair", category: "Furniture", price: 150.0 }, + { id: 4, name: "Smartphone", category: "Electronics", price: 799.99 }, + { id: 5, name: "Headphones", category: "Accessories", price: 199.99 }, +]; diff --git a/src/utlis/regesterUser.json b/src/utlis/regesterUser.json new file mode 100644 index 0000000..54fe30f --- /dev/null +++ b/src/utlis/regesterUser.json @@ -0,0 +1,33 @@ +[ + { + "id": 1, + "name": "Laptop", + "category": "Electronics", + "price": 999.99 + }, + { + "id": 2, + "name": "Coffee Maker", + "category": "Home Appliances", + "price": 49.99 + }, + { + "id": 3, + "name": "Desk Chair", + "category": "Furniture", + "price": 150.0 + }, + { + "id": 4, + "name": "Smartphone", + "category": "Electronics", + "price": 799.99 + }, + { + "id": 5, + "name": "Headphones", + "category": "Accessories", + "price": 199.99 + } + ] + \ No newline at end of file