feat: Update to useRouter from next/navigation

Closes: #327
47ng · Aug 30, 2023 · a604351 · a604351
1 parent 3920763
commit a604351
Show file tree

Hide file tree

Showing 27 changed files with 1,114 additions and 954 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,12 @@
 
 useQueryState hook for Next.js - Like React.useState, but stored in the URL query string
 
+## Migration from v1
+
+In order to use this hook in the new app directory of Next.js 13.4, you need to upgrade to v2.x.
+
+To use this hook in the old pages directory, you need v1.x.
+
 ## Features
 
 - 🧘‍♀️ Simple: the URL is the source of truth.
@@ -176,7 +182,7 @@ useQueryState('foo', { history: 'push' })
 
 Any other value for the `history` option will fallback to the default.
 
-## Multiple Queries
+## Multiple Queries (only for v1.x)
 
 Because the Next.js router has asynchronous methods, if you want to do multiple
 query updates in one go, you'll have to `await` them, otherwise the latter will
@@ -193,6 +199,8 @@ const MultipleQueriesDemo = () => {
 }
 ```
 
+> Note: In version 2.x, you don't need to await the state updates.
+
 For query keys that should always move together, you can use `useQueryStates`
 with an object containing each key's type:
 
@@ -218,9 +226,9 @@ await setCoordinates({
 })
 ```
 
-## Transition Options
+## Transition Options (only for v1.x)
 
-By default Next.js will scroll to the top of the page when changing things in the URL.
+By default, Next.js will scroll to the top of the page when changing things in the URL.
 
 To prevent this, `router.push()` and `router.replace()` have a third optional
 parameter to control transitions, which can be passed on the state setter here:

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    video: false,
+    fixturesFolder: false,
+    supportFile: false
+  }
+})
diff --git a/cypress.json b/cypress.json
diff --git a/cypress/.gitignore b/cypress/.gitignore
@@ -1,4 +1,4 @@
-integration/examples/
+e2e/examples/
 plugins/
 screenshots/
 support/

diff --git a/cypress/integration/useQueryState.spec.js → cypress/e2e/useQueryState.cy.js b/cypress/integration/useQueryState.spec.js → cypress/e2e/useQueryState.cy.js
diff --git a/cypress/integration/useQueryStates.spec.js → cypress/e2e/useQueryStates.cy.js b/cypress/integration/useQueryStates.spec.js → cypress/e2e/useQueryStates.cy.js
diff --git a/package.json b/package.json
@@ -55,18 +55,18 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^16.2.1",
     "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.18",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/node": "^18.16.8",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
     "@types/webpack": "^5.28.0",
     "commitlint": "^16.2.1",
-    "cypress": "^9.5.0",
+    "cypress": "^12.12.0",
     "husky": "7.x",
     "jest": "^27.5.1",
-    "next": "^12.1.0",
+    "next": "^13.4.2",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "ts-jest": "^27.1.3",
     "ts-node": "^10.5.0",
     "tsd": "^0.19.1",

diff --git a/src/app/README.md b/src/app/README.md
@@ -0,0 +1,5 @@
+# Next.js pages for E2E tests
+
+The Next.js app pages here are dedicated to end-to-end tests with Cypress.
+
+Check out the spec files in `/cypress/e2e`
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import React from 'react'
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/src/app/useQueryState/dynamic/[route]/page.tsx b/src/app/useQueryState/dynamic/[route]/page.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import React from 'react'
+import { queryTypes, useQueryState } from './../../../../../'
+
+const IntegrationPage = () => {
+  const [string, setString] = useQueryState('string')
+  const [int, setInt] = useQueryState('int', queryTypes.integer)
+  const [float, setFloat] = useQueryState('float', queryTypes.float)
+  const [bool, setBool] = useQueryState('bool', queryTypes.boolean)
+  return (
+    <main>
+      <h1>useQueryState</h1>
+      <section>
+        <h2>String</h2>
+        <button id="string_set_a" onClick={() => setString('a')}>
+          Set A
+        </button>
+        <button id="string_set_b" onClick={() => setString('b')}>
+          Set B
+        </button>
+        <button id="string_clear" onClick={() => setString(null)}>
+          Clear
+        </button>
+        <p id="string_value">{string}</p>
+      </section>
+      <section>
+        <h2>Integer</h2>
+        <button
+          id="int_increment"
+          onClick={() => setInt(old => (old ?? 0) + 1)}
+        >
+          Increment
+        </button>
+        <button
+          id="int_decrement"
+          onClick={() => setInt(old => (old ?? 0) - 1)}
+        >
+          Decrement
+        </button>
+        <button id="int_clear" onClick={() => setInt(null)}>
+          Clear
+        </button>
+        <p id="int_value">{int}</p>
+      </section>
+      <section>
+        <h2>Float</h2>
+        <button
+          id="float_increment"
+          onClick={() => setFloat(old => (old ?? 0) + 0.1)}
+        >
+          Increment by 0.1
+        </button>
+        <button
+          id="float_decrement"
+          onClick={() => setFloat(old => (old ?? 0) - 0.1)}
+        >
+          Decrement by 0.1
+        </button>
+        <button id="float_clear" onClick={() => setFloat(null)}>
+          Clear
+        </button>
+        <p id="float_value">{float}</p>
+      </section>
+      <section>
+        <h2>Boolean</h2>
+        <button id="bool_toggle" onClick={() => setBool(old => !old)}>
+          Toggle
+        </button>
+        <button id="bool_clear" onClick={() => setBool(null)}>
+          Clear
+        </button>
+        <p id="bool_value">{bool === null ? null : bool ? 'true' : 'false'}</p>
+      </section>
+    </main>
+  )
+}
+
+export default IntegrationPage
diff --git a/src/pages/useQueryState/index.tsx → src/app/useQueryState/page.tsx b/src/pages/useQueryState/index.tsx → src/app/useQueryState/page.tsx
@@ -1,8 +1,9 @@
-import { NextPage } from 'next'
+'use client'
+
 import React from 'react'
 import { queryTypes, useQueryState } from '../../../'
 
