Project all 1 written

server.jsx

1
2
3
4
5
6
7import { renderToString } from 'react-dom/server';
import { Shelf } from './Shelf.jsx';
import { books } from './books.js';

export function page() {
  return renderToString(<Shelf initialBooks={books} />);
}

Shelf.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19import { useState } from 'react';
import { AddBook } from './AddBook.jsx';
import { BookList } from './BookList.jsx';
import { filterBooks } from './books.js';

export function Shelf({ initialBooks, save }) {
  const [query, setQuery] = useState('');
  return (
    <main>
      <h1>Reading list</h1>
      <label>
        Filter <input value={query} onChange={(event) => setQuery(event.target.value)} />
      </label>
      <AddBook initialBooks={initialBooks} save={save}>
        {(shown) => <BookList books={filterBooks(shown, query)} />}
      </AddBook>
    </main>
  );
}

BookList.jsx

1
2
3
4
5
6
7
8
9
10export function BookList({ books }) {
  if (books.length === 0) return <p>No books match.</p>;
  return (
    <ul>
      {books.map((book) => (
        <li key={book.id}>{`${book.title} by ${book.author}${book.saving ? ' (saving)' : ''}`}</li>
      ))}
    </ul>
  );
}

AddBook.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37import { useActionState, useOptimistic } from 'react';
import { useFormStatus } from 'react-dom';
import { makeBook, saveBook } from './books.js';

function Submit() {
  const { pending } = useFormStatus();
  return <button>{pending ? 'Saving...' : 'Add'}</button>;
}

export function AddBook({ initialBooks, save = saveBook, children }) {
  const [books, formAction] = useActionState(async (current, formData) => {
    const title = String(formData.get('title')).trim();
    if (!title) return current;
    const book = makeBook(title, String(formData.get('author')));
    addOptimistic(book);
    return [...current, await save(book)];
  }, initialBooks);
  const [shown, addOptimistic] = useOptimistic(books, (current, book) => [
    ...current,
    { ...book, saving: true },
  ]);

  return (
    <>
      {children(shown)}
      <form action={formAction}>
        <label>
          Title <input name="title" />
        </label>
        <label>
          Author <input name="author" />
        </label>
        <Submit />
      </form>
    </>
  );
}

books.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29export const books = [
  { id: 'dune', title: 'Dune', author: 'Frank Herbert', read: true },
  { id: 'emma', title: 'Emma', author: 'Jane Austen', read: false },
  { id: 'kindred', title: 'Kindred', author: 'Octavia E. Butler', read: false },
];

export function makeBook(title, author) {
  const name = title.trim();
  return {
    id: name.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
    title: name,
    author: author.trim() || 'Unknown',
    read: false,
  };
}

export function filterBooks(list, query) {
  const wanted = query.trim().toLowerCase();
  if (!wanted) return list;
  return list.filter(
    (book) => book.title.toLowerCase().includes(wanted) || book.author.toLowerCase().includes(wanted),
  );
}

// Stands in for a server: it answers a moment later with the book it was sent.
export async function saveBook(book) {
  await Promise.resolve();
  return book;
}

render.jsx

1
2
3
4
5
6
7
8
9import { page } from './server.jsx';

const html = page();
const end = html.indexOf('<form');
console.log(html.slice(0, end));

check('the page, up to the form', html.slice(0, end), '<main><h1>Reading list</h1><label>Filter <input value=""/></label><ul><li>Dune by Frank Herbert</li><li>Emma by Jane Austen</li><li>Kindred by Octavia E. Butler</li></ul>');
check('three inputs: the filter, the title and the author', (html.match(/<input/g) || []).length, 3);
check('and a button to add', html.includes('<button>Add</button>'), true);

client.jsx

1
2
3
4
5
6
7
8import { hydrateRoot } from 'react-dom/client';
import { Shelf } from './Shelf.jsx';
import { books, saveBook } from './books.js';

// On a real page: start(document.getElementById('root'))
export function start(container, save = saveBook) {
  return hydrateRoot(container, <Shelf initialBooks={books} save={save} />);
}

browser.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56import { act } from 'react';
import { page } from './server.jsx';
import { start } from './client.jsx';

function type(input, text) {
  const set = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
  set.call(input, text);
  input.dispatchEvent(new Event('input', { bubbles: true }));
}

const list = () => stage.querySelector('ul').innerHTML;
const names = () => Array.from(stage.querySelectorAll('li')).map((li) => li.textContent);

let release;
const save = (book) => new Promise((resolve) => (release = () => resolve(book)));

stage.innerHTML = page();
const before = stage.querySelector('ul');
const filter = stage.querySelector('input');

let root;
await act(async () => {
  root = start(stage, save);
});
const hydrated = stage.querySelector('ul') === before;
console.log('1', list());

await act(async () => type(filter, 'jane'));
const found = names();
console.log('2', list());
await act(async () => type(filter, ''));
const all = names();
console.log('3', list());

const [title, author] = stage.querySelectorAll('form input');
title.value = 'Beloved';
author.value = 'Toni Morrison';
await act(async () => stage.querySelector('form').requestSubmit());
const saving = names();
const busy = stage.querySelector('button').textContent;
console.log('4', list(), busy);

await act(async () => release());
const saved = names();
console.log('5', list(), stage.querySelector('button').textContent);

check('hydration kept the list from the server', hydrated, true);
check('typing "jane" leaves Emma', found, ['Emma by Jane Austen']);
check('clearing the filter brings all three back', all.length, 3);
check('the new book is there at once, marked saving', saving.at(-1), 'Beloved by Toni Morrison (saving)');
check('and the button says the form is busy', busy, 'Saving...');
check('once saved, the mark is gone', saved.at(-1), 'Beloved by Toni Morrison');
check('and the list has four books', saved.length, 4);
await act(async () => type(filter, 'toni'));
check('the filter finds the new book too', names(), ['Beloved by Toni Morrison']);
await act(async () => root.unmount());