users can delete their cards from their collection

backend/app/Http/Controllers/ProfileController.php

@@ -119,6 +119,23 @@ public function follow($user_id)
         }
     }
 
+    public function removeCard($card_id)
+    {
+        $user = auth()->user();
+        //$data = json_decode(Request::getContent(), true);
+        $card = Card::find($card_id);
+        if (!$card->isUserOwner($user)) {
+            return response()->build(self::RESPONSE_MESSAGE_ERROR_UNAUTHORIZED, 'User is not owner');
+        }
+
+        //user doesn't own card
+        $card->user_id = null;
+        $card->removed = 1;
+        $card->save();
+
+        return response()->build(self::RESPONSE_MESSAGE_SUCCESS, $card_id);
+    }
+
     /**
      * Gets all the transactions of the user's purchases.
      *

backend/database/migrations/2018_04_26_210634_add_removed_to_cards.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddRemovedToCards extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('cards', function (Blueprint $table) {
+            $table->integer('removed')->default(0);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('cards', function (Blueprint $table) {
+            //
+        });
+    }
+}

backend/routes/api.php

@@ -19,6 +19,7 @@
 Route::get('/me', 'ProfileController@me');
 Route::put('/me', 'ProfileController@updateMe');
 
+Route::put('/cards/{id}/delete', 'ProfileController@removeCard');
 Route::put('/follow/{id}', 'ProfileController@follow');
 Route::get('/users', 'ProfileController@getAllUsers');
 Route::get('/users/{id}', 'ProfileController@getUserDetail');

frontend/src/actions/cards.js

@@ -56,6 +56,21 @@ export function putTransaction(cardId) {
   };
 }
 
+export function removeCard(cardId) {
+  console.log(cardId);
+  return dispatch => {
+    return apiFetch('cards/' + cardId + '/delete', {
+      method: 'PUT'
+    })
+      .then(response => response.json())
+      .then(json => {
+        if (json.success) {
+          toast.success('Card successfully deleted!');
+        } else toast.error('Failure deleting card');
+      });
+  };
+}
+
 function requestCardDetail(cardId) {
   return {
     type: REQUEST_CARD_DETAIL,

frontend/src/components/Card.js

@@ -1,4 +1,7 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { removeCard } from '../actions/cards';
 import '../styles/App.css';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import faExternalLinkAlt from '@fortawesome/fontawesome-free-solid/faExternalLinkAlt';
@@ -10,9 +13,30 @@ import {
   Card as BootstrapCard,
   CardBody,
   CardTitle,
-  CardText
+  CardText,
+  UncontrolledTooltip,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
 } from 'reactstrap';
 class Card extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modal: false,
+      cardId: null
+    };
+
+    this.toggle = this.toggle.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      modal: !this.state.modal
+    });
+  }
+
   render() {
     let { card, index, type, toggleCardSelection } = this.props;
     let listing;
@@ -53,7 +77,48 @@ class Card extends Component {
           </div>
         </div>
         <CardBody>
-          <CardTitle className="text-center">{card.name}</CardTitle>
+          <CardTitle className="text-center">
+            {card.name}
+            <div className="float-right">
+              <button
+                type="button"
+                class="close"
+                aria-label="Close"
+                id={`popover_${index}`}
+                onClick={this.toggle}
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+              <UncontrolledTooltip placement="top" target={`popover_${index}`}>
+                Delete Card
+              </UncontrolledTooltip>
+              <Modal
+                isOpen={this.state.modal}
+                toggle={this.toggle}
+                className={this.props.className}
+              >
+                <ModalHeader toggle={this.toggle}>My Collection</ModalHeader>
+                <ModalBody>
+                  Are you sure you want to remove card {card.id} from your
+                  collection?
+                </ModalBody>
+                <ModalFooter>
+                  <button
+                    color="primary"
+                    onClick={() => {
+                      this.props.removeCard(card.id);
+                      this.toggle();
+                    }}
+                  >
+                    Yes
+                  </button>{' '}
+                  <button color="secondary" onClick={this.toggle}>
+                    Cancel
+                  </button>
+                </ModalFooter>
+              </Modal>
+            </div>
+          </CardTitle>
           {type === CARD_TYPE_COLLECTION ? (
             <CardText>
               <p>owner: {card.user ? card.user.nickname : 'n/a'}</p>
@@ -80,4 +145,12 @@ Card.defaultProps = {
 export const CARD_TYPE_MARKETPLACE = 'marketplace';
 export const CARD_TYPE_COLLECTION = 'collection';
 
-export default Card;
+function mapStateToProps(state) {
+  return { cardId: state.card };
+}
+const mapDispatchToProps = dispatch => {
+  return bindActionCreators({ removeCard }, dispatch);
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Card);
+//export default Card;