Fetching Data with UmaiJS

/** @jsx m */

import { m, mount, redraw } from "umai";

// Utility function to debounce inputs
function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

function sleep(ms) {
  return new Promise((res) => {
    setTimeout(res, ms);
  });
}

async function getRandomUsers() {
  // Simulate network delay
  await sleep(State.delay);

  // Fetch random users from the Random User API
  const response = await fetch("https://randomuser.me/api/?results=5");

  if (!response.ok) {
    throw new Error("Network response was not ok");
  }

  const data = await response.json();

  return data.results.map((user, index) => ({
    id: index + 1,
    name: `${user.name.first} ${user.name.last}`,
    email: user.email,
    picture: user.picture.medium,
  }));
}

let State = {
  users: [],
  delay: 200,
  loading: false,
  error: null,
};

function saveUsers(users) {
  State.users = users;
}

function clearUsers() {
  State.users = [];
  redraw();
}

async function fetchUsers(node) {
  State.loading = true;
  State.error = null;
  redraw();

  clearUsers();
  try {
    let users = await getRandomUsers();
    saveUsers(users);
  } catch (error) {
    console.error("Failed to fetch users:", error);
    State.error = "Failed to fetch users. Please try again.";
  } finally {
    State.loading = false;
    redraw();
  }
}

// User item component for clarity and reuse
const UserItem = ({ user }) => (
  <li class="user-item">
    <img src={user.picture} alt={user.name} class="user-avatar" />
    <div class="user-details">
      <p><strong>{user.name}</strong></p>
      <p>{user.email}</p>
    </div>
  </li>
);

const Users = () => {
  return (
    <div>
      {State.loading && <Loader />}
      {State.error && <p class="error-message">{State.error}</p>}
      {!State.loading && State.users.length === 0 && (
        <p class="no-users-message">No users available. Click "Load Users" to fetch.</p>
      )}
      <ul aria-live="polite" class="user-list">
        {State.users.map((user) => (
          <UserItem user={user} key={user.id} />
        ))}
      </ul>
    </div>
  );
};

const Timer = () => {
  const handleInput = debounce((e) => {
    State.delay = parseInt(e.target.value, 10) || 0;
    redraw();
  }, 300);

  return (
    <div class="timer">
      <label for="delay-input">Delay fetch for: </label>
      <input
        type="number"
        id="delay-input"
        value={State.delay}
        oninput={handleInput}
        aria-label="Fetch delay in milliseconds"
      />
      <span> ms</span>
    </div>
  );
};

const Loader = () => {
  return (
    <div class="loader">
      Loading...
    </div>
  );
};

function setup(node) {
  let btnLoader = node.querySelector("button");
  btnLoader.addEventListener("click", () => fetchUsers(node));
}

const App = () => (
  <div dom={setup}>
    <Timer />
    <button class="load-button">Load Users</button>
    <Users />
  </div>
);

export { App };


mount(document.body, App)

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.timer {
  margin-bottom: 20px;
}

label {
  margin-right: 10px;
}

input {
  width: 80px;
  padding: 5px;
  font-size: 14px;
}

.load-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.load-button:hover {
  background-color: #0056b3;
}

.loader {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}

.error-message {
  color: red;
  text-align: center;
  margin-bottom: 10px;
}

.no-users-message {
  text-align: center;
  margin-bottom: 20px;
}

.user-list {
  list-style: none;
  padding: 0;
}

.user-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.user-avatar {
  border-radius: 50%;
  margin-right: 15px;
}

.user-details p {
  margin: 0;
}