TranscriptList_index.js

import React, { PropTypes } from 'react';
import UsersNavBar from '../components/TranscriptsNavBar';
import TranscriptCardList from './TranscriptCardListContainer';

const Screen = ({transcripts=[], deleteTranscript}) => (
    <div>
      <UsersNavBar label="Transcripts" screen="transcriptlist" />
      <TranscriptCardList
          transcripts={transcripts}
          deleteTranscript = {deleteTranscript}
      />
    </div>
)



export default Screen;

TranscriptList_TranscriptCard.js

/**
 * Created by Mike on 2/21/2017.
 */
import React, { PropTypes } from 'react';
import { Link } from 'react-router'
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';

//TODO: grab avatar image dynamcially
//TODO: wire up edit button
//TODO: wire up delete button
//TODO: Render text only if we're expanded


const  TranscriptCard = ({transcript, deleteTranscript}) => {
  const {title = "", date, speaker="", text="", _id=""} = transcript;
  const deleteClickHandler = (id) => {
      deleteTranscript(id)
  }

  //console.log(deleteTranscript);
  return(
      <Card >
        <CardHeader
            title={title}
            subtitle={speaker}
            actAsExpander={true}
            showExpandableButton={true}
            avatar={'/images/avatars/donald-trump.jpg'}
          >

        </CardHeader>
        <CardText expandable={true} dangerouslySetInnerHTML={{__html: text}} />



        <CardActions expandable={true}>
          <Link to={`/transcriptEdit/${_id}` }><FlatButton label="Edit" /></Link>
          <FlatButton label="Delete"
                      onTouchTap={() => deleteClickHandler(_id)} />
        </CardActions>
      </Card>
  )
}

export default TranscriptCard;

TranscriptList_TranscriptCardList.js

/**
 * Created by Mike on 2/21/2017.
 */
import React, { PropTypes } from 'react';

import TranscriptCard from './TranscriptCard';
import Subheader from 'material-ui/Subheader';
import Card from 'material-ui/Card';

class TranscriptCardList extends React.Component{

  componentDidMount(){
    this.props.loadTranscripts();
  }

  render() {
    const {transcripts, deleteTranscript} = this.props;
    return (
        <Card>
          <Subheader>Today</Subheader>
          {transcripts.map(transcript => {

                return (<TranscriptCard
                    transcript={transcript}
                    deleteTranscript={deleteTranscript}
                    key={transcript._id}/>)
              }
          )}
        </Card>
    )
  }
}
export default TranscriptCardList;

TranscriptList_TranscriptCardListContainer.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { feathersServices } from '../../../feathers';
import TranscriptCardList from './TranscriptCardList'

const getTranscripts = (queryResult) => {
  if(!queryResult) return [];
  return(queryResult.data);
}

const mapStateToProps = (state) =>({
  transcripts: getTranscripts(state.transcripts.queryResult)
});

const deleteTranscripts = (id, dispatch) => {
  console.log('deleting');
  console.log('deleting...', id, dispatch);
  dispatch(feathersServices.transcripts.remove(id));
}


const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    loadTranscripts: (query) => dispatch(feathersServices.transcripts.find(query)),
    deleteTranscript: (id) => dispatch(deleteTranscripts.bind(this, id))
  }
};



export default connect(mapStateToProps, mapDispatchToProps)(TranscriptCardList);