70 lines
1.7 KiB
React
70 lines
1.7 KiB
React
import React from 'react';
|
|
|
|
//DOCS: props.uri is the address of a live news-server
|
|
//DOCS: props.newsKey is the key of the live news-server
|
|
const NewsPublisher = props => {
|
|
let titleElement, authorElement, bodyElement;
|
|
|
|
return (
|
|
<div>
|
|
<h2 className='centered'>News Publisher</h2>
|
|
<form onSubmit={async e => {
|
|
e.preventDefault();
|
|
await handleSubmit(titleElement.value, authorElement.value, bodyElement.value, props.uri, props.newsKey);
|
|
titleElement.value = authorElement.value = bodyElement.value = '';
|
|
}}>
|
|
<div>
|
|
<label htmlFor='title'>Title: </label>
|
|
<input type='text' name='title' ref={ e => titleElement = e } />
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor='author'>Author: </label>
|
|
<input type='text' name='author' ref={ e => authorElement = e } />
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor='body'>Body: </label>
|
|
<textarea name='body' rows='10' cols='150' ref={ e => bodyElement = e } />
|
|
</div>
|
|
|
|
<button type='submit'>Publish</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const handleSubmit = async (title, author, body, uri, newsKey) => {
|
|
title = title.trim();
|
|
author = author.trim();
|
|
body = body.trim();
|
|
uri = uri.trim();
|
|
newsKey = newsKey.trim();
|
|
|
|
//fetch POST json data
|
|
const raw = await fetch(
|
|
uri,
|
|
{
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Access-Control-Allow-Origin': '*'
|
|
},
|
|
body: JSON.stringify({ title: title, author: author, body: body, key: newsKey })
|
|
}
|
|
);
|
|
|
|
if (raw.ok) {
|
|
const result = await raw.json();
|
|
|
|
if (result.ok) {
|
|
alert(`Published article index ${result.index}`);
|
|
} else {
|
|
alert(result.error);
|
|
}
|
|
} else {
|
|
alert(raw.statusText);
|
|
}
|
|
};
|
|
|
|
export default NewsPublisher; |