ayo/shoe-shop
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: pass down products from shell

Browse source
This commit is contained in:
Ayo 2024-01-26 11:00:11 +01:00
parent bbf780df4a
commit 8e82c8ac0b
6 changed files with 38 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app-cart/src/Cart.jsx
View file

@ -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) {

2
app-heading/src/App.jsx
View file

@ -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);
})

27
app-products/src/App.jsx
View file

@ -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 (

5
app-shell/src/components/SolidComponent.jsx
View file

@ -1,9 +1,10 @@
import Products from "app-products";
function App() {
function App(props) {
const { products } = props;
return (
<>
<Products />
<Products products={products} />
</>
);
}

28
app-shell/src/pages/index.astro
View file

@ -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,
},
];
---
<!DOCTYPE html>
@ -26,7 +50,7 @@ const appName = 'Scalable Shoe Shop'
<body>
<main>
<ReactComponent title={appName} client:only="react" />
<SolidComponent client:only="solid" />
<SolidComponent products={products} client:only="solid" />
</main>
</body>
</html>

1
utils/orchestrator.mjs
View file

@ -3,7 +3,6 @@
// - broadcast message
export function broadcast(action, data) {
window.parent.postMessage({ action, data });
console.log("broadcast", { action, data });
}
// - listen to message & attach callback