[Update] Curtainから表示に関係ない部分を別フックに新たに切り出し

atoms/spotifySettingStateAtom.ts

@@ -0,0 +1,7 @@
+import { atom } from "recoil"
+import { ProviderSettingState } from "@/types/ProviderSettingState"
+
+export const spotifySettingStateAtom = atom<ProviderSettingState>({
+  key: "spotifySettingStateAtom",
+  default: "none"
+})

atoms/webDAVSettingStateAtom.ts

@@ -0,0 +1,7 @@
+import { atom } from "recoil"
+import { ProviderSettingState } from "@/types/ProviderSettingState"
+
+export const webDAVSettingStateAtom = atom<ProviderSettingState>({
+  key: "webDAVSettingStateAtom",
+  default: "none"
+})

components/layout/Curtain.tsx

@@ -4,22 +4,21 @@ import { Box } from "@mantine/core"
 import { useFavicon } from "@mantine/hooks"
 import { usePathname } from "next/navigation"
 import { useState, useEffect, memo, useMemo } from "react"
-import { useRecoilState, useRecoilValue } from "recoil"
+import { useRecoilValue } from "recoil"
 import ErrorModal from "./ErrorModal"
 import LayoutHeader from "./LayoutHeader"
 import NowLoading from "./NowLoading"
 import { faviconIndexAtom } from "@/atoms/faviconIndexAtom"
 import { loadingAtom } from "@/atoms/loadingAtom"
-import { LOCAL_STORAGE_KEYS } from "@/constants/LocalStorageKeys"
 import { STYLING_VALUES } from "@/constants/StylingValues"
 import { ZINDEX_NUMBERS } from "@/constants/ZIndexNumbers"
 import useBreakPoints from "@/hooks/useBreakPoints"
-import useSpotifyApi from "@/hooks/useSpotifyApi"
-import useSpotifyToken from "@/hooks/useSpotifyToken"
+import useInitializer from "@/hooks/useInitializer"
 import { Children } from "@/types/Children"
