Change: 編集画面へのリンクを表示した

apps/web/src/app/dashboards/blogs/[blogId]/articles/page.tsx

@@ -1,4 +1,5 @@
-import { Stack, Typography } from '@mui/material';
+import { Settings } from '@mui/icons-material';
+import { Box, IconButton, Link, Stack, Typography } from '@mui/material';
 import type { Blog } from '@repo/types';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
@@ -10,6 +11,7 @@ import { ArticleSummaryPaperForAdmin } from '~/components/models/article/Article
 import { CreateNewArticleButton } from '~/components/models/article/CreateNewArticleButton';
 import { LoadingBox } from '~/components/uiParts/LoadingBox';
 import { WisblogTabs } from '~/components/uiParts/WisblogTabs';
+import { appUrls } from '~/constants/appUrls';
 import { generateWisblogMetadata } from '~/libs/generateWisblogMetadata';
 
 export const metadata = generateWisblogMetadata({ title: '記事一覧' });
@@ -24,7 +26,14 @@ export default async function Page({ params }: { params: { blogId: string } }) {
 
   return (
     <Stack maxWidth={900} mx='auto' pt={2} pb={4} gap={3} px={2}>
-      <Typography variant='h4'>{blog.name}</Typography>
+      <Box display='flex' justifyContent='space-between'>
+        <Typography variant='h4'>{blog.name}</Typography>
+        <Link href={appUrls.dashboard.blogs.edit(blog.id)}>
+          <IconButton>
+            <Settings />
+          </IconButton>
+        </Link>
+      </Box>
       <Stack direction='row' justifyContent='space-between' columnGap={2}>
         <Typography variant='h5'>記事一覧</Typography>
         <CreateNewArticleButton blogId={blog.id} />

apps/web/src/app/dashboards/blogs/[blogId]/edit/page.tsx

@@ -0,0 +1,17 @@
+import { Stack, Typography } from '@mui/material';
+import { notFound } from 'next/navigation';
+import { getBlog } from '~/actions/blog';
+import { EditBlogForm } from '~/components/models/blog/EditBlogForm';
+
+export default async function Page({ params }: { params: { blogId: string } }) {
+  const blog = await getBlog({ id: params.blogId });
+
+  if (!blog) return notFound();
+
+  return (
+    <Stack maxWidth={600} mx='auto' pt={4} gap={3} px={2}>
+      <Typography variant='h5'>編集</Typography>
+      <EditBlogForm existingBlog={blog} />
+    </Stack>
+  );
+}

apps/web/src/components/models/blog/EditBlogForm/EditBlogForm.tsx

@@ -9,7 +9,7 @@ import { useSnackbar } from 'notistack';
 import type { FC } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import type { z } from 'zod';
-import { createBlog } from '~/actions/blog';
+import { createBlog, updateBlog } from '~/actions/blog';
 import { generateSubDomainUrl } from '~/utils/generateSubDomainUrl';
 
 const inputSchema = BlogSchema.pick({ name: true, subDomain: true });
@@ -40,11 +40,11 @@ export const EditBlogForm: FC<Props> = ({ existingBlog }) => {
   const onSubmit = handleSubmit(async ({ name, subDomain }) => {
     try {
       if (existingBlog) {
-        // await updateBlog({
-        //   id: existingBlog.id,
-        //   name,
-        //   subDomain,
-        // });
+        await updateBlog({
+          id: existingBlog.id,
+          name,
+          subDomain,
+        });
         enqueueSnackbar({ message: 'ブログを更新しました', variant: 'success' });
       } else {
         await createBlog({

apps/web/src/constants/appUrls.tsx

@@ -3,6 +3,7 @@ export const appUrls = {
     blogs: {
       new: () => '/dashboards/blogs/new' as const,
       list: () => '/blogs' as const,
+      edit: (blogId: string) => `/dashboards/blogs/${blogId}/edit` as const,
       articles: {
         list: (blogId: string) => `/dashboards/blogs/${blogId}/articles` as const,
         new: (blogId: string) => `/dashboards/blogs/${blogId}/articles/new` as const,