#60

frontend/src/components/PostEditForm.tsx

@@ -1,73 +1,56 @@
-import React, { useEffect, useState } from 'react'
 import axios from 'axios'
-import { API_BASE_URL } from '@/config'
+import React, { useEffect, useState } from 'react'
+
+import TextArea from '@/components/common/TextArea'
 import { Button } from '@/components/ui/button'
+import { API_BASE_URL } from '@/config'
 
 import type { Post, Tag } from '@/types'
 
-type Props = { post:    Post
-               onSave:  (newPost: Post) => void }
+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 [tags, setTags] = useState<string> (post.tags
+					    .filter (t => t.category !== 'nico')
+					    .map (t => t.name)
+					    .join (' '))
 
-  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)
-          }))
+  const handleSubmit = async () => {
+    const { data } = await axios.put (`${ API_BASE_URL }/posts/${ post.id }`, { title, tags },
+	{ headers: { 'Content-Type':     'multipart/form-data',
+		     'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } } )
+    onSave ({ ...post,
+	      title:  data.title,
+	      tags:   data.tags } as Post)
   }
 
-  useEffect (() => {
-    void (axios.get ('/api/tags')
-          .then (res => setTags (res.data))
-          .catch (() => toast ({ title: 'タグ一覧の取得失敗' })))
-  }, [])
-
   return (
       <div className="max-w-xl pt-2 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>
+	  <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>
+	{/* タグ */}
+	<div>
+	  <label className="block font-semibold">タグ</label>
+	  <TextArea value={tags}
+		    onChange={ev => setTags (ev.target.value)} />
+	</div>
 
-        {/* 送信 */}
-        <Button onClick={handleSubmit}
-                className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
-          更新
-        </Button>
+	{/* 送信 */}
+	<Button onClick={handleSubmit}
+		className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
+	  更新
+	</Button>
       </div>)
 }

frontend/src/components/TopNav.tsx

@@ -117,7 +117,7 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
     if (!(wikiId))
       return
 
-    void ((async () => {
+    void (async () => {
       try
       {
 	const { data: pageData } = await axios.get (`${ API_BASE_URL }/wiki/${ wikiId }`)
@@ -132,14 +132,14 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
       {
 	setPostCount (0)
       }
-    }) ())
+    }) ()
   }, [wikiId])
 
   return (
       <>
 	<nav className="bg-gray-800 text-white px-3 flex justify-between items-center w-full min-h-[48px]">
 	  <div className="flex items-center gap-2 h-full">
-	    <Link to="/posts" className="mx-4 text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
+	    <Link to="/" className="mx-4 text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
 	    <MyLink to="/posts" title="広場" />
 	    <MyLink to="/tags" title="タグ" />
 	    <MyLink to="/wiki/ヘルプ:ホーム" base="/wiki" title="Wiki" />
@@ -179,9 +179,10 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
 			 onFocus={() => setSuggestionsVsbl (true)}
 			 onBlur={() => setSuggestionsVsbl (false)}
 			 onKeyDown={handleKeyDown} /> */}
-		  <Link to="/tags" className={subClass}>タグ</Link>
-		  <Link to="/tags/aliases" className={subClass}>別名タグ</Link>
-		  <Link to="/tags/implications" className={subClass}>上位タグ</Link>
+		  {/* <Link to="/tags" className={subClass}>タグ</Link> */}
+		  {/* <Link to="/tags/aliases" className={subClass}>別名タグ</Link>
+		  <Link to="/tags/implications" className={subClass}>上位タグ</Link> */}
+		  <Link to="/tags/nico" className={subClass}>ニコニコ連携</Link>
 		  <Link to="/wiki/ヘルプ:タグのつけ方" className={subClass}>タグのつけ方</Link>
 		  <Link to="/wiki/ヘルプ:タグ" className={subClass}>ヘルプ</Link>
 		</div>)

frontend/src/components/common/TextArea.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+type Props = { value?:    string
+	       onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void }
+
+
+export default ({ value, onChange }: Props) => (
+    <textarea className="rounded border w-full p-2 h-32"
+	      value={value}
+	      onChange={onChange} />)