feat: migrate to app router

atls · Feb 13, 2024 · a4abe72 · a4abe72
1 parent 7ad581d
commit a4abe72
Show file tree

Hide file tree

Showing 13 changed files with 75 additions and 46 deletions.
diff --git a/...inux-x64-gnu-npm-14.1.0-5a9ae6f5df-10.zip → ...darwin-arm64-npm-14.1.0-6d433a23a7-10.zip b/...inux-x64-gnu-npm-14.1.0-5a9ae6f5df-10.zip → ...darwin-arm64-npm-14.1.0-6d433a23a7-10.zip
diff --git a/.yarn/cache/fsevents-patch-6b67494872-10.zip b/.yarn/cache/fsevents-patch-6b67494872-10.zip
diff --git a/packages/identity-integration/README.md b/packages/identity-integration/README.md
@@ -1,4 +1,8 @@
-# NextJS Custom Workshop
+# Identity Integration
+
+## BREAKING CHANGE 0.2.0
+
+- Переход на `App Router` для `Next.JS@14`
 
 ## BREAKING CHANGE 0.0.16
 

diff --git a/packages/identity-integration/package.json b/packages/identity-integration/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@atls/next-identity-integration",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "BSD-3-Clause",
   "main": "src/index.ts",
   "files": [
@@ -27,8 +27,8 @@
     "react-dom": "18.2.0"
   },
   "peerDependencies": {
-    "next": "14.1.0",
-    "react": "18.2.0"
+    "next": "^14.1.0",
+    "react": "^18.2.0"
   },
   "publishConfig": {
     "access": "public",

diff --git a/packages/identity-integration/src/flows/error.flow.tsx b/packages/identity-integration/src/flows/error.flow.tsx
@@ -4,7 +4,8 @@ import React                 from 'react'
 import { AxiosError }        from 'axios'
 import { PropsWithChildren } from 'react'
 import { FC }                from 'react'
-import { useRouter }         from 'next/router'
+import { useRouter }         from 'next/navigation'
+import { useSearchParams }   from 'next/navigation'
 import { useState }          from 'react'
 import { useEffect }         from 'react'
 
@@ -18,14 +19,15 @@ export interface ErrorErrorProps {
 export const ErrorFlow: FC<PropsWithChildren<ErrorErrorProps>> = ({ children, returnToUrl }) => {
   const [error, setError] = useState<FlowError>()
   const [loading, setLoading] = useState<boolean>(true)
-  const router = useRouter()
+  const { get } = useSearchParams()
+  const { push } = useRouter()
 
   const { kratosClient } = useKratosClient()
 
-  const { id } = router.query
+  const id = get('id')
 
   useEffect(() => {
-    if (!router.isReady || error) {
+    if (error) {
       return
     }
 
@@ -40,14 +42,14 @@ export const ErrorFlow: FC<PropsWithChildren<ErrorErrorProps>> = ({ children, re
           case 404:
           case 403:
           case 410:
-            return router.push(returnToUrl ?? '/auth/login')
+            return push(returnToUrl ?? '/auth/login')
         }
 
         return Promise.reject(err)
       })
       .finally(() => setLoading(false))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id, router, router.isReady, error])
+  }, [id, push, error])
 
   return <ErrorProvider value={{ error, loading }}>{children}</ErrorProvider>
 }
diff --git a/packages/identity-integration/src/flows/handle-errors.util.ts b/packages/identity-integration/src/flows/handle-errors.util.ts
@@ -2,13 +2,13 @@
 /* eslint-disable prefer-template */
 /* eslint-disable default-case */
 
