#43 完了

frontend/src/App.tsx

@@ -59,7 +59,7 @@ export default () => {
                 <Route path="/" element={<Navigate to="/posts" replace />} />
                 <Route path="/posts" element={<PostPage />} />
                 <Route path="/posts/new" element={<PostNewPage />} />
-                <Route path="/posts/:id" element={<PostDetailPage />} />
+                <Route path="/posts/:id" element={<PostDetailPage user={user} />} />
                 <Route path="/tags/:tag" element={<TagPage />} />
                 <Route path="/wiki/:name" element={<WikiDetailPage />} />
                 <Route path="/wiki/new" element={<WikiNewPage />} />

frontend/src/components/PostEditForm.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react'
+import axios from 'axios'
+import { API_BASE_URL } from '@/config'
+
+import type { Post, Tag } from '@/types'
+
+type Props = { post:    Post
+               onSave:  (newPost: Post) => void }
+
+
+export default ({ post, onSave }: Props) => {
+  const [title, setTitle] = useState (post.title)
+  const [tags, setTags] = useState<Tag[]> ([])
+  const [tagIds, setTagIds] = useState<number[]> (post.tags.map (t => t.id))
+
+  const handleSubmit = () => {
+    void (axios.put (`${ API_BASE_URL }/posts/${ post.id }`,
+                     { title,
+                       tags:  JSON.stringify (tagIds) },
+                     { headers: { 'Content-Type':     'multipart/form-data',
+                                  'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } } )
+          .then (res => {
+            const newPost: Post = res.data
+            onSave ({ ...post,
+                      title:  newPost.title,
+                      tags:   newPost.tags } as Post)
+          }))
+  }
+
+  useEffect (() => {
+    void (axios.get ('/api/tags')
+          .then (res => setTags (res.data))
+          .catch (() => toast ({ title: 'タグ一覧の取得失敗' })))
+  }, [])
+
+  return (
+      <div className="max-w-xl p-4 space-y-4">
+        {/* タイトル */}
+        <div>
+          <div className="flex gap-2 mb-1">
+            <label className="flex-1 block font-semibold">タイトル</label>
+          </div>
+          <input type="text"
+                 className="w-full border rounded p-2"
+                 value={title}
+                 onChange={e => setTitle (e.target.value)} />
+        </div>
+
+        {/* タグ */}
+        <div>
+          <label className="block font-semibold">タグ</label>
+          <select multiple
+                  value={tagIds.map (String)}
+                  onChange={e => {
+                    const values = Array.from (e.target.selectedOptions).map (o => Number (o.value))
+                    setTagIds (values)
+                  }}
+                  className="w-full p-2 border rounded h-32">
+            {tags.map ((tag: Tag) => (
+                <option key={tag.id} value={tag.id}>
+                  {tag.name}
+                </option>))}
+          </select>
+        </div>
+
+        {/* 送信 */}
+        <button onClick={handleSubmit}
+                className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
+          更新
+        </button>
+      </div>)
+}

frontend/src/components/TagDetailSidebar.tsx

@@ -24,7 +24,7 @@ export default ({ post }: Props) => {
     if (!(post))
       return
 
-    const fetchTags = async () => {
+    const fetchTags = () => {
       const tagsTmp: TagByCategory = { }
       for (const tag of post.tags)
         {

frontend/src/pages/PostDetailPage.tsx

@@ -8,17 +8,21 @@ import { toast } from '@/components/ui/use-toast'
 import { cn } from '@/lib/utils'
 import MainArea from '@/components/layout/MainArea'
 import TagDetailSidebar from '@/components/TagDetailSidebar'
+import PostEditForm from '@/components/PostEditForm'
 
-import type { Post, Tag } from '@/types'
+import type { Post, Tag, User } from '@/types'
+
+type Props = { user: User }
 
 
-const PostDetailPage = () => {
+export default ({ user }: Props) => {
   const { id } = useParams ()
 
-  const [post, setPost] = useState<Post | null> (null)
-
   const location = useLocation ()
 
+  const [post, setPost] = useState<Post | null> (null)
+  const [editing, setEditing] = useState (true)
+
   const changeViewedFlg = () => {
     if (post?.viewed)
       {
@@ -56,6 +60,15 @@ const PostDetailPage = () => {
           .catch (err => console.error ('うんち!', err)))
   }, [id])
 
+  useEffect (() => {
+    setEditing (false)
+  }, [post])
+
+  useEffect (() => {
+    if (!(editing))
+      setEditing (true)
+  }, [editing])
+
   if (!(post))
     return (
         <>
@@ -93,11 +106,19 @@ const PostDetailPage = () => {
                                        post.viewed ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-600')}>
                   {post.viewed ? '閲覧済' : '未閲覧'}
                 </Button>
+                {(['admin', 'member'].includes (user.role) && editing) &&
+                    <div className="mt-4">
+                      <span className="text-blue-400 hover:underline cursor-pointer">
+                        編輯
+                      </span>
+                      <PostEditForm post={post}
+                                    onSave={newPost => {
+                                      setPost (newPost)
+                                      toast ({ description: '更新しました．' })
+                                    }} />
+                    </div>}
               </div>)
            : 'Loading...'}
         </MainArea>
       </>)
 }
-
-
-export default PostDetailPage

frontend/src/pages/PostNewPage.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useRef } from 'react'
 import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'
 import axios from 'axios'
-import { API_BASE_URL, SITE_TITLE } from '../config'
-import NicoViewer from '../components/NicoViewer'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import NicoViewer from '@/components/NicoViewer'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { cn } from '@/lib/utils'
@@ -10,7 +10,6 @@ import MainArea from '@/components/layout/MainArea'
 
 import type { Post, Tag } from '@/types'
 
-
 type Props = { posts:     Post[]
                setPosts:  (posts: Post[]) => void }