import React, { Component } from 'react';

import Background from './components/Background';
import BackgroundUpload from './components/BackgroundUpload';
import CustomGradient from './components/CustomGradient';
import TitleCategory from '../TitleCategory';

import uploadIcon from '../../public/assets/img/icons/upload.png';

export default class Backgrounds extends Component {
    renderListCategory = () => {
        return (
            this.props.listCategories.map(category => {
                const items = category.items.map( (item, f) => {
                    const background = [];

                    if(category.name === 'Gradients' && f === 0) {
                         background.push( <CustomGradient /> );
                     }
                    background.push(<Background key={f} link={item}/>);
                    return background;
                });
                return (
                    <li key={category.name} className="category">
                        <TitleCategory link={category.iconCat}>{category.name}</TitleCategory>
                        <ul className="items">{items}</ul>
                    </li>
                );
            })
        );
    }
    render () {
        return (
            <div className="nav-element backgrounds">
                <h2 className="title-categories">Backgrounds</h2>
                <ul className="categories">
                    <BackgroundUpload
                        active='active'
                        link={uploadIcon}
                    />
                    {this.renderListCategory()}
                </ul>
            </div>
        );
    }
}
@@ -9,23 +9,8 @@
 eact
-, %7B Component %7D
  fro
@@ -310,153 +310,33 @@
 ';%0A%0A
-export default class Backgrounds extends Component %7B%0A    renderListCategory = () =%3E %7B%0A        return (%0A            this.props.listCategories.map(
+const renderBackground = 
 cate
@@ -341,36 +341,24 @@
 tegory =%3E %7B%0A
-            
     const it
@@ -398,28 +398,16 @@
 f) =%3E %7B%0A
-            
         
@@ -430,28 +430,16 @@
  = %5B%5D;%0A%0A
-            
         
@@ -493,37 +493,24 @@
             
-        
-     
 background.p
@@ -536,29 +536,16 @@
 t /%3E );%0A
-             
         
@@ -546,28 +546,16 @@
       %7D%0A
-            
         
@@ -610,36 +610,24 @@
 %3E);%0A        
-     
-       
 return backg
@@ -641,61 +641,25 @@
     
-            %7D);%0A                return (%0A            
+%7D);%0A    return (%0A
     
@@ -720,28 +720,16 @@
         
-          
-  
 %3CTitleCa
@@ -791,28 +791,16 @@
 tegory%3E%0A
-            
         
@@ -838,28 +838,16 @@
 s%7D%3C/ul%3E%0A
-            
         
@@ -860,100 +860,131 @@
     
-            );%0A            %7D)%0A        );%0A    %7D%0A    render () %7B%0A        return (%0A       
+);%0A%7D;%0A%0Aconst renderListCategory = props =%3E props.listCategories.map(renderBackground);%0A%0Aconst Backgrounds = props =%3E (%0A
     
- 
 %3Cdiv
@@ -1017,32 +1017,24 @@
 ckgrounds%22%3E%0A
-        
         %3Ch2 
@@ -1079,24 +1079,16 @@
 ds%3C/h2%3E%0A
-        
         
@@ -1127,24 +1127,16 @@
         
-        
 %3CBackgro
@@ -1161,24 +1161,16 @@
         
-        
 active='
@@ -1193,24 +1193,16 @@
         
-  
-      
 link=%7Bup
@@ -1227,22 +1227,11 @@
     
-        /%3E%0A   
+/%3E%0A
     
@@ -1242,19 +1242,9 @@
     
-     %7Bthis.
+%7B
 rend
@@ -1262,22 +1262,24 @@
 ory(
+props
 )%7D%0A
-   
         
     
@@ -1274,21 +1274,16 @@
         
-     
 %3C/ul%3E%0A  
@@ -1288,37 +1288,42 @@
     
-        %3C/div%3E%0A        );%0A    %7D%0A%7D
+%3C/div%3E%0A);%0A%0Aexport default Backgrounds;

update backgrounds component