add data selector to useRecoilTask

salvoravida · Jan 13, 2021 · 458b82b · 458b82b
1 parent f227d61
commit 458b82b
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 25 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
-node_modules
-temp
-*.log
-.vscode
-.idea
-build
+node_modules
+temp
+*.log
+.vscode
+.idea
+build
+packages/demo-main/src/react-app-env.d.ts
diff --git a/packages/demo-main/package.json b/packages/demo-main/package.json
@@ -1,6 +1,6 @@
 {
    "name": "recoil-toolkit-demo-main",
-   "version": "0.0.2",
+   "version": "0.0.3",
    "private": true,
    "dependencies": {
       "@chakra-ui/react": "^1.1.2",
@@ -18,7 +18,7 @@
       "react-dom": "^17.0.1",
       "react-scripts": "4.0.1",
       "recoil": "yarn:@salvoravida/recoil@^0.1.4",
-      "recoil-toolkit" : "^0.0.2"
+      "recoil-toolkit": "^0.0.3"
    },
    "devDependencies": {
       "typescript": "^4.1.3"

diff --git a/packages/demo-main/src/App.tsx b/packages/demo-main/src/App.tsx
@@ -11,7 +11,7 @@ function App() {
       <>
          <Box d={'flex'}>
             <Box padding={30} maxW={'1024px'} margin={'0 auto'} width={'100%'}>
-               <Heading fontSize="3xl" marginBottom={"5px"} textAlign={'center'}>
+               <Heading fontSize="3xl" marginBottom={'5px'} textAlign={'center'}>
                   Recoil Todolist CRUD Example
                </Heading>
                <Text textAlign={'center'}>Fake Api delay : 2.500 ms</Text>

diff --git a/packages/demo-main/src/recoil/hooks.ts b/packages/demo-main/src/recoil/hooks.ts
@@ -1,5 +1,4 @@
 import { useRecoilTask } from 'recoil-toolkit';
-import { Item } from '../server';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { itemLocked, itemStatus, todoList } from './atoms';
 import {
@@ -10,18 +9,14 @@ import {
    removeItemTask,
 } from './tasks';
 
-export const useGetTodoListTask = () => useRecoilTask(getTodoListTask, []);
-
-export const useTodoList = () => {
-   return {
-      ...useGetTodoListTask(),
-      data: useRecoilValue<Item[]>(todoList),
-   };
-};
-
 export const useItemStatus = (id: number) => useRecoilState(itemStatus(id));
 export const useItemLocked = (id: number) => useRecoilValue(itemLocked(id));
 
+export const useTodoList = () =>
+   useRecoilTask(getTodoListTask, [], {
+      dataSelector: todoList,
+   });
+
 export const useAddItemTask = () =>
    useRecoilTask(addItemTask, [], {
       loaderStack: 'addItemTask',

diff --git a/packages/recoil-toolkit/package.json b/packages/recoil-toolkit/package.json
@@ -1,6 +1,6 @@
 {
    "name": "recoil-toolkit",
-   "version": "0.0.2",
+   "version": "0.0.3",
    "description": "recoil-toolkit",
    "main": "./build/es5/index.js",
    "module": "./build/es6/index.js",

diff --git a/packages/recoil-toolkit/src/hooks/useRecoilTask.ts b/packages/recoil-toolkit/src/hooks/useRecoilTask.ts
@@ -5,13 +5,13 @@ import { lastTaskByKey, taskById, tasks, errorStack as errorStackAtom, loader }
 import { pushTask, updateTaskDone, updateTaskError, pushError } from '../updaters';
 import { TaskOptions, TaskStatus, RecoilTaskInterface } from '../types';
 
-export function useRecoilTask<Args extends ReadonlyArray<unknown>, Return>(
+export function useRecoilTask<Args extends ReadonlyArray<unknown>, Return, T>(
    taskCreator: (a: RecoilTaskInterface) => (...args: Args) => Return,
    deps?: ReadonlyArray<unknown>,
-   options?: TaskOptions,
+   options?: TaskOptions<T>,
 ) {
    const optionsRef = useRef(options || {}); //options freeze
-   const { key, errorStack, loaderStack, exclusive } = optionsRef.current;
+   const { key, errorStack, loaderStack, exclusive, dataSelector } = optionsRef.current;
 
    if (exclusive && !key) {
       throw 'Exclusive tasks must have a key!';
@@ -20,6 +20,8 @@ export function useRecoilTask<Args extends ReadonlyArray<unknown>, Return>(
    const taskId = useRef(0);
    const task = useRecoilValue(exclusive ? lastTaskByKey(key || '') : taskById(taskId.current));
 
+   const taskData: T = dataSelector ? useRecoilValue<T>(dataSelector) : task && task.data;
+
    const execute = useRecoilCallback(
       ({ set, snapshot, ...rest }: RecoilTaskInterface) => async (...args: Args) => {
          if (exclusive && key) {
@@ -49,7 +51,7 @@ export function useRecoilTask<Args extends ReadonlyArray<unknown>, Return>(
       loading: task && task.status === TaskStatus.Running,
       execute,
       error: task && task.error,
-      data: task && task.data,
+      data: taskData,
       success: task && task.status === TaskStatus.Done,
       taskId: taskId.current,
    };

diff --git a/packages/recoil-toolkit/src/types.ts b/packages/recoil-toolkit/src/types.ts
@@ -11,13 +11,14 @@ export enum TaskStatus {
    Done,
 }
 
-export type TaskOptions = {
+export type TaskOptions<T = unknown> = {
    key?: string;
    errorStack?: boolean;
    loaderStack?: string;
    exclusive?: boolean;
    startAuto?: boolean;
    startAutoArgs?: ReadonlyArray<unknown>;
+   dataSelector?: RecoilValue<T>;
 };
 
 export type Task = {