miteruzo/btrc-hub
1
0
Fork 0
Code Issues 69 Pull Requests 1 Releases Wiki Activity

#60

Browse Source
This commit is contained in:
みてるぞ
2025-07-09 06:54:19 +09:00
parent 57f3cf83ae
commit 9be4bb1532
7 changed files with 200 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/controllers/posts_controller.rb
+35 -12
View File
@@ -53,19 +53,30 @@ class PostsController < ApplicationController
# POST /posts # POST /posts
def create def create
return head :unauthorized unless current_user 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: URL が正規のものがチェック，不正ならエラー
# TODO: title、URL は必須にする．
# TODO: サイトに応じて thumbnail_base 設定
title = params[:title] title = params[:title]
post = Post.new(title:, url: params[:url], thumbnail_base: '', uploaded_user: current_user) url = params[:url]
post.thumbnail.attach(params[:thumbnail]) 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 if post.save
post.resized_thumbnail! post.resized_thumbnail!
if params[:tags].present? # TODO: 接頭辞に応じて category 変へる
tag_ids = JSON.parse(params[:tags]) post.tags = tag_names.map { |name| Tag.find_or_initialize_by(name:) { |tag|
post.tags = Tag.where(id: tag_ids) tag.category = 'general'
end } }
render json: post, status: :created
render json: post.as_json(include: { tags: { only: [:id, :name, :category] } }),
status: :created
else else
render json: { errors: post.errors.full_messages }, status: :unprocessable_entity render json: { errors: post.errors.full_messages }, status: :unprocessable_entity
end end
@@ -88,11 +99,23 @@ class PostsController < ApplicationController
# PATCH/PUT /posts/1 # PATCH/PUT /posts/1
def update def update
return head :unauthorized unless current_user 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]) title = params[:title]
tag_ids = JSON.parse(params[:tags]) tag_names = params[:tags].to_s.split(' ')
if post.update(title: params[:title], tags: Tag.where(id: tag_ids)) 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 render({ json: (post
.as_json(include: { tags: { only: [:id, :name, :category] } })), .as_json(include: { tags: { only: [:id, :name, :category] } })),
status: :created }) status: :created })
backend/app/models/post.rb
+2
View File
@@ -14,6 +14,8 @@ class Post < ApplicationRecord
Rails.application.routes.url_helpers.rails_blob_url( Rails.application.routes.url_helpers.rails_blob_url(
thumbnail, only_path: false) : thumbnail, only_path: false) :
nil }) nil })
rescue
super(options).merge(thumbnail: nil)
end end
def resized_thumbnail! def resized_thumbnail!
frontend/src/components/PostEditForm.tsx
+38 -55
View File
@@ -1,73 +1,56 @@
import React, { useEffect, useState } from 'react'
import axios from 'axios' 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 { Button } from '@/components/ui/button'
import { API_BASE_URL } from '@/config'
import type { Post, Tag } from '@/types' import type { Post, Tag } from '@/types'
type Props = { post: Post type Props = { post: Post
onSave: (newPost: Post) => void } onSave: (newPost: Post) => void }
export default ({ post, onSave }: Props) => { export default ({ post, onSave }: Props) => {
const [title, setTitle] = useState (post.title) const [title, setTitle] = useState (post.title)
const [tags, setTags] = useState<Tag[]> ([]) const [tags, setTags] = useState<string> (post.tags
const [tagIds, setTagIds] = useState<number[]> (post.tags.map (t => t.id)) .filter (t => t.category !== 'nico')
.map (t => t.name)
.join (' '))
const handleSubmit = () => { const handleSubmit = async () => {
void (axios.put (`${ API_BASE_URL }/posts/${ post.id }`, const { data } = await axios.put (`${ API_BASE_URL }/posts/${ post.id }`, { title, tags },
{ title, { headers: { 'Content-Type': 'multipart/form-data',
tags: JSON.stringify (tagIds) }, 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } } )
{ headers: { 'Content-Type': 'multipart/form-data', onSave ({ ...post,
'X-Transfer-Code': localStorage.getItem ('user_code') || '' } } ) title: data.title,
.then (res => { tags: data.tags } as Post)
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 ( return (
<div className="max-w-xl pt-2 space-y-4"> <div className="max-w-xl pt-2 space-y-4">
{/* タイトル */} {/* タイトル */}
<div> <div>
<div className="flex gap-2 mb-1"> <div className="flex gap-2 mb-1">
<label className="flex-1 block font-semibold">タイトル</label> <label className="flex-1 block font-semibold">タイトル</label>
</div> </div>
<input type="text" <input type="text"
className="w-full border rounded p-2" className="w-full border rounded p-2"
value={title} value={title}
onChange={e => setTitle (e.target.value)} /> onChange={e => setTitle (e.target.value)} />
</div> </div>
{/* タグ */} {/* タグ */}
<div> <div>
<label className="block font-semibold">タグ</label> <label className="block font-semibold">タグ</label>
<select multiple <TextArea value={tags}
value={tagIds.map (String)} onChange={ev => setTags (ev.target.value)} />
onChange={e => { </div>
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} <Button onClick={handleSubmit}
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"> className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
更新 更新
</Button> </Button>
</div>) </div>)
} }
frontend/src/components/TopNav.tsx
+7 -6
View File
@@ -117,7 +117,7 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
if (!(wikiId)) if (!(wikiId))
return return
void ((async () => { void (async () => {
try try
{ {
const { data: pageData } = await axios.get (`${ API_BASE_URL }/wiki/${ wikiId }`) const { data: pageData } = await axios.get (`${ API_BASE_URL }/wiki/${ wikiId }`)
@@ -132,14 +132,14 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
{ {
setPostCount (0) setPostCount (0)
} }
}) ()) }) ()
}, [wikiId]) }, [wikiId])
return ( return (
<> <>
<nav className="bg-gray-800 text-white px-3 flex justify-between items-center w-full min-h-[48px]"> <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"> <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="/posts" title="広場" />
<MyLink to="/tags" title="タグ" /> <MyLink to="/tags" title="タグ" />
<MyLink to="/wiki/ヘルプ:ホーム" base="/wiki" title="Wiki" /> <MyLink to="/wiki/ヘルプ:ホーム" base="/wiki" title="Wiki" />
@@ -179,9 +179,10 @@ const TopNav: React.FC = ({ user, setUser }: Props) => {
onFocus={() => setSuggestionsVsbl (true)} onFocus={() => setSuggestionsVsbl (true)}
onBlur={() => setSuggestionsVsbl (false)} onBlur={() => setSuggestionsVsbl (false)}
onKeyDown={handleKeyDown} /> */} onKeyDown={handleKeyDown} /> */}
<Link to="/tags" className={subClass}>タグ</Link> {/* <Link to="/tags" className={subClass}>タグ</Link> */}
<Link to="/tags/aliases" className={subClass}>別名タグ</Link> {/* <Link to="/tags/aliases" className={subClass}>別名タグ</Link>
<Link to="/tags/implications" 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>
<Link to="/wiki/ヘルプ:タグ" className={subClass}>ヘルプ</Link> <Link to="/wiki/ヘルプ:タグ" className={subClass}>ヘルプ</Link>
</div>) </div>)
frontend/src/components/common/TextArea.tsx
+10
View File
@@ -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
+1 -1
View File
@@ -99,7 +99,7 @@ export default ({ user }: Props) => {
{post.viewed ? '閲覧済' : '未閲覧'} {post.viewed ? '閲覧済' : '未閲覧'}
</Button> </Button>
<TabGroup> <TabGroup>
{(['admin', 'member'].some (r => r === user.role) && editing) && ( {(['admin', 'member'].some (r => r === user?.role) && editing) && (
<Tab name="編輯"> <Tab name="編輯">
<PostEditForm post={post} <PostEditForm post={post}
onSave={newPost => { onSave={newPost => {
frontend/src/pages/posts/PostNewPage.tsx
+107 -127
View File
@@ -7,6 +7,7 @@ import NicoViewer from '@/components/NicoViewer'
import Form from '@/components/common/Form' import Form from '@/components/common/Form'
import Label from '@/components/common/Label' import Label from '@/components/common/Label'
import PageTitle from '@/components/common/PageTitle' import PageTitle from '@/components/common/PageTitle'
import TextArea from '@/components/common/TextArea'
import MainArea from '@/components/layout/MainArea' import MainArea from '@/components/layout/MainArea'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast' import { toast } from '@/components/ui/use-toast'
@@ -15,8 +16,8 @@ import { cn } from '@/lib/utils'
import type { Post, Tag } from '@/types' import type { Post, Tag } from '@/types'
type Props = { posts: Post[] type Props = { posts: Post[]
setPosts: (posts: Post[]) => void } setPosts: (posts: Post[]) => void }
export default () => { export default () => {
@@ -31,34 +32,28 @@ export default () => {
const [thumbnailPreview, setThumbnailPreview] = useState<string> ('') const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true) const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
const [thumbnailLoading, setThumbnailLoading] = useState (false) const [thumbnailLoading, setThumbnailLoading] = useState (false)
const [tags, setTags] = useState<Tag[]> ([]) const [tags, setTags] = useState ('')
const [tagIds, setTagIds] = useState<number[]> ([])
const previousURLRef = useRef ('') const previousURLRef = useRef ('')
const handleSubmit = () => { const handleSubmit = async () => {
const formData = new FormData () const formData = new FormData ()
formData.append ('title', title) formData.append ('title', title)
formData.append ('url', url) formData.append ('url', url)
formData.append ('tags', JSON.stringify (tagIds)) formData.append ('tags', tags)
formData.append ('thumbnail', thumbnailFile) formData.append ('thumbnail', thumbnailFile)
void (axios.post (`${ API_BASE_URL }/posts`, formData, { headers: { void (axios.post (`${ API_BASE_URL }/posts`, formData, { headers: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data',
'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }) 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
.then (() => { .then (() => {
toast ({ title: '投稿成功!' }) toast ({ title: '投稿成功!' })
navigate ('/posts') navigate ('/posts')
}) })
.catch (() => toast ({ title: '投稿失敗', .catch (() => toast ({ title: '投稿失敗',
description: '入力を確認してください。' }))) description: '入力を確認してください。' })))
} }
useEffect (() => {
void (axios.get ('/api/tags')
.then (res => setTags (res.data))
.catch (() => toast ({ title: 'タグ一覧の取得失敗' })))
}, [])
useEffect (() => { useEffect (() => {
if (titleAutoFlg && url) if (titleAutoFlg && url)
fetchTitle () fetchTitle ()
@@ -80,130 +75,115 @@ export default () => {
previousURLRef.current = url previousURLRef.current = url
} }
const fetchTitle = () => { const fetchTitle = async () => {
setTitle ('') setTitle ('')
setTitleLoading (true) setTitleLoading (true)
void (axios.get (`${ API_BASE_URL }/preview/title`, { const { data } = await axios.get (`${ API_BASE_URL }/preview/title`, {
params: { url }, params: { url },
headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } }) headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
.then (res => { setTitle (data.title || '')
setTitle (res.data.title || '') setTitleLoading (false)
setTitleLoading (false)
})
.finally (() => setTitleLoading (false)))
} }
const fetchThumbnail = () => { const fetchThumbnail = async () => {
setThumbnailPreview ('') setThumbnailPreview ('')
setThumbnailFile (null) setThumbnailFile (null)
setThumbnailLoading (true) setThumbnailLoading (true)
if (thumbnailPreview) if (thumbnailPreview)
URL.revokeObjectURL (thumbnailPreview) URL.revokeObjectURL (thumbnailPreview)
void (axios.get (`${ API_BASE_URL }/preview/thumbnail`, { const { data } = await axios.get (`${ API_BASE_URL }/preview/thumbnail`, {
params: { url }, params: { url },
headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' }, headers: { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' },
responseType: 'blob' }) responseType: 'blob' })
.then (res => { const imageURL = URL.createObjectURL (data)
const imageURL = URL.createObjectURL (res.data) setThumbnailPreview (imageURL)
setThumbnailPreview (imageURL) setThumbnailFile (new File ([data],
setThumbnailFile (new File ([res.data], 'thumbnail.png',
'thumbnail.png', { type: data.type || 'image/png' }))
{ type: res.data.type || 'image/png' })) setThumbnailLoading (false)
setThumbnailLoading (false)
})
.finally (() => setThumbnailLoading (false)))
} }
return ( return (
<MainArea> <MainArea>
<Helmet> <Helmet>
<title>{`広場に投稿を追加 | ${ SITE_TITLE }`}</title> <title>{`広場に投稿を追加 | ${ SITE_TITLE }`}</title>
</Helmet> </Helmet>
<Form> <Form>
<PageTitle>広場に投稿を追加する</PageTitle> <PageTitle>広場に投稿を追加する</PageTitle>
{/* URL */} {/* URL */}
<div> <div>
<Label>URL</Label> <Label>URL</Label>
<input type="text" <input type="text"
placeholder="例：https://www.nicovideo.jp/watch/..." placeholder="例：https://www.nicovideo.jp/watch/..."
value={url} value={url}
onChange={e => setURL (e.target.value)} onChange={e => setURL (e.target.value)}
className="w-full border p-2 rounded" className="w-full border p-2 rounded"
onBlur={handleURLBlur} /> onBlur={handleURLBlur} />
</div> </div>
{/* タイトル */} {/* タイトル */}
<div> <div>
<Label checkBox={{ <Label checkBox={{
label: '自動', label: '自動',
checked: titleAutoFlg, checked: titleAutoFlg,
onChange: ev => setTitleAutoFlg (ev.target.checked)}}> onChange: ev => setTitleAutoFlg (ev.target.checked)}}>
タイトル タイトル
</Label> </Label>
<input type="text" <input type="text"
className="w-full border rounded p-2" className="w-full border rounded p-2"
value={title} value={title}
placeholder={titleLoading ? 'Loading...' : ''} placeholder={titleLoading ? 'Loading...' : ''}
onChange={ev => setTitle (ev.target.value)} onChange={ev => setTitle (ev.target.value)}
disabled={titleAutoFlg} /> disabled={titleAutoFlg} />
</div> </div>
{/* サムネール */} {/* サムネール */}
<div> <div>
<Label checkBox={{ <Label checkBox={{
label: '自動', label: '自動',
checked: thumbnailAutoFlg, checked: thumbnailAutoFlg,
onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}> onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}>
サムネール サムネール
</Label> </Label>
{thumbnailAutoFlg {thumbnailAutoFlg
? (thumbnailLoading ? (thumbnailLoading
? <p className="text-gray-500 text-sm">Loading...</p> ? <p className="text-gray-500 text-sm">Loading...</p>
: !(thumbnailPreview) && ( : !(thumbnailPreview) && (
<p className="text-gray-500 text-sm"> <p className="text-gray-500 text-sm">
URL から自動取得されます。 URL から自動取得されます。
</p>)) </p>))
: ( : (
<input type="file" <input type="file"
accept="image/*" accept="image/*"
onChange={e => { onChange={e => {
const file = e.target.files?.[0] const file = e.target.files?.[0]
if (file) if (file)
{ {
setThumbnailFile (file) setThumbnailFile (file)
setThumbnailPreview (URL.createObjectURL (file)) setThumbnailPreview (URL.createObjectURL (file))
} }
}} />)} }} />)}
{thumbnailPreview && ( {thumbnailPreview && (
<img src={thumbnailPreview} <img src={thumbnailPreview}
alt="preview" alt="preview"
className="mt-2 max-h-48 rounded border" />)} className="mt-2 max-h-48 rounded border" />)}
</div> </div>
{/* タグ */} {/* タグ */}
<div> {/* TextArea で自由形式にする */}
<Label>タグ</Label> <div>
<select multiple <Label>タグ</Label>
value={tagIds.map (String)} <TextArea value={tags}
onChange={e => { onChange={ev => setTags (ev.target.value)} />
const values = Array.from (e.target.selectedOptions).map (o => Number (o.value)) </div>
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} <Button onClick={handleSubmit}
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400" className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
disabled={titleLoading || thumbnailLoading}> disabled={titleLoading || thumbnailLoading}>
追加 追加
</Button> </Button>
</Form> </Form>
</MainArea>) </MainArea>)
} }