Skip to content

Commit

Permalink
Convert more elements to closure components
Browse files Browse the repository at this point in the history
  • Loading branch information
@josephspurrier
josephspurrier committed Jul 7, 2020
1 parent 0d4d6ac commit f352abc
Show file tree
Hide file tree
Showing 5 changed files with 131 additions and 124 deletions.
104 changes: 50 additions & 54 deletions src/app/ui/src/component/note.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,63 +2,59 @@ import m from "mithril"; // eslint-disable-line no-unused-vars
import Debounce from "@/module/debounce";
import NoteStore from "@/store/notestore";

var View = {
oninit: (vnode) => {
vnode.state.id = vnode.attrs.id;
vnode.state.message = vnode.attrs.message;
},
view: (vnode) => (
<li style="margin-top: 12px;">
<div class="box">
<div class="content">
<div class="editable">
<input
id={vnode.state.id}
type="text"
class="input individual-note"
value={vnode.state.message}
oninput={(e) => {
vnode.state.message = e.target.value;
}}
onkeyup={(e) => {
Debounce.run(
vnode.state.id,
() => {
NoteStore.runUpdate(vnode.state.id, e.target.value);
vnode.state.saving = "Saving...";
m.redraw();
setTimeout(function () {
vnode.state.saving = "";
var View = () => {
return {
view: (vnode) => (
<li style="margin-top: 12px;">
<div class="box">
<div class="content">
<div class="editable">
<input
id={vnode.attrs.id}
type="text"
class="input individual-note"
value={vnode.attrs.message}
oninput={vnode.attrs.oninput}
onkeyup={(e) => {
Debounce.run(
vnode.attrs.id,
() => {
NoteStore.runUpdate(vnode.attrs.id, e.target.value);
vnode.state.saving = "Saving...";
m.redraw();
}, 1000);
},
1000
);
}}
/>
setTimeout(function () {
vnode.state.saving = "";
m.redraw();
}, 1000);
},
1000
);
}}
/>
</div>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a
title="Delete note"
class="level-item"
onclick={() => {
NoteStore.runDelete(vnode.attrs.id);
}}
>
<span class="icon is-small has-text-danger">
<i class="fas fa-trash" data-cy="delete-note-link"></i>
</span>
</a>
</div>
<div class="level-right" style="min-height: 1.2rem;">
<span class="is-size-7 has-text-grey">{vnode.state.saving}</span>
</div>
</nav>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a
title="Delete note"
class="level-item"
onclick={() => {
NoteStore.runDelete(vnode.state.id);
}}
>
<span class="icon is-small has-text-danger">
<i class="fas fa-trash" data-cy="delete-note-link"></i>
</span>
</a>
</div>
<div class="level-right" style="min-height: 1.2rem;">
<span class="is-size-7 has-text-grey">{vnode.state.saving}</span>
</div>
</nav>
</div>
</li>
),
</li>
),
};
};

export default View;
30 changes: 16 additions & 14 deletions src/app/ui/src/component/simple-page.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import m from "mithril"; // eslint-disable-line no-unused-vars

var Page = {
view: (vnode) =>
m(
"page",
<div>
<section class="section">
<div class="container">
<h1 class="title">{vnode.attrs.title}</h1>
<h2 class="subtitle">{vnode.attrs.description}</h2>
<div>{vnode.attrs.content}</div>
</div>
</section>
</div>
),
var Page = () => {
return {
view: (vnode) =>
m(
"page",
<div>
<section class="section">
<div class="container">
<h1 class="title">{vnode.attrs.title}</h1>
<h2 class="subtitle">{vnode.attrs.description}</h2>
<div>{vnode.attrs.content}</div>
</div>
</section>
</div>
),
};
};

export default Page;
6 changes: 4 additions & 2 deletions src/app/ui/src/example/block.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import m from "mithril"; // eslint-disable-line no-unused-vars

var Block = {
view: (vnode) => m("", <div>{vnode.children}</div>),
var Block = () => {
return {
view: (vnode) => m("", <div>{vnode.children}</div>),
};
};

export default Block;
14 changes: 10 additions & 4 deletions src/app/ui/src/layout/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,16 @@ import m from "mithril"; // eslint-disable-line no-unused-vars
import Menu from "@/component/menu";
import Flash from "@/component/flash";

var View = {
view: function (vnode) {
return m("main.layout", [m(Menu), m("section", vnode.children), m(Flash)]);
},
var View = () => {
return {
view: function (vnode) {
return m("main.layout", [
m(Menu),
m("section", vnode.children),
m(Flash),
]);
},
};
};

export default View;
101 changes: 51 additions & 50 deletions src/app/ui/src/view/notepad.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,59 +9,60 @@ var Page = {
onremove: () => {
NoteStore.clear();
},
view: () =>
m(
"notepad",
<section id="note-section" class="section">
<div class="container">
<div class="box">
<div class="field">
<label class="label">To Do</label>
<div class="control">
<input
v-model="inputTodo"
type="text"
placeholder="What would you like to do?"
class="input"
name="note-add"
data-cy="note-text"
onkeypress={(e) => {
if (e.key !== "Enter") {
return;
}
NoteStore.submit();
}}
oninput={(e) => {
NoteStore.current.message = e.target.value;
}}
value={NoteStore.current.message}
/>
</div>
view: () => (
<section id="note-section" class="section">
<div class="container">
<div class="box">
<div class="field">
<label class="label">To Do</label>
<div class="control">
<input
v-model="inputTodo"
type="text"
placeholder="What would you like to do?"
class="input"
name="note-add"
data-cy="note-text"
onkeypress={(e) => {
if (e.key !== "Enter") {
return;
}
NoteStore.submit();
}}
oninput={(e) => {
NoteStore.current.message = e.target.value;
}}
value={NoteStore.current.message}
/>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a
title="Add note"
class="level-item"
onclick={NoteStore.submit}
>
<span class="icon is-small has-text-success">
<i class="far fa-plus-square" data-cy="add-note-link"></i>
</span>
</a>
</div>
</nav>
</div>
<div>
<ul id="listTodo">
{NoteStore.list.map((note) => (
<Note key={note.id} id={note.id} message={note.message} />
))}
</ul>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a title="Add note" class="level-item" onclick={NoteStore.submit}>
<span class="icon is-small has-text-success">
<i class="far fa-plus-square" data-cy="add-note-link"></i>
</span>
</a>
</div>
</nav>
</div>
<div>
<ul id="listTodo">
{NoteStore.list.map((note) => (
<Note
key={note.id}
id={note.id}
message={note.message}
oninput={(e) => {
note.message = e.target.value;
}}
/>
))}
</ul>
</div>
</section>
),
</div>
</section>
),
};

export default Page;

0 comments on commit f352abc

Please sign in to comment.