Skip to content

Commit

Permalink
Figured out async handling
Browse files Browse the repository at this point in the history
Regarding #46

Co-authored-by: Martin Dürsch <martin.duersch@t-online.de>
  • Loading branch information
Waldleufer and MartinDuersch committed May 29, 2021
1 parent 5786d10 commit 69a233f
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 45 deletions.
84 changes: 53 additions & 31 deletions frontend/src/components/productGrid/ProductGridComponent.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { useContext } from 'react';
import React, { useContext, useState, useEffect } from 'react';
import { Column, Row } from 'simple-flexbox';
import { createUseStyles } from 'react-jss';
import MiniCardComponent from 'components/cards/MiniCardComponent';
import { getProducts } from 'interface/simaProInterface';
import { getSimaProducts } from 'interface/simaProInterface';
import ProductDropdown from './ModelDropdownComponent';
import SLUGS from 'resources/slugs';
import { Link } from 'react-router-dom';
Expand All @@ -21,6 +21,25 @@ import LabelComponent from './LabelComponent';

function ProductGridComponent() {
const [selectedProducts] = useContext(PrivateSectionContext);
const [productList, setProductList] = useState([
{
productID: 'dummydum-13b0-4e09-9fb4-50398483ecfd', //(project_id?) final_process_id? (final_product_id?)
productName: '"please select a Product"', //final_process_name? -> probably rather the project name later. But unclear!
modelID: 'none',
modelName: '"please select a Product"',
productImage: ''
}
]);
console.log('Tallo');
useEffect(() => {
async function getProducts() {
const products = await getSimaProducts();
setProductList(products);
console.log(products);
}
getProducts();
}, []);

const NewSelectedProducts = [
{
productID: selectedProducts.productID,
Expand All @@ -30,8 +49,7 @@ function ProductGridComponent() {
}
];

const { products = [] } = getProducts();
console.log(products);
// const { products = [] } = getProducts();
const classes = useStyles();

return (
Expand All @@ -42,33 +60,37 @@ function ProductGridComponent() {
vertical='center'
breakpoints={{ 320: { flexDirection: 'column' } }}
>
{products?.map((product, index) => (
<Column key={'Column' + index} horizontal='center'>
<Link
onClick={(props) => {
// Save selection to ContextProvider
NewSelectedProducts[0].productID = product.productID;
NewSelectedProducts[0].productName = product.productName;
}}
to={{
// Link to the next page
pathname: SLUGS.details
}}
>
<MiniCardComponent
title={product.productName}
className={classes.miniCardContainer}
// define the path of the image to show on the cards
path={product.productImage}
/>
</Link>
<LabelComponent productName={product.productName} />
<ProductDropdown
productID={product.productID}
productName={product.productName}
/>
</Column>
))}
{console.log('State:')}
{console.log(productList)}
{productList.map((product, index) =>
console.log('H')

// <Column key={'Column' + index} horizontal='center'>
// <Link
// onClick={(props) => {
// // Save selection to ContextProvider
// NewSelectedProducts[0].productID = product.productID;
// NewSelectedProducts[0].productName = product.productName;
// }}
// to={{
// // Link to the next page
// pathname: SLUGS.details
// }}
// >
// <MiniCardComponent
// title={product.productName}
// className={classes.miniCardContainer}
// // define the path of the image to show on the cards
// path={product.productImage}
// />
// </Link>
// <LabelComponent productName={product.productName} />
// <ProductDropdown
// productID={product.productID}
// productName={product.productName}
// />
// </Column>
)}
</Row>
);
}
Expand Down
25 changes: 11 additions & 14 deletions frontend/src/interface/simaProInterface.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,25 +71,22 @@ export function getModels(productID) {
* Reducing the SimaPro projects to products.
*
*/
async function getSimaProducts() {
export async function getSimaProducts() {
const httpreq = new BackendConnect();
const products = await httpreq.getSimaProProjects();
return products;
let formattedProducts = [];
//console.log(products);
Promise.all(
products.map((product) => {
const productObject = {
productID: product.Id,
productName: product.Name,
categories: [categories.generation, categories.transmission],
productImage: logo
};
formattedProducts.push(productObject);
})
);
products.map((product) => {
const productObject = {
productID: product.Id,
productName: product.Name,
categories: [categories.generation, categories.transmission],
productImage: logo
};
formattedProducts.push(productObject);
});
return formattedProducts;

//return getDummyProducts();
}

function getDummyProducts() {
Expand Down

0 comments on commit 69a233f

Please sign in to comment.