-import { generateRandomNumber } from "@/utils/randomNumberGenerator"
 
 const Curtain = ({ children }: Children) => {
+  useInitializer()
+
   const pathname = usePathname()
   const { breakPoint } = useBreakPoints()
 
@@ -34,7 +33,7 @@ const Curtain = ({ children }: Children) => {
   const [className, setClassName] = useState("")
   const [isDisplay, setIsDisplay] = useState(true)
 
-  const [faviconIndex, setFaviconIndex] = useRecoilState(faviconIndexAtom)
+  const faviconIndex = useRecoilValue(faviconIndexAtom)
 
   useEffect(() => {
     ;(async () => {
@@ -55,25 +54,6 @@ const Curtain = ({ children }: Children) => {
   }, [isLoading])
 
   useFavicon(faviconIndex ? `/header-logos/logo-${faviconIndex}.png` : "")
-  useEffect(() => {
-    setFaviconIndex(generateRandomNumber(1, 12))
-  }, [setFaviconIndex])
-
-  useSpotifyApi({ initialize: true })
-  useSpotifyToken({ initialize: true })
-
-  useEffect(() => {
-    const localStorageDataFormatVersion = localStorage.getItem(
-      LOCAL_STORAGE_KEYS.LOCAL_STORAGE_DATA_FORMAT_VERSION
-    )
-
-    if (!localStorageDataFormatVersion) {
-      localStorage.setItem(
-        LOCAL_STORAGE_KEYS.LOCAL_STORAGE_DATA_FORMAT_VERSION,
-        "1"
-      )
-    }
-  }, [])
 
   return (
     <>

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 { useSetRecoilState } from "recoil"
+import { useRecoilValue, useSetRecoilState } from "recoil"
 import { loadingAtom } from "@/atoms/loadingAtom"
+import { spotifySettingStateAtom } from "@/atoms/spotifySettingStateAtom"
+import { webDAVSettingStateAtom } from "@/atoms/webDAVSettingStateAtom"
 import ArrowTextButton from "@/components/parts/ArrowTextButton"
 import ProviderSelectorItem from "@/components/parts/ProviderSelectorItem"
 import useBreakPoints from "@/hooks/useBreakPoints"
-import useSpotifySettingState from "@/hooks/useSpotifySettingState"
-import useWebDAVSettingState from "@/hooks/useWebDAVSettingState"
 
 type Props = {
   className?: string
@@ -25,8 +25,8 @@ const ProviderSelector = ({
   const router = useRouter()
   const setIsLoading = useSetRecoilState(loadingAtom)
   const { setRespVal } = useBreakPoints()
-  const { settingState: spotifySettingState } = useSpotifySettingState()
-  const { settingState: webDAVSettingState } = useWebDAVSettingState()
+  const spotifySettingState = useRecoilValue(spotifySettingStateAtom)
+  const webDAVSettingState = useRecoilValue(webDAVSettingStateAtom)
 
   return (
     <Center

components/templates/ConnectPage/SpotifyConnector.tsx

@@ -13,8 +13,9 @@ import { useRouter } from "next/navigation"
 import { ChangeEvent, memo, useCallback, useEffect, useState } from "react"
 import { AiFillCheckCircle } from "react-icons/ai"
 import { BsInfoCircle } from "react-icons/bs"
-import { useRecoilState } from "recoil"
+import { useRecoilState, useRecoilValue } from "recoil"
 import { selectedSpotifyPlaylistsAtom } from "@/atoms/selectedSpotifyPlaylistsAtom"
+import { spotifySettingStateAtom } from "@/atoms/spotifySettingStateAtom"
 import CircleStep from "@/components/parts/CircleStep"
 import ConnectorContainer from "@/components/parts/ConnectorContainer"
 import CheckboxListModal from "@/components/templates/ConnectPage/CheckboxListModal"
@@ -23,7 +24,6 @@ import { PROVIDER_ICON_SRC } from "@/constants/ProviderIconSrc"
 import { STYLING_VALUES } from "@/constants/StylingValues"
 import useErrorModal from "@/hooks/useErrorModal"
 import useSpotifyApi from "@/hooks/useSpotifyApi"
-import useSpotifySettingState from "@/hooks/useSpotifySettingState"
 import useSpotifyToken from "@/hooks/useSpotifyToken"
 import styles from "@/styles/SpotifyConnector.module.css"
 import { ListItemDetail } from "@/types/ListItemDetail"
@@ -44,7 +44,7 @@ const SpotifyConnector = ({ className, onBack }: Props) => {
   const [isFetchingPlaylists, setIsFetchingPlaylists] = useState(false)
   const { redirectUri, getCode } = useSpotifyToken({ initialize: false })
   const { getPlaylists } = useSpotifyApi({ initialize: false })
-  const { settingState } = useSpotifySettingState()
+  const settingState = useRecoilValue(spotifySettingStateAtom)
   const { showError } = useErrorModal()
 
   const [clientId, setClientId] = useState("")

components/templates/ConnectPage/WebDAVConnector.tsx

@@ -2,9 +2,10 @@ import { Box, Flex, Input, Title, useMantineTheme, Button } from "@mantine/core"
 import { useDisclosure } from "@mantine/hooks"
 import { memo, useCallback, useEffect, useMemo, useState } from "react"
 import { AiFillCheckCircle } from "react-icons/ai"
-import { useRecoilState, useSetRecoilState } from "recoil"
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"
 import { selectedWebDAVFoldersAtom } from "@/atoms/selectedWebDAVFoldersAtom"
 import { webDAVAuthenticatedAtom } from "@/atoms/webDAVAuthenticatedAtom"
+import { webDAVSettingStateAtom } from "@/atoms/webDAVSettingStateAtom"
 import CircleStep from "@/components/parts/CircleStep"
 import ConnectorContainer from "@/components/parts/ConnectorContainer"
 import FolderListModal from "@/components/templates/ConnectPage/FolderListModal"
@@ -13,7 +14,6 @@ import { PROVIDER_ICON_SRC } from "@/constants/ProviderIconSrc"
 import useBreakPoints from "@/hooks/useBreakPoints"
 import useErrorModal from "@/hooks/useErrorModal"
 import useWebDAVServer from "@/hooks/useWebDAVServer"
-import useWebDAVSettingState from "@/hooks/useWebDAVSettingState"
 import styles from "@/styles/WebDAVConnector.module.css"
 
 type Props = {
@@ -25,7 +25,7 @@ const WebDAVConnector = ({ className, onBack }: Props) => {
   const theme = useMantineTheme()
   const { breakPoint } = useBreakPoints()
   const { showError } = useErrorModal()
-  const { settingState } = useWebDAVSettingState()
+  const settingState = useRecoilValue(webDAVSettingStateAtom)
   const { tryServerConnection } = useWebDAVServer()
   const [isConnecting, setIsConnecting] = useState(false)
   const [

components/templates/MainPage/SearchModal.tsx

@@ -1,15 +1,16 @@
 import { Box, Center, Flex, Input, Loader, Stack, Text } from "@mantine/core"
 import { memo, useCallback, useEffect, useRef } from "react"
+import { useRecoilValue } from "recoil"
 import ArrowTextButton from "../../parts/ArrowTextButton"
 import ListItem from "../../parts/ListItem"
 import ListItemContainer from "../../parts/ListItemContainer"
 import ModalDefault from "../../parts/ModalDefault"
 import ProviderHeading from "../../parts/ProviderHeading"
 import QueueOperator from "../../parts/QueueOperator"
+import { spotifySettingStateAtom } from "@/atoms/spotifySettingStateAtom"
+import { webDAVSettingStateAtom } from "@/atoms/webDAVSettingStateAtom"
 import useBreakPoints from "@/hooks/useBreakPoints"
 import useSearch from "@/hooks/useSearch"
-import useSpotifySettingState from "@/hooks/useSpotifySettingState"
-import useWebDAVSettingState from "@/hooks/useWebDAVSettingState"
 import { Track } from "@/types/Track"
 
 type Props = {
@@ -41,8 +42,8 @@ const SearchModal = ({
     mergedWebDAVSearchResult,
     resetAll
   } = useSearch()
-  const { settingState: spotifySettingState } = useSpotifySettingState()
-  const { settingState: webDAVSettingState } = useWebDAVSettingState()
+  const spotifySettingState = useRecoilValue(spotifySettingStateAtom)
+  const webDAVSettingState = useRecoilValue(webDAVSettingStateAtom)
 
   const inputRef = useRef<HTMLInputElement>(null)
 

hooks/useInitializer.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from "react"
+import { useAuthState } from "react-firebase-hooks/auth"
+import { useSetRecoilState } from "recoil"
+import useSetSpotifySettingState from "./useSetSpotifySettingState"
+import useSpotifyApi from "./useSpotifyApi"
+import useSpotifyToken from "./useSpotifyToken"
+import useSetWebDAVSettingState from "./useWebDAVSettingState"
+import { faviconIndexAtom } from "@/atoms/faviconIndexAtom"
+import { LOCAL_STORAGE_KEYS } from "@/constants/LocalStorageKeys"
+import { auth } from "@/utils/firebase"
+import { generateRandomNumber } from "@/utils/randomNumberGenerator"
+
+const useInitializer = () => {
+  /** MixJuiceを開いた時に実行したい、かつ表示に直接関係ない処理はこのフック内で行う TODO: ログインチェックなど */
+
+  const [user, loading] = useAuthState(auth)
+
+  useSpotifyApi({ initialize: true })
+  useSpotifyToken({ initialize: true })
+
+  useSetSpotifySettingState({ isLoadingUser: loading })
+  useSetWebDAVSettingState({ isLoadingUser: loading })
+
+  const setFaviconIndex = useSetRecoilState(faviconIndexAtom)
+  useEffect(() => {
+    setFaviconIndex(generateRandomNumber(1, 12))
+  }, [setFaviconIndex])
+
+  /** 不要説 */
+  useEffect(() => {
+    const localStorageDataFormatVersion = localStorage.getItem(
+      LOCAL_STORAGE_KEYS.LOCAL_STORAGE_DATA_FORMAT_VERSION
+    )
+
+    if (!localStorageDataFormatVersion) {
+      localStorage.setItem(
+        LOCAL_STORAGE_KEYS.LOCAL_STORAGE_DATA_FORMAT_VERSION,
+        "1"
+      )
+    }
+  }, [])
+
+  return { user, isLoadingUser: loading } as const
+}
+
+export default useInitializer

hooks/useSearch.tsx

@@ -1,9 +1,10 @@
 import { useState, useCallback } from "react"
+import { useRecoilValue } from "recoil"
 import useErrorModal from "./useErrorModal"
 import useMergedWebDAVServerData from "./useMergedWebDAVServerData"
 import useSpotifyApi from "./useSpotifyApi"
-import useSpotifySettingState from "./useSpotifySettingState"
-import useWebDAVSettingState from "./useWebDAVSettingState"
+import { spotifySettingStateAtom } from "@/atoms/spotifySettingStateAtom"
+import { webDAVSettingStateAtom } from "@/atoms/webDAVSettingStateAtom"
 import { LOCAL_STORAGE_KEYS } from "@/constants/LocalStorageKeys"
 import { Track, formatFromSpotifyTrack } from "@/types/Track"
 
@@ -22,8 +23,8 @@ const useSearch = () => {
   const { searchTracks: searchSpotifyTracks } = useSpotifyApi({
     initialize: false
   })
-  const { settingState: webDAVSettingState } = useWebDAVSettingState()
-  const { settingState: spotifySettingState } = useSpotifySettingState()
+  const webDAVSettingState = useRecoilValue(webDAVSettingStateAtom)
+  const spotifySettingState = useRecoilValue(spotifySettingStateAtom)
   const [spotifySearchNextOffset, setSpotifySearchNextOffset] = useState<
     number | undefined
   >(0)

hooks/useSpotifySettingState.tsx → hooks/useSetSpotifySettingState.tsx

@@ -1,29 +1,30 @@
-import { useEffect, useState } from "react"
-import { useAuthState } from "react-firebase-hooks/auth"
-import { useRecoilValue } from "recoil"
+import { useEffect } from "react"
+import { useRecoilValue, useSetRecoilState } from "recoil"
 import useStorage from "./useStorage"
 import { selectedSpotifyPlaylistsAtom } from "@/atoms/selectedSpotifyPlaylistsAtom"
+import { spotifySettingStateAtom } from "@/atoms/spotifySettingStateAtom"
 import { FIRESTORE_DOCUMENT_KEYS } from "@/constants/Firestore"
 import { LOCAL_STORAGE_KEYS } from "@/constants/LocalStorageKeys"
 import { LocalStorageSpotifySelectedPlaylists } from "@/types/LocalStorageSpotifySelectedPlaylists"
-import { ProviderSettingState } from "@/types/ProviderSettingState"
-import { auth } from "@/utils/firebase"
 import { isDefined } from "@/utils/isDefined"
 
-const useSpotifySettingState = () => {
+type Args = {
+  isLoadingUser: boolean
+}
+
+const useSetSpotifySettingState = ({ isLoadingUser }: Args) => {
   const selectedPlaylists = useRecoilValue(selectedSpotifyPlaylistsAtom)
   const { getUserData } = useStorage()
-  const [, loading] = useAuthState(auth)
 
   /**
    * done: Spotifyのログイン・プレイリストの選択が完了している
    * setting: Spotifyのログインは完了しているが、プレイリストの選択が完了していない
    * none: Spotifyのログインが完了していない
    */
-  const [settingState, setSettingState] = useState<ProviderSettingState>("none")
+  const setSettingState = useSetRecoilState(spotifySettingStateAtom)
   useEffect(() => {
     ;(async () => {
-      if (loading) return
+      if (isLoadingUser) return
 
       const refreshToken = await getUserData(
         FIRESTORE_DOCUMENT_KEYS.SPOTIFY_REFRESH_TOKEN
@@ -53,9 +54,7 @@ const useSpotifySettingState = () => {
 
       setSettingState("done")
     })()
-  }, [selectedPlaylists, getUserData, loading])
-
-  return { settingState } as const
+  }, [selectedPlaylists, getUserData, isLoadingUser, setSettingState])
 }
 
-export default useSpotifySettingState
+export default useSetSpotifySettingState

hooks/useWebDAVSettingState.tsx

@@ -1,11 +1,15 @@
-import { useEffect, useMemo } from "react"
-import { useRecoilState } from "recoil"
+import { useEffect } from "react"
+import { useRecoilState, useSetRecoilState } from "recoil"
 import { selectedWebDAVFoldersAtom } from "@/atoms/selectedWebDAVFoldersAtom"
 import { webDAVAuthenticatedAtom } from "@/atoms/webDAVAuthenticatedAtom"
+import { webDAVSettingStateAtom } from "@/atoms/webDAVSettingStateAtom"
 import { LOCAL_STORAGE_KEYS } from "@/constants/LocalStorageKeys"
-import { ProviderSettingState } from "@/types/ProviderSettingState"
 
-const useWebDAVSettingState = () => {
+type Args = {
+  isLoadingUser: boolean
+}
+
+const useSetWebDAVSettingState = ({ isLoadingUser }: Args) => {
   /**
    * done: WebDAVサーバーへのログイン・フォルダーの指定が完了している
    * setting: WebDAVサーバーへのログインは完了しているが、フォルダーの指定が完了していない
@@ -16,11 +20,20 @@ const useWebDAVSettingState = () => {
   )
   const [folderPath, setFolderPath] = useRecoilState(selectedWebDAVFoldersAtom)
 
-  const settingState = useMemo<ProviderSettingState>(() => {
-    if (isAuthenticated === false) return "none"
-    if (folderPath === undefined) return "setting"
-    return "done"
-  }, [isAuthenticated, folderPath])
+  const setSettingState = useSetRecoilState(webDAVSettingStateAtom)
+  useEffect(() => {
+    if (isAuthenticated === false) {
+      setSettingState("none")
+      return
+    }
+
+    if (folderPath === undefined) {
+      setSettingState("setting")
+      return
+    }
+
+    setSettingState("done")
+  }, [isAuthenticated, folderPath, setSettingState])
 
   /** ページロード時のlocalStorageからRecoilStateへの反映 */
   useEffect(() => {
@@ -41,8 +54,6 @@ const useWebDAVSettingState = () => {
       isAuthenticated ? "true" : "false"
     )
   }, [isAuthenticated])
-
-  return { settingState } as const
 }
 
-export default useWebDAVSettingState
+export default useSetWebDAVSettingState