Skip to content

Instantly share code, notes, and snippets.

@arthurvi
arthurvi / dataset.js
Created October 5, 2020 09:37
dataset.js
View dataset.js
const itemsFromServer = {
'1': {
id: '1',
value: 'tests',
isSaving: false,
otherIdForSavingOnly: '1-1'
},
'2': {
id: '2',
value: 'another row',
@arthurvi
arthurvi / FullExample.jsx
Created October 5, 2020 09:36
FullExample.jsx
View FullExample.jsx
import React from 'react';
const ItemListDispatch = React.createContext(null);
// Call our API here with id, otherIdForSavingOnly, value etc.
async function save(item) {
await new Promise((resolve) => setTimeout(resolve, 1000));
}
const itemsFromServer = {
@arthurvi
arthurvi / Item.jsx
Created October 5, 2020 09:35
Item.jsx
View Item.jsx
const Item = React.memo(function Item({ id, value, isSaving, onChange, onSave }) {
if (isSaving) {
return <li>Saving...</li>;
}
return (
<li>
<input
value={value}
onChange={(event) => onChange(event.target.value)}
@arthurvi
arthurvi / ItemList.after.jsx
Created October 5, 2020 09:34
ItemList.after.jsx
View ItemList.after.jsx
function ItemList() {
const [items, setItems] = React.useState(itemsFromServer);
return (
<ul>
{Object.values(items).map((item) => (
<ItemWrapper
key={item.id}
item={item}
setItems={setItems}
@arthurvi
arthurvi / ItemList.before.jsx
Created October 5, 2020 09:33
ItemList.before.jsx
View ItemList.before.jsx
function ItemList() {
const [items, setItems] = React.useState(itemsFromServer);
const handleChange = React.useCallback(
function handleChange(id, value) { ... },
[setItems]
);
async function handleSave(id) {
// set isSaving to true
@arthurvi
arthurvi / ItemWrapper.jsx
Created October 5, 2020 09:32
ItemWrapper.jsx
View ItemWrapper.jsx
function ItemWrapper({ item, setItems }) {
const handleChange = React.useCallback(
function handleChange(value) { ... },
[item, setItems]
);
const handleSave = React.useCallback(
async function handleSave() {
// set isSaving to true
await save(item);
View !!-boolean-double-negation-double-bang.md

Boolean() or !! (double bang, double negation)?

What's the best way to answer the question "true or false?" in JavaScript

JavaScript does not bother you too much with types (at first), which is both a blessing and a cure. But we all know the Boolean type. Boolean variables can either be true or false. Yes or no.

Every value in JavaScript can be translated into a boolean, true or false. Values that translate to true are truthy, values that translate to false are falsy. Simple.

This is about two ways to make that translation.

@arthurvi
arthurvi / 1-package.json
Last active August 2, 2016 14:15
Seneca-joi issue
View 1-package.json
{
"name": "seneca-joi-test",
"version": "1.0.0",
"description": "Replicate issue with seneca-joi",
"main": "server.js",
"author": "Planl",
"scripts": {
"start": "node server.js"
},
"dependencies": {