Improve documentation with sample application

[izaxon]

import * as signalR from "@microsoft/signalr";
import React, { useEffect, useState } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const [items, setItems] = useState([]);
  const [text, setText] = useState("");

  useEffect(() => {
    connectSignalR();
    fetchItems();
  }, []);

  const fetchItems = () => {
    fetch("https://jsonbase.izaxon.com/app1/items", {
      method: "GET",
      headers: { Origin: "https://react-ts-k3qvor.stackblitz.io" }
    })
      .then(response => response.json())
      .then(data => {
        try {
          setItems(data);
        } catch {}
        // console.log(items);
      })
      .catch(() => {
        // setItems([]);
      });
  };

  const addItem = () => {
    fetch("https://jsonbase.izaxon.com/app1/items", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify([
        {
          name: text + " (" + new Date().toLocaleString() + ")",
          state: "new"
        },
        ...items
      ])
    });
    setText("");
  };

  const clearItems = () => {
    fetch("https://jsonbase.izaxon.com/app1/items", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify([])
    });
  };

  const connectSignalR = () => {
    const connection = new signalR.HubConnectionBuilder()
      .withUrl("https://jsonbase.izaxon.com/apihub?path=%2Fapp1%2Fitems")
      .configureLogging(signalR.LogLevel.Error)
      .build();

    async function start() {
      try {
        await connection.start();
      } catch (err) {
        // console.log(err);
        setTimeout(start, 5000);
      }
    }

    connection.onclose(start);

    // Start the connection.
    start();

    connection.on("SendUpdated", path => {
      fetchItems();
    });
  };

  return (
    <div>
      <h1>Simple test of jsonbase :-)</h1>
      <p>Click button to add a new item!</p>
      <input value={text} onChange={e => setText(e.target.value)} />
      <button disabled={text.trim().length === 0} onClick={addItem}>
        Add item
      </button>
      <h3>Items</h3>
      <div>
        {items.map((item, i) => (
          <p key={i}>{item.name}</p>
        ))}
      </div>
      <button disabled={items.length === 0} onClick={clearItems}>
        Clear items
      </button>
    </div>
  );
};

render(<App />, document.getElementById("root"));

See https://react-ts-jsonbase.stackblitz.io