Allow manual submission of articles

webclient/src/App.js

@@ -8,6 +8,7 @@ import Feed from './Feed.js';
 import Article from './Article.js';
 import Comments from './Comments.js';
 import Search from './Search.js';
+import Submit from './Submit.js';
 import Results from './Results.js';
 import ScrollToTop from './ScrollToTop.js';
 
@@ -60,6 +61,7 @@ class App extends React.Component {
 							<span className='slogan'>Reddit, Hacker News, and Tildes combined, then pre-rendered in reader mode.</span>
 						</p>
 						<Route path='/(|search)' component={Search} />
+						<Route path='/(|search)' component={Submit} />
 					</div>
 
 					<Route path='/' exact render={(props) => <Feed {...props} updateCache={this.updateCache} />} />

webclient/src/Search.js

@@ -34,18 +34,16 @@ class Search extends Component {
 		const search = this.state.search;
 
 		return (
-			<div className='search'>
-				<div className='search-inside'>
-					<form onSubmit={this.searchAgain}>
-						<input
-							placeholder='Search...'
-							value={search}
-							onChange={this.searchArticles}
-							ref={this.inputRef}
-						/>
-					</form>
-				</div>
-			</div>
+			<span className='search'>
+				<form onSubmit={this.searchAgain}>
+					<input
+						placeholder='Search...'
+						value={search}
+						onChange={this.searchArticles}
+						ref={this.inputRef}
+					/>
+				</form>
+			</span>
 		);
 	}
 }

webclient/src/Style-light.css

@@ -15,6 +15,7 @@ input {
 	font-size: 1.05rem;
 	background-color: transparent;
 	border: 1px solid #828282;
+	margin: 0.25rem;
 	padding: 6px;
 	border-radius: 4px;
 }
@@ -173,3 +174,7 @@ span.source {
 	top: 0.1rem;
 	left: 0.1rem;
 }
+
+.search form {
+	display: inline;
+}

webclient/src/Submit.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+class Submit extends Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			progress: null,
+		};
+
+		this.inputRef = React.createRef();
+	}
+
+	submitArticle = (event) => {
+		event.preventDefault();
+		const url = event.target[0].value;
+		this.inputRef.current.blur();
+
+		this.setState({ progress: 'Submitting...' });
+
+		let data = new FormData();
+		data.append('url', url);
+
+		fetch('/api/submit', { method: 'POST', body: data })
+			.then(res => res.json())
+			.then(
+				(result) => {
+					this.props.history.replace('/' + result.nid);
+				},
+				(error) => {
+					this.setState({ progress: 'Error' });
+				}
+			);
+	}
+
+	render() {
+		const progress = this.state.progress;
+
+		return (
+			<span className='search'>
+				<form onSubmit={this.submitArticle}>
+					<input
+						placeholder='Submit Article'
+						ref={this.inputRef}
+					/>
+				</form>
+				{progress ? progress : ''}
+			</span>
+		);
+	}
+}
+
+export default withRouter(Submit);