49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
import { RegisterComponent, Component } from './components.mjs';
|
|
|
|
class ProductList extends Component {
|
|
static __IDENTIFY() { return 'product-list'; }
|
|
|
|
constructor() {
|
|
super(ProductList);
|
|
}
|
|
|
|
async Render() {
|
|
const route = this.state.getroute;
|
|
const products = await fetch(route).then(response => response.json());
|
|
|
|
return {
|
|
template: `
|
|
<h1>{this.state.title}</h1>
|
|
<div class="product-list">
|
|
${products.data.map(product => {
|
|
return `<compact-listing-component name="${product.name}"
|
|
desc="${product.description}"
|
|
image="${product.image}"
|
|
price="${product.price}"></compact-listing-component>`;
|
|
})}
|
|
</div>
|
|
`,
|
|
style: `
|
|
.product-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 auto;
|
|
max-width: 800px;
|
|
}
|
|
`,
|
|
state: {
|
|
...this.getState,
|
|
products,
|
|
},
|
|
};
|
|
}
|
|
|
|
|
|
OnceRendered() {
|
|
|
|
|
|
}
|
|
}
|
|
|
|
RegisterComponent(ProductList);
|