[Add] ページ遷移用のフック、useTransitを追加

Author: FUGAMARU

app/(main)/MainPage.tsx

@@ -15,6 +15,7 @@ import SearchModal from "@/components/templates/MainPage/SearchModal"
 import SettingModal from "@/components/templates/MainPage/SettingModal"
 import TrackModal from "@/components/templates/MainPage/TrackModal"
 import { LOCAL_STORAGE_KEYS } from "@/constants/LocalStorageKeys"
+import { PAGE_PATH } from "@/constants/PagePath"
 import useBreakPoints from "@/hooks/useBreakPoints"
 import usePlayer from "@/hooks/usePlayer"
 import useTarckModal from "@/hooks/useTrackModal"
@@ -57,15 +58,15 @@ const MainPage = () => {
     )
 
     if (!isDefined(selectedSpotifyPlaylists) && !isDefined(webDAVFolderPaths)) {
-      router.push("/connect")
+      router.push(PAGE_PATH.CONNECT_PAGE)
       return
     }
 
     setIsLoading({
-      stateChangedOn: "MainPage",
+      stateChangedOn: PAGE_PATH.MAIN_PAGE,
       state: false
     })
-    router.prefetch("/connect")
+    router.prefetch(PAGE_PATH.CONNECT_PAGE)
   }, [setIsLoading, router])
 
   const {

app/callback/spotify/SpotifyApiCallbackPage.tsx

@@ -2,6 +2,7 @@
 
 import { useSearchParams, useRouter } from "next/navigation"
 import { memo, useEffect, useRef } from "react"
+import { PAGE_PATH } from "@/constants/PagePath"
 import useErrorModal from "@/hooks/useErrorModal"
 import useSpotifyToken from "@/hooks/useSpotifyToken"
 import useStorage from "@/hooks/useStorage"
@@ -31,7 +32,7 @@ const SpotifyApiCallbackPage = () => {
       } catch (e) {
         showError(e)
       } finally {
-        router.push("/connect?provider=spotify")
+        router.push(`${PAGE_PATH.CONNECT_PAGE}?provider=spotify`)
       }
     })()
   }, [searchParams, router, getAccessToken, showError, userData])

app/connect/ConnectPage.tsx

@@ -15,6 +15,7 @@ import SpotifyConnector from "../../components/templates/ConnectPage/SpotifyConn
 import WebDAVConnector from "../../components/templates/ConnectPage/WebDAVConnector"
 import { loadingAtom } from "@/atoms/loadingAtom"
 import CardViewDefault from "@/components/parts/CardViewDefault"
