refactor route utils

src/App.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 
 import AuthContext from '@/contexts/AuthContext'
 import { getPKCEStatus } from '@/utils/auth'
+import { clearSearchParams, getSearchParams } from '@/utils/route'
 import { deleteStateCookie } from '@/utils/stateCookie'
 import { AuthStage } from '@/types'
 
@@ -14,22 +15,13 @@ import s from './App.module.css'
 import LogoutButton from './components/LogoutButton'
 import { getAuthStage } from './utils/authStage'
 
-function clearSearchParams() {
-  const url = new URL(window.location.href) // Create a URL object from the current window location
-  url.search = '' // Clear the search parameters
-  window.history.replaceState({}, document.title, url.toString()) // Update the URL without reloading the page
-}
-
 function App() {
-  const params = new URLSearchParams(window.location.search)
-  const state = params.get('state')
-  const code = params.get('code')
+  const { state, code } = getSearchParams()
   const { codeVerifier } = getPKCEStatus(state)
   const {
     isLoading, error, tokens,
     getATWithAuthCode, getATWithRefreshToken
   } = useGetAccessToken()
-
   const authContext = useAuthContextValue(tokens)
 
   const authStage = getAuthStage({

src/components/LogoutButton.tsx

@@ -1,13 +1,15 @@
-import { deleteRefreshToken } from "@/utils/token"
+import { deleteRefreshToken } from "@/utils/refreshToken"
 import { useCallback } from "react"
 
+import { reload } from '@/utils/route'
+
 type LogoutButtonProps = {
   className?: string
 }
 const LogoutButton = ({ className }: LogoutButtonProps) => {
   const handleLogout = useCallback(() => {
     deleteRefreshToken()
-    window.location.reload()
+    reload()
   }, [])
 
   return (

src/utils/auth.ts

@@ -2,6 +2,9 @@ import {
   getStateCookie,
   createStateCookie
 } from "@/utils/stateCookie"
+import {
+  redirect
+} from "@/utils/route"
 import {
   createPKCECodeChallenge,
   createRandomString
@@ -26,7 +29,7 @@ export const redirectToLogin = async (
   query.append('state', state)
   query.append('code_challenge', codeChallenge)
 
-  window.location.replace(`${config.LOGIN_URL}?${query.toString()}`)
+  redirect(`${config.LOGIN_URL}?${query.toString()}`)
 }
 
 export const getPKCEStatus = (state?: string | null): PKCEStatus => {

src/utils/route.ts

@@ -0,0 +1,18 @@
+export const clearSearchParams = () => {
+  const url = new URL(window.location.href)
+  url.search = ''
+  window.history.replaceState({}, document.title, url.toString())
+}
+
+export const getSearchParams = () => {
+  const params = new URLSearchParams(window.location.search)
+  const state = params.get('state')
+  const code = params.get('code')
+  return { state, code }
+}
+
+export const redirect = (url: string) => {
+  window.location.replace(url)
+}
+
+export const relaod = () => window.location.reload()