63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
|
|
function Articles(props) {
|
|
console.log(props.tags, props.articles)
|
|
return (
|
|
<div>
|
|
<h3 className="mt-4">Articles</h3>
|
|
<ul className="list-group">
|
|
{props.articles &&
|
|
props.articles.map(article => (
|
|
<li className="list-group-item" key={article.id}>
|
|
<button
|
|
className="btn btn-outline-danger mr-1"
|
|
onClick={() => props.deleteArticle(article.id)}
|
|
>
|
|
X
|
|
</button>
|
|
<button
|
|
className="btn ml-1"
|
|
onClick={() => props.selectArticle(article.id)}
|
|
>
|
|
{article.title}{' '}
|
|
</button>
|
|
{props.tags && props.tags.filter(t => t.articleId === article.id).map(tag => (
|
|
<button className="btn btn-outline" key={tag.id}
|
|
onClick={(e) => props.selectTag(tag.id)}>
|
|
{tag.name}
|
|
</button>
|
|
))
|
|
}
|
|
<button
|
|
className="btn ml-1 float-right"
|
|
>
|
|
{props.comments.map(c => c.articleId === article.id).length} comment(s)
|
|
</button>
|
|
</li>
|
|
))}
|
|
|
|
<li className="list-group-item">
|
|
<form className="form-group row" onSubmit={props.createArticle}>
|
|
<input
|
|
className="form-control col input-sm"
|
|
placeholder="Create Article"
|
|
name="newArticle"
|
|
value={props.newArticle}
|
|
onChange={props.handleChange}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="form-control col col-sm-2 ml-1 btn btn-primary"
|
|
onClick={props.createArticle}
|
|
>
|
|
Save
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Articles
|