+import { PAGE_PATH } from "@/constants/PagePath"
 import useBreakPoints from "@/hooks/useBreakPoints"
 
 const ConnectPage = () => {
@@ -75,7 +76,7 @@ const ConnectPage = () => {
   useEffect(() => {
     ;(async () => {
       setIsLoading({
-        stateChangedOn: "ConnectPage",
+        stateChangedOn: PAGE_PATH.CONNECT_PAGE,
         state: false
       })
 

atoms/loadingAtom.ts

@@ -1,17 +1,13 @@
 import { atom } from "recoil"
+import { PagePath } from "@/types/PagePath"
 
 export const loadingAtom = atom<{
-  stateChangedOn:
-    | "initial"
-    | "MainPage"
-    | "ConnectPage"
-    | "SpotifyCallbackPage"
-    | "SigninPage"
+  stateChangedOn: PagePath | undefined
   state: boolean
 }>({
   key: "loadingAtom",
   default: {
-    stateChangedOn: "initial",
+    stateChangedOn: undefined,
     state: false
   }
 })

components/layout/Curtain.tsx

@@ -11,6 +11,7 @@ import LayoutHeader from "./LayoutHeader"
 import NowLoading from "./NowLoading"
 import { faviconIndexAtom } from "@/atoms/faviconIndexAtom"
 import { loadingAtom } from "@/atoms/loadingAtom"
+import { PAGE_PATH } from "@/constants/PagePath"
 import { STYLING_VALUES } from "@/constants/StylingValues"
 import { ZINDEX_NUMBERS } from "@/constants/ZIndexNumbers"
 import useBreakPoints from "@/hooks/useBreakPoints"
@@ -32,8 +33,14 @@ const Curtain = ({ children }: Children) => {
     () => `calc(100vh - ${STYLING_VALUES.HEADER_HEIGHT}px)`,
     []
   )
-  const isConnectPage = useMemo(() => pathname === "/connect", [pathname])
-  const isSigninPage = useMemo(() => pathname === "/signin", [pathname])
+  const isConnectPage = useMemo(
+    () => pathname === PAGE_PATH.CONNECT_PAGE,
+    [pathname]
+  )
+  const isSigninPage = useMemo(
+    () => pathname === PAGE_PATH.SIGNIN_PAGE,
+    [pathname]
+  )
 
   const isLoading = useRecoilValue(loadingAtom)
   const [className, setClassName] = useState("")
@@ -65,7 +72,7 @@ const Curtain = ({ children }: Children) => {
         return
       }
 
-      if (isLoading.state && isLoading.stateChangedOn !== "initial") {
+      if (isLoading.state && isDefined(isLoading.stateChangedOn)) {
         setIsDisplayLoadingScreen(true)
         setClassName("animate__animated animate__fadeIn")
       }

components/layout/ErrorModal.tsx

@@ -6,6 +6,7 @@ import { IoWarningOutline } from "react-icons/io5"
 import { useRecoilState } from "recoil"
 import { errorModalConfigAtom } from "@/atoms/errorModalConfigAtom"
 import { SpotifyAuthError } from "@/classes/SpotifyAuthError"
+import { PAGE_PATH } from "@/constants/PagePath"
 import { ErrorModalConfig } from "@/types/ErrorModalConfig"
 
 const ErrorModal = () => {
@@ -36,7 +37,7 @@ const ErrorModal = () => {
   const handleModalClose = useCallback(() => {
     if (lastConfig.instance instanceof SpotifyAuthError) {
       /** ここに処理が来る段階で既にSpotifyの認証情報は削除済み */
-      router.replace("/connect?provider=spotify")
+      router.replace(`${PAGE_PATH.CONNECT_PAGE}?provider=spotify`)
       setErrorModalConfigs([])
       return
     }

components/layout/LayoutNavbar.tsx

@@ -9,7 +9,6 @@ import {
   ScrollArea
 } from "@mantine/core"
 import { useHotkeys } from "@mantine/hooks"
-import { useRouter } from "next/navigation"
 import {
   Dispatch,
   SetStateAction,
@@ -28,13 +27,14 @@ import GradientButton from "../parts/GradientButton"
 import ProviderHeading from "../parts/ProviderHeading"
 import NavbarCheckbox from "../parts/navbar/NavbarCheckbox"
 import NavbarItemButton from "../parts/navbar/NavbarItemButton"
-import { loadingAtom } from "@/atoms/loadingAtom"
 import { navbarAtom, navbarClassNameAtom } from "@/atoms/navbarAtom"
 import { searchModalAtom } from "@/atoms/searchModalAtom"
 import { LOCAL_STORAGE_KEYS } from "@/constants/LocalStorageKeys"
+import { PAGE_PATH } from "@/constants/PagePath"
 import { STYLING_VALUES } from "@/constants/StylingValues"
 import useErrorModal from "@/hooks/useErrorModal"
 import useMIX from "@/hooks/useMIX"
+import useTransit from "@/hooks/useTransit"
 import { NavbarItem } from "@/types/NavbarItem"
 import { Provider } from "@/types/Provider"
 import { Queue } from "@/types/Queue"
@@ -68,14 +68,13 @@ const LayoutNavbar = ({
   onSettingModalOpen,
   setIsPreparingPlayback
 }: Props) => {
-  const router = useRouter()
-  const setIsLoading = useSetRecoilState(loadingAtom)
   const [isMixing, setIsMixing] = useState(false)
   const [navbarClassName, setNavbarClassName] =
     useRecoilState(navbarClassNameAtom)
   const [isOpened, setIsOpened] = useRecoilState(navbarAtom)
   const { showError } = useErrorModal()
   const { mixAllTracks } = useMIX()
+  const { onTransit } = useTransit()
   const setIsSearchModalOpen = useSetRecoilState(searchModalAtom)
   useHotkeys([
     ["Slash", () => setIsSearchModalOpen(true)],
@@ -361,14 +360,9 @@ const LayoutNavbar = ({
 
           <NavbarItemButton
             icon={<GrConnect />}
-            onClick={async () => {
-              setIsLoading({
-                stateChangedOn: "MainPage",
-                state: true
-              })
-              await new Promise(resolve => setTimeout(resolve, 300))
-              router.push("/connect")
-            }}
+            onClick={() =>
+              onTransit(PAGE_PATH.MAIN_PAGE, PAGE_PATH.CONNECT_PAGE)
+            }
           >
             サービス接続設定
           </NavbarItemButton>

components/templates/ConnectPage/ProviderSelector.tsx

@@ -1,13 +1,13 @@
 import { Flex, Box, Title, Text, Center } from "@mantine/core"
-import { useRouter } from "next/navigation"
 import { memo } from "react"
-import { useRecoilValue, useSetRecoilState } from "recoil"
-import { loadingAtom } from "@/atoms/loadingAtom"
+import { useRecoilValue } from "recoil"
 import { spotifySettingStateAtom } from "@/atoms/spotifySettingStateAtom"
 import { webDAVSettingStateAtom } from "@/atoms/webDAVSettingStateAtom"
 import ArrowTextButton from "@/components/parts/ArrowTextButton"
 import ProviderSelectorItem from "@/components/parts/ProviderSelectorItem"
+import { PAGE_PATH } from "@/constants/PagePath"
 import useBreakPoints from "@/hooks/useBreakPoints"
+import useTransit from "@/hooks/useTransit"
 
 type Props = {
   className?: string
@@ -22,8 +22,7 @@ const ProviderSelector = ({
   onShowSpotifyConnector,
   onShowWebDAVConnector
 }: Props) => {
-  const router = useRouter()
-  const setIsLoading = useSetRecoilState(loadingAtom)
+  const { onTransit } = useTransit()
   const { setRespVal } = useBreakPoints()
   const spotifySettingState = useRecoilValue(spotifySettingStateAtom)
   const webDAVSettingState = useRecoilValue(webDAVSettingStateAtom)
@@ -62,14 +61,9 @@ const ProviderSelector = ({
           <Center mt="3rem">
             <ArrowTextButton
               direction="right"
-              onClick={async () => {
-                setIsLoading({
-                  stateChangedOn: "ConnectPage",
-                  state: true
-                })
-                await new Promise(resolve => setTimeout(resolve, 300))
-                router.push("/")
-              }}
+              onClick={() =>
+                onTransit(PAGE_PATH.CONNECT_PAGE, PAGE_PATH.MAIN_PAGE)
+              }
             >
               メインページに移動する
             </ArrowTextButton>

components/templates/SigninPage/Signin.tsx

@@ -1,17 +1,17 @@
 import { Stack, Group, Button } from "@mantine/core"
-import { useRouter } from "next/navigation"
 import { memo, useCallback, useMemo, useState } from "react"
 import { HiOutlineMail } from "react-icons/hi"
 import { PiPasswordBold } from "react-icons/pi"
-import { useRecoilValue, useSetRecoilState } from "recoil"
-import { loadingAtom } from "@/atoms/loadingAtom"
+import { useRecoilValue } from "recoil"
 import { spotifySettingStateAtom } from "@/atoms/spotifySettingStateAtom"
 import { webDAVSettingStateAtom } from "@/atoms/webDAVSettingStateAtom"
 import GradientButton from "@/components/parts/GradientButton"
 import LabeledInput from "@/components/parts/LabeledInput"
+import { PAGE_PATH } from "@/constants/PagePath"
 import useAuth from "@/hooks/useAuth"
 import useBreakPoints from "@/hooks/useBreakPoints"
 import useErrorModal from "@/hooks/useErrorModal"
+import useTransit from "@/hooks/useTransit"
 import { SigninPageType } from "@/types/SigninPageType"
 import { isDefined } from "@/utils/isDefined"
 
@@ -22,14 +22,13 @@ type Props = {
 }
 
 const Signin = ({ className, isDisplay, slideTo }: Props) => {
+  const { onTransit } = useTransit()
   const { setRespVal } = useBreakPoints()
   const { showError } = useErrorModal()
-  const router = useRouter()
 
   const { checkUserExists, signIn } = useAuth()
   const spotifySettingState = useRecoilValue(spotifySettingStateAtom)
   const webDAVSettingState = useRecoilValue(webDAVSettingStateAtom)
-  const setIsLoading = useSetRecoilState(loadingAtom)
 
   const [emailInput, setEmailInput] = useState("")
   const [passwordInput, setPasswordInput] = useState("")
@@ -51,21 +50,11 @@ const Signin = ({ className, isDisplay, slideTo }: Props) => {
       }
 
       if (spotifySettingState !== "done" || webDAVSettingState !== "done") {
-        setIsLoading({
-          stateChangedOn: "SigninPage",
-          state: true
-        })
-        await new Promise(resolve => setTimeout(resolve, 300))
-        router.push("/connect")
+        await onTransit(PAGE_PATH.SIGNIN_PAGE, PAGE_PATH.CONNECT_PAGE)
         return
       }
 
-      setIsLoading({
-        stateChangedOn: "SigninPage",
-        state: true
-      })
-      await new Promise(resolve => setTimeout(resolve, 300))
-      router.push("/")
+      await onTransit(PAGE_PATH.SIGNIN_PAGE, PAGE_PATH.MAIN_PAGE)
     } catch (e) {
       showError(e)
     } finally {
@@ -77,11 +66,10 @@ const Signin = ({ className, isDisplay, slideTo }: Props) => {
     passwordInput,
     signIn,
     showError,
-    router,
-    setIsLoading,
     spotifySettingState,
     webDAVSettingState,
-    slideTo
+    slideTo,
+    onTransit
   ])
 
   const isValidEmail = useMemo(

constants/PagePath.ts

@@ -0,0 +1,6 @@
+export const PAGE_PATH = {
+  MAIN_PAGE: "/",
+  CONNECT_PAGE: "/connect",
+  SIGNIN_PAGE: "/signin",
+  SPOTIFY_CALLBACK_PAGE: "/callback/spotify"
+} as const

hooks/useInitializer.tsx

@@ -10,6 +10,7 @@ import useSetWebDAVSettingState from "./useWebDAVSettingState"
 import { faviconIndexAtom } from "@/atoms/faviconIndexAtom"
 import { loadingAtom } from "@/atoms/loadingAtom"
 import { LOCAL_STORAGE_KEYS } from "@/constants/LocalStorageKeys"
+import { PAGE_PATH } from "@/constants/PagePath"
 import { auth } from "@/utils/firebase"
 import { isDefined } from "@/utils/isDefined"
 import { generateRandomNumber } from "@/utils/randomNumberGenerator"
@@ -51,12 +52,12 @@ const useInitializer = () => {
         !userInfo.emailVerified ||
         !isDefined(decryptionKey))
     ) {
-      router.push("/signin")
+      router.push(PAGE_PATH.SIGNIN_PAGE)
       return
     }
 
     setIsLoading({
-      stateChangedOn: "SigninPage",
+      stateChangedOn: PAGE_PATH.MAIN_PAGE,
       state: false
     })
   }, [setIsLoading, isLoadingUserInfo, userInfo, router])

hooks/useTransit.tsx

@@ -0,0 +1,26 @@
+import { useRouter } from "next/navigation"
+import { useCallback } from "react"
+import { useSetRecoilState } from "recoil"
+import { loadingAtom } from "@/atoms/loadingAtom"
+import { PagePath } from "@/types/PagePath"
+
+const useTransit = () => {
+  const router = useRouter()
+  const setIsLoading = useSetRecoilState(loadingAtom)
+
+  const onTransit = useCallback(
+    async (from: PagePath, to: PagePath) => {
+      setIsLoading({
+        stateChangedOn: from,
+        state: true
+      })
+      await new Promise(resolve => setTimeout(resolve, 1000))
+      router.push(to)
+    },
+    [router, setIsLoading]
+  )
+
+  return { onTransit } as const
+}
+
+export default useTransit

types/PagePath.ts

@@ -0,0 +1,3 @@
+import { PAGE_PATH } from "../constants/PagePath"
+
+export type PagePath = (typeof PAGE_PATH)[keyof typeof PAGE_PATH]