ahinsing/haunted-apollo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improved form field hooks and remove yup

Browse Source
This commit is contained in:
Anthony Hinsinger
2020-03-04 15:17:43 +01:00
parent bb00fd442f
commit a1627d3301
8 changed files with 82 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -3
View File
@@ -24,14 +24,12 @@
"haunted": "^4.7.0",
"lit-html": "^1.1.2",
"react-media-hook": "^0.4.4",
"uuid": "^7.0.1",
"yup": "^0.28.1"
"uuid": "^7.0.1"
},
"devDependencies": {
"@types/express": "^4.17.2",
"@types/webpack-dev-middleware": "^3.7.0",
"@types/webpack-hot-middleware": "^2.25.0",
"@types/yup": "^0.26.32",
"@typescript-eslint/eslint-plugin": "^2.20.0",
"@typescript-eslint/parser": "^2.20.0",
"clean-webpack-plugin": "^3.0.0",
src/web/_defaults.scss
+1
View File
@@ -0,0 +1 @@
$main-color: #8fc;
src/web/bookform.scss
+19 -3
View File
@@ -1,3 +1,5 @@
@import 'defaults';
:host {
display: block;
}
@@ -5,20 +7,34 @@
input, button {
font-size: 24px;
padding: 5px 10px;
border: solid 1px #ddd;
&:focus {
outline: none;
}
}
input {
border: solid 1px #ddd;
&:focus {
border: solid 1px #aaa;
}
&:valid {
background-color: scale-color($main-color, $lightness: 80%);
}
&.dirty:invalid {
background-color: scale-color(red, $lightness: 80%);
}
}
button {
background-color: #dfc;
border: 0;
background-color: $main-color;
color: #555;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
&:active {
background-color: #ceb;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
&:disabled {
src/web/bookform.ts
+25 -20
View File
@@ -1,50 +1,55 @@
import { component, html, useState } from 'haunted';
import { spread } from '@open-wc/lit-helpers';
import { useMutation } from '@apollo/react-hooks';
import * as yup from 'yup';
import { useFormField } from './myhooks';
import { AddBook, GetBooks } from './queries'
import Css from './bookform.scss';
const schema = yup.object().shape({
title: yup.string().required(),
author: yup.string().required(),
});
const BookForm = () => {
const [titleProps, setTitle] = useFormField("title");
const [authorProps, setAuthor] = useFormField("author");
const [titleProps, titleMeta] = useFormField("title");
const [authorProps, authorMeta] = useFormField("author");
const [addBook, { loading }] = useMutation(AddBook);
return html`
<style>${Css.toString()}</style>
<input placeholder="book title" ...=${spread(titleProps)}>
<input placeholder="author name" ...=${spread(authorProps)}>
<button @click=${async () => {
<form @submit=${async (e: Event) => {
e.preventDefault();
try {
const newBook = await schema.validate({
const newBook = {
author: authorProps[".value"],
title: titleProps[".value"]
});
};
await addBook({
variables: newBook,
update: (cache, { data }) => {
const { books }: any = cache.readQuery({ query: GetBooks });
cache.writeQuery({ query: GetBooks, data: { books: [...books, data.addBook] }});
cache.writeQuery({
query: GetBooks,
data: { books: [...books, data.addBook] }
});
}
});
setTitle("");
setAuthor("");
titleMeta.reset();
authorMeta.reset();
} catch(e) {
console.log(e);
if (e instanceof yup.ValidationError) {
console.log("validation error");
}
}
}} ?disabled=${loading}>Add book</button>
}}>
<input
required
class=${titleMeta.isDirty ? "dirty" : ""}
placeholder="book title"
...=${spread(titleProps)}>
<input
required
class=${authorMeta.isDirty ? "dirty" : ""}
placeholder="author name"
...=${spread(authorProps)}>
<button ?disabled=${loading}>+ Add book</button>
</form>
`;
}
src/web/booklist.scss
+4 -2
View File
@@ -1,3 +1,5 @@
@import 'defaults';
:host {
display: block;
font-size: 24px;
@@ -5,7 +7,7 @@
}
p {
border-bottom: solid 1px #cdf;
border-bottom: solid 1px $main-color;
.author {
font-size: 20px;
@@ -14,7 +16,7 @@ p {
}
a {
color: #cdf;
color: $main-color;
font-size: 14px;
text-decoration: none;
}
src/web/myapp.scss
+3 -1
View File
@@ -1,3 +1,5 @@
@import 'defaults';
:host {
font-family: Ubuntu, sans-serif;
display: block;
@@ -13,5 +15,5 @@
h1 {
margin-top: 0;
background-color: #dfc;
background-color: $main-color;
}
src/web/myhooks.ts
+26 -8
View File
@@ -1,29 +1,47 @@
import { useState, useCallback } from 'haunted';
type FormField = [
{
type FormFieldProps = {
name: string;
type: "text";
'.value': string;
'@change': (e: any) => void;
},
ReturnType<typeof useState>[1]
'@input': (e: any) => void;
};
type FormFieldMeta = {
setValue: ReturnType<typeof useState>[1];
isDirty: boolean;
reset: () => void;
};
type FormField = [
FormFieldProps,
FormFieldMeta
];
export const useFormField = (name: string, defaultValue = ""): FormField => {
const [value, setValue] = useState(defaultValue);
const [dirty, setDirty] = useState(false);
const changeHandler = useCallback((e: any) => {
setValue(e.target.value);
}, [setValue]);
setDirty(true);
}, [setValue, setDirty]);
const reset = useCallback(() => {
setValue(defaultValue);
setDirty(false);
}, [setValue, setDirty, defaultValue]);
return [
{
name,
type: "text",
'.value': value,
'@change': changeHandler
'@input': changeHandler
},
setValue
{
setValue,
isDirty: dirty,
reset,
}
];
};
yarn.lock
+1 -56
View File
@@ -67,13 +67,6 @@
esutils "^2.0.2"
js-tokens "^4.0.0"
"@babel/runtime@^7.0.0":
version "7.8.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
dependencies:
regenerator-runtime "^0.13.2"
"@open-wc/lit-helpers@^0.3.1":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@open-wc/lit-helpers/-/lit-helpers-0.3.1.tgz#4416ce56b64db49fed6f324dc337145343b7c69e"
@@ -391,11 +384,6 @@
dependencies:
"@types/node" "*"
"@types/yup@^0.26.32":
version "0.26.32"
resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.26.32.tgz#bd356fb405f3d641eff963854edf7ad854a8e829"
integrity sha512-55WFAq8lNYXdRzSP1cenMFFXtPRe7PWsqn5y9ibqKHOQZ/cSLErkcnB1LE89M7W2TSXVDFtx+T7eFePkGoB+xw==
"@types/zen-observable@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.0.tgz#8b63ab7f1aa5321248aad5ac890a485656dcea4d"
@@ -2758,11 +2746,6 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
fn-name@~2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
integrity sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=
for-in@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3934,17 +3917,12 @@ locate-path@^3.0.0:
p-locate "^3.0.0"
path-exists "^3.0.0"
lodash-es@^4.17.11:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
lodash.sortby@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@~4.17.12:
lodash@^4.0.0, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@~4.17.12:
version "4.17.15"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -4964,11 +4942,6 @@ promise-inflight@^1.0.1:
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
property-expr@^1.5.0:
version "1.5.1"
resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-1.5.1.tgz#22e8706894a0c8e28d58735804f6ba3a3673314f"
integrity sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g==
proxy-addr@~2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -5199,11 +5172,6 @@ regenerator-runtime@^0.11.0:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
regenerator-runtime@^0.13.2:
version "0.13.3"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
regex-not@^1.0.0, regex-not@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -5977,11 +5945,6 @@ symbol-observable@^1.0.2, symbol-observable@^1.0.4:
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
synchronous-promise@^2.0.6:
version "2.0.10"
resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.10.tgz#e64c6fd3afd25f423963353043f4a68ebd397fd8"
integrity sha512-6PC+JRGmNjiG3kJ56ZMNWDPL8hjyghF5cMXIFOKg+NiwwEZZIvxTWd0pinWKyD227odg9ygF8xVhhz7gb8Uq7A==
table@^5.2.3:
version "5.4.6"
resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -6121,11 +6084,6 @@ toposort@^1.0.0:
resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
toposort@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
touch@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
@@ -6736,19 +6694,6 @@ yargs@^7.0.0:
y18n "^3.2.1"
yargs-parser "^5.0.0"
yup@^0.28.1:
version "0.28.1"
resolved "https://registry.yarnpkg.com/yup/-/yup-0.28.1.tgz#60c0725be7057ed7a9ae61561333809332a63d47"
integrity sha512-xSHMZA7UyecSG/CCTDCtnYZMjBrYDR/C7hu0fMsZ6UcS/ngko4qCVFbw+CAmNtHlbItKkvQ3YXITODeTj/dUkw==
dependencies:
"@babel/runtime" "^7.0.0"
fn-name "~2.0.1"
lodash "^4.17.11"
lodash-es "^4.17.11"
property-expr "^1.5.0"
synchronous-promise "^2.0.6"
toposort "^2.0.2"
zen-observable-ts@^0.8.20:
version "0.8.20"
resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.20.tgz#44091e335d3fcbc97f6497e63e7f57d5b516b163"