feat: use dataloader (#134)

* feat: use dataloader

* feat: drop use paginated dataloader

* feat: improve dataloader

Author: DorianMaliszewski

package.json

@@ -66,7 +66,7 @@
       "jest-localstorage-mock"
     ],
     "collectCoverageFrom": [
-      "packages/*/src/*.{js,jsx}"
+      "packages/*/src/**/*.{js,jsx}"
     ],
     "modulePathIgnorePatterns": [
       "locales"

packages/use-dataloader/.npmignore

@@ -0,0 +1,3 @@
+**/__tests__/**
+src
+!.npmignore

packages/use-dataloader/README.md

@@ -0,0 +1,137 @@
+# `@scaleway/use-dataloader`
+
+## Tiny hooks to help you manage asynchronous tasks
+
+- Lightweight
+- Easy to use
+- Easy to integrate with Axios, fetch, or any Promise-based tool
+
+## Install
+
+```bash
+$ yarn add @scaleway/use-dataloader
+```
+
+## How to use
+
+### Add DataLoaderProvider to your app
+
+Firstly you need to put the context at the top of your App.
+
+```js
+import { DataLoaderProvider } from '@scaleway-lib/use-dataloader'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <DataLoaderProvider>
+      <App />
+    </DataLoaderProvider>
+  </React.StrictMode>,
+  document.getElementById('root'),
+)
+```
+
+Now you can use `useDataLoader` and `useDataLoaderContext` in your App
+
+### useDataLoader
+
+```js
+import { useDataLoader } from '@scaleway-lib/use-dataloader'
+
+const fakePromise = () =>
+  new Promise(resolve => setTimeout(resolve('test'), 1000))
+
+function MyComponent() {
+  // Use a key if you want to persist data in the DataLoaderProvider cache
+  const { data, isLoading, isSuccess, isError, error } = useDataLoader(
+    'cache-key',
+    fakePromise,
+  )
+
+  // Will be true during the promise
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  // Will be true when the promise is resolved
+  if (isSuccess) {
+    // Will display "test" in the the div
+    return <div>{data}</div>
+  }
+
+  // Will be false when the promise is rejected
+  if (isError) {
+    // Will display the error in the the div
+    return <div>{error}</div>
+  }
+}
+
+export default MyComponent
+```
+
+### useDataLoaderContext
+
+```js
+import { useDataLoaderContext } from '@scaleway-lib/use-dataloader'
+
+const fakePromise = () =>
+  new Promise(resolve => {
+    setTimeout(resolve('test'), 1000):
+  })
+
+
+function MyComponentThatUseDataLoader({key}) {
+  // Use a key if you want to persist data in the DataLoaderProvider cache
+  const { data, isLoading, isSuccess, isError, error } = useDataLoader(
+    key,
+    fakePromise,
+  )
+
+  // Will be true during the promise
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  // Will be true when the promise is resolved
+  if (isSuccess) {
+    // Will display "test" in the the div
+    return <div>{data}</div>
+  }
+
+  // Will be false when the promise is rejected
+  if (isError) {
+    // Will display the error in the the div
+    return <div>{error}</div>
+  }
+}
+
+
+function MyComponent() {
+  const { reloadAll, reload } = useDataLoaderContext();
+
+  const handleReload = (keyToReload) => () => {
+      await reload(keyToReload) // Execute the method
+    }
+  }
+
+  const handleReloadAll = () => {
+      await reloadAll()
+    }
+  }
+
+  return (
+    <div>
+      <MyComponentThatUseDataLoader key="test" />
+      <MyComponentThatUseDataLoader key="test-2" />
+      <button onClick={handleReload("test")}>Reload first</button>
+      <button onClick={handleReload("test-2")}>Reload second</button>
+      <button onClick={handleReloadAll}>Reload all</button>
+    </div>
+  )
+}
+
+export default MyComponent
+```

packages/use-dataloader/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@scaleway/use-dataloader",
+  "version": "1.0.0",
+  "description": "A small hook to handle api requests",
+  "keywords": [
+    "react",
+    "reactjs",
+    "hooks",
+    "dataloader"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/module.js",
+  "browser": {
+    "dist/index.js": "./dist/index.browser.js",
+    "dist/module.js": "./dist/module.browser.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scaleway/scaleway-lib",
+    "directory": "packages/use-dataloader"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/react-hooks": "^5.1.1",
+    "react": "^17.0.1"
+  }
+}

packages/use-dataloader/src/DataLoaderProvider.js

@@ -0,0 +1,159 @@
+import PropTypes from 'prop-types'
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+} from 'react'
+
+export const DataLoaderContext = createContext()
+
+const DataLoaderProvider = ({ children }) => {
+  const cachedData = useRef({})
+  const reloads = useRef({})
+
+  const setCachedData = useCallback(compute => {
+    if (typeof compute === 'function') {
+      cachedData.current = compute(cachedData.current)
+    } else {
+      cachedData.current = compute
+    }
+  }, [])
+
+  const setReloads = useCallback(compute => {
+    if (typeof compute === 'function') {
+      reloads.current = compute(reloads.current)
+    } else {
+      reloads.current = compute
+    }
+  }, [])
+
+  const addCachedData = useCallback(
+    (key, newData) => {
+      if (key && typeof key === 'string' && newData) {
+        setCachedData(actualCachedData => ({
+          ...actualCachedData,
+          [key]: newData,
+        }))
+      }
+    },
+    [setCachedData],
+  )
+
+  const addReload = useCallback(
+    (key, method) => {
+      if (key && typeof key === 'string' && method) {
+        setReloads(actualReloads => ({
+          ...actualReloads,
+          [key]: method,
+        }))
+      }
+    },
+    [setReloads],
+  )
+
+  const clearReload = useCallback(
+    key => {
+      if (key && typeof key === 'string') {
+        setReloads(actualReloads => {
+          const tmp = actualReloads
+          delete tmp[key]
+
+          return tmp
+        })
+      }
+    },
+    [setReloads],
+  )
+
+  const clearAllReloads = useCallback(() => {
+    setReloads({})
+  }, [setReloads])
+
+  const clearCachedData = useCallback(
+    key => {
+      if (key && typeof key === 'string') {
+        setCachedData(actualCachedData => {
+          const tmp = actualCachedData
+          delete tmp[key]
+
+          return tmp
+        })
+      }
+    },
+    [setCachedData],
+  )
+  const clearAllCachedData = useCallback(() => {
+    setCachedData({})
+  }, [setCachedData])
+
+  const reload = useCallback(async key => {
+    if (key && typeof key === 'string') {
+      await (reloads.current[key] && reloads.current[key]())
+    }
+  }, [])
+
+  const reloadAll = useCallback(async () => {
+    await Promise.all(
+      Object.values(reloads.current).map(reloadFn => reloadFn()),
+    )
+  }, [])
+
+  const getCachedData = useCallback(key => {
+    if (key) {
+      return cachedData.current[key] || undefined
+    }
+
+    return cachedData.current
+  }, [])
+
+  const getReloads = useCallback(key => {
+    if (key) {
+      return reloads.current[key] || undefined
+    }
+
+    return reloads.current
+  }, [])
+
+  const value = useMemo(
+    () => ({
+      addCachedData,
+      clearCachedData,
+      getCachedData,
+      reload,
+      getReloads,
+      addReload,
+      clearReload,
+      clearAllCachedData,
+      clearAllReloads,
+      reloadAll,
+    }),
+    [
+      addCachedData,
+      clearReload,
+      clearCachedData,
+      getCachedData,
+      getReloads,
+      addReload,
+      reload,
+      clearAllCachedData,
+      clearAllReloads,
+      reloadAll,
+    ],
+  )
+
+  return (
+    <DataLoaderContext.Provider value={value}>
+      {children}
+    </DataLoaderContext.Provider>
+  )
+}
+
+DataLoaderProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export const useDataLoaderContext = () => useContext(DataLoaderContext)
+
+export default DataLoaderProvider