From 98d514d29cff73c772de992f15569dd9e850e4f4 Mon Sep 17 00:00:00 2001
From: Naoki <eigoninaritai.naokichi@gmail.com>
Date: Sat, 13 Jan 2024 01:24:58 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E3=83=88=E3=83=83=E3=83=97=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AE=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3=E3=81=97=E3=81=9F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/routes/app/route.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/routes/app/route.tsx b/app/routes/app/route.tsx
index 9eafddf..aed0f3c 100644
--- a/app/routes/app/route.tsx
+++ b/app/routes/app/route.tsx
@@ -7,7 +7,7 @@ import Header from "./components/header";
 import Footer from "./components/footer";
 
 /**
- * トップページのメタ情報を取得する。
+ * トップページのメタ情報を設定する。
  * @returns トップページのメタ情報。
  */
 export const meta: MetaFunction = () => {

From 4d51e04a320e04023c7de33451d7047f6debe99f Mon Sep 17 00:00:00 2001
From: Naoki <eigoninaritai.naokichi@gmail.com>
Date: Sat, 13 Jan 2024 02:32:25 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E3=83=A1=E3=83=83=E3=82=BB=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=82=92=E6=8A=95=E7=A8=BF=E3=81=99=E3=82=8B=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=97=E3=81=9F?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app._index/components/post-entry.tsx      |  2 +-
 app/routes/app._index/route.tsx               | 10 +-
 app/routes/app.post-message/route.tsx         | 94 +++++++++++++++++++
 tests/routes/app._index/route.spec.ts         | 17 +++-
 tests/routes/app.post-message/route.spec.ts   | 53 +++++++++++
 5 files changed, 172 insertions(+), 4 deletions(-)
 create mode 100644 app/routes/app.post-message/route.tsx
 create mode 100644 tests/routes/app.post-message/route.spec.ts

diff --git a/app/routes/app._index/components/post-entry.tsx b/app/routes/app._index/components/post-entry.tsx
index abb9dfb..a58d702 100644
--- a/app/routes/app._index/components/post-entry.tsx
+++ b/app/routes/app._index/components/post-entry.tsx
@@ -9,7 +9,7 @@ export default function PostEntry() {
     const snsUser = useSnsUser();
 
     return (
-        <Link to="app/post">
+        <Link to="/app/post-message">
             <p>{snsUser.name}</p>
             <p>投稿</p>
         </Link>
diff --git a/app/routes/app._index/route.tsx b/app/routes/app._index/route.tsx
index fee839b..6ef2a94 100644
--- a/app/routes/app._index/route.tsx
+++ b/app/routes/app._index/route.tsx
@@ -21,7 +21,15 @@ export const loader = async ({
     const cookieHeader = request.headers.get("Cookie");
     const cookie = (await newlyPostedPostCookie.parse(cookieHeader)) || {};
     const postContents: PostContent[] = await context.latestPostsLoader.getLatestPosts("0");
-    if (Object.keys(cookie).length > 0 && cookie.isPosted) {
+    if (cookie.isPosted) {
+        const userPostContent: PostContent = {
+            id: "userPost",
+            createdAt: new Date(),
+            releaseVersion: cookie.releaseVersion,
+            tag: cookie.tag,
+            content: cookie.content,
+        };
+        postContents.unshift(userPostContent);
         return json(postContents);
     }
     return json(postContents);
diff --git a/app/routes/app.post-message/route.tsx b/app/routes/app.post-message/route.tsx
new file mode 100644
index 0000000..37ec41e
--- /dev/null
+++ b/app/routes/app.post-message/route.tsx
@@ -0,0 +1,94 @@
+import { ActionFunctionArgs, MetaFunction, redirect } from "@netlify/remix-runtime";
+import { Form } from "@remix-run/react";
+import { newlyPostedPostCookie } from "../../cookies.server";
+
+/**
+ * メッセージ投稿ページのメタ情報を設定する。
+ * @returns メッセージ投稿ページのメタ情報。
+ */
+export const meta: MetaFunction = () => {
+    return [
+        { title: "メッセージを投稿する" },
+        { name: "description", content: "FF14SNSのメッセージ投稿ページです。" },
+    ];
+}
+
+/**
+ * メッセージを投稿するアクション。
+ * @param request リクエスト。
+ * @param context コンテキスト。
+ * @returns メッセージを投稿するアクション。
+ */
+export const action = async ({
+    request,
+    context,
+}: ActionFunctionArgs) => {
+    // フォームデータを取得する。
+    const formData = await request.formData();
+    const releaseVersion = formData.get("releaseVersion");
+    const tag = formData.get("tag");
+    const content = formData.get("content");
+
+    // 投稿を保存する。
+    const cookie = {
+        releaseVersion: releaseVersion,
+        tag: tag,
+        content: content,
+        isPosted: true,
+    };
+    return redirect("/app", {
+        headers: {
+            "Set-Cookie": await newlyPostedPostCookie.serialize(cookie),
+        },
+    });
+}
+
+/**
+ * メッセージ投稿ページ。
+ * @returns メッセージ投稿ページ。
+ */
+export default function PostMessage() {
+    const releaseVersions = [
+        "パッチ5",
+        "パッチ4",
+        "パッチ3",
+        "パッチ2",
+        "パッチ1",
+    ];
+    const getReleaseVersionOptions = () => {
+        return <select name="releaseVersion">
+            {releaseVersions.map((releaseVersion, index) => {
+                return <option key={index} value={releaseVersion}>{releaseVersion}</option>;
+            })}
+        </select>;
+    }
+
+    const tags = [
+        "タグ1",
+        "タグ2",
+        "タグ3",
+        "タグ4",
+    ];
+    const getTagOptions = () => {
+        return <select name="tag">
+            {tags.map((tag, index) => {
+                return <option key={index} value={tag}>{tag}</option>;
+            })}
+        </select>;
+    }
+
+    return (
+        <Form method="post">
+            <div>
+                {getReleaseVersionOptions()}
+                {getTagOptions()}
+            </div>
+            <div>
+                <textarea name="content" placeholder="メッセージを入力してください" />
+            </div>
+            <div>
+                <button type="submit">投稿</button>
+            </div>
+        </Form>
+    );
+}
\ No newline at end of file
diff --git a/tests/routes/app._index/route.spec.ts b/tests/routes/app._index/route.spec.ts
index b24fdc2..2897abb 100644
--- a/tests/routes/app._index/route.spec.ts
+++ b/tests/routes/app._index/route.spec.ts
@@ -24,6 +24,9 @@ beforeEach(async () => {
     requestWithCookie = new Request("https://example.com", {
         headers: {
             Cookie: await newlyPostedPostCookie.serialize({
+                releaseVersion: "パッチ5",
+                tag: "タグ2",
+                content: "クッキー経由の投稿テスト！",
                 isPosted: true,
             }),
         },
@@ -47,7 +50,7 @@ describe("loader", () => {
         expect(resultPostContents.length).toBe(10);
     });
 
-    test("loader should return 10 PostContent objects with cookie.", async () => {
+    test("loader should return 11 PostContent objects with cookie.", async () => {
         // ローダーを実行し、結果を取得する。
         const response = await loader({
             request: requestWithCookie,
@@ -59,6 +62,16 @@ describe("loader", () => {
         const resultPostContents = await response.json();
 
         // 結果を検証する。
-        expect(resultPostContents.length).toBe(10);
+        const expectedUserPost = {
+            id: "userPost",
+            releaseVersion: "パッチ5",
+            tag: "タグ2",
+            content: "クッキー経由の投稿テスト！",
+        }
+        expect(resultPostContents.length).toBe(11);
+        expect(resultPostContents[0].id).toBe(expectedUserPost.id);
+        expect(resultPostContents[0].releaseVersion).toBe(expectedUserPost.releaseVersion);
+        expect(resultPostContents[0].tag).toBe(expectedUserPost.tag);
+        expect(resultPostContents[0].content).toBe(expectedUserPost.content);
     });
 });
\ No newline at end of file
diff --git a/tests/routes/app.post-message/route.spec.ts b/tests/routes/app.post-message/route.spec.ts
new file mode 100644
index 0000000..f94d59f
--- /dev/null
+++ b/tests/routes/app.post-message/route.spec.ts
@@ -0,0 +1,53 @@
+import { describe, test, expect, beforeEach } from "@jest/globals";
+import { AppLoadContext } from "@netlify/remix-runtime";
+import appLoadContext from "../../dependency-injector/app-load-context";
+import { action } from "../../../app/routes/app.post-message/route";
+import { newlyPostedPostCookie } from "../../../app/cookies.server";
+
+/**
+ * モックリクエスト。
+ */
+let request: Request;
+
+/**
+ * モックコンテキスト。
+ */
+let context: AppLoadContext;
+
+beforeEach(async () => {
+    request = new Request("https://example.com", {
+        method: "POST",
+        body: new URLSearchParams({
+            releaseVersion: "パッチ5",
+            tag: "タグ2",
+            content: "アクション経由の投稿テスト！",
+        }),
+    });
+    context = appLoadContext;
+});
+
+describe('action', () => {
+    test('action should set cookie about post.', async () => {
+        // アクションを実行し、結果を取得する。
+        const response = await action({
+            request,
+            params: {},
+            context,
+        });
+
+        // 検証に必要な情報を取得する。
+        const status = response.status;
+        const location = response.headers.get("Location");
+        const cookie = await newlyPostedPostCookie.parse(response.headers.get("Set-Cookie"));
+
+        // 結果を検証する。
+        expect(status).toBe(302);
+        expect(location).toBe("/app");
+        expect(cookie).toEqual({
+            releaseVersion: "パッチ5",
+            tag: "タグ2",
+            content: "アクション経由の投稿テスト！",
+            isPosted: true,
+        });
+    });
+});
\ No newline at end of file