cupcakearmy/obolus
1
0
Fork 0
mirror of https://github.com/cupcakearmy/obolus.git synced 2024-12-22 16:16:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

prevent page reload and split code

Browse Source
This commit is contained in:
cupcakearmy 2019-05-24 15:52:20 +02:00
parent 55adfdf587
commit 02559d89ab
2 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
www/components/item.jsx
View File

@ -4,11 +4,11 @@ import React from 'react'
const Item = ({ id, text, done, refresh }) => { const Item = ({ id, text, done, refresh }) => {
const _done = (e) => callAPI(null, { const _done = () => callAPI(null, {
url: `/api/items/${id}`, url: `/api/items/${id}`,
method: 'patch', method: 'patch',
data: { data: {
done: e.target.checked, done: !done,
}, },
}).then(refresh) }).then(refresh)
@ -17,36 +17,30 @@ const Item = ({ id, text, done, refresh }) => {
method: 'delete', method: 'delete',
}).then(refresh) }).then(refresh)
return <tr className="item"> return <tr className="item" onClick={_done}>
<td className="item-done"> <td className="item-done">
<div className="form-group"> <div className="form-group">
<label className="form-checkbox"> <label className="form-checkbox">
<input type="checkbox" checked={done} onChange={_done}/> <input type="checkbox" checked={done} readOnly/>
<i className="form-icon"/> <i className="form-icon"/>
</label> </label>
</div> </div>
</td> </td>
<td>{text}</td> <td>{text}</td>
<td className="item-menu"> <td className="item-menu">
<div className="dropdown dropdown-right"> <button className="btn btn-action btn-error" onClick={_delete}>
<a className="btn btn-link dropdown-toggle" tabIndex="0"> <i className="icon icon-delete"/>
<i className="icon icon-more-vert"/> </button>
</a>
<ul className="menu">
<li className="menu-item">
<a onClick={_delete}>
<i className="icon icon-delete"/> Delete
</a>
</li>
</ul>
</div>
</td> </td>
{/* language=CSS */} {/* language=CSS */}
<style jsx>{` <style jsx>{`
.item-done, .item-done {
.item-menu {
width: 2em; width: 2em;
} }
.item-menu {
width: 1em;
}
`}</style> `}</style>
</tr> </tr>
} }

9
www/pages/list.jsx
View File

@ -17,11 +17,16 @@ const List = ({ fetched }) => {
input.current.focus() input.current.focus()
}, [input]) }, [input])
const _submit = () => callAPI(null, { const _submit = async (e) => {
e.preventDefault()
await callAPI(null, {
url: `/api/items/`, url: `/api/items/`,
method: 'post', method: 'post',
data: { text }, data: { text },
}).then(refresh) })
setText('')
refresh()
}
const _clear = () => callAPI(null, { const _clear = () => callAPI(null, {
url: `/api/items/`, url: `/api/items/`,