Skip to content

Instantly share code, notes, and snippets.

@arthurvi
arthurvi / dataset.js
Created October 5, 2020 09:37
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
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
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
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
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
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);

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
{
"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": {