From fd39bb87c3967607cd40c31a5520173bf158cd5f Mon Sep 17 00:00:00 2001 From: MurakawaTakuya Date: Sun, 29 Dec 2024 01:57:30 +0900 Subject: [PATCH] =?UTF-8?q?=E8=AA=8D=E8=A8=BC=E3=82=A8=E3=83=A9=E3=83=BC?= =?UTF-8?q?=E3=81=A7=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=8C=E5=81=9C=E6=AD=A2?= =?UTF-8?q?=E3=81=97=E3=81=9F=E5=A0=B4=E5=90=88=E3=81=AB=E3=83=AD=E3=82=B0?= =?UTF-8?q?=E3=82=A2=E3=82=A6=E3=83=88=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B=E6=A9=9F=E8=83=BD=E3=82=92?= =?UTF-8?q?=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Account/LoggedInView.tsx | 24 +------- src/Components/Loader/Loader.tsx | 74 +++++++++++++++++++++++++ src/Components/TopPage/TopPage.tsx | 36 ------------ src/app/layout.tsx | 2 +- src/utils/Auth/signOut.tsx | 21 +++++++ src/utils/UserContext.tsx | 16 ++---- 6 files changed, 104 insertions(+), 69 deletions(-) create mode 100644 src/Components/Loader/Loader.tsx delete mode 100644 src/Components/TopPage/TopPage.tsx create mode 100644 src/utils/Auth/signOut.tsx diff --git a/src/Components/Account/LoggedInView.tsx b/src/Components/Account/LoggedInView.tsx index f3cae1e..9aa9a36 100644 --- a/src/Components/Account/LoggedInView.tsx +++ b/src/Components/Account/LoggedInView.tsx @@ -1,12 +1,10 @@ -import { auth } from "@/app/firebase"; import NameUpdate from "@/Components/NameUpdate/NameUpdate"; import NotificationButton from "@/Components/NotificationButton/NotificationButton"; -import { showSnackBar } from "@/Components/SnackBar/SnackBar"; +import { handleSignOut } from "@/utils/Auth/signOut"; import { useUser } from "@/utils/UserContext"; import Button from "@mui/material/Button"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; -import { signOut } from "firebase/auth"; export const RoundedButton = styled(Button)(({ theme }) => ({ borderRadius: "30px", @@ -16,24 +14,6 @@ export const RoundedButton = styled(Button)(({ theme }) => ({ export default function LoggedInView() { const { user } = useUser(); - const handleLogout = async () => { - try { - await signOut(auth); - - showSnackBar({ - message: "ログアウトしました", - type: "success", - }); - } catch (error) { - console.error("errorCode:", (error as Error)?.name); - console.error("errorMessage:", (error as Error)?.message); - showSnackBar({ - message: "ログアウトに失敗しました", - type: "warning", - }); - } - }; - if (!user) { return null; } @@ -87,7 +67,7 @@ export default function LoggedInView() { )} - + ログアウト diff --git a/src/Components/Loader/Loader.tsx b/src/Components/Loader/Loader.tsx new file mode 100644 index 0000000..e2495fa --- /dev/null +++ b/src/Components/Loader/Loader.tsx @@ -0,0 +1,74 @@ +"use client"; +import { handleSignOut } from "@/utils/Auth/signOut"; +import { useUser } from "@/utils/UserContext"; +import CircularProgress from "@mui/joy/CircularProgress"; +import { Button, Typography } from "@mui/material"; +import { redirect } from "next/navigation"; +import { ReactNode, useState } from "react"; + +interface LoaderProps { + children: ReactNode; +} + +export const Loader = ({ children }: LoaderProps) => { + const [showErrorButton, setShowErrorButton] = useState(false); + + const { user } = useUser(); + if (user === null && window.location.pathname !== "/account/") { + redirect("/account"); + } + + // 10秒経ったらボタンを表示 + setTimeout(() => { + setShowErrorButton(true); + }, 6000); + + return ( + <> + {user === undefined ? ( + <> + + {showErrorButton && ( +
+ + 認証エラーが発生した可能性があります。 +
+ ページを更新しても解消しない場合や通信の問題でない場合は再度ログインしてください。 + + +
+ )} + + ) : ( +
{children}
+ )} + + ); +}; diff --git a/src/Components/TopPage/TopPage.tsx b/src/Components/TopPage/TopPage.tsx deleted file mode 100644 index 16ba2ff..0000000 --- a/src/Components/TopPage/TopPage.tsx +++ /dev/null @@ -1,36 +0,0 @@ -"use client"; -import { useUser } from "@/utils/UserContext"; -import CircularProgress from "@mui/joy/CircularProgress"; -import { redirect } from "next/navigation"; -import { ReactNode } from "react"; - -interface LoaderProps { - children: ReactNode; -} - -export const Loader = ({ children }: LoaderProps) => { - const { user } = useUser(); - if (user === null && window.location.pathname !== "/account/") { - redirect("/account"); - } - return ( - <> - {user === undefined ? ( - - ) : ( -
{children}
- )} - - ); -}; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ba1256a..7b4b895 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,7 @@ import Header from "@/Components/Header/Header"; +import { Loader } from "@/Components/Loader/Loader"; import NavigationMenu from "@/Components/NavigationMenu/NavigationMenu"; import SnackBar from "@/Components/SnackBar/SnackBar"; -import { Loader } from "@/Components/TopPage/TopPage"; import "@/styles/globals.scss"; import "@/utils/CloudMessaging/getNotification"; import { UserProvider } from "@/utils/UserContext"; diff --git a/src/utils/Auth/signOut.tsx b/src/utils/Auth/signOut.tsx new file mode 100644 index 0000000..d525d80 --- /dev/null +++ b/src/utils/Auth/signOut.tsx @@ -0,0 +1,21 @@ +import { auth } from "@/app/firebase"; +import { showSnackBar } from "@/Components/SnackBar/SnackBar"; +import { signOut } from "firebase/auth"; + +export const handleSignOut = async () => { + try { + await signOut(auth); + + showSnackBar({ + message: "ログアウトしました", + type: "success", + }); + } catch (error) { + console.error("errorCode:", (error as Error)?.name); + console.error("errorMessage:", (error as Error)?.message); + showSnackBar({ + message: "ログアウトに失敗しました", + type: "warning", + }); + } +}; diff --git a/src/utils/UserContext.tsx b/src/utils/UserContext.tsx index 25f628f..f75b4b1 100644 --- a/src/utils/UserContext.tsx +++ b/src/utils/UserContext.tsx @@ -1,11 +1,7 @@ "use client"; import { auth } from "@/app/firebase"; -import { showSnackBar } from "@/Components/SnackBar/SnackBar"; import { LoginType, User } from "@/types/types"; -import { - fetchUserById, - handleFetchUserError, -} from "@/utils/API/User/fetchUser"; +import { fetchUserById } from "@/utils/API/User/fetchUser"; import { User as FirebaseUser, onAuthStateChanged } from "firebase/auth"; import { createContext, @@ -100,11 +96,11 @@ export const UserProvider = ({ children }: Props) => { } } catch (error: unknown) { console.error("ユーザーデータの取得に失敗しました:", error); - const message = handleFetchUserError(error); - showSnackBar({ - message, - type: "warning", - }); + // const message = handleFetchUserError(error); + // showSnackBar({ + // message, + // type: "warning", + // }); } } );