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

Improved form field hooks and remove yup

master
Anthony Hinsinger 6 years ago
parent
bb00fd442f
commit
a1627d3301
8 changed files with 82 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      package.json
  2. 1
      src/web/_defaults.scss
  3. 22
      src/web/bookform.scss
  4. 45
      src/web/bookform.ts
  5. 6
      src/web/booklist.scss
  6. 4
      src/web/myapp.scss
  7. 38
      src/web/myhooks.ts
  8. 57
      yarn.lock

4
package.json
Unescape View File

@ -24,14 +24,12 @@ @@ -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",

1
src/web/_defaults.scss
Unescape View File

@ -0,0 +1 @@ @@ -0,0 +1 @@
$main-color: #8fc;

22
src/web/bookform.scss
Unescape View File

@ -1,3 +1,5 @@ @@ -1,3 +1,5 @@
@import 'defaults';
:host {
display: block;
}
@ -5,20 +7,34 @@ @@ -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 {

45
src/web/bookform.ts
Unescape View File

@ -1,50 +1,55 @@ @@ -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>
`;
}

6
src/web/booklist.scss
Unescape View File

@ -1,3 +1,5 @@ @@ -1,3 +1,5 @@
@import 'defaults';
:host {
display: block;
font-size: 24px;
@ -5,7 +7,7 @@ @@ -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 { @@ -14,7 +16,7 @@ p {
}
a {
color: #cdf;
color: $main-color;
font-size: 14px;
text-decoration: none;
}

4
src/web/myapp.scss
Unescape View File

@ -1,3 +1,5 @@ @@ -1,3 +1,5 @@
@import 'defaults';
:host {
font-family: Ubuntu, sans-serif;
display: block;
@ -13,5 +15,5 @@ @@ -13,5 +15,5 @@
h1 {
margin-top: 0;
background-color: #dfc;
background-color: $main-color;
}

38
src/web/myhooks.ts
Unescape View File

@ -1,29 +1,47 @@ @@ -1,29 +1,47 @@
import { useState, useCallback } from 'haunted';
type FormFieldProps = {
name: string;
type: "text";
'.value': string;
'@input': (e: any) => void;
};
type FormFieldMeta = {
setValue: ReturnType<typeof useState>[1];
isDirty: boolean;
reset: () => void;
};
type FormField = [
{
name: string;
type: "text";
'.value': string;
'@change': (e: any) => void;
},
ReturnType<typeof useState>[1]
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,
}
];
};

57
yarn.lock
Unescape View File

@ -67,13 +67,6 @@ @@ -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 @@ @@ -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: @@ -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: @@ -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: @@ -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: @@ -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: @@ -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: @@ -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: @@ -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"

Write Preview
Loading…
Cancel
Save