130 lines
3.3 KiB
React
130 lines
3.3 KiB
React
import React, { useState, useEffect, useContext, useRef } from 'react';
|
|
import Select from 'react-select';
|
|
|
|
import { TokenContext } from '../../utilities/token-provider';
|
|
|
|
const NewsEditor = props => {
|
|
//context
|
|
const authTokens = useContext(TokenContext);
|
|
|
|
//refs
|
|
const titleRef = useRef();
|
|
const authorRef = useRef();
|
|
const bodyRef = useRef();
|
|
|
|
//state
|
|
const [articles, setArticles] = useState([]);
|
|
const [index, setIndex] = useState(null);
|
|
|
|
//run once
|
|
useEffect(() => {
|
|
fetch(`${process.env.NEWS_URI}/news/metadata?page_size=999`)
|
|
.then(res => res.json())
|
|
.then(json => {
|
|
setArticles(json)
|
|
})
|
|
;
|
|
}, []);
|
|
|
|
return (
|
|
<div className='panel'>
|
|
<h2 className='text centered'>News Editor</h2>
|
|
<Select
|
|
options={articles.map(article => { return { label: article.title, index: article.index }; })}
|
|
onChange={async ({index}) => {
|
|
//fetch this article
|
|
const result = await fetch(`${process.env.NEWS_URI}/news/archive/${index}`);
|
|
|
|
if (!result.ok) {
|
|
const err = `${result.status}: ${await result.text()}`;
|
|
console.log(err);
|
|
alert(err);
|
|
} else {
|
|
const article = await result.json();
|
|
titleRef.current.value = article.title;
|
|
authorRef.current.value = article.author;
|
|
bodyRef.current.value = article.body;
|
|
setIndex(index);
|
|
}
|
|
}}
|
|
placeholder='Select Article'
|
|
/>
|
|
|
|
<form className='constrained' onSubmit={async evt => {
|
|
//onSubmit
|
|
evt.preventDefault();
|
|
const [err] = await handleSubmit(titleRef.current.value, authorRef.current.value, bodyRef.current.value, index, authTokens.tokenFetch);
|
|
if (err) {
|
|
alert(err);
|
|
} else {
|
|
titleRef.current.value = authorRef.current.value = bodyRef.current.value = '';
|
|
alert(`Edited as article index ${index}`);
|
|
}
|
|
}}>
|
|
<input type='text' name='title' placeholder='Title' ref={titleRef} />
|
|
<input type='text' name='author' placeholder='Author' ref={authorRef} />
|
|
<textarea name='body' rows='10' cols='150' placeholder='Body of the article goes here...' ref={bodyRef} />
|
|
|
|
<button type='submit'>Update</button>
|
|
<button type='button' onClick={async evt => {
|
|
//onDelete
|
|
const [err, result] = await handleDelete(index, authTokens.tokenFetch);
|
|
|
|
if (err) {
|
|
alert(err);
|
|
return;
|
|
}
|
|
|
|
if (result) {
|
|
titleRef.current.value = authorRef.current.value = bodyRef.current.value = '';
|
|
alert(`Article deleted`);
|
|
}
|
|
}}>Delete</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const handleSubmit = async (title, author, body, index, tokenFetch) => {
|
|
title = title.trim();
|
|
author = author.trim();
|
|
body = body.trim();
|
|
|
|
//fetch POST json data
|
|
const result = await tokenFetch(`${process.env.NEWS_URI}/news/${index}`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
title,
|
|
author,
|
|
body
|
|
})
|
|
});
|
|
|
|
if (!result.ok) {
|
|
return [`${result.status}: ${await result.text()}`];
|
|
}
|
|
|
|
return [null];
|
|
};
|
|
|
|
const handleDelete = async (index, tokenFetch) => {
|
|
const conf = confirm('Are you sure you want to delete this article?');
|
|
|
|
if (conf) {
|
|
const result = await tokenFetch(`${process.env.NEWS_URI}/news/${index}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!result.ok) {
|
|
const err = `${result.status}: ${await result.text()}`;
|
|
return [err, false];
|
|
}
|
|
}
|
|
|
|
return [null, conf];
|
|
};
|
|
|
|
export default NewsEditor; |