diff --git a/deno.json b/deno.json
index 67731b5..8257cea 100644
--- a/deno.json
+++ b/deno.json
@@ -1,14 +1,14 @@
{
"importMap": "./deno.map.json",
"compilerOptions": {
- "types": ["./ts/types"],
+ "types": ["./ts/types.d.ts"],
"lib": ["deno.window", "dom"],
"checkJs": true
},
"tasks": {
"dev": "deno task fmt & deno task serve & deno task test",
- "fmt": "deno fmt --watch --no-lock --no-check",
- "serve": "deno run -A --unstable --no-lock --no-check https://deno.land/std@0.167.0/http/file_server.ts",
+ "fmt": "deno fmt --watch",
+ "serve": "deno run -A --unstable --no-check https://deno.land/std@0.167.0/http/file_server.ts",
"test": "deno test ts/test.ts --watch --no-lock --no-check"
}
}
diff --git a/index.html b/index.html
index 60e2d76..ee0c216 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-
-
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/js/people.js b/js/people.js
index 7b1d87e..0f13d32 100644
--- a/js/people.js
+++ b/js/people.js
@@ -4,7 +4,8 @@ import { Consumer } from "./store.js";
/** @typedef {(e:SubmitEvent|Event)=>void|null} handler */
-/** @type {(props:{person:Store.Person })=>preact.VNode} */ const Person = (props) => {
+/** @type {(props:{person:Store.Person })=>preact.VNode} */
+const Person = (props) => {
const [, dispatch] = Consumer();
/** @type {handler} */ const handleClick = () => {
@@ -12,49 +13,81 @@ import { Consumer } from "./store.js";
};
return html`
-
-
-
${props.person.Name}
-
${props.person.Age}
+
+
+ ${props.person.Name}
+ ${props.person.Age}
`;
};
-/** @type {()=>preact.VNode} */ export default () => {
- const [state, dispatch] = Consumer();
+/** @type {()=>preact.VNode} */
+const PersonTable = () => {
+ const [state] = Consumer();
+ return html`
People
+
+ ${
+ state.People.length > 0
+ ? html`
+
+
+ Delete
+ Name
+ Age
+
+ ${state.People.map((p) => html`<${Person} person=${p}/>`)}
+
`
+ : html`
+
No people created
+ `
+ }
`;
+};
+
+/** @type {()=>preact.VNode} */
+const PersonForm = () => {
+ const [, dispatch] = Consumer();
const [nameGet, nameSet] = Preact.useState("default name");
const [ageGet, ageSet] = Preact.useState(21);
- /** @type {handler} */ const handleSubmit = (e) => {
+ /** @type {handler} */
+ const handleSubmit = (e) => {
e.preventDefault();
dispatch({ Key: "person-create", Arg: { Name: nameGet, Age: ageGet } });
};
- /** @type {handler} */ const handleName = (e) => {
+ /** @type {handler} */
+ const handleName = (e) => {
e.target && nameSet(/** @type {HTMLInputElement}*/ (e.target).value);
};
- /** @type {handler} */ const handleAge = (e) => {
+ /** @type {handler} */
+ const handleAge = (e) => {
e.target &&
ageSet(parseInt(/** @type {HTMLInputElement}*/ (e.target).value));
};
+ return html`
+
Add Person
+
`;
+};
+
+/** @type {()=>preact.VNode} */
+export default () => {
return html`
-
Add Person
-
-
People
-
- ${state.People.map((p) => html`<${Person} person=${p}/>`)}
-
+
Person Records
+
+ <${PersonForm}/>
+ <${PersonTable}/>
+
`;
};