chore: controlled/uncontrolled cleanup

Author: simoneb

examples/.eslintrc

@@ -10,8 +10,8 @@
     "useTokenPagination": true,
     "Output": true,
     "Source": true,
-    "SimpleDeclarative": true,
-    "SimpleImperative": true,
-    "InternalState": true
+    "ControlledDeclarative": true,
+    "ControlledImperative": true,
+    "Uncontrolled": true
   }
 }

examples/components/SimpleDeclarative.js …ples/components/ControlledDeclarative.jsexamples/components/SimpleDeclarative.js renamed to examples/components/ControlledDeclarative.js examples/components/SimpleDeclarative.js renamed to examples/components/ControlledDeclarative.js

@@ -1,16 +1,18 @@
 const { useState, useEffect } = React
 
-function SimpleDeclarative() {
+function ControlledDeclarative() {
   const [{ pageNumber, pageSize }, setPagination] = useState({
     pageNumber: 1,
     pageSize: 3,
   })
   const { currentToken, useUpdateToken } = useTokenPagination(pageNumber)
-
+  const [loading, setLoading] = useState(false)
   const [data, setData] = useState()
 
   useEffect(() => {
     async function fetchData() {
+      setLoading(true)
+
       const params = new URLSearchParams({ pageSize })
 
       if (currentToken) {
@@ -21,6 +23,7 @@ function SimpleDeclarative() {
       const data = await res.json()
 
       setData(data)
+      setLoading(false)
     }
 
     fetchData()
@@ -45,9 +48,9 @@ function SimpleDeclarative() {
       pageSize={pageSize}
       changePageSize={changePageSize}
       previousPage={previousPage}
-      nextPage={nextPage}
+      nextPage={!loading && nextPage}
     />
   )
 }
 
-SimpleDeclarative.propTypes = {}
+ControlledDeclarative.propTypes = {}

examples/components/SimpleImperative.js …mples/components/ControlledImperative.jsexamples/components/SimpleImperative.js renamed to examples/components/ControlledImperative.js examples/components/SimpleImperative.js renamed to examples/components/ControlledImperative.js

@@ -1,16 +1,18 @@
 const { useState, useEffect } = React
 
-function SimpleImperative() {
+function ControlledImperative() {
   const [{ pageNumber, pageSize }, setPagination] = useState({
     pageNumber: 1,
     pageSize: 3,
   })
   const { currentToken, updateToken } = useTokenPagination(pageNumber)
-
+  const [loading, setLoading] = useState(false)
   const [data, setData] = useState()
 
   useEffect(() => {
     async function fetchData() {
+      setLoading(true)
+
       const params = new URLSearchParams({ pageSize })
 
       if (currentToken) {
@@ -23,6 +25,7 @@ function SimpleImperative() {
       updateToken(data.nextPage)
 
       setData(data)
+      setLoading(false)
     }
 
     fetchData()
@@ -45,9 +48,9 @@ function SimpleImperative() {
       pageSize={pageSize}
       changePageSize={changePageSize}
       previousPage={previousPage}
-      nextPage={nextPage}
+      nextPage={!loading && nextPage}
     />
   )
 }
 
-SimpleImperative.propTypes = {}
+ControlledImperative.propTypes = {}

examples/components/Example.js

@@ -1,10 +1,11 @@
-const choices = [SimpleDeclarative, SimpleImperative, InternalState].reduce(
-  (acc, c) => ({ ...acc, [c.name]: c }),
-  {}
-)
+const choices = [
+  ControlledDeclarative,
+  ControlledImperative,
+  Uncontrolled,
+].reduce((acc, c) => ({ ...acc, [c.name]: c }), {})
 
 function Example() {
-  const [choice, setChoice] = React.useState(SimpleDeclarative.name)
+  const [choice, setChoice] = React.useState(ControlledDeclarative.name)
 
   const Component = choices[choice]
 

examples/components/Output.js

@@ -25,7 +25,7 @@ function Output({
         {'  '}
         {pageNumber}
         {'  '}
-        <button disabled={!data?.nextPage} onClick={nextPage}>
+        <button disabled={!nextPage || !data?.nextPage} onClick={nextPage}>
           &gt;&gt;
         </button>
       </div>
@@ -41,5 +41,5 @@ Output.propTypes = {
   pageSize: T.number.isRequired,
   changePageSize: T.func.isRequired,
   previousPage: T.func.isRequired,
-  nextPage: T.func.isRequired,
+  nextPage: T.func,
 }

examples/components/InternalState.js examples/components/Uncontrolled.jsexamples/components/InternalState.js renamed to examples/components/Uncontrolled.js

@@ -1,6 +1,6 @@
 const { useState, useEffect } = React
 
-function InternalState() {
+function Uncontrolled() {
   const {
     currentToken,
     useUpdateToken,
@@ -9,11 +9,13 @@ function InternalState() {
     pageNumber,
     pageSize,
   } = useTokenPagination({ defaultPageNumber: 1, defaultPageSize: 5 })
-
+  const [loading, setLoading] = useState(false)
   const [data, setData] = useState()
 
   useEffect(() => {
     async function fetchData() {
+      setLoading(true)
+
       const params = new URLSearchParams({ pageSize })
 
       if (currentToken) {
@@ -24,6 +26,7 @@ function InternalState() {
       const data = await res.json()
 
       setData(data)
+      setLoading(false)
     }
 
     fetchData()
@@ -48,9 +51,9 @@ function InternalState() {
       pageSize={pageSize}
       changePageSize={handleChangePageSize}
       previousPage={previousPage}
-      nextPage={nextPage}
+      nextPage={!loading && nextPage}
     />
   )
 }
 
-InternalState.propTypes = {}
+Uncontrolled.propTypes = {}

examples/index.html

@@ -10,9 +10,12 @@
     <script src="umd.js"></script>
     <script type="text/babel" src="components/Output.js"></script>
     <script type="text/babel" src="components/Source.js"></script>
-    <script type="text/babel" src="components/SimpleDeclarative.js"></script>
-    <script type="text/babel" src="components/SimpleImperative.js"></script>
-    <script type="text/babel" src="components/InternalState.js"></script>
+    <script
+      type="text/babel"
+      src="components/ControlledDeclarative.js"
+    ></script>
+    <script type="text/babel" src="components/ControlledImperative.js"></script>
+    <script type="text/babel" src="components/Uncontrolled.js"></script>
     <script type="text/babel" src="components/Example.js"></script>
   </head>
   <body>

examples/server.js

@@ -28,7 +28,9 @@ function api(req, res) {
         : null,
   }
 
-  res.end(JSON.stringify(result))
+  setTimeout(() => {
+    res.end(JSON.stringify(result))
+  }, 1000)
 }
 
 function static(req, res) {

package.json

@@ -13,17 +13,18 @@
     "src/"
   ],
   "scripts": {
-    "dev": "npm run build:watch",
     "clean": "rimraf cjs es umd",
-    "prepare": "npm run clean && npm run build",
+    "prepare": "run-s clean build",
     "build": "rollup -c",
     "build:watch": "rollup -c -w",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "release": "dotenv -e .token release-it --",
     "toc": "markdown-toc README.md -i",
     "test": "jest",
-    "example": "node examples/server.js"
+    "examples": "run-p examples:*",
+    "examples:server": "nodemon examples/server.js",
+    "examples:client": "npm run build:watch"
   },
   "keywords": [
     "react",
@@ -52,6 +53,8 @@
     "jest": "^26.6.3",
     "lint-staged": "^10.5.3",
     "markdown-toc": "^1.2.0",
+    "nodemon": "^2.0.6",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-test-renderer": "^17.0.1",

src/controlled.js

@@ -1,64 +1,34 @@
-import { useCallback, useState, useMemo } from 'react'
-import useUncontrolledTokenPagination from './uncontrolled'
+import { useCallback, useEffect, useState, useMemo } from 'react'
 import { assertNumber } from './utils'
 
-const DEFAULTS = {
-  defaultPageNumber: 1,
-  resetPageNumberOnPageSizeChange: true,
-}
-
-export default function useControlledTokenPagination(options) {
-  options = { ...DEFAULTS, ...options }
-
-  assertNumber('defaultPageNumber', options.defaultPageNumber)
-  assertNumber('defaultPageSize', options.defaultPageSize)
-
-  const [{ pageNumber, pageSize }, setPagination] = useState({
-    pageNumber: options.defaultPageNumber,
-    pageSize: options.defaultPageSize,
-  })
+export default function useControlledTokenPagination(pageNumber) {
+  assertNumber('pageNumber', pageNumber)
 
-  const change = useCallback(
-    (property, changer) => {
-      const pageNumberReset = options.resetPageNumberOnPageSizeChange
-        ? { pageNumber: options.defaultPageNumber }
-        : {}
+  const [mapping, setMapping] = useState({})
 
-      switch (typeof changer) {
-        case 'function':
-          return setPagination(p => ({
-            ...p,
-            ...pageNumberReset,
-            [property]: changer(p[property]),
-          }))
-        case 'number':
-          return setPagination(p => ({
-            ...p,
-            ...pageNumberReset,
-            [property]: changer,
-          }))
-        default:
-          throw new Error(
-            `Unsupported value ${changer} of type ${typeof changer} for ${property}`
-          )
-      }
+  const updateToken = useCallback(
+    nextToken => {
+      setMapping(m => ({
+        ...m,
+        [pageNumber + 1]: nextToken,
+      }))
     },
-    [options.defaultPageNumber, options.resetPageNumberOnPageSizeChange]
+    [pageNumber]
   )
 
-  const changePageNumber = useCallback(c => change('pageNumber', c), [change])
-  const changePageSize = useCallback(c => change('pageSize', c), [change])
-
-  const uncontrolled = useUncontrolledTokenPagination(pageNumber)
+  const useUpdateToken = useCallback(
+    function useUpdateToken(nextToken) {
+      useEffect(() => updateToken(nextToken), [nextToken])
+    },
+    [updateToken]
+  )
 
   return useMemo(
     () => ({
-      ...uncontrolled,
-      pageNumber,
-      pageSize,
-      changePageNumber,
-      changePageSize,
+      currentToken: mapping[pageNumber],
+      useUpdateToken,
+      updateToken,
     }),
-    [changePageNumber, changePageSize, pageNumber, pageSize, uncontrolled]
+    [mapping, pageNumber, updateToken, useUpdateToken]
   )
 }