admin page prettier, will put in production to test for auto mailer

src/client/AdminRoot.tsx

@@ -8,12 +8,13 @@ import ArticleTable from './ArticleTable';
  */
 export default function AdminRoot() {
 	return (
-		<React.Fragment>
+		<div className='container'>
 			<h1>Admin index</h1>
 			<Link to="/admin/new" text="Create new article" />
-			<Button to="/api/signout" method="DELETE" text="Signout" />
+			<Button classes= 'btn-danger'
+				to="/api/signout" method="DELETE" text="Signout" />
 			<h2>List of articles</h2>
 			<ArticleTable />
-		</React.Fragment>
+		</div>
 	);
 }

src/client/ArticleTable.tsx

@@ -18,13 +18,22 @@ export default function ArticleTable() {
 		}).then((articles: any) => {
 			var $articles: any = [];
 			articles.data.forEach((article: any) => {
+				const tags: Array<any> = [];
+				for (let i = 0; i < article.tags.length; i++) {
+					if (i < article.tags.length - 1) {
+						tags.push(article.tags[i].name + ', ');
+					} else {
+						tags.push(article.tags[i].name);
+					}
+				}
 				$articles.push(
 					<tr key={article.id}>
 						<td>{article.title}</td>
-						<td>{article.id}</td>
+						<td>{tags}</td>
 						<td>{new Date(article.createdAt).toLocaleDateString()}</td>
+						<td>{new Date(article.updatedAt).toLocaleDateString()}</td>
 						<td>
-							<a className="btn btn-info" href={'/admin/edit' + article.id}>Edit</a>
+							<a className="btn btn-info mx-2" href={'/admin/edit/' + article.id}>Edit</a>
 							<button className="btn btn-danger" onClick={() => deleteArticle(article.id)}>Delete</button>
 						</td>
 					</tr>);
@@ -53,6 +62,7 @@ export default function ArticleTable() {
 								<th>Title</th>
 								<th>Tags</th>
 								<th>Creation Date</th>
+								<th>Last Update</th>
 								<th>Actions</th>
 							</tr>
 						</thead>

src/client/Button.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import axios from 'axios';
 
 interface ButtonProps {
+	classes: string;
 	to: string;
 	method: 'GET' | 'POST' | 'PUT' | 'DELETE';
 	text: string;
@@ -11,7 +12,7 @@ interface ButtonProps {
 /**
  * @return {jsx} The root component
  */
-export default function Button({to, method, text}: ButtonProps) {
+export default function Button({classes, to, method, text}: ButtonProps) {
 	async function buttonFetch() {
 		console.log('buttonFetch');
 		console.log(to);
@@ -27,7 +28,8 @@ export default function Button({to, method, text}: ButtonProps) {
 	}
 
 	return (
-		<button onClick={buttonFetch}>{text}</button>
+		<button className={'btn mx-2 ' + classes} onClick={buttonFetch}>
+			{text}</button>
 	);
 }
 /* eslint-enable */

src/server/routes/api.ts

@@ -42,6 +42,16 @@ router.get('/articletable', authorize, async (_req, res) => {
 			'id',
 			'title',
 			'createdAt',
+			'updatedAt',
+		],
+		include: [{
+			model: Tag,
+			attributes: [
+				'name',
+			],
+		}],
+		order: [
+			['updatedAt', 'DESC'],
 		],
 	});
 	res.send(articles);