#60

backend/app/controllers/posts_controller.rb

@@ -53,19 +53,30 @@ class PostsController < ApplicationController
   # POST /posts
   def create
     return head :unauthorized unless current_user
-    return head :forbidden unless ['admin', 'member'].include?(current_user.role)
+    return head :forbidden unless current_user.member?
 
     # TODO: URL が正規のものがチェック，不正ならエラー
+    # TODO: title、URL は必須にする．
+    # TODO: サイトに応じて thumbnail_base 設定
     title = params[:title]
-    post = Post.new(title:, url: params[:url], thumbnail_base: '', uploaded_user: current_user)
-    post.thumbnail.attach(params[:thumbnail])
+    url = params[:url]
+    thumbnail = params[:thumbnail]
+    tag_names = params[:tags].to_s.split(' ')
+    if tag_names.size < 20 && tag_names.none?('タグ希望')
+      tag_names << 'タグ希望'
+    end
+
+    post = Post.new(title:, url:, thumbnail_base: '', uploaded_user: current_user)
+    post.thumbnail.attach(thumbnail)
     if post.save
       post.resized_thumbnail!
-      if params[:tags].present?
-        tag_ids = JSON.parse(params[:tags])
-        post.tags = Tag.where(id: tag_ids)
-      end
-      render json: post, status: :created
+      # TODO: 接頭辞に応じて category 変へる
+      post.tags = tag_names.map { |name| Tag.find_or_initialize_by(name:) { |tag|
+        tag.category = 'general'
+      } }
+
+      render json: post.as_json(include: { tags: { only: [:id, :name, :category] } }),
+             status: :created
     else
       render json: { errors: post.errors.full_messages }, status: :unprocessable_entity
     end
@@ -88,11 +99,23 @@ class PostsController < ApplicationController
   # PATCH/PUT /posts/1
   def update
     return head :unauthorized unless current_user
-    return head :forbidden unless ['admin', 'member'].include?(current_user.role)
+    return head :forbidden unless current_user.member?
 
-    post = Post.find(params[:id])
-    tag_ids = JSON.parse(params[:tags])
-    if post.update(title: params[:title], tags: Tag.where(id: tag_ids))
+    title = params[:title]
+    tag_names = params[:tags].to_s.split(' ')
+    if tag_names.size < 20 && tag_names.none?('タグ希望')
+      tag_names << 'タグ希望'
+    end
+
+    post = Post.find(params[:id].to_i)
+    tags = post.tags.where(category: 'nico').to_a
+    tag_names.each do |name|
+      # TODO: 接頭辞に応じて category 変へる
+      tags << Tag.find_or_initialize_by(name:) { |tag|
+        tag.category = 'general'
+      }
+    end
+    if post.update(title:, tags:)
       render({ json:    (post
                          .as_json(include: { tags: { only: [:id, :name, :category] } })),
                status:  :created })

backend/app/models/post.rb

@@ -14,6 +14,8 @@ class Post < ApplicationRecord
                                       Rails.application.routes.url_helpers.rails_blob_url(
                                           thumbnail, only_path: false) :
                                       nil })
+  rescue
+    super(options).merge(thumbnail: nil)
   end
 
   def resized_thumbnail!

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 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 [tags, setTags] = useState<string> (post.tags
+					    .filter (t => t.category !== 'nico')
+					    .map (t => t.name)
+					    .join (' '))
+
+  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>
-          <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>
+	  <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>
+	  <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>
       </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} />)

frontend/src/pages/posts/PostDetailPage.tsx