-import { AxiosError }     from 'axios'
-import { NextRouter }     from 'next/router'
-import { Dispatch }       from 'react'
-import { SetStateAction } from 'react'
+import { AxiosError }        from 'axios'
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'
+import { Dispatch }          from 'react'
+import { SetStateAction }    from 'react'
 
 export const handleFlowError = <S>(
-    router: NextRouter,
+    router: AppRouterInstance,
     flowType: 'login' | 'registration' | 'settings' | 'recovery' | 'verification',
     onResetFlow: Dispatch<SetStateAction<S | undefined>>,
     onErrorRedirectUrl: string,

diff --git a/packages/identity-integration/src/flows/login.flow.tsx b/packages/identity-integration/src/flows/login.flow.tsx
@@ -5,7 +5,8 @@ import React                            from 'react'
 import { AxiosError }                   from 'axios'
 import { PropsWithChildren }            from 'react'
 import { FC }                           from 'react'
-import { useRouter }                    from 'next/router'
+import { useSearchParams }              from 'next/navigation'
+import { useRouter }                    from 'next/navigation'
 import { useState }                     from 'react'
 import { useEffect }                    from 'react'
 import { useMemo }                      from 'react'
@@ -33,12 +34,16 @@ export const LoginFlow: FC<PropsWithChildren<LoginFlowProps>> = ({
   const [loading, setLoading] = useState<boolean>(true)
   const values = useMemo(() => new ValuesStore(), [])
   const router = useRouter()
+  const { get } = useSearchParams()
   const { kratosClient, returnToSettingsUrl } = useKratosClient()
 
-  const { return_to: returnTo, flow: flowId, refresh, aal } = router.query
+  const returnTo = get('return_to')
+  const flowId = get('flow')
+  const refresh = get('refresh')
+  const aal = get('aal')
 
   useEffect(() => {
-    if (!router.isReady || flow) {
+    if (flow) {
       return
     }
 
@@ -69,7 +74,7 @@ export const LoginFlow: FC<PropsWithChildren<LoginFlowProps>> = ({
       .catch(handleFlowError(router, 'login', setFlow, returnToSettingsUrl, onError))
       .finally(() => setLoading(false))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [flowId, router, router.isReady, aal, refresh, returnTo, flow, onError])
+  }, [flowId, router, aal, refresh, returnTo, flow, onError])
 
   useEffect(() => {
     if (flow) {

diff --git a/packages/identity-integration/src/flows/logout.flow.tsx b/packages/identity-integration/src/flows/logout.flow.tsx
@@ -4,7 +4,8 @@ import React                              from 'react'
 import { AxiosError }                     from 'axios'
 import { PropsWithChildren }              from 'react'
 import { FC }                             from 'react'
-import { useRouter }                      from 'next/router'
+import { useSearchParams }                from 'next/navigation'
+import { useRouter }                      from 'next/navigation'
 import { useState }                       from 'react'
 import { useEffect }                      from 'react'
 
@@ -18,14 +19,11 @@ export const LogoutFlow: FC<PropsWithChildren<LogoutFlowProps>> = ({ children, r
   const [logoutToken, setLogoutToken] = useState<string>('')
   const router = useRouter()
   const { kratosClient } = useKratosClient()
+  const { get } = useSearchParams()
 
-  const { return_to: returnTo } = router.query
+  const returnTo = get('return_to')
 
   useEffect(() => {
-    if (!router.isReady) {
-      return
-    }
-
     kratosClient
       .createBrowserLogoutFlow(
         { returnTo: returnTo?.toString() ?? returnToUrl },
@@ -44,13 +42,13 @@ export const LogoutFlow: FC<PropsWithChildren<LogoutFlowProps>> = ({ children, r
         return Promise.reject(error)
       })
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router, router.isReady])
+  }, [router])
 
   useEffect(() => {
     if (logoutToken) {
       kratosClient
         .updateLogoutFlow({ token: logoutToken }, { withCredentials: true })
-        .then(() => router.reload())
+        .then(() => router.refresh())
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [logoutToken, router])

diff --git a/packages/identity-integration/src/flows/recovery.flow.tsx b/packages/identity-integration/src/flows/recovery.flow.tsx
@@ -5,7 +5,8 @@ import React                                  from 'react'
 import { AxiosError }                         from 'axios'
 import { PropsWithChildren }                  from 'react'
 import { FC }                                 from 'react'
-import { useRouter }                          from 'next/router'
+import { useSearchParams }                    from 'next/navigation'
+import { useRouter }                          from 'next/navigation'
 import { useState }                           from 'react'
 import { useEffect }                          from 'react'
 import { useMemo }                            from 'react'
@@ -33,12 +34,16 @@ export const RecoveryFlow: FC<PropsWithChildren<RecoveryFlowProps>> = ({
   const [loading, setLoading] = useState<boolean>(true)
   const values = useMemo(() => new ValuesStore(), [])
   const router = useRouter()
+  const { get } = useSearchParams()
   const { kratosClient, returnToSettingsUrl } = useKratosClient()
 
-  const { return_to: returnTo, flow: flowId, refresh, aal } = router.query
+  const returnTo = get('return_to')
+  const flowId = get('flow')
+  const refresh = get('refresh')
+  const aal = get('aal')
 
   useEffect(() => {
-    if (!router.isReady || flow) {
+    if (flow) {
       return
     }
 
@@ -77,7 +82,7 @@ export const RecoveryFlow: FC<PropsWithChildren<RecoveryFlowProps>> = ({
       })
       .finally(() => setLoading(false))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [flowId, router, router.isReady, aal, refresh, returnTo, flow, onError])
+  }, [flowId, router, aal, refresh, returnTo, flow, onError])
 
   useEffect(() => {
     if (flow) {

diff --git a/packages/identity-integration/src/flows/registration.flow.tsx b/packages/identity-integration/src/flows/registration.flow.tsx
@@ -7,7 +7,8 @@ import React                                          from 'react'
 import { AxiosError }                                 from 'axios'
 import { PropsWithChildren }                          from 'react'
 import { FC }                                         from 'react'
-import { useRouter }                                  from 'next/router'
+import { useSearchParams }                            from 'next/navigation'
+import { useRouter }                                  from 'next/navigation'
 import { useState }                                   from 'react'
 import { useEffect }                                  from 'react'
 import { useMemo }                                    from 'react'
@@ -39,12 +40,16 @@ export const RegistrationFlow: FC<PropsWithChildren<RegistrationFlowProps>> = ({
   const [loading, setLoading] = useState<boolean>(true)
   const values = useMemo(() => new ValuesStore(), [])
   const router = useRouter()
+  const { get } = useSearchParams()
   const { kratosClient, returnToSettingsUrl } = useKratosClient()
 
-  const { return_to: returnTo, flow: flowId, refresh, aal } = router.query
+  const returnTo = get('return_to')
+  const flowId = get('flow')
+  const refresh = get('refresh')
+  const aal = get('aal')
 
   useEffect(() => {
-    if (!router.isReady || flow) {
+    if (flow) {
       return
     }
 
@@ -73,7 +78,7 @@ export const RegistrationFlow: FC<PropsWithChildren<RegistrationFlowProps>> = ({
       .catch(handleFlowError(router, 'registration', setFlow, returnToSettingsUrl, onError))
       .finally(() => setLoading(false))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [flowId, router, router.isReady, aal, refresh, returnTo, flow, onError])
+  }, [flowId, router, aal, refresh, returnTo, flow, onError])
 
   useEffect(() => {
     if (flow) {

diff --git a/packages/identity-integration/src/flows/settings.flow.tsx b/packages/identity-integration/src/flows/settings.flow.tsx
@@ -5,7 +5,8 @@ import React                                  from 'react'
 import { AxiosError }                         from 'axios'
 import { PropsWithChildren }                  from 'react'
 import { FC }                                 from 'react'
-import { useRouter }                          from 'next/router'
+import { useSearchParams }                    from 'next/navigation'
+import { useRouter }                          from 'next/navigation'
 import { useState }                           from 'react'
 import { useEffect }                          from 'react'
 import { useMemo }                            from 'react'
@@ -34,11 +35,15 @@ export const SettingsFlow: FC<PropsWithChildren<SettingsFlowProps>> = ({
   const values = useMemo(() => new ValuesStore(), [])
   const router = useRouter()
   const { kratosClient, returnToSettingsUrl } = useKratosClient()
+  const { get } = useSearchParams()
 
-  const { return_to: returnTo, flow: flowId, refresh, aal } = router.query
+  const returnTo = get('return_to')
+  const flowId = get('flow')
+  const refresh = get('refresh')
+  const aal = get('aal')
 
   useEffect(() => {
-    if (!router.isReady || flow) {
+    if (flow) {
       return
     }
 
@@ -80,7 +85,7 @@ export const SettingsFlow: FC<PropsWithChildren<SettingsFlowProps>> = ({
       })
       .finally(() => setLoading(false))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [flowId, router, router.isReady, aal, refresh, returnTo, flow, onError])
+  }, [flowId, router, aal, refresh, returnTo, flow, onError])
 
   useEffect(() => {
     if (flow) {
@@ -109,7 +114,7 @@ export const SettingsFlow: FC<PropsWithChildren<SettingsFlowProps>> = ({
           } else if (returnToUrl) {
             router.push(returnToUrl)
           } else {
-            router.replace(router.asPath)
+            router.refresh()
           }
         })
         .catch(handleFlowError(router, 'settings', setFlow, returnToSettingsUrl))

diff --git a/packages/identity-integration/src/flows/verification.flow.tsx b/packages/identity-integration/src/flows/verification.flow.tsx
@@ -7,7 +7,8 @@ import React                                          from 'react'
 import { AxiosError }                                 from 'axios'
 import { PropsWithChildren }                          from 'react'
 import { FC }                                         from 'react'
-import { useRouter }                                  from 'next/router'
+import { useSearchParams }                            from 'next/navigation'
+import { useRouter }                                  from 'next/navigation'
 import { useState }                                   from 'react'
 import { useEffect }                                  from 'react'
 import { useMemo }                                    from 'react'
@@ -35,11 +36,15 @@ export const VerificationFlow: FC<PropsWithChildren<VerificationFlowProps>> = ({
   const values = useMemo(() => new ValuesStore(), [])
   const router = useRouter()
   const { kratosClient } = useKratosClient()
+  const { get } = useSearchParams()
 
-  const { return_to: returnTo, flow: flowId, refresh, aal } = router.query
+  const returnTo = get('return_to')
+  const flowId = get('flow')
+  const refresh = get('refresh')
+  const aal = get('aal')
 
   useEffect(() => {
-    if (!router.isReady || flow) {
+    if (flow) {
       return
     }
 
@@ -83,7 +88,7 @@ export const VerificationFlow: FC<PropsWithChildren<VerificationFlowProps>> = ({
       })
       .finally(() => setLoading(false))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [flowId, router, router.isReady, aal, refresh, returnTo, flow, onError])
+  }, [flowId, router, aal, refresh, returnTo, flow, onError])
 
   useEffect(() => {
     if (flow) {

diff --git a/yarn.lock b/yarn.lock
@@ -378,8 +378,8 @@ __metadata:
     react-dom: "npm:18.2.0"
     tldjs: "npm:2.3.1"
   peerDependencies:
-    next: 14.1.0
-    react: 18.2.0
+    next: ^14.1.0
+    react: ^18.2.0
   languageName: unknown
   linkType: soft