68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import React, {useState, useEffect} from 'react';
|
|
import axios from 'axios';
|
|
import Loader from './Loader';
|
|
|
|
/* eslint-disable */
|
|
/**
|
|
* @return {jsx} The root component
|
|
*/
|
|
export default function ArticleTable() {
|
|
const [articleTable, setArticleTable] = useState([])
|
|
const [clickedOnDelete, setClickedOnDelete] = useState(false);
|
|
const [busy, setBusy] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setBusy(true)
|
|
axios.get('/api/articletable', {
|
|
withCredentials: true,
|
|
}).then((articles: any) => {
|
|
var $articles: any = [];
|
|
articles.data.forEach((article: any) => {
|
|
$articles.push(
|
|
<tr key={article.id}>
|
|
<td>{article.title}</td>
|
|
<td>{article.id}</td>
|
|
<td>{new Date(article.createdAt).toLocaleDateString()}</td>
|
|
<td>
|
|
<a className="btn btn-info" href={'/admin/edit' + article.id}>Edit</a>
|
|
<button className="btn btn-danger" onClick={() => deleteArticle(article.id)}>Delete</button>
|
|
</td>
|
|
</tr>);
|
|
});
|
|
setArticleTable($articles);
|
|
setBusy(false);
|
|
});
|
|
}, [clickedOnDelete]);
|
|
|
|
function deleteArticle(id: string) {
|
|
axios.delete('/admin/' + id, {
|
|
withCredentials: true,
|
|
}).then(() => {
|
|
setClickedOnDelete(!clickedOnDelete);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{busy ? (
|
|
<Loader />
|
|
) : (
|
|
<table className="table table-dark">
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Tags</th>
|
|
<th>Creation Date</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{articleTable}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
/* eslint-enable */
|