filter Articles by Tag
This commit is contained in:
data
parent
e56afa8869
commit
4839be414c
@ -1,49 +1,61 @@
|
||||
import React from 'react'
|
||||
|
||||
function Articles(props) {
|
||||
console.log(props.tags, props.articles)
|
||||
const articles = props.articles || []
|
||||
var articles = props.articles || []
|
||||
if (props.selectedTagId) {
|
||||
const name = props.tags.filter(t => t.id === props.selectedTagId)['name']
|
||||
//articles = props.tags.getArticles()
|
||||
articles = props.articles.filter(a =>
|
||||
filterArticles(a, props.selectedTagId),
|
||||
)
|
||||
}
|
||||
function filterArticles(article, tagId) {
|
||||
if (article.tags && article.tags.filter(t => t.id === tagId).length !== 0) {
|
||||
return article
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<h3 className="mt-4">Articles</h3>
|
||||
{props.selectedTagId ? (
|
||||
<button
|
||||
className="btn btn-primary mb-1"
|
||||
onClick={() => props.selectTag()}
|
||||
>
|
||||
Show all
|
||||
</button>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<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>
|
||||
<button className="btn ml-1 float-right">
|
||||
{props.comments.map(c => c.articleId === article.id).length}{' '}
|
||||
comment(s)
|
||||
</button>
|
||||
{props.tags &&
|
||||
props.tags
|
||||
.filter(t => t.articleId === article.id)
|
||||
.map(tag => (
|
||||
<button
|
||||
className="btn btn-outline-success mr-1 float-right"
|
||||
key={tag.id}
|
||||
onClick={e => props.selectTag(tag.id)}
|
||||
>
|
||||
{tag.name}
|
||||
</button>
|
||||
))}
|
||||
</li>
|
||||
))}
|
||||
{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>
|
||||
<button className="btn ml-1 float-right">
|
||||
{props.comments.map(c => c.articleId === article.id).length}{' '}
|
||||
comment(s)
|
||||
</button>
|
||||
{article.tags &&
|
||||
article.tags.map(tag => (
|
||||
<button
|
||||
className="btn btn-outline-success mr-1 float-right"
|
||||
key={article.id + tag.id}
|
||||
onClick={e => props.selectTag(tag.id)}
|
||||
>
|
||||
{tag.name}
|
||||
</button>
|
||||
))}
|
||||
</li>
|
||||
))}
|
||||
|
||||
<li className="list-group-item">
|
||||
<form className="form-group row" onSubmit={props.createArticle}>
|
||||
|
||||
@ -1,50 +1,42 @@
|
||||
import React from 'react'
|
||||
|
||||
class Tags extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
//props.state.tags = tags
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{this.props.tags &&
|
||||
this.props.tags
|
||||
.filter(t => t.articleId === this.props.selectedArticleId)
|
||||
.map(tag => (
|
||||
<span key={tag.id}>
|
||||
<button
|
||||
className="btn btn-outline-success ml-1"
|
||||
onClick={e => this.props.selectTag(tag.id)}
|
||||
>
|
||||
{tag.name}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-danger mr-1"
|
||||
onClick={e => this.props.removeTag(tag.id)}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<form className="mt-2 mb-2" onSubmit={this.props.addTag}>
|
||||
<input
|
||||
className="col input-sm col-sm-3 ml-3 mr-1"
|
||||
placeholder="Add tag"
|
||||
name="newTag"
|
||||
value={this.props.newTag}
|
||||
onChange={this.props.handleChange}
|
||||
/>
|
||||
<button
|
||||
className="col btn btn-primary col-sm-1"
|
||||
onClick={this.props.addTag}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
function Tags(props) {
|
||||
const article = props.articles.filter(
|
||||
a => a.id === props.selectedArticleId,
|
||||
)[0]
|
||||
return (
|
||||
<div>
|
||||
{article.tags &&
|
||||
article.tags.map(tag => (
|
||||
<span key={tag.id}>
|
||||
<button
|
||||
className="btn btn-outline-success ml-1"
|
||||
onClick={e => props.selectTag(tag.id)}
|
||||
>
|
||||
{tag.name}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-danger mr-1"
|
||||
onClick={e => props.removeTag(tag.id)}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<form className="mt-2 mb-2" onSubmit={props.addTag}>
|
||||
<input
|
||||
className="col input-sm col-sm-3 ml-3 mr-1"
|
||||
placeholder="Add tag"
|
||||
name="newTag"
|
||||
value={props.newTag}
|
||||
onChange={props.handleChange}
|
||||
/>
|
||||
<button className="col btn btn-primary col-sm-1" onClick={props.addTag}>
|
||||
+
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tags
|
||||
|
||||
@ -4,24 +4,32 @@ const API = process.env.REACT_APP_API || 'http://localhost:1337'
|
||||
export async function addTag(e) {
|
||||
e.preventDefault()
|
||||
if (this.state.newTag === '') {
|
||||
return alert("Refusing to add an empty tag.")
|
||||
return alert('Refusing to add an empty tag.')
|
||||
}
|
||||
const tag = {
|
||||
name: this.state.newTag,
|
||||
articleId: this.state.selectedArticleId,
|
||||
}
|
||||
const tag = { name: this.state.newTag, articleId: this.state.selectedArticleId }
|
||||
try {
|
||||
const { data, error } = await axios.post(API + '/api/tags', tag)
|
||||
if (error) {
|
||||
alert(`Received error when adding tag ${tag.name}: ${error}`)
|
||||
} else if (data.id) {
|
||||
alert(`Received error when adding tag ${tag.name} to article: ${error}`)
|
||||
} else if (data.tag && data.article) {
|
||||
const oldTags = this.state.tags.filter(t => t.id !== data.tag.id)
|
||||
const oldArticles = this.state.articles.filter(
|
||||
a => a.id !== data.article.id,
|
||||
)
|
||||
this.setState({
|
||||
tags: this.state.tags.concat(data),
|
||||
tags: oldTags.concat(data.tag),
|
||||
articles: oldArticles.concat(data.article),
|
||||
newTag: '',
|
||||
})
|
||||
console.log(`Added tag: `, data)
|
||||
console.log(`Added tag to article: `, data)
|
||||
} else {
|
||||
alert(`Failed to add tag '${tag}'.`)
|
||||
alert(`Failed to add tag to article '${tag}'.`)
|
||||
}
|
||||
} catch (e) {
|
||||
alert(`Failed to add tag '${this.state.newTag}'.`)
|
||||
alert(`Failed to add tag to article '${this.state.newTag}'.`)
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,21 +44,52 @@ export async function removeTag(id) {
|
||||
alert(`Could not find tag with id ${id}.`)
|
||||
return
|
||||
}
|
||||
tag['articleId'] = this.state.selectedArticleId
|
||||
try {
|
||||
const { data, error } = await axios.post(
|
||||
API + `/api/tags/${tag.id}/delete`,
|
||||
const { data, error } = await axios.put(
|
||||
API + `/api/tags/${(tag, id)}}`,
|
||||
tag,
|
||||
)
|
||||
if (error) {
|
||||
alert(`Received error when removing tag ${tag.name}: ${error}`)
|
||||
} else if (data.tag && data.article) {
|
||||
console.log(data)
|
||||
const oldTags = this.state.tags.filter(t => t.id !== data.tag.id)
|
||||
const oldArticles = this.state.articles.filter(
|
||||
a => a.id !== data.article.id,
|
||||
)
|
||||
this.setState({
|
||||
tags: oldTags.concat(data.tag),
|
||||
articles: oldArticles.concat(data.article),
|
||||
})
|
||||
console.log('Removed tag from article:', data)
|
||||
} else {
|
||||
alert(`Failed to remove tag '${tag.name}' from article .`)
|
||||
}
|
||||
} catch (e) {
|
||||
alert(`Failed to remove tag '${tag.name} from article ': ${e}`)
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteTag(id) {
|
||||
const tag = this.state.tags.find(p => p.id === id)
|
||||
if (!tag.id) {
|
||||
alert(`Could not find tag with id ${id}.`)
|
||||
return
|
||||
}
|
||||
try {
|
||||
const { data, error } = await axios.post(API + `/api/tags/${tag.id}/delete`)
|
||||
if (error) {
|
||||
alert(`Received error when deleting tag ${tag.name}: ${error}`)
|
||||
} else if (data.name) {
|
||||
console.log('Removed tag:', data)
|
||||
console.log('Deleted tag:', data)
|
||||
this.setState({
|
||||
tags: this.state.tags.filter(p => p.id !== tag.id),
|
||||
})
|
||||
} else {
|
||||
alert(`Failed to remove tag '${tag.name}'.`)
|
||||
alert(`Failed to delete tag '${tag.name}'.`)
|
||||
}
|
||||
} catch (e) {
|
||||
alert(`Failed to remove tag '${tag.name}': ${e}`)
|
||||
alert(`Failed to delete tag '${tag.name}': ${e}`)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user