This commit is contained in:
@@ -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