システムメッセージをトーストで表示できるようにした。

Mouwf · Feb 18, 2024 · d71e8c2 · d71e8c2
1 parent 7967a4b
commit d71e8c2
Show file tree

Hide file tree

Showing 11 changed files with 162 additions and 16 deletions.
diff --git a/app/contexts/system-message/system-message-context.ts b/app/contexts/system-message/system-message-context.ts
@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+/**
+ * システムメッセージコンテキスト。
+ */
+const SystemMessageContext = createContext({
+    showSystemMessage: (status: "success" | "error", message: string) => {}
+});
+export default SystemMessageContext;
diff --git a/app/contexts/system-message/system-message-provider.tsx b/app/contexts/system-message/system-message-provider.tsx
@@ -0,0 +1,49 @@
+import SystemMessageContext from "./system-message-context";
+import { ReactNode } from "react";
+import toast, { Toaster, useToaster } from "react-hot-toast";
+
+/**
+ * システムメッセージプロバイダー。
+ * @param children 子要素。
+ * @returns システムメッセージプロバイダー。
+ */
+const SystemMessageProvider = ({
+    children,
+}: {
+    children: ReactNode,
+}) => {
+    const showSystemMessage = (status: "success" | "error", message: string) => {
+        if (!message) return;
+        switch (status) {
+            case "success":
+            toast.success(message);
+            break;
+            case "error":
+            toast.error(message);
+            break;
+        }
+    };
+
+    return (
+        <SystemMessageContext.Provider value={{ showSystemMessage }}>
+            {children}
+            <Toaster
+                position="bottom-right"
+                toastOptions={{
+                    className: "",
+                    style: {
+                    background: "#363636",
+                    color: "#fff",
+                    },
+                    success: {
+                    duration: 3000,
+                    },
+                    error: {
+                    duration: 4000,
+                    },
+                }}
+            />
+        </SystemMessageContext.Provider>
+    );
+};
+export default SystemMessageProvider;
diff --git a/app/root.tsx b/app/root.tsx
@@ -9,6 +9,7 @@ import {
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
+import SystemMessageProvider from "./contexts/system-message/system-message-provider";
 
 export const links: LinksFunction = () => [
   ...(cssBundleHref ? [
@@ -27,10 +28,12 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Outlet />
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+        <SystemMessageProvider>
+          <Outlet />
+          <ScrollRestoration />
+          <Scripts />
+          <LiveReload />
+        </SystemMessageProvider>
       </body>
     </html>
   );

diff --git a/app/routes/app._index/route.tsx b/app/routes/app._index/route.tsx
@@ -7,8 +7,9 @@ import { newlyPostedPostCookie } from "../../cookies.server";
 import { useFetcher, useLoaderData } from "@remix-run/react";
 import PostContent from "../../models/post/post-content";
 import InfiniteScroll from "../components/infinite-scroll";
-import { useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { appLoadContext as context } from "../../dependency-injector/get-load-context";
+import SystemMessageContext from "../../contexts/system-message/system-message-context";
 import styles from "./route.module.css";
 
 /**
@@ -55,9 +56,15 @@ export const loader = async ({
  * @returns トップページのインデックス。
  */
 export default function TopIndex() {
-    // エラーメッセージを取得する。
+    // システムメッセージを取得する。
     const loaderData = useLoaderData<typeof loader>();
-    const errorMessage = "errorMessage" in loaderData ? loaderData.errorMessage : "";
+    const loaderErrorMessage = "errorMessage" in loaderData ? loaderData.errorMessage : "";
+
+    // システムメッセージを表示する。
+    const { showSystemMessage } = useContext(SystemMessageContext);
+    useEffect(() => {
+        showSystemMessage("error", loaderErrorMessage);
+    }, [loaderData]);
 
     // 最新の投稿を取得する。
     const fetcher = useFetcher<typeof loader>();

diff --git a/app/routes/app.post-message/route.tsx b/app/routes/app.post-message/route.tsx
@@ -4,6 +4,8 @@ import { Form, useActionData, useLoaderData } from "@remix-run/react";
 import { getSession } from "../../sessions";
 import { newlyPostedPostCookie } from "../../cookies.server";
 import { appLoadContext as context } from "../../dependency-injector/get-load-context";
+import { useContext, useEffect } from "react";
+import SystemMessageContext from "../../contexts/system-message/system-message-context";
 
 /**
  * メッセージ投稿ページのメタ情報を設定する。
@@ -88,12 +90,21 @@ export const action = async ({
  * @returns メッセージ投稿ページ。
  */
 export default function PostMessage() {
-    // エラーメッセージを取得する。
+    // システムメッセージを取得する。
     const loaderData = useLoaderData<typeof loader>();
     const loaderErrorMessage = "errorMessage" in loaderData ? loaderData.errorMessage : "";
     const actionData = useActionData<typeof action>();
     const actionErrorMessage = actionData ? actionData.errorMessage : "";
 
+    // システムメッセージを表示する。
+    const { showSystemMessage } = useContext(SystemMessageContext);
+    useEffect(() => {
+        showSystemMessage("error", loaderErrorMessage);
+    }, [loaderData]);
+    useEffect(() => {
+        showSystemMessage("error", actionErrorMessage);
+    }, [actionData]);
+
     // リリース情報を取得する。
     const allReleaseInformation = "errorMessage" in loaderData ? [] : loaderData;
     const getReleaseVersionOptions = () => {

diff --git a/app/routes/app.setting/route.tsx b/app/routes/app.setting/route.tsx
@@ -3,8 +3,9 @@ import { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction, json } from "@rem
 import { getSession } from "../../sessions";
 import { appLoadContext as context } from "../../dependency-injector/get-load-context";
 import { Form, useActionData, useLoaderData } from "@remix-run/react";
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useContext, useEffect, useState } from "react";
 import ErrorDisplay from "../components/error-display";
+import SystemMessageContext from "../../contexts/system-message/system-message-context";
 
 /**
  * 設定ページのメタ情報を設定する。
@@ -90,13 +91,23 @@ export const action = async ({
  * 設定ページ。
  */
 export default function Setting() {
-    // エラーメッセージを取得する。
+    // システムメッセージを取得する。
     const loaderData = useLoaderData<typeof loader>();
     const loaderErrorMessage = "errorMessage" in loaderData ? loaderData.errorMessage : "";
     const actionData = useActionData<typeof action>();
     const actionSuccessMessage = actionData && "successMessage" in actionData ? actionData.successMessage : "";
     const actionErrorMessage = actionData && "errorMessage" in actionData ? actionData.errorMessage : "";
 
+    // システムメッセージを表示する。
+    const { showSystemMessage } = useContext(SystemMessageContext);
+    useEffect(() => {
+        showSystemMessage("error", loaderErrorMessage);
+    }, [loaderData]);
+    useEffect(() => {
+        showSystemMessage("success", actionSuccessMessage);
+        showSystemMessage("error", actionErrorMessage);
+    }, [actionData]);
+
     // ローダーでエラーが発生した場合、エラーメッセージを表示するコンポーネントを表示する。
     if ("errorMessage" in loaderData) {
         return (
@@ -105,7 +116,6 @@ export default function Setting() {
     }
 
     // ユーザー設定を取得する。
-    const settingLoaderData = "errorMessage" in loaderData ? { userSetting: {}, allReleaseInformation: [] } : loaderData;
     const userSetting = loaderData.userSetting;
 
     // リリース情報を全件表示する。

diff --git a/app/routes/auth.login/route.tsx b/app/routes/auth.login/route.tsx
@@ -3,6 +3,8 @@ import { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction, json, redirect }
 import { Form, useActionData, useLoaderData } from "@remix-run/react";
 import { commitSession, getSession } from "../../sessions";
 import { appLoadContext as context } from "../../dependency-injector/get-load-context";
+import { useContext, useEffect } from "react";
+import SystemMessageContext from "../../contexts/system-message/system-message-context";
 
 /**
  * ログインページのメタ情報を設定する。
@@ -105,12 +107,21 @@ export const action = async ({
  * @returns ログインページ。
  */
 export default function Login() {
-    // エラーメッセージを取得する。
+    // システムメッセージを取得する。
     const loaderData = useLoaderData<typeof loader>();
     const loaderErrorMessage = loaderData && "errorMessage" in loaderData ? loaderData.errorMessage : "";
     const actionData = useActionData<typeof action>();
     const actionErrorMessage = actionData ? actionData.errorMessage : "";
 
+    // システムメッセージを表示する。
+    const { showSystemMessage } = useContext(SystemMessageContext);
+    useEffect(() => {
+        showSystemMessage("error", loaderErrorMessage);
+    }, [loaderData]);
+    useEffect(() => {
+        showSystemMessage("error", actionErrorMessage);
+    }, [actionData]);
+
     return (
         <Form method="post">
             <label>

diff --git a/app/routes/auth.register-user/route.tsx b/app/routes/auth.register-user/route.tsx
@@ -3,6 +3,8 @@ import { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction, json, redirect }
 import { Form, useActionData, useLoaderData } from "@remix-run/react";
 import { commitSession, destroySession, getSession } from "../../sessions";
 import { appLoadContext as context } from "../../dependency-injector/get-load-context";
+import { useContext, useEffect } from "react";
+import SystemMessageContext from "../../contexts/system-message/system-message-context";
 
 /**
  * ログインページのメタ情報を設定する。
@@ -107,12 +109,21 @@ export const action = async ({
  * @returns ユーザー登録ページ。
  */
 export default function RegisterUser() {
-    // エラーメッセージを取得する。
+    // システムメッセージを取得する。
     const loaderData = useLoaderData<typeof loader>();
     const loaderErrorMessage = "errorMessage" in loaderData ? loaderData.errorMessage : "";
     const actionData = useActionData<typeof action>();
     const actionErrorMessage = actionData ? actionData.errorMessage : "";
 
+    // システムメッセージを表示する。
+    const { showSystemMessage } = useContext(SystemMessageContext);
+    useEffect(() => {
+        showSystemMessage("error", loaderErrorMessage);
+    }, [loaderData]);
+    useEffect(() => {
+        showSystemMessage("error", actionErrorMessage);
+    }, [actionData]);
+
     // リリース情報を全件表示する。
     const allReleaseInformation = "errorMessage" in loaderData ? [] : loaderData;
     const getReleaseVersionOptions = () => {

diff --git a/app/routes/auth.signup/route.tsx b/app/routes/auth.signup/route.tsx
@@ -3,6 +3,8 @@ import { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction, json, redirect }
 import { Form, useActionData, useLoaderData } from "@remix-run/react";
 import { commitSession, getSession } from "../../sessions";
 import { appLoadContext as context } from "../../dependency-injector/get-load-context";
+import { useContext, useEffect } from "react";
+import SystemMessageContext from "../../contexts/system-message/system-message-context";
 
 /**
  * サインアップページのメタ情報を設定する。
@@ -89,12 +91,21 @@ export const action = async ({
  * @returns サインアップページ。
  */
 export default function Signup() {
-    // エラーメッセージを取得する。
+    // システムメッセージを取得する。
     const loaderData = useLoaderData<typeof loader>();
     const loaderErrorMessage = loaderData && "errorMessage" in loaderData ? loaderData.errorMessage : "";
     const actionData = useActionData<typeof action>();
     const actionErrorMessage = actionData ? actionData.errorMessage : "";
 
+    // システムメッセージを表示する。
+    const { showSystemMessage } = useContext(SystemMessageContext);
+    useEffect(() => {
+        showSystemMessage("error", actionErrorMessage);
+    }, [loaderData]);
+    useEffect(() => {
+        showSystemMessage("error", actionErrorMessage);
+    }, [actionData]);
+
     return (
         <Form method="post">
             <label>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "pg": "^8.11.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "source-map-support": "^0.5.21"
   },
   "devDependencies": {