implement Admin mode, add nano stores

telerik · Nov 15, 2024 · ddc8354 · ddc8354
1 parent 19a5beb
commit ddc8354
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 164 deletions.
diff --git a/examples/kendo-react-e-commerce-astro-app/package.json b/examples/kendo-react-e-commerce-astro-app/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/react": "^3.6.2",
+    "@nanostores/react": "^0.8.0",
     "@progress/kendo-data-query": "^1.7.0",
     "@progress/kendo-drawing": "^1.21.1",
     "@progress/kendo-licensing": "^1.3.5",
@@ -36,6 +37,7 @@
     "@progress/kendo-theme-default": "^10.0.1",
     "@progress/kendo-theme-utils": "^10.0.1",
     "astro": "^4.16.6",
+    "nanostores": "^0.11.3",
     "typescript": "^5.6.3"
   }
 }
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/BackgroundImage.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/BackgroundImage.tsx
@@ -5,6 +5,7 @@ export const BackgroundImage = (props: BackgroundImageProps) => {
   const { img, title, subtitle, buttonText } = props;
 
   const onButtonClick = () => {
+    window.location.href="/products"
   }
 
   return (

diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx
@@ -1,5 +1,5 @@
 // src/components/Header.tsx
-import React, { useState } from "react";
+import React from "react";
 import { useNavigate } from "react-router-dom";
 import { Menu, AppBarSpacer, MenuSelectEvent } from "@progress/kendo-react-layout";
 import { Button } from "@progress/kendo-react-buttons";
@@ -9,28 +9,30 @@ import { searchIcon, userIcon, cartIcon } from "@progress/kendo-svg-icons";
 import items from "../data/items";
 import languageItems from "../data/language-items";
 import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
+import { isAdmin } from "../helpers/adminStore"; // Import the shared store
+import { useStore } from '@nanostores/react'; // Import the hook to use the store
 
 const Header: React.FC = () => {
-  const [isAdmin, setIsAdmin] = useState(false);
+  const isAdminValue = useStore(isAdmin); // Access the shared state
 
   const handleCartClick = () => {
-    window.location.href="/shoppingcart"
+    window.location.href = "/shoppingcart";
   };
 
   const handleSwitchChange = () => {
-    setIsAdmin((prev) => !prev);
+    isAdmin.set(!isAdminValue); // Update the shared state
   };
 
   const handleMenuSelect = (event: MenuSelectEvent) => {
     const selectedItem = event.item;
-
-    // Only navigate if the item has a specific url
+
     if (selectedItem.url) {
       window.location.href = selectedItem.url;
     } else {
       console.warn("Selected item does not have a URL:", selectedItem.text);
     }
   };
+
   return (
     <AppBar themeColor="inherit">
       <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 = () => {
         <Switch
           onLabel="Admin"
           offLabel="Client"
-          checked={isAdmin}
+          checked={isAdminValue}
           onChange={handleSwitchChange}
         />
         <Menu items={languageItems} onSelect={handleMenuSelect} />

diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx
@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BackgroundImage } from '../components/BackgroundImage';
 import { Layout } from '../components/Layout';
 import { CategoryList } from '../components/CategoryList';
 import { CardDescriptor } from "../data/types";
 import { CustomSection } from '../components/CustomizedSection';
 import { OrderedImgText } from '../components/OrderedImageCard';
 import { Testemonials } from '../components/Testemonials';
+import { isAdmin } from "../helpers/adminStore"; 
+import { useStore } from '@nanostores/react';
+import AdminView from '../components/AdminView'; 
 
 const data: CardDescriptor[] = [
   { img: '/listViewImages/silverBraceletOnyx.png', collectionText: "Silver Bracelet with Onyx" },
@@ -28,6 +31,11 @@ const Home: React.FC = () => {
   const title = "Vilora Jewelry";
   const subtitle = "We offer exquisite jewelry, each showcasing timeless elegance";
   const buttonText = "See Collections";
+  const isAdminValue = useStore(isAdmin);
+
+  useEffect(() => {
+    console.log(isAdminValue ? 'Admin' : 'Client');
+  }, [isAdminValue]);
 
   return (
     <>
@@ -38,75 +46,85 @@ const Home: React.FC = () => {
         img="/model_1.png"
       />
 
-      <Layout>
-        <section
-          className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
-          style={{ paddingTop: "60px" }}
-        >
-          <CategoryList title='Our Bestsellers' subtitle='Enjoy an excellent selection of fine jewelry' data={data} />
-        </section>
-      </Layout>
-      <Layout>
-        <CustomSection>
-          <OrderedImgText
-            title='Timeless Classics'
-            subtitle='Get our unique handmade collections'
-            contentText='Jewelry enhances style and adds elegance, with each piece telling a unique story.'
-            img="/homeModel2.png"
-            order='first'
-            link="Shop Now"
-          />
-        </CustomSection>
-      </Layout>
-      <Layout>
-        <CustomSection>
-          <OrderedImgText
-            title='Fine Jewelry'
-            subtitle='Get our unique handmade collections'
-            contentText="Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale."
-            img="/homeModel3.png"
-            order='last'
-            link="Shop Now"
-          />
-        </CustomSection>
-      </Layout>
-      <Layout>
-        <CustomSection>
-          <CategoryList colSpan={6} title='Our Rings' subtitle='Enjoy an excellent selection of fine rings' data={ringsData} />
-        </CustomSection>
-      </Layout>
-      <Layout>
-        <CustomSection>
-          <OrderedImgText
-            title='Always On Time'
-            subtitle='Get our unique watches'
-            contentText='High-end gold watches for men are the epitome of luxury, combining precision with sophisticated craftsmanship.'
-            img="/homeWatch1.png"
-            order='first'
-            link="Shop Now"
-          />
-        </CustomSection>
-      </Layout>
-      <Layout>
-        <CustomSection>
-          <CategoryList title='Our Watches' subtitle='Enjoy an excellent selection of watches' data={watchData} />
-        </CustomSection>
-      </Layout>
-      <Layout>
-        <CustomSection>
-          <OrderedImgText
-            title='Services'
-            subtitle='Explore expert repairs to elevate your experience'
-            contentText='Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.'
-            img="/homeServicesImage.png"
-            order='last'
-            link="Learn More"
-          />
-        </CustomSection>
-      </Layout>
-      <Layout>
-        <Testemonials />
-      </Layout>
+      {isAdminValue ? (
+        <Layout>
+          <div className="k-mt-8"> 
+            <AdminView />
+          </div>
+        </Layout>
+      ) : (
+        <>
+          <Layout>
+            <section
+              className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
+              style={{ paddingTop: "60px" }}
+            >
+              <CategoryList title='Our Bestsellers' subtitle='Enjoy an excellent selection of fine jewelry' data={data} />
+            </section>
+          </Layout>
+          <Layout>
+            <CustomSection>
+              <OrderedImgText
+                title='Timeless Classics'
+                subtitle='Get our unique handmade collections'
+                contentText='Jewelry enhances style and adds elegance, with each piece telling a unique story.'
+                img="/homeModel2.png"
+                order='first'
+                link="Shop Now"
+              />
+            </CustomSection>
+          </Layout>
+          <Layout>
+            <CustomSection>
+              <OrderedImgText
+                title='Fine Jewelry'
+                subtitle='Get our unique handmade collections'
+                contentText="Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale."
+                img="/homeModel3.png"
+                order='last'
+                link="Shop Now"
+              />
+            </CustomSection>
+          </Layout>
+          <Layout>
+            <CustomSection>
+              <CategoryList colSpan={6} title='Our Rings' subtitle='Enjoy an excellent selection of fine rings' data={ringsData} />
+            </CustomSection>
+          </Layout>
+          <Layout>
+            <CustomSection>
+              <OrderedImgText
+                title='Always On Time'
+                subtitle='Get our unique watches'
+                contentText='High-end gold watches for men are the epitome of luxury, combining precision with sophisticated craftsmanship.'
+                img="/homeWatch1.png"
+                order='first'
+                link="Shop Now"
+              />
+            </CustomSection>
+          </Layout>
+          <Layout>
+            <CustomSection>
+              <CategoryList title='Our Watches' subtitle='Enjoy an excellent selection of watches' data={watchData} />
+            </CustomSection>
+          </Layout>
+          <Layout>
+            <CustomSection>
+              <OrderedImgText
+                title='Services'
+                subtitle='Explore expert repairs to elevate your experience'
+                contentText='Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.'
+                img="/homeServicesImage.png"
+                order='last'
+                link="Learn More"
+              />
+            </CustomSection>
+          </Layout>
+          <Layout>
+            <Testemonials />
+          </Layout>
+        </>
+      )}
     </>
   );
 };

diff --git a/examples/kendo-react-e-commerce-astro-app/src/helpers/AdminContext.tsx b/examples/kendo-react-e-commerce-astro-app/src/helpers/AdminContext.tsx
diff --git a/examples/kendo-react-e-commerce-astro-app/src/helpers/CartContext.tsx b/examples/kendo-react-e-commerce-astro-app/src/helpers/CartContext.tsx
diff --git a/examples/kendo-react-e-commerce-astro-app/src/helpers/adminStore.ts b/examples/kendo-react-e-commerce-astro-app/src/helpers/adminStore.ts
@@ -0,0 +1,3 @@
+import { atom } from 'nanostores';
+
+export const isAdmin = atom(false);