-const IntegrationPage: NextPage = () => {
+const IntegrationPage = () => {
   const [string, setString] = useQueryState('string')
   const [int, setInt] = useQueryState('int', queryTypes.integer)
   const [float, setFloat] = useQueryState('float', queryTypes.float)

diff --git a/src/app/useQueryStates/dynamic/[route]/page.tsx b/src/app/useQueryStates/dynamic/[route]/page.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import React from 'react'
+import { queryTypes, useQueryStates } from './../../../../../'
+
+const IntegrationPage = () => {
+  const [state, setState] = useQueryStates({
+    string: queryTypes.string,
+    int: queryTypes.integer,
+    float: queryTypes.float,
+    bool: queryTypes.boolean
+  })
+  return (
+    <>
+      <button onClick={() => setState({ string: 'Hello' })}>Set string</button>
+      <button onClick={() => setState({ int: 42 })}>Set int</button>
+      <button onClick={() => setState({ float: 3.14159 })}>Set float</button>
+      <button onClick={() => setState(old => ({ bool: !old.bool }))}>
+        Toggle bool
+      </button>
+      <button
+        id="clear-string"
+        onClick={() => setState(() => ({ string: null }))}
+      >
+        Clear string
+      </button>
+      <button
+        id="clear"
+        onClick={() =>
+          setState(() => ({
+            string: null,
+            int: null,
+            float: null,
+            bool: null
+          }))
+        }
+      >
+        Clear
+      </button>
+      <p id="json">{JSON.stringify(state)}</p>
+      <p id="string">{state.string}</p>
+      <p id="int">{state.int}</p>
+      <p id="float">{state.float}</p>
+      <p id="bool">
+        {state.bool === null ? null : state.bool ? 'true' : 'false'}
+      </p>
+    </>
+  )
+}
+
+export default IntegrationPage
diff --git a/src/pages/useQueryStates/index.tsx → src/app/useQueryStates/page.tsx b/src/pages/useQueryStates/index.tsx → src/app/useQueryStates/page.tsx
@@ -1,8 +1,9 @@
-import { NextPage } from 'next'
+'use client'
+
 import React from 'react'
 import { queryTypes, useQueryStates } from '../../../'
 
-const IntegrationPage: NextPage = () => {
+const IntegrationPage = () => {
   const [state, setState] = useQueryStates({
     string: queryTypes.string,
     int: queryTypes.integer,

diff --git a/src/defs.ts b/src/defs.ts
@@ -1,9 +1,3 @@
-import type { Router } from 'next/router'
-
-// Next.js does not export the TransitionsOption interface,
-// but we can get it from where it's used:
-export type TransitionOptions = Parameters<Router['push']>[2]
-
 export type HistoryOptions = 'replace' | 'push'
 
 export type Nullable<T> = {

diff --git a/src/pages/README.md b/src/pages/README.md
diff --git a/src/pages/useQueryState/[...dynamicRoute].tsx b/src/pages/useQueryState/[...dynamicRoute].tsx
diff --git a/src/pages/useQueryStates/[...dynamicRoute].tsx b/src/pages/useQueryStates/[...dynamicRoute].tsx
diff --git a/src/tests/useQueryState.test-d.ts b/src/tests/useQueryState.test-d.ts
@@ -7,8 +7,6 @@ import { queryTypes, useQueryState } from '../index'
   expectType<string | null>(state)
   setState('bar')
   setState(old => old?.toUpperCase() ?? null)
-  const out = await setState('bar')
-  expectType<boolean>(out)
 }
 
 // Accept only a single `history` option
@@ -17,8 +15,6 @@ import { queryTypes, useQueryState } from '../index'
   expectType<string | null>(state)
   setState('bar')
   setState(old => old?.toUpperCase() ?? null)
-  const out = await setState('bar')
-  expectType<boolean>(out)
 }
 
 // Supported query types

diff --git a/src/tests/useQueryStates.test-d.ts b/src/tests/useQueryStates.test-d.ts
@@ -27,8 +27,6 @@ import { queryTypes, useQueryStates } from '../index'
     ...old,
     d: !old.d
   }))
-  const out = await setStates({ b: 42 })
-  expectType<boolean>(out)
 }
 
 // With default values, state is no longer nullable