Skip to content

Commit ddc8354

Browse files
filipKovachevfilipKovachev
committed
implement Admin mode, add nano stores
1 parent 19a5beb commit ddc8354

File tree

7 files changed

+103
-164
lines changed

7 files changed

+103
-164
lines changed

‎examples/kendo-react-e-commerce-astro-app/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"@astrojs/check": "^0.9.4",
1414
"@astrojs/react": "^3.6.2",
15+
"@nanostores/react": "^0.8.0",
1516
"@progress/kendo-data-query": "^1.7.0",
1617
"@progress/kendo-drawing": "^1.21.1",
1718
"@progress/kendo-licensing": "^1.3.5",
@@ -36,6 +37,7 @@
3637
"@progress/kendo-theme-default": "^10.0.1",
3738
"@progress/kendo-theme-utils": "^10.0.1",
3839
"astro": "^4.16.6",
40+
"nanostores": "^0.11.3",
3941
"typescript": "^5.6.3"
4042
}
4143
}

‎examples/kendo-react-e-commerce-astro-app/src/components/BackgroundImage.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export const BackgroundImage = (props: BackgroundImageProps) => {
55
const { img, title, subtitle, buttonText } = props;
66

77
const onButtonClick = () => {
8+
window.location.href="/products"
89
}
910

1011
return (

‎examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// src/components/Header.tsx
2-
import React, { useState } from "react";
2+
import React from "react";
33
import { useNavigate } from "react-router-dom";
44
import { Menu, AppBarSpacer, MenuSelectEvent } from "@progress/kendo-react-layout";
55
import { Button } from "@progress/kendo-react-buttons";
@@ -9,28 +9,30 @@ import { searchIcon, userIcon, cartIcon } from "@progress/kendo-svg-icons";
99
import items from "../data/items";
1010
import languageItems from "../data/language-items";
1111
import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
12+
import { isAdmin } from "../helpers/adminStore"; // Import the shared store
13+
import { useStore } from '@nanostores/react'; // Import the hook to use the store
1214

1315
const Header: React.FC = () => {
14-
const [isAdmin, setIsAdmin] = useState(false);
16+
const isAdminValue = useStore(isAdmin); // Access the shared state
1517

1618
const handleCartClick = () => {
17-
window.location.href="/shoppingcart"
19+
window.location.href = "/shoppingcart";
1820
};
1921

2022
const handleSwitchChange = () => {
21-
setIsAdmin((prev) => !prev);
23+
isAdmin.set(!isAdminValue); // Update the shared state
2224
};
2325

2426
const handleMenuSelect = (event: MenuSelectEvent) => {
2527
const selectedItem = event.item;
26-
27-
// Only navigate if the item has a specific url
28+
2829
if (selectedItem.url) {
2930
window.location.href = selectedItem.url;
3031
} else {
3132
console.warn("Selected item does not have a URL:", selectedItem.text);
3233
}
3334
};
35+
3436
return (
3537
<AppBar themeColor="inherit">
3638
<AppBarSection className="k-flex-basis-0 k-flex-grow k-gap-2 k-align-items-center" style={{ paddingLeft: "50px" }}>
@@ -65,7 +67,7 @@ const Header: React.FC = () => {
6567
<Switch
6668
onLabel="Admin"
6769
offLabel="Client"
68-
checked={isAdmin}
70+
checked={isAdminValue}
6971
onChange={handleSwitchChange}
7072
/>
7173
<Menu items={languageItems} onSelect={handleMenuSelect} />

‎examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx‎

Lines changed: 88 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import React from 'react';
1+
import React, { useEffect } from 'react';
22
import { BackgroundImage } from '../components/BackgroundImage';
33
import { Layout } from '../components/Layout';
44
import { CategoryList } from '../components/CategoryList';
55
import { CardDescriptor } from "../data/types";
66
import { CustomSection } from '../components/CustomizedSection';
77
import { OrderedImgText } from '../components/OrderedImageCard';
88
import { Testemonials } from '../components/Testemonials';
9+
import { isAdmin } from "../helpers/adminStore";
10+
import { useStore } from '@nanostores/react';
11+
import AdminView from '../components/AdminView';
912

1013
const data: CardDescriptor[] = [
1114
{ img: '/listViewImages/silverBraceletOnyx.png', collectionText: "Silver Bracelet with Onyx" },
@@ -28,6 +31,11 @@ const Home: React.FC = () => {
2831
const title = "Vilora Jewelry";
2932
const subtitle = "We offer exquisite jewelry, each showcasing timeless elegance";
3033
const buttonText = "See Collections";
34+
const isAdminValue = useStore(isAdmin);
35+
36+
useEffect(() => {
37+
console.log(isAdminValue ? 'Admin' : 'Client');
38+
}, [isAdminValue]);
3139

3240
return (
3341
<>
@@ -38,75 +46,85 @@ const Home: React.FC = () => {
3846
img="/model_1.png"
3947
/>
4048

41-
<Layout>
42-
<section
43-
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
44-
style={{ paddingTop: "60px" }}
45-
>
46-
<CategoryList title='Our Bestsellers' subtitle='Enjoy an excellent selection of fine jewelry' data={data} />
47-
</section>
48-
</Layout>
49-
<Layout>
50-
<CustomSection>
51-
<OrderedImgText
52-
title='Timeless Classics'
53-
subtitle='Get our unique handmade collections'
54-
contentText='Jewelry enhances style and adds elegance, with each piece telling a unique story.'
55-
img="/homeModel2.png"
56-
order='first'
57-
link="Shop Now"
58-
/>
59-
</CustomSection>
60-
</Layout>
61-
<Layout>
62-
<CustomSection>
63-
<OrderedImgText
64-
title='Fine Jewelry'
65-
subtitle='Get our unique handmade collections'
66-
contentText="Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale."
67-
img="/homeModel3.png"
68-
order='last'
69-
link="Shop Now"
70-
/>
71-
</CustomSection>
72-
</Layout>
73-
<Layout>
74-
<CustomSection>
75-
<CategoryList colSpan={6} title='Our Rings' subtitle='Enjoy an excellent selection of fine rings' data={ringsData} />
76-
</CustomSection>
77-
</Layout>
78-
<Layout>
79-
<CustomSection>
80-
<OrderedImgText
81-
title='Always On Time'
82-
subtitle='Get our unique watches'
83-
contentText='High-end gold watches for men are the epitome of luxury, combining precision with sophisticated craftsmanship.'
84-
img="/homeWatch1.png"
85-
order='first'
86-
link="Shop Now"
87-
/>
88-
</CustomSection>
89-
</Layout>
90-
<Layout>
91-
<CustomSection>
92-
<CategoryList title='Our Watches' subtitle='Enjoy an excellent selection of watches' data={watchData} />
93-
</CustomSection>
94-
</Layout>
95-
<Layout>
96-
<CustomSection>
97-
<OrderedImgText
98-
title='Services'
99-
subtitle='Explore expert repairs to elevate your experience'
100-
contentText='Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.'
101-
img="/homeServicesImage.png"
102-
order='last'
103-
link="Learn More"
104-
/>
105-
</CustomSection>
106-
</Layout>
107-
<Layout>
108-
<Testemonials />
109-
</Layout>
49+
{isAdminValue ? (
50+
<Layout>
51+
<div className="k-mt-8">
52+
<AdminView />
53+
</div>
54+
</Layout>
55+
) : (
56+
<>
57+
<Layout>
58+
<section
59+
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
60+
style={{ paddingTop: "60px" }}
61+
>
62+
<CategoryList title='Our Bestsellers' subtitle='Enjoy an excellent selection of fine jewelry' data={data} />
63+
</section>
64+
</Layout>
65+
<Layout>
66+
<CustomSection>
67+
<OrderedImgText
68+
title='Timeless Classics'
69+
subtitle='Get our unique handmade collections'
70+
contentText='Jewelry enhances style and adds elegance, with each piece telling a unique story.'
71+
img="/homeModel2.png"
72+
order='first'
73+
link="Shop Now"
74+
/>
75+
</CustomSection>
76+
</Layout>
77+
<Layout>
78+
<CustomSection>
79+
<OrderedImgText
80+
title='Fine Jewelry'
81+
subtitle='Get our unique handmade collections'
82+
contentText="Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale."
83+
img="/homeModel3.png"
84+
order='last'
85+
link="Shop Now"
86+
/>
87+
</CustomSection>
88+
</Layout>
89+
<Layout>
90+
<CustomSection>
91+
<CategoryList colSpan={6} title='Our Rings' subtitle='Enjoy an excellent selection of fine rings' data={ringsData} />
92+
</CustomSection>
93+
</Layout>
94+
<Layout>
95+
<CustomSection>
96+
<OrderedImgText
97+
title='Always On Time'
98+
subtitle='Get our unique watches'
99+
contentText='High-end gold watches for men are the epitome of luxury, combining precision with sophisticated craftsmanship.'
100+
img="/homeWatch1.png"
101+
order='first'
102+
link="Shop Now"
103+
/>
104+
</CustomSection>
105+
</Layout>
106+
<Layout>
107+
<CustomSection>
108+
<CategoryList title='Our Watches' subtitle='Enjoy an excellent selection of watches' data={watchData} />
109+
</CustomSection>
110+
</Layout>
111+
<Layout>
112+
<CustomSection>
113+
<OrderedImgText
114+
title='Services'
115+
subtitle='Explore expert repairs to elevate your experience'
116+
contentText='Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.'
117+
img="/homeServicesImage.png"
118+
order='last'
119+
link="Learn More"
120+
/>
121+
</CustomSection>
122+
</Layout>
123+
<Layout>
124+
<Testemonials />
125+
</Layout>
126+
</>
127+
)}
110128
</>
111129
);
112130
};

‎examples/kendo-react-e-commerce-astro-app/src/helpers/AdminContext.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎examples/kendo-react-e-commerce-astro-app/src/helpers/CartContext.tsx‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎examples/kendo-react-e-commerce-astro-app/src/helpers/adminStore.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { atom } from 'nanostores';
2+
3+
export const isAdmin = atom(false);

0 commit comments

Comments
 (0)