@@ -99,7 +99,7 @@ export default ({ user }: Props) => {
                   {post.viewed ? '閲覧済' : '未閲覧'}
                 </Button>
                 <TabGroup>
-                  {(['admin', 'member'].some (r => r === user.role) && editing) && (
+                  {(['admin', 'member'].some (r => r === user?.role) && editing) && (
                       <Tab name="編輯">
                         <PostEditForm post={post}
                                       onSave={newPost => {

frontend/src/pages/posts/PostNewPage.tsx

@@ -7,6 +7,7 @@ import NicoViewer from '@/components/NicoViewer'
 import Form from '@/components/common/Form'
 import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
+import TextArea from '@/components/common/TextArea'
 import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
@@ -15,8 +16,8 @@ import { cn } from '@/lib/utils'
 
 import type { Post, Tag } from '@/types'
 
-type Props = { posts:     Post[]
-               setPosts:  (posts: Post[]) => void }
+type Props = { posts:	  Post[]
+	       setPosts:  (posts: Post[]) => void }
 
 
 export default () => {
@@ -31,34 +32,28 @@ export default () => {
   const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
   const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
   const [thumbnailLoading, setThumbnailLoading] = useState (false)
-  const [tags, setTags] = useState<Tag[]> ([])
-  const [tagIds, setTagIds] = useState<number[]> ([])
+  const [tags, setTags] = useState ('')
+
   const previousURLRef = useRef ('')
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     const formData = new FormData ()
     formData.append ('title', title)
     formData.append ('url', url)
-    formData.append ('tags', JSON.stringify (tagIds))
+    formData.append ('tags', tags)
     formData.append ('thumbnail', thumbnailFile)
 
     void (axios.post (`${ API_BASE_URL }/posts`, formData, { headers: {
-              'Content-Type':     'multipart/form-data',
-              'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
-          .then (() => {
-            toast ({ title: '投稿成功!' })
-            navigate ('/posts')
-          })
-          .catch (() => toast ({ title:        '投稿失敗',
-                                 description:  '入力を確認してください。' })))
+	      'Content-Type':	  'multipart/form-data',
+	      'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
+	  .then (() => {
+	    toast ({ title: '投稿成功!' })
+	    navigate ('/posts')
+	  })
+	  .catch (() => toast ({ title:        '投稿失敗',
+				 description:  '入力を確認してください。' })))
   }
 
-  useEffect (() => {
-    void (axios.get ('/api/tags')
-          .then (res => setTags (res.data))
-          .catch (() => toast ({ title: 'タグ一覧の取得失敗' })))
-  }, [])
-
   useEffect (() => {
     if (titleAutoFlg && url)
       fetchTitle ()
@@ -80,130 +75,115 @@ export default () => {
     previousURLRef.current = url
   }
 
-  const fetchTitle = () => {
+  const fetchTitle = async () => {
     setTitle ('')
     setTitleLoading (true)
-    void (axios.get (`${ API_BASE_URL }/preview/title`, {
-              params:   { url },
-              headers:  { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
-          .then (res => {
-            setTitle (res.data.title || '')
-            setTitleLoading (false)
-          })
-          .finally (() => setTitleLoading (false)))
+    const { data } = await axios.get (`${ API_BASE_URL }/preview/title`, {
+	params:   { url },
+	headers:  { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
+    setTitle (data.title || '')
+    setTitleLoading (false)
   }
 
-  const fetchThumbnail = () => {
+  const fetchThumbnail = async () => {
     setThumbnailPreview ('')
     setThumbnailFile (null)
     setThumbnailLoading (true)
     if (thumbnailPreview)
       URL.revokeObjectURL (thumbnailPreview)
-    void (axios.get (`${ API_BASE_URL }/preview/thumbnail`, {
-              params:       { url },
-              headers:      { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' },
-              responseType: 'blob' })
-          .then (res => {
-            const imageURL = URL.createObjectURL (res.data)
-            setThumbnailPreview (imageURL)
-            setThumbnailFile (new File ([res.data],
-                                        'thumbnail.png',
-                                        { type: res.data.type || 'image/png' }))
-            setThumbnailLoading (false)
-          })
-          .finally (() => setThumbnailLoading (false)))
+    const { data } = await axios.get (`${ API_BASE_URL }/preview/thumbnail`, {
+	params:       { url },
+	headers:      { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' },
+	responseType: 'blob' })
+    const imageURL = URL.createObjectURL (data)
+    setThumbnailPreview (imageURL)
+    setThumbnailFile (new File ([data],
+				'thumbnail.png',
+				{ type: data.type || 'image/png' }))
+    setThumbnailLoading (false)
   }
 
   return (
       <MainArea>
-        <Helmet>
-          <title>{`広場に投稿を追加 | ${ SITE_TITLE }`}</title>
-        </Helmet>
-        <Form>
-          <PageTitle>広場に投稿を追加する</PageTitle>
-
-          {/* URL */}
-          <div>
-            <Label>URL</Label>
-            <input type="text"
-                   placeholder="例：https://www.nicovideo.jp/watch/..."
-                   value={url}
-                   onChange={e => setURL (e.target.value)}
-                   className="w-full border p-2 rounded"
-                   onBlur={handleURLBlur} />
-          </div>
-
-          {/* タイトル */}
-          <div>
-            <Label checkBox={{
-                label:    '自動',
-                checked:  titleAutoFlg,
-                onChange: ev => setTitleAutoFlg (ev.target.checked)}}>
-              タイトル
-            </Label>
-            <input type="text"
-                   className="w-full border rounded p-2"
-                   value={title}
-                   placeholder={titleLoading ? 'Loading...' : ''}
-                   onChange={ev => setTitle (ev.target.value)}
-                   disabled={titleAutoFlg} />
-          </div>
-
-          {/* サムネール */}
-          <div>
-            <Label checkBox={{
-                label:    '自動',
-                checked:  thumbnailAutoFlg,
-                onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}>
-              サムネール
-            </Label>
-            {thumbnailAutoFlg
-             ? (thumbnailLoading
-                ? <p className="text-gray-500 text-sm">Loading...</p>
-                : !(thumbnailPreview) && (
-                    <p className="text-gray-500 text-sm">
-                      URL から自動取得されます。
-                    </p>))
-             : (
-                <input type="file"
-                       accept="image/*"
-                       onChange={e => {
-                         const file = e.target.files?.[0]
-                         if (file)
-                           {
-                             setThumbnailFile (file)
-                             setThumbnailPreview (URL.createObjectURL (file))
-                           }
-                       }} />)}
-            {thumbnailPreview && (
-                <img src={thumbnailPreview}
-                     alt="preview"
-                     className="mt-2 max-h-48 rounded border" />)}
-          </div>
-
-          {/* タグ */}
-          <div>
-            <Label>タグ</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"
-                  disabled={titleLoading || thumbnailLoading}>
-            追加
-          </Button>
-        </Form>
+	<Helmet>
+	  <title>{`広場に投稿を追加 | ${ SITE_TITLE }`}</title>
+	</Helmet>
+	<Form>
+	  <PageTitle>広場に投稿を追加する</PageTitle>
+
+	  {/* URL */}
+	  <div>
+	    <Label>URL</Label>
+	    <input type="text"
+		   placeholder="例：https://www.nicovideo.jp/watch/..."
+		   value={url}
+		   onChange={e => setURL (e.target.value)}
+		   className="w-full border p-2 rounded"
+		   onBlur={handleURLBlur} />
+	  </div>
+
+	  {/* タイトル */}
+	  <div>
+	    <Label checkBox={{
+		label:	  '自動',
+		checked:  titleAutoFlg,
+		onChange: ev => setTitleAutoFlg (ev.target.checked)}}>
+	      タイトル
+	    </Label>
+	    <input type="text"
+		   className="w-full border rounded p-2"
+		   value={title}
+		   placeholder={titleLoading ? 'Loading...' : ''}
+		   onChange={ev => setTitle (ev.target.value)}
+		   disabled={titleAutoFlg} />
+	  </div>
+
+	  {/* サムネール */}
+	  <div>
+	    <Label checkBox={{
+		label:	  '自動',
+		checked:  thumbnailAutoFlg,
+		onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}>
+	      サムネール
+	    </Label>
+	    {thumbnailAutoFlg
+	     ? (thumbnailLoading
+		? <p className="text-gray-500 text-sm">Loading...</p>
+		: !(thumbnailPreview) && (
+		    <p className="text-gray-500 text-sm">
+		      URL から自動取得されます。
+		    </p>))
+	     : (
+		<input type="file"
+		       accept="image/*"
+		       onChange={e => {
+			 const file = e.target.files?.[0]
+			 if (file)
+			   {
+			     setThumbnailFile (file)
+			     setThumbnailPreview (URL.createObjectURL (file))
+			   }
+		       }} />)}
+	    {thumbnailPreview && (
+		<img src={thumbnailPreview}
+		     alt="preview"
+		     className="mt-2 max-h-48 rounded border" />)}
+	  </div>
+
+	  {/* タグ */}
+	  {/* TextArea で自由形式にする */}
+	  <div>
+	    <Label>タグ</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"
+		  disabled={titleLoading || thumbnailLoading}>
+	    追加
+	  </Button>
+	</Form>
       </MainArea>)
 }