diff --git a/app-cart/src/Cart.jsx b/app-cart/src/Cart.jsx
index 04a5b05..ae08188 100644
--- a/app-cart/src/Cart.jsx
+++ b/app-cart/src/Cart.jsx
@@ -47,6 +47,7 @@ class Cart extends Component {
} else {
this.setState({ products: [...products, { ...product, count: 1 }] });
}
+ broadcast("update-count", this.getTotalItems());
};
removeProduct = (product) => {
@@ -61,12 +62,15 @@ class Cart extends Component {
}
this.setState({ products: updatedProducts });
+ broadcast("update-count", this.getTotalItems());
}
};
componentDidMount() {
+ // broadcast initial count
broadcast("update-count", this.getTotalItems());
- listen("add-product", this.addProduct);
+ // listen to add-to-cart messages
+ listen("add-to-cart", this.addProduct);
}
componentDidUpdate(prevProps, prevState) {
diff --git a/app-heading/src/App.jsx b/app-heading/src/App.jsx
index e0d34c3..673e3be 100644
--- a/app-heading/src/App.jsx
+++ b/app-heading/src/App.jsx
@@ -6,8 +6,8 @@ const App = (props) => {
const { title } = props;
const [count, setCount] = React.useState(0);
- // listen to add-to-cart messages
useEffect(() =>
+ // listen to update count messages
listen("update-count", (count) => {
setCount(count);
})
diff --git a/app-products/src/App.jsx b/app-products/src/App.jsx
index 7d4a067..e5d39cb 100644
--- a/app-products/src/App.jsx
+++ b/app-products/src/App.jsx
@@ -1,33 +1,12 @@
import { broadcast } from "utils";
import styles from "./App.module.css";
-function App() {
- const products = [
- {
- name: "Shoe A",
- description: "It is a good shoe",
- price: 100,
- },
- {
- name: "Shoe B",
- description: "It is a comfortable shoe",
- price: 120,
- },
- {
- name: "Shoe C",
- description: "It is a stylish shoe",
- price: 150,
- },
- {
- name: "Shoe D",
- description: "It is a durable shoe",
- price: 90,
- },
- ];
+function App(props) {
+ const { products = [] } = props;
const addToCart = (product) => {
// broadcast add product to cart
- broadcast("add-product", product);
+ broadcast("add-to-cart", product);
};
return (
diff --git a/app-shell/src/components/SolidComponent.jsx b/app-shell/src/components/SolidComponent.jsx
index dfccb68..3f9cfff 100644
--- a/app-shell/src/components/SolidComponent.jsx
+++ b/app-shell/src/components/SolidComponent.jsx
@@ -1,9 +1,10 @@
import Products from "app-products";
-function App() {
+function App(props) {
+ const { products } = props;
return (
<>
-
+
);
}
diff --git a/app-shell/src/pages/index.astro b/app-shell/src/pages/index.astro
index 2ff4007..252d69a 100644
--- a/app-shell/src/pages/index.astro
+++ b/app-shell/src/pages/index.astro
@@ -1,7 +1,31 @@
---
import ReactComponent from "../components/ReactComponent.jsx";
import SolidComponent from "../components/SolidComponent.jsx";
-const appName = 'Scalable Shoe Shop'
+const appName = 'Scalable Shoe Shop';
+
+// shell can fetch from a database
+const products = [
+ {
+ name: "Shoe A",
+ description: "It is a good shoe",
+ price: 100,
+ },
+ {
+ name: "Shoe B",
+ description: "It is a comfortable shoe",
+ price: 120,
+ },
+ {
+ name: "Shoe C",
+ description: "It is a stylish shoe",
+ price: 150,
+ },
+ {
+ name: "Shoe D",
+ description: "It is a durable shoe",
+ price: 90,
+ },
+ ];
---
@@ -26,7 +50,7 @@ const appName = 'Scalable Shoe Shop'
-
+