A bit of everything

wearright/src/components/bootstrap/Clothes.js

 import React, { Component } from 'react';
 
-import { Row, Col } from 'react-bootstrap';
+import { Row, Col, Figure } from 'react-bootstrap';
 
 class Clothes extends Component {
-    render() {
-        const { clothing } = this.props;
+    constructor(props) {
+        super(props);
+
+        this.manageClothes = this.manageClothes.bind(this);
+    }
+
+    manageClothes(clothing, profile) {
+        let cl = clothing;
+
+        // If age is between 18 and 70 filter by gender
+        if (profile.age >= 18 && profile.age <= 70) {
+            cl = cl.filter(t => t.Henkilo === profile.sex);
+        }
+
+        const retClothes = {};
+
+        for (let i = 0; i < cl.length; i++) {
+            const c = cl[i];
+
+            if (!retClothes[c.Kategoria])
+                retClothes[c.Kategoria] = [];
+
+            retClothes[c.Kategoria].push(c);
+        }
 
-        let cList = 
-        <ul>
-            Lataa...
-        </ul>
+        return (
+            <div>
+                {retClothes["head"] ? this.manageSubCategories("Päähineet", retClothes["head"]) : null}
+                {retClothes["body"] ? this.manageSubCategories("Vartalo", retClothes["body"]) : null}
+                {retClothes["hands"] ? this.manageSubCategories("Käsineet", retClothes["hands"]) : null}
+                {retClothes["legs"] ? this.manageSubCategories("Housut", retClothes["legs"]) : null}
+                {retClothes["feet"] ? this.manageSubCategories("Jalkineet", retClothes["feet"]) : null}
+                {retClothes["accessory"] ? this.manageSubCategories("Lisävarusteet", retClothes["accessory"]) : null}
+            </div>
+        )
+    }
+
+    manageSubCategories(titleName, arr) {
+        return (
+            <div>
+                <h3>{titleName}</h3>
+                <Row>
+                    {arr.map((t, i) => 
+                        <Col key={i} xl={2} lg={3} md={4} sm={4} xs={6}>
+                            <Figure>
+                                <Figure.Image
+                                    fluid={true}
+                                    alt={t.Vaatenimi}
+                                    src="https://i.imgur.com/C9N8qhi.png"
+                                />
+                                <Figure.Caption>
+                                    {t.Vaatenimi}
+                                </Figure.Caption>
+                            </Figure>
+                        </Col>
+                    )}
+                </Row>
+            </div>
+        )
+    }
+
+    render() {
+        const { clothing, profile } = this.props;
+        let cList = null;
 
-        if (clothing)
-            cList =
-            <ul>
-                {clothing.map((t, i) => <li key={i}>{t.Vaatenimi}</li>)}
-            </ul>
+        if (clothing) {
+            cList = this.manageClothes(clothing, profile);
+        }
 
         return (
-            <Row>
-                <Col>
-                    <h2>Sinun kannattaisi pukea jotain seuraavista: </h2>
-                    {cList}
-                </Col>
-            </Row>
+            <div>
+                <h1>Sinun kannattaisi pukea jotain seuraavista:</h1>
+                {cList}
+            </div>
         )
     }
 }