gaperton

<svg>
    <section x="50%" y="50%">
        <section width="95%" height="95%">
            <g transform="rotate(30)">
                <line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
            </g>
            <g transform="rotate(60)">
                <line x1="0" x2="0" y1="-50%" y2="-50%+10" fill="#A0A0A0"></line>
            </g>
            <g transform="rotate(90)">

gaperton

import React from 'react'
import { render, loop, Rotate } from './tools';

const App = () => (
    <svg>
        <section x="50%" y="50%">
            <section width="95%" height="95%">
            { loop( 1, 12, i =>
                <Mark angle={ i * 30 } length={10} />
            )}

gaperton

(()=>{
const DEPTH = 3;

function learn( word ){
    addStats( '^', word[ 0 ] );
    DEPTH > 2 && addStats( word[ 0 ], word[ 1 ] );

    for( let i = 2; i < DEPTH - 1; i++ ){
        addStats( word.substr( 0, i ), word[i] );    
    }

gaperton

class Statement {
    constructor( state ){
        this.state = state || [];
    }

    toString(){
        return this.state
                    .map( part => part.toString() )
                    .join( '\n' );
    }

gaperton

const PickUser = ({ selected, setSelected }) => {
    // Declare the local component's state.
    const [ editing, setEditing ] = useState( false );

    return (
        <div>
            { editing ?
                <EditUser selected={selected} setSelected={setSelected}
                          close={() => setEditing( false )}/>
            :

gaperton

export const EditUser = ({ selected, setSelected, close }) => {
    // Create the `filter` local state.
    const [ filter, setFilter ] = useState('');

    return (
        <div>
            <DelayedInput autoFocus
                value={ filter }
                onChange={ e => setFilter( e.target.value ) }
                placeholder="Start typing..."

gaperton

// npm install valuelink linked-controls --save-dev

// That's what you need to start.
import { useLink } from 'valuelink'

// Hooks used in DelayedInput, and the DelayedInput himself.
import { useBoundLink } from 'valuelink'
import { useThrottle, DelayedInput } from 'linked-controls'

// Hooks used in UsersList

gaperton

export function useSafeLink( initialState ){
    const $value = useLink( initialState ),
            isMounted = useIsMountedRef();
                
    const { set } = $value;
    $value.set = x => isMounted.current && set( x );
    return $value;
}

gaperton

export function useIsMountedRef(){
    // We need something similar to the plain mutable class member.
    const isMounted = useRef( true );
    
    // And, we need something similar to componentWillUnmount.
    useEffect( () => {
        // Whatever we return is a cleanup effect.
        return () => { // <- componentWillUnmount
            isMounted.current = false
        }

gaperton

const UsersList = ({ filter, $selected }) => {
    // $users can be modified by async function after the component is unmounted.
    // We have to do something to prevent an exception. Let's do it in this custom hook.
    const $users = useSafeLink([]);

    // It's useful to know if there's an I/O peding. Another custom hook.
    const ioComplete = useIO( async () => {
        // This thing can happen after unmount.
        $users.set( await fetchUsers( filter ) );
    }, [ filter ]);