import React, {Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import Grid from '../template/grid'
import {add, clear, changeDescription, changeUrl, changeTag} from
'./bookmarkActions'
import IconButton from '../template/iconButton'

class BookmarkForm extends Component {

render(){
    const {description, url, nameTag} = this.props
    return (
        <div role='form' className='bookmarkForm'>
            <Grid cols='12 9 3'>
            <input id='description' className='form-control'
                    placeholder='Nome do favorito' type='text'
                        onChange={this.props.changeDescription}
                        value={this.props.description}></input>
            </Grid>

            <Grid cols='12 9 3'>
            <input id='url' className='form-control'
                    placeholder='URL' type='text'
                        onChange={this.props.changeUrl}
                        value={this.props.url}></input>
            </Grid>

            <Grid cols='12 9 3'>
            <input id='tag' className='form-control'
                    placeholder='Tags' type='text'
                        onChange={this.props.changeTag}
                        value={this.props.nameTag}></input>
            </Grid>

            <Grid cols='12 3 3'>
                <IconButton style='primary' icon='plus'
                    onClick={this.props.add}></IconButton>

                <IconButton style='default' icon='close'
                    onClick={this.props.clear}></IconButton>
            </Grid>
        </div>
      )
   }
}

const mapStateToProps = state => ({description: state.bookmark.description,
url: state.bookmark.url , nametag: state.bookmark.nameTag})
const mapDispatchToProps = dispatch => bindActionCreators({add, clear,
changeDescription, changeUrl, changeTag}, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(BookmarkForm)

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

import IconButton from '../template/iconButton'
import Tag from '../template/tag'
import {remove} from './bookmarkActions'

const BookmarkList = props => {

const renderRows = () => {
    const list = props.list || []
    return list.map((bookmark,index) => (
        <tr key={index}>
            <td>{bookmark.description}</td>
         <td><a href={'http://' + `${bookmark.url}`}>{bookmark.url}</a></td>
            <td>{bookmark.nameTag}</td>
            <td>
                <IconButton style='danger' icon='trash-o'
                    onClick={props.remove}></IconButton>
            </td>
        </tr>
    ))
}

    return (
        <table className='table'>
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>URL</th>
                    <th>Tags</th>
                    <th className='tableActions'>Ações</th>
                </tr>
            </thead>
            <tbody>
                {renderRows()}
            </tbody>
        </table>
    )
}


const mapStateToProps = state => ({list: state.bookmark.list})
const mapDispatchToProps = dispatch => bindActionCreators({remove},
dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(BookmarkList)

export const changeDescription = (event) => ({
    type: 'DESCRIPTION_CHANGED',
    payload: event.target.value
})

export const changeUrl = (event) => ({
   type: 'URL_CHANGED',
   payload: event.target.value
})

export const changeTag = (event) => ({
   type: 'TAG_CHANGED',
   payload: event.target.value
})

export function add() {
    return {type: 'BOOKMARK_ADDED'}
}

export function remove() {
   return {type: 'BOOKMARK_REMOVED'}
}

export function clear() {
    return {type: 'BOOKMARK_CLEAR'}
}

const INITIAL_STATE = {description: '', url: '', nameTag: '', list: [] }

export default (state = INITIAL_STATE, action) => {
switch(action.type) {
    case 'DESCRIPTION_CHANGED':
        return {...state, description: action.payload}
    case 'URL_CHANGED':
        return {...state, url: action.payload}
    case 'TAG_CHANGED':
        return {...state, nameTag: action.payload}
    case 'BOOKMARK_ADDED':
        return {...state, list: [...state.list, {description: state.description, url: state.url, nameTag: state.nameTag }]}
    case 'BOOKMARK_REMOVED':
        return {...state, list: []}
    case 'BOOKMARK_CLEAR':
        return {...state, description: '', url: '', nameTag: ''}
    default:
        return state
   }
}