This commit is contained in:
@@ -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>)
|
||||
}
|
||||
|
||||
@@ -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>)
|
||||
|
||||
@@ -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} />)
|
||||
@@ -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 => {
|
||||
|
||||
@@ -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>
|
||||
<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>
|
||||
{/* 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: 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 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>
|
||||
{/* タグ */}
|
||||
{/* 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>
|
||||
{/* 送信 */}
|
||||
<Button onClick={handleSubmit}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
|
||||
disabled={titleLoading || thumbnailLoading}>
|
||||
追加
|
||||
</Button>
|
||||
</Form>
|
||||
</MainArea>)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user