import {createManager} from 'tinytick';
const manager = createManager().start();

const ping = async (url) => await fetch(url);
manager.setTask('ping', ping);

const taskRunId = manager.scheduleTaskRun(
  'ping',
  'https://example.com',
);

console.log(manager.getTaskIds());
// -> ['ping']
console.log(manager.getTaskRunInfo(taskRunId));
// -> {taskId: 'ping', arg: 'https://example.com', ...}

const listenerId1 = manager.addTaskRunRunningListener(
  'ping',
  null,
  () => console.log('A ping started'),
);
const listenerId2 = manager.addTaskRunFailedListener(
  'ping',
  null,
  () => console.log('A ping failed'),
);
// ...
manager.delListener(listenerId1);
manager.delListener(listenerId2);

manager.setTask(
  'ping',
  async (url, signal) => await fetch(url, {signal}),
  undefined,
  {maxDuration: 100}, // milliseconds
);

manager.setTask(
  'ping',
  async (url, signal) => await fetch(url, {signal}),
  undefined, // we'll explain this argument in a moment!
  {maxRetries: 3, retryDelay: '1000, 5000, 10000'},
);

manager.setCategory('network', {
  maxDuration: 100,
  maxRetries: 3,
  retryDelay: '1000, 5000, 10000',
});
manager.setTask('ping', ping, 'network', {
  maxRetries: 5,
});

import {
  Provider,
  useCreateManager,
  useScheduleTaskRunCallback,
  useSetTask,
} from 'tinytick/ui-react';

const App = () => (
  <Provider manager={useCreateManager(createManager)}>
    <Panel />
  </Provider>
);

const Panel = () => {
  useSetTask(
    'ping',
    async () => await fetch('https://example.org'),
  );
  return <Button />;
};

const Button = () => {
  const callback = useScheduleTaskRunCallback('ping');
  return <button onClick={callback}>Ping</button>;
};

manager.scheduleTaskRun('fetchParents');
// -> 'Fetching https://api.org/parents?page=1'
// -> 'Storing parent A'
// -> 'Storing parent B'
// -> 'Fetching https://api.org/children?parentId=A&page=1'
// -> 'Fetching https://api.org/children?parentId=B&page=1'
// -> 'Fetching https://api.org/parents?page=2'