# Use computed

import { component$, useSignal, useComputed$ } from "@builder.io/qwik";
import { type DocumentHead, routeLoader$ } from "@builder.io/qwik-city";

interface UserData {
  first_name: string;
  last_name: string;
  email: string;
}

export const useGetUsers = routeLoader$(async () => {
  const resp = await fetch("https://reqres.in/api/users");
  const json = await resp.json();
  return json.data as UserData[];
})

const User = component$(({ user }: { user: UserData }) => {
  return (
    <div>
      {user.first_name} {user.last_name} {user.email}
    </div>
  );
});

export default component$(() => {
  const filter = useSignal('');
  const users = useGetUsers();

  //   const filteredUsers = useSignal<UserData[]>([]);
  // useTask$(({ track }) => {
  //   track(() => users.value && store.filter);
  //   filteredUsers.value =
  //     users.value?.filter(
  //       (user) =>
  //         user.first_name.includes(store.filter) ||
  //         user.last_name.includes(store.filter) ||
  //         user.email.includes(store.filter)
  //     ) ?? [];
  // });
  const filteredUsers = useComputed$(() => {
    return users.value?.filter((user) =>
      user.first_name.includes(filter.value) ||
      user.last_name.includes(filter.value) ||
      user.email.includes(filter.value)
    );
  });

  return (
    <div>
      <h1>Qwik</h1>

      <input
        type="text"
        value={filter.value}
        onInput$={(e) => {
          filter.value = (e.target as HTMLInputElement).value;
        }}
      />

      <div>Filter: {filter.value}</div>

      {filteredUsers.value?.map((user) => (
        <User key={user.email} user={user} />
      ))}
    </div>
  );
});

---

reaction(() => abc, updateMonoco)
useTask$(({track}) => {
  track(() => abc);
  updateMonoco();
});


////
when(() => abc, updateMonoco)
useTask$(({track}) => {
  if (track(() => abc)) {
    updateMonoco();    
  }
});


///
autorun(() => [abc, updateMonoco]);
useTask$(({track}) => {
  track(() => [abc, updateMonoco]);
});
// ?????
useTask$.track$(() => [abc, updateMonoco])  

useTask$(() => [abc, updateMonoco], {
  autoTrack: true,
})