Remove unnecessary code,redux and other changes to make the component…

… work

src/SmartComponents/Portfolio/PortfolioItems.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { bindActionCreators } from 'redux';
 import { withRouter, Link, Route } from 'react-router-dom';
 import { connect } from 'react-redux';
 import propTypes from 'prop-types';
@@ -13,21 +14,21 @@ import RemovePortfolioItems from '../../SmartComponents/Portfolio/RemovePortfoli
 import Select from 'react-select';
 
 class PortfolioItems extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            showItems: '',
-            filteredItems: [],
-            selectItems: []
-        };
-    }
+    state = {
+      showItems: '',
+      filteredItems: [],
+      selectItems: [],
+      isLoaded: false,
+    };
 
     fetchData(apiProps) {
         if (apiProps && apiProps.portfolio) {
-            this.props.fetchPortfolioItemsWithPortfolio(apiProps.portfolio);
+            this.props.fetchPortfolioItemsWithPortfolio(apiProps.portfolio).then(() =>
+              this.setState({ isLoaded: true }));
         }
         else {
-            this.props.fetchPortfolioItems({ ...apiProps });
+          this.props.fetchPortfolioItems({ ...apiProps }).then(() =>
+            this.setState({ isLoaded: true }));
         }
     }
 
@@ -55,28 +56,38 @@ class PortfolioItems extends Component {
         );
     }
 
+    handleItemSelect = (selectItems) => {
+      this.setState(selectItems);
+      console.log(`==== Option selected: `, selectItems);
+    }
+
     render() {
+        const { isLoaded } = this.state;
+        if(!isLoaded) {
+          return <div>Loading...</div>
+        }
 
-        const isRemoving = this.props.loaction.pathname.match(/.*\/remove$/)
+        const isRemoving = this.props.location.pathname.match(/.*\/remove$/)
+        const { selectItems } = this.state;
         const filteredItems = {
             items: this.props.portfolioItems.portfolioItems.map(item => ({
               ...item,
-              //isSelecatble: isRemoving,
-              //onSelect: this.handleItemSelect {/** to zadefinujes ako metodu komponenty tu, ak nebude treba ten redux. A ak ano, tak tomu handle das akci*/}
+              isSelectable: isRemoving,
+              onSelect: this.handleItemSelect,
             })),
             isLoading: this.props.isLoading
         };
-        console.log('isRemoving: ', isRemoving);
 
-        const intialRoute = this.props.loaction.pathname;
+        const intialRoute = this.props.location.pathname;
         const removeRoute = `/portfolio_items/${this.props.computedMatch.params.filter}/remove`;
+
         return (
             <Section>
                 <Route
                   path={intialRoute}
                   render={() => (
                     <Link to={removeRoute}>
-                      <Button variant="primary">Remove</Button>{/** tu pojde tvoja komponenta - urcite? potrebujeme tu vobec daco?*/}
+                      <Button variant="primary">Remove</Button>
                     </Link>
                   )}
                 />
@@ -92,7 +103,7 @@ class PortfolioItems extends Component {
                 />
 
                 <ContentGallery { ...filteredItems } />
-               {/** <Select options={this.props.portfolioItems.portfolioItems}/> TODO checkboxy.. ak klikne na remove*/}
+               {/** <Select options={this.props.portfolioItems.portfolioItems}/> TODO*/}
                {/** portfolioItems.map(({ id, title }) => ({
                 value: id,
                 label: title,
@@ -111,12 +122,10 @@ function mapStateToProps(state) {
     };
 }
 
-const mapDispatchToProps = dispatch => {
-    return {
-        fetchPortfolioItems: apiProps => dispatch(fetchPortfolioItems(apiProps)),
-        fetchPortfolioItemsWithPortfolio: apiProps => dispatch(fetchPortfolioItemsWithPortfolio(apiProps))
-    };
-};
+const mapDispatchToProps = dispatch => bindActionCreators({
+  fetchPortfolioItems,
+  fetchPortfolioItemsWithPortfolio,
+}, dispatch);
 
 PortfolioItems.propTypes = {
     filteredItems: propTypes.object,

src/SmartComponents/Portfolio/RemovePortfolioItems.js

@@ -1,23 +1,25 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
 import propTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Button } from '@patternfly/react-core';
 
 const RemovePortfolioItems = ({ items, cancelRoute }) => (
-  <div>
-    <h2>Remove Products</h2>
+  <div style={{ padding: '20px 0px 0px 0px' }}>
+    <div style={{ float: 'left' }}>
+      <h3>Remove Products</h3>
+    </div>
     <div style={{ float: 'right' }}>
-      <Link to={ cancelRoute }>
+      <Link to="/portfolio_items/portfolio=18/">  {/**  TODO: cancelRoute is undefined! */}
         <Button variant="link" aria-label="Cancel removing portfolio items">Cancel</Button>
       </Link>
       <Button variant="primary" aria-label="Remove selected portfolio items" onClick={ () => removeItems(items) }>Remove</Button>
     </div>
   </div>
 );
 
+// TODO:
 //function removeItems(items) {
-// api na odstranenie portfolio items z portfolia ?, mozno by si to mala dat do PortfolioHelper.js a odtial to tu zavolat ?
+// api
 //}
 
 RemovePortfolioItems.propTypes = {
@@ -29,12 +31,4 @@ RemovePortfolioItems.defaultProps = {
   items: []
 }
 
-const mapStateToProps = ({ PortfolioItemReducer: { selectItems }}) => ({
-  selectItems
-});
-
-// const mapDispatchToProps = dispatch => ({
-// });
-
-//export default connect(mapStateToProps, mapDispatchToProps)(RemovePortfolioItems);
-export default connect(mapStateToProps)(RemovePortfolioItems);
+export default RemovePortfolioItems;