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 { } else {
this.setState({ products: [...products, { ...product, count: 1 }] }); this.setState({ products: [...products, { ...product, count: 1 }] });
} }
broadcast("update-count", this.getTotalItems());
}; };
removeProduct = (product) => { removeProduct = (product) => {
@ -61,12 +62,15 @@ class Cart extends Component {
} }
this.setState({ products: updatedProducts }); this.setState({ products: updatedProducts });
broadcast("update-count", this.getTotalItems());
} }
}; };
componentDidMount() { componentDidMount() {
// broadcast initial count
broadcast("update-count", this.getTotalItems()); 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) { componentDidUpdate(prevProps, prevState) {

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

@ -6,8 +6,8 @@ const App = (props) => {
const { title } = props; const { title } = props;
const [count, setCount] = React.useState(0); const [count, setCount] = React.useState(0);
// listen to add-to-cart messages
useEffect(() => useEffect(() =>
// listen to update count messages
listen("update-count", (count) => { listen("update-count", (count) => {
setCount(count); setCount(count);
}) })

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

@ -1,33 +1,12 @@
import { broadcast } from "utils"; import { broadcast } from "utils";
import styles from "./App.module.css"; import styles from "./App.module.css";
function App() { function App(props) {
const products = [ const { products = [] } = props;
{
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,
},
];
const addToCart = (product) => { const addToCart = (product) => {
// broadcast add product to cart // broadcast add product to cart
broadcast("add-product", product); broadcast("add-to-cart", product);
}; };
return ( return (

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

@ -1,9 +1,10 @@
import Products from "app-products"; import Products from "app-products";
function App() { function App(props) {
const { products } = props;
return ( 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 ReactComponent from "../components/ReactComponent.jsx";
import SolidComponent from "../components/SolidComponent.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> <!DOCTYPE html>
@ -26,7 +50,7 @@ const appName = 'Scalable Shoe Shop'
<body> <body>
<main> <main>
<ReactComponent title={appName} client:only="react" /> <ReactComponent title={appName} client:only="react" />
<SolidComponent client:only="solid" /> <SolidComponent products={products} client:only="solid" />
</main> </main>
</body> </body>
</html> </html>

1
utils/orchestrator.mjs
View file

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