feat: add autostart to use-recoil-task

salvoravida · Aug 15, 2022 · 8e8c958 · 8e8c958
1 parent 1b68d7f
commit 8e8c958
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,8 @@
       "toolkit:watch": "yarn workspace recoil-toolkit run watch",
       "toolkit:test": "yarn workspace recoil-toolkit run test",
       "toolkit:test:coverage": "yarn workspace recoil-toolkit run test:coverage",
-      "demo-main:start": "yarn workspace recoil-toolkit-demo-main start"
+      "demo-main:start": "yarn workspace recoil-toolkit-demo-main start",
+      "outdated": "yarn outdated"
    },
    "devDependencies": {
       "@typescript-eslint/eslint-plugin": "^5.33.0",

diff --git a/packages/demo-main/src/comps/TodoList.tsx b/packages/demo-main/src/comps/TodoList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Box, Button, Heading, Skeleton, Stack, Text } from '@chakra-ui/react';
 import { useIsLoading } from 'recoil-toolkit';
 import { useTodoList } from '../recoil';
@@ -7,9 +7,7 @@ import { TodoItemEdit } from './TodoItemEdit';
 export function Todolist() {
    const { loading, data, execute: refresh } = useTodoList();
    const isAdding = useIsLoading('addItemTask');
-   useEffect(() => {
-      refresh();
-   }, [refresh]);
+
    return (
       <Box>
          <Box d={'flex'} padding={'20px 0'} alignItems={'center'}>

diff --git a/packages/demo-main/src/recoil/hooks.ts b/packages/demo-main/src/recoil/hooks.ts
@@ -15,6 +15,7 @@ export const useItemLocked = (id: number) => useRecoilValue(itemLocked(id));
 export const useTodoList = () =>
    useRecoilTask(getTodoListTask, [], {
       dataSelector: todoList,
+      autoStart: []
    });
 
 export const useAddItemTask = () =>

diff --git a/packages/recoil-toolkit/src/hooks/useRecoilTask.ts b/packages/recoil-toolkit/src/hooks/useRecoilTask.ts
@@ -1,5 +1,5 @@
 import { useRecoilCallback, useRecoilValue } from 'recoil';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { uniqueId, hide, show } from '../_core';
 import {
    lastTaskByKey,
@@ -15,10 +15,10 @@ import { TaskOptions, TaskStatus, RecoilTaskInterface } from '../types';
 export function useRecoilTask<Args extends ReadonlyArray<unknown>, Return = void, Data = unknown>(
    taskCreator: (a: RecoilTaskInterface) => (...args: Args) => Return,
    deps?: ReadonlyArray<unknown>,
-   options?: TaskOptions<Data>,
+   options?: TaskOptions<Data, Args>,
 ) {
    const optionsRef = useRef(options || {}); //options freeze
-   const { key, errorStack, loaderStack, exclusive, dataSelector } = optionsRef.current;
+   const { key, errorStack, loaderStack, exclusive, dataSelector, autoStart } = optionsRef.current;
 
    if (exclusive && !key) {
       throw 'Exclusive tasks must have a key!';
@@ -57,6 +57,12 @@ export function useRecoilTask<Args extends ReadonlyArray<unknown>, Return = void
       deps,
    );
 
+   useEffect(() => {
+      if (autoStart) {
+         execute(...autoStart);
+      }
+   }, [execute]);
+
    return {
       loading: task?.status === TaskStatus.Running,
       execute,

diff --git a/packages/recoil-toolkit/src/types.ts b/packages/recoil-toolkit/src/types.ts
@@ -23,12 +23,13 @@ export enum TaskStatus {
    Done,
 }
 
-export type TaskOptions<Data = unknown> = {
+export type TaskOptions<Data = unknown, Args = unknown> = {
    key?: string;
    errorStack?: boolean;
    loaderStack?: string | boolean;
    exclusive?: boolean;
    dataSelector?: RecoilValue<Data>;
+   autoStart?: Args;
 };
 
 export type Task<Data = unknown, Error = unknown> = {