みてるぞ
d50a302d26
#64 おそらく完成 Merge remote-tracking branch 'origin/main' into feature/064 #64 バックエンドぼちぼち Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: #173
91 行
2.7 KiB
TypeScript
91 行
2.7 KiB
TypeScript
import axios from 'axios'
|
|
import toCamel from 'camelcase-keys'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import PostFormTagsArea from '@/components/PostFormTagsArea'
|
|
import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
|
|
import Label from '@/components/common/Label'
|
|
import { Button } from '@/components/ui/button'
|
|
import { API_BASE_URL } from '@/config'
|
|
|
|
import type { FC } from 'react'
|
|
|
|
import type { Post, Tag } from '@/types'
|
|
|
|
|
|
const tagsToStr = (tags: Tag[]): string => {
|
|
const result: Tag[] = []
|
|
|
|
const walk = (tag: Tag) => {
|
|
const { children, ...rest } = tag
|
|
result.push (rest)
|
|
children?.forEach (walk)
|
|
}
|
|
|
|
tags.filter (t => t.category !== 'nico').forEach (walk)
|
|
|
|
return [...(new Set (result.map (t => t.name)))].join (' ')
|
|
}
|
|
|
|
|
|
type Props = { post: Post
|
|
onSave: (newPost: Post) => void }
|
|
|
|
|
|
export default (({ post, onSave }: Props) => {
|
|
const [originalCreatedBefore, setOriginalCreatedBefore] =
|
|
useState<string | null> (post.originalCreatedBefore)
|
|
const [originalCreatedFrom, setOriginalCreatedFrom] =
|
|
useState<string | null> (post.originalCreatedFrom)
|
|
const [title, setTitle] = useState (post.title)
|
|
const [tags, setTags] = useState<string> ('')
|
|
|
|
const handleSubmit = async () => {
|
|
const res = await axios.put (
|
|
`${ API_BASE_URL }/posts/${ post.id }`,
|
|
{ title, tags,
|
|
original_created_from: originalCreatedFrom,
|
|
original_created_before: originalCreatedBefore },
|
|
{ headers: { 'Content-Type': 'multipart/form-data',
|
|
'X-Transfer-Code': localStorage.getItem ('user_code') ?? '' } })
|
|
const data = toCamel (res.data as any, { deep: true }) as Post
|
|
onSave ({ ...post,
|
|
title: data.title,
|
|
tags: data.tags,
|
|
originalCreatedFrom: data.originalCreatedFrom,
|
|
originalCreatedBefore: data.originalCreatedBefore } as Post)
|
|
}
|
|
|
|
useEffect (() => {
|
|
setTags(tagsToStr (post.tags))
|
|
}, [post])
|
|
|
|
return (
|
|
<div className="max-w-xl pt-2 space-y-4">
|
|
{/* タイトル */}
|
|
<div>
|
|
<Label>タイトル</Label>
|
|
<input type="text"
|
|
className="w-full border rounded p-2"
|
|
value={title}
|
|
onChange={ev => setTitle (ev.target.value)}/>
|
|
</div>
|
|
|
|
{/* タグ */}
|
|
<PostFormTagsArea tags={tags} setTags={setTags}/>
|
|
|
|
{/* オリジナルの作成日時 */}
|
|
<PostOriginalCreatedTimeField
|
|
originalCreatedFrom={originalCreatedFrom}
|
|
setOriginalCreatedFrom={setOriginalCreatedFrom}
|
|
originalCreatedBefore={originalCreatedBefore}
|
|
setOriginalCreatedBefore={setOriginalCreatedBefore}/>
|
|
|
|
{/* 送信 */}
|
|
<Button onClick={handleSubmit}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
|
|
更新
|
|
</Button>
|
|
</div>)
|
|
}) satisfies FC<Props>
|