From 082c60283fd8386bde032e4c75a965ba868b293b Mon Sep 17 00:00:00 2001 From: FUGAMARU Date: Sat, 21 Oct 2023 01:07:05 +0900 Subject: [PATCH] =?UTF-8?q?[Update]=20=E3=82=B5=E3=82=A4=E3=83=B3=E3=82=A4?= =?UTF-8?q?=E3=83=B3=E3=81=97=E3=81=A6=E3=81=84=E3=81=AA=E3=81=84=E5=A0=B4?= =?UTF-8?q?=E5=90=88(=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC=E6=9C=AA?= =?UTF-8?q?=E7=99=BB=E9=8C=B2=E5=90=AB)=E3=81=AF=E3=82=B5=E3=82=A4?= =?UTF-8?q?=E3=83=B3=E3=82=A4=E3=83=B3=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AB?= =?UTF-8?q?=E9=A3=9B=E3=81=B0=E3=81=99=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/layout/Curtain.tsx | 29 +++++++++++++++++++++++----- hooks/useInitializer.tsx | 36 ++++++++++++++++++++++++++++++++++- 2 files changed, 59 insertions(+), 6 deletions(-) diff --git a/components/layout/Curtain.tsx b/components/layout/Curtain.tsx index 201f04a..0b86272 100644 --- a/components/layout/Curtain.tsx +++ b/components/layout/Curtain.tsx @@ -4,23 +4,29 @@ import { Box } from "@mantine/core" import { useFavicon } from "@mantine/hooks" import { usePathname } from "next/navigation" import { useState, useEffect, memo, useMemo } from "react" +import { useAuthState } from "react-firebase-hooks/auth" 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 { userDataAtom } from "@/atoms/userDataAtom" import { STYLING_VALUES } from "@/constants/StylingValues" import { ZINDEX_NUMBERS } from "@/constants/ZIndexNumbers" import useBreakPoints from "@/hooks/useBreakPoints" import useInitializer from "@/hooks/useInitializer" import { Children } from "@/types/Children" +import { auth } from "@/utils/firebase" +import { isDefined } from "@/utils/isDefined" const Curtain = ({ children }: Children) => { useInitializer() const pathname = usePathname() const { breakPoint } = useBreakPoints() + const [user, isLoadingUser] = useAuthState(auth) + const userData = useRecoilValue(userDataAtom) const screenHeightWithoutHeader = useMemo( () => `calc(100vh - ${STYLING_VALUES.HEADER_HEIGHT}px)`, @@ -31,27 +37,40 @@ const Curtain = ({ children }: Children) => { const isLoading = useRecoilValue(loadingAtom) const [className, setClassName] = useState("") - const [isDisplay, setIsDisplay] = useState(true) + const [isDisplayLoadingScreen, setIsDisplayLoadingScreen] = useState(true) const faviconIndex = useRecoilValue(faviconIndexAtom) useEffect(() => { ;(async () => { + /** + * サインインページ以外において + * ①ユーザーの認証情報が読み込み中である + * ②ユーザー登録が完了していない + * ③ユーザーデーターをFirestoreから引っ張ってくる作業が完了していない + * のいずれかに該当する場合はローディング画面を表示したままにする + */ + if ( + !isSigninPage && + (isLoadingUser || !isDefined(user) || !isDefined(userData)) + ) + return + if (!isLoading.state) { await new Promise(resolve => setTimeout(resolve, 1500)) setClassName("animate__animated animate__fadeOut") await new Promise(resolve => setTimeout(resolve, 1000)) - setIsDisplay(false) + setIsDisplayLoadingScreen(false) return } if (isLoading.state && isLoading.stateChangedOn !== "initial") { - setIsDisplay(true) + setIsDisplayLoadingScreen(true) setClassName("animate__animated animate__fadeIn") } })() - }, [isLoading]) + }, [isLoading, user, userData, isLoadingUser, isSigninPage]) useFavicon(faviconIndex ? `/header-logos/logo-${faviconIndex}.png` : "") @@ -59,7 +78,7 @@ const Curtain = ({ children }: Children) => { <> { - /** MixJuiceを開いた時に実行したい、かつ表示に直接関係ない処理はこのフック内で行う TODO: ログインチェックなど */ + /** MixJuiceを開いた時に実行したい、かつ表示に直接関係ない処理はこのフック内で行う */ + + const router = useRouter() + const setIsLoading = useSetRecoilState(loadingAtom) + const [user, isLoadingUser] = useAuthState(auth) useSpotifyApi({ initialize: true }) useSpotifyToken({ initialize: true }) @@ -24,6 +33,31 @@ const useInitializer = () => { setFaviconIndex(generateRandomNumber(1, 12)) }, [setFaviconIndex]) + useEffect(() => { + /** 【サインインページに飛ばす条件】 + * ユーザーの認証情報が読み込み中でない、かつ + * ①ユーザー情報が空 (ユーザー登録が済んでいない or ログインしていない) + * ②メールアドレスの認証が完了していない + * ③LocalStorageにデーターの復号化キーが存在しない + * のいずれかに該当する場合はサインインページに飛ばす + */ + const decryptionKey = localStorage.getItem( + LOCAL_STORAGE_KEYS.DATA_DECRYPTION_KEY + ) + if ( + !isLoadingUser && + (!isDefined(user) || !user.emailVerified || !isDefined(decryptionKey)) + ) { + router.push("/signin") + return + } + + setIsLoading({ + stateChangedOn: "SigninPage", + state: false + }) + }, [setIsLoading, isLoadingUser, user, router]) + /** 不要説 */ useEffect(() => { const localStorageDataFormatVersion = localStorage.getItem(