Implement animated <List /> component

Author: alexpanov

client/components/List.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {List as SuiList, TransitionGroup} from 'semantic-ui-react';
+
+export default class List extends React.Component {
+  render() {
+    const {children, elements} = this.props;
+    return (
+      <TransitionGroup
+        as={SuiList}
+        duration={200}
+        animation="fade left"
+      >
+        {elements.map(element => (
+          <SuiList.Item key={element._id}>
+            {children(element)}
+          </SuiList.Item>
+        ))}
+      </TransitionGroup>
+    );
+  }
+}
+
+List.propTypes = {
+  children: PropTypes.func.isRequired,
+  elements: PropTypes.array.isRequired,
+};

client/pages/VinNumbers/VinNumberCard.js

@@ -1,9 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Button, Card} from 'semantic-ui-react';
+import {removeVin} from '/imports/api/vinNumbers/methods';
 
 export default class VinNumberCard extends React.Component {
-  // @todo #16:30min Implement remove VIN method
+  onRemove() {
+    const {vin: {_id}} = this.props;
+    removeVin.callPromise({_id})
+      .catch((err) => {
+        alert('An error occured. Please check the console');
+        console.error(err);
+      });
+  }
+
   // @todo #16:30min Implement approve VIN method
   render() {
     const {vin} = this.props;
@@ -16,7 +25,7 @@ export default class VinNumberCard extends React.Component {
         <Card.Content extra>
           <Button.Group fluid>
             <Button basic positive>Approve</Button>
-            <Button basic negative>Remove</Button>
+            <Button basic negative onClick={() => this.onRemove()}>Remove</Button>
           </Button.Group>
         </Card.Content>
       </Card>

client/pages/VinNumbers/VinNumbersList.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import VinNumberCard from './VinNumberCard';
+import List from '/client/components/List';
+
+export default class VinNumbers extends React.Component {
+  render() {
+    const {vinNumbers} = this.props;
+    return (
+      <List elements={vinNumbers}>
+        {vin => <VinNumberCard vin={vin} />}
+      </List>
+    );
+  }
+}
+
+VinNumbers.propTypes = {
+  vinNumbers: PropTypes.array.isRequired,
+};

client/pages/VinNumbers/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Loader from '/client/components/Loader';
 import {VinNumbers} from '/imports/api/vinNumbers/collection';
 import AddVinForm from './AddVinForm';
-import VinNumberCard from './VinNumberCard';
+import VinNumbersList from './VinNumbersList';
 
 class VinNumbersPage extends React.Component {
   renderVinNumbersList() {
@@ -13,9 +13,7 @@ class VinNumbersPage extends React.Component {
       return <Loader />;
     }
 
-    return vinNumbers.map(vin => (
-      <VinNumberCard key={vin._id} vin={vin} />
-    ));
+    return <VinNumbersList vinNumbers={vinNumbers} />;
   }
 
   render() {