make submit form not require JS.

This commit is contained in:
Jason Schwarzenberger 2020-12-04 16:16:05 +13:00
parent 33a25fa34e
commit 6459d07ce5
9 changed files with 30 additions and 14 deletions

View File

@ -9,6 +9,7 @@
"start": "node __sapper__/build" "start": "node __sapper__/build"
}, },
"dependencies": { "dependencies": {
"@polka/redirect": "^1.0.0-next.0",
"body-parser": "^1.19.0", "body-parser": "^1.19.0",
"compression": "^1.7.1", "compression": "^1.7.1",
"date-fns": "^2.16.1", "date-fns": "^2.16.1",

View File

@ -6,7 +6,7 @@ const API_URL = process.env.API_URL || 'http://localhost:33842';
export async function get(req, res) { export async function get(req, res) {
const response = await fetch(`${API_URL}/api/${req.params.id}`); const response = await fetch(`${API_URL}/api/${req.params.id}`);
res.writeHead(response.status, { 'Content-Type': 'application/json' }); res.writeHead(response.status, { 'Content-Type': response.headers.get('Content-Type') });
if (!response.ok) { if (!response.ok) {
return res.end(await response.text()); return res.end(await response.text());
} }

View File

@ -10,7 +10,7 @@ export async function get(req, res) {
limit: req.query.limit || 20, limit: req.query.limit || 20,
}; };
const response = await fetch(`${API_URL}/api?skip=${skip}&limit=${limit}`); const response = await fetch(`${API_URL}/api?skip=${skip}&limit=${limit}`);
res.writeHead(response.status, { 'Content-Type': 'application/json' }); res.writeHead(response.status, { 'Content-Type': response.headers.get('Content-Type') });
if (!response.ok) { if (!response.ok) {
return res.end(await response.text()); return res.end(await response.text());
} }

View File

@ -10,7 +10,7 @@ export async function get(req, res) {
limit: req.query.limit || 20, limit: req.query.limit || 20,
}; };
const response = await fetch(`${API_URL}/api/search?q=${req.query.q}&skip=${skip}&limit=${limit}`); const response = await fetch(`${API_URL}/api/search?q=${req.query.q}&skip=${skip}&limit=${limit}`);
res.writeHead(response.status, { 'Content-Type': 'application/json' }); res.writeHead(response.status, { 'Content-Type': response.headers.get('Content-Type') });
if (!response.ok) { if (!response.ok) {
return res.end(await response.text()); return res.end(await response.text());
} }

View File

@ -1,12 +1,17 @@
import FormData from 'form-data'; import FormData from 'form-data';
import fetch from 'isomorphic-fetch'; import fetch from 'isomorphic-fetch';
import redirect from '@polka/redirect';
const API_URL = process.env.API_URL || 'http://localhost:33842'; const API_URL = process.env.API_URL || 'http://localhost:33842';
export async function post(req, res) { export async function post(req, res) {
const data = new FormData(); const body = new FormData();
data.append('url', req.body.url); body.append('url', req.body.url);
const response = await fetch(`${API_URL}/api/submit`, { method: "POST", body: data }); const response = await fetch(`${API_URL}/api/submit`, { method: "POST", body });
res.writeHead(response.status, { 'Content-Type': 'application/json' }); if (req.body.redirect) {
const { nid } = await response.json();
return redirect(res, 302, `/${nid}`);
}
res.writeHead(response.status, { 'Content-Type': response.headers.get('Content-Type') });
res.end(await response.text()); res.end(await response.text());
} }

View File

@ -127,7 +127,11 @@
width="200" width="200"
height="200" /> height="200" />
<form on:submit|preventDefault={handleSubmit} autocomplete="off"> <form
action="submit.json"
method="POST"
on:submit|preventDefault={handleSubmit}
autocomplete="off">
<input <input
type="text" type="text"
name="url" name="url"
@ -136,7 +140,7 @@
value="" value=""
bind:this={input} bind:this={input}
required /> required />
<button type="submit">Go</button> <button value="true" name="redirect" type="submit">Go</button>
</form> </form>
<p class="error">Something went wrong.</p> <p class="error">Something went wrong.</p>

View File

@ -2,14 +2,15 @@ import sirv from 'sirv';
import polka from 'polka'; import polka from 'polka';
import compression from 'compression'; import compression from 'compression';
import * as sapper from '@sapper/server'; import * as sapper from '@sapper/server';
import { json } from 'body-parser'; import { json, urlencoded } from 'body-parser';
const { PORT, NODE_ENV } = process.env; const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development'; const dev = NODE_ENV === 'development';
polka() // You can also use Express polka()
.use( .use(
json(), json(),
urlencoded(),
compression({ threshold: 0 }), compression({ threshold: 0 }),
sirv('static', { dev }), sirv('static', { dev }),
sapper.middleware(), sapper.middleware(),

View File

@ -1,8 +1,8 @@
{ {
"background_color": "#ffffff", "background_color": "#ffffff",
"theme_color": "#333333", "theme_color": "#333333",
"name": "TODO", "name": "Qot. news",
"short_name": "TODO", "short_name": "Qot. news",
"display": "minimal-ui", "display": "minimal-ui",
"start_url": "/", "start_url": "/",
"icons": [ "icons": [

View File

@ -2,6 +2,11 @@
# yarn lockfile v1 # yarn lockfile v1
"@polka/redirect@^1.0.0-next.0":
version "1.0.0-next.0"
resolved "https://registry.yarnpkg.com/@polka/redirect/-/redirect-1.0.0-next.0.tgz#df56f2fc3f1db9c5397c7eafc0e85442eeead427"
integrity sha512-ym6ooqMr09+cV+y52p5kszJ0jYcX+nJfm8POrQb7QYowvpPPuneZ71EclHrQSB7a50lcytgR/xtL6AUFdvyEkg==
"@polka/url@^1.0.0-next.11", "@polka/url@^1.0.0-next.9": "@polka/url@^1.0.0-next.11", "@polka/url@^1.0.0-next.9":
version "1.0.0-next.11" version "1.0.0-next.11"
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.11.tgz#aeb16f50649a91af79dbe36574b66d0f9e4d9f71" resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.11.tgz#aeb16f50649a91af79dbe36574b66d0f9e4d9f71"