fresh-project.tsx

import { useEffect, useRef, useState } from "preact/hooks";

const ENDPOINT = "https://whole-cat-70.deno.dev/";
const COLLECTION = "dil";

function getEndpoint() {
  return `${ENDPOINT}${COLLECTION}`;
}

async function getFromServer(setItems: (items: string[]) => void) {
  const endpoint = getEndpoint();

  const response = await fetch(endpoint);
  const items = await response.json();

  setItems(items);
}

async function addItem(
  items: string[],
  setItems: (items: string[]) => void,
  item: string,
) {
  const endpoint = `${getEndpoint()}/add/${encodeURIComponent(item)}`;

  await fetch(endpoint);

  setItems([...items, item]);
}

async function clearItems(
  setItems: (items: string[]) => void,
) {
  const endpoint = `${getEndpoint()}/clear`;

  await fetch(endpoint);

  setItems([]);
}

export default function ListBox() {
  const [items, setItems] = useState<string[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    getFromServer(setItems);
  }, []);

  return (
    <div class="flex flex-col gap-8 py-6">
      <h2 class="text-2xl">Koleksiyon: {COLLECTION}</h2>
      <ul class="list-decimal">
        {items.map((item) => <li>{item}</li>)}
      </ul>
      <div class="flex flex-row gap-4">
        <form
          onSubmit={(e) => {
            e.preventDefault();

            addItem(items, setItems, inputRef.current!.value);
            inputRef.current!.value = "";
          }}
        >
          <input
            ref={inputRef}
            type="text"
            placeholder="Add item"
            class="px-4 py-2 border rounded-md"
          />
          <button
            type="submit"
            class="px-4 py-2 border bg-green-200 rounded-md"
          >
            Add
          </button>
          <button
            type="reset"
            class="px-4 py-2 border bg-green-200 rounded-md"
            onClick={() => {
              clearItems(setItems);
            }}
          >
            Clear
          </button>
        </form>
      </div>
    </div>
  );
}

hizli-api.js

import hizliApi from "npm:eser/hizli-api";

hizliApi({
  isim: "defterdar",

  nesneler: ["dil", "runtime", "browser"],
});