Change: ArticleForm にデータ取得層を追加して更新時に再取得できるようにした

itizawa · Oct 13, 2024 · a53622b · a53622b
1 parent c2f0a13
commit a53622b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/apps/web/src/app/dashboards/blogs/[blogId]/articles/[articleId]/edit/page.tsx b/apps/web/src/app/dashboards/blogs/[blogId]/articles/[articleId]/edit/page.tsx
@@ -13,15 +13,7 @@ export default async function Page({ params }: { params: { blogId: string; artic
 
   return (
     <Stack maxWidth={1260} mx='auto' py={4} px={2} gap={2}>
-      <ArticleForm
-        existingArticle={{
-          id: article.id,
-          title: article.title,
-          body: article.body,
-          status: article.status,
-        }}
-        subDomain={blog.subDomain}
-      />
+      <ArticleForm existingArticle={article} subDomain={blog.subDomain} />
     </Stack>
   );
 }
diff --git a/apps/web/src/components/models/article/ArticleForm/ArticleForm.tsx b/apps/web/src/components/models/article/ArticleForm/ArticleForm.tsx
@@ -11,14 +11,17 @@ import type { FC } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import urlJoin from 'url-join';
 import type { z } from 'zod';
+
 import { convertStatus } from '~/actions/article';
 import { updateDraftArticle } from '~/actions/draftArticle';
 import { updatePublishArticle } from '~/actions/publishArticle';
 import { Editor } from '~/components/uiParts/Editor';
 import { appUrls } from '~/constants/appUrls';
+import { mutateArticle, useArticle } from '~/hooks/article/useArticle/useArticle';
+
 import { generateSubDomainUrl } from '~/utils/generateSubDomainUrl';
 
-const inputSchema = ArticleSchema.pick({ title: true, body: true });
+const inputSchema = ArticleSchema;
 type InputState = z.infer<typeof inputSchema>;
 
 type Props = {
@@ -29,7 +32,19 @@ type Props = {
   };
 };
 
-export const ArticleForm: FC<Props> = ({ subDomain, existingArticle }) => {
+export const ArticleForm: FC<Props> = ({ subDomain, existingArticle: _existingArticle }) => {
+  const { data: existingArticle, isLoading } = useArticle({
+    id: _existingArticle.id,
+    fallbackData: _existingArticle,
+  });
+
+  if (isLoading) return null;
+  if (!existingArticle) return null;
+
+  return <ArticleFormCore subDomain={subDomain} existingArticle={existingArticle} />;
+};
+
+export const ArticleFormCore: FC<Props> = ({ subDomain, existingArticle }) => {
   const { enqueueSnackbar } = useSnackbar();
   const { palette } = useTheme();
 
@@ -81,6 +96,7 @@ export const ArticleForm: FC<Props> = ({ subDomain, existingArticle }) => {
             toStatus: 'draft',
           });
           enqueueSnackbar({ message: '下書きに更新しました', variant: 'success' });
+          mutateArticle({ id: existingArticle.id });
           return;
         }
         case 'draft': {
@@ -89,6 +105,7 @@ export const ArticleForm: FC<Props> = ({ subDomain, existingArticle }) => {
             toStatus: 'publish',
           });
           enqueueSnackbar({ message: '公開しました', variant: 'success' });
+          mutateArticle({ id: existingArticle.id });
           return;
         }
         default: {