import { writable } from 'svelte/store';

export const promises = writable([]);
export const ready = writable(false);
let waitAll = new Promise((resolve) => {});

waitAll.then(done => ready.set(true));

// как подождать, пока все конструкторы компонентов добавят свои фетч промисы ?
promises.subscribe(v => {
  waitAll = Promise.all(v);
});

import React from 'react';
import { useState, useEffect, useCallback } from 'react';

interface Client {
  id: number;
  last_name: string;
  first_name: string;
  second_name: string;
  email: string;
}

const useClients = () => {
  const [ clients, setClients ] = useState<Client[]>([]);

  useEffect(() => {
    fetch('/api/clients/')
      .then(res => res.json())
      .then(setClients);
  }, []);

  return [ clients, setClients ] as const;
}

interface ClientViewProps {
  c: Client;
  updater: (id: number) => void;
};

const ClientView = ({c, updater}: ClientViewProps) => {
  return (
    <tr className="client" onClick={() => updater(c.id)}>
      <td>{c.last_name}</td>
      <td>{c.first_name}</td>
      <td>{c.second_name}</td>
      <td>{c.email}</td>
    </tr>
  );
};

function App() {
  const [ clients, setClients ] = useClients();
  const updater = useCallback((id) => {
    const newClients = clients.map((c: Client) => {
      return c.id === id ? { ...c, first_name: c.first_name + 'add' } : c;
    });
    setClients(newClients);
  }, [ clients, setClients ]);
  return (
    <>
      <table>
        <thead>
          <tr>
            <th>Фамилия</th>
            <th>Имя</th>
            <th>Отчество</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {clients.map((c: Client) => (
            <ClientView
              c={c}
              updater={updater}
              key={c.id}
            />
          ))}
        </tbody>
      </table>
    </>
  );
}

export default App;