miteruzo/btrc-hub
1
0
フォーク 0
コード 課題 71 Pull リクエスト 1 リリース Wiki アクティビティ

#90

ソースを参照
このコミットが含まれているのは:
みてるぞ
2026-06-03 23:05:46 +09:00
親 ba960de76f
コミット b5834976d2
28個のファイルの変更，854行の追加，542行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
frontend/src/components/PostEditForm.tsx
+27 -36
ファイルの表示
@@ -3,22 +3,21 @@ import { useEffect, useState } from 'react'
import PostFormTagsArea from '@/components/PostFormTagsArea'
import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
import FieldError from '@/components/common/FieldError'
import Label from '@/components/common/Label'
import FormField from '@/components/common/FormField'
import { useDialogue } from '@/components/dialogues/DialogueProvider'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { isApiError } from '@/lib/api'
import { extractValidationError } from '@/lib/apiErrors'
import { updatePost } from '@/lib/posts'
import { inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import type { FC, FormEvent } from 'react'
import type { FieldErrors } from '@/lib/apiErrors'
import type { Post, Tag } from '@/types'
type PostFormField =
'parentPostId' | 'tags' | 'originalCreatedFrom' | 'originalCreatedBefore'
'parentPostIds' | 'tags' | 'originalCreatedAt'
const tagsToStr = (tags: Tag[]): string => {
@@ -41,9 +40,9 @@ type Props = { post: Post
const PostEditForm: FC<Props> = ({ post, onSave }) => {
const [baseErrors, setBaseErrors] = useState<string[]> ([])
const [disabled, setDisabled] = useState (false)
const [fieldErrors, setFieldErrors] = useState<FieldErrors> ({ })
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<PostFormField> ()
const [originalCreatedBefore, setOriginalCreatedBefore] =
useState<string | null> (post.originalCreatedBefore)
const [originalCreatedFrom, setOriginalCreatedFrom] =
@@ -56,8 +55,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
const dialogue = useDialogue ()
const update = async (...args: Parameters<typeof updatePost>) => {
setFieldErrors ({ })
setBaseErrors ([])
clearValidationErrors ()
try
{
@@ -79,12 +77,8 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
if (response?.status !== 409)
{
const validationError = extractValidationError<PostFormField> (e)
if (validationError)
if (applyValidationError (e))
{
setFieldErrors (validationError.fieldErrors)
setBaseErrors (validationError.baseErrors)
toast ({ description: '更新はできなかったよ……' })
return
}
@@ -148,31 +142,28 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
<FieldError messages={baseErrors}/>
{/* タイトル */}
<div>
<Label>タイトル</Label>
<input
type="text"
disabled={disabled}
className={inputClass ()}
value={title ?? ''}
onChange={ev => setTitle (ev.target.value)}/>
</div>
<FormField label="タイトル">
{({ invalid }) => (
<input
type="text"
disabled={disabled}
className={inputClass (invalid)}
value={title ?? ''}
onChange={ev => setTitle (ev.target.value)}/>)}
</FormField>
{/* 親投稿 */}
<div>
<Label invalid={fieldErrors.parentPostIds && fieldErrors.parentPostIds.length > 0}>
親投稿
</Label>
<input
type="text"
disabled={disabled}
value={parentPostIds}
onChange={e => setParentPostIds (e.target.value)}
aria-invalid={fieldErrors.parentPostIds && fieldErrors.parentPostIds.length > 0}
className={inputClass (fieldErrors.parentPostIds
&& fieldErrors.parentPostIds.length > 0)}/>
<FieldError messages={fieldErrors.parentPostIds}/>
</div>
<FormField label="親投稿" messages={fieldErrors.parentPostIds}>
{({ describedBy, invalid }) => (
<input
type="text"
disabled={disabled}
value={parentPostIds}
onChange={e => setParentPostIds (e.target.value)}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}/>)}
</FormField>
{/* タグ */}
<PostFormTagsArea
frontend/src/components/PostFormTagsArea.tsx
+29 -28
ファイルの表示
@@ -3,8 +3,7 @@
import { useRef, useState } from 'react'
import TagSearchBox from '@/components/TagSearchBox'
import FieldError from '@/components/common/FieldError'
import Label from '@/components/common/Label'
import FormField from '@/components/common/FormField'
import TextArea from '@/components/common/TextArea'
import { apiGet } from '@/lib/api'
@@ -75,32 +74,34 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
}
return (
<div className="relative w-full">
<Label invalid={errors && errors.length > 0}>タグ</Label>
<TextArea
{...rest}
ref={ref}
value={tags}
invalid={errors && errors.length > 0}
onChange={ev => setTags (ev.target.value)}
onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
const pos = (ev.target as HTMLTextAreaElement).selectionStart
await recompute (pos)
}}
onFocus={() => setFocused (true)}
onBlur={() => {
setFocused (false)
setSuggestionsVsbl (false)
}}/>
{focused && (
<TagSearchBox
suggestions={suggestionsVsbl && suggestions.length > 0
? suggestions
: [] as Tag[]}
activeIndex={-1}
onSelect={handleTagSelect}/>)}
<FieldError messages={errors}/>
</div>)
<FormField className="relative w-full" label="タグ" messages={errors}>
{({ describedBy, invalid }) => (
<>
<TextArea
{...rest}
ref={ref}
value={tags}
aria-describedby={describedBy}
invalid={invalid}
onChange={ev => setTags (ev.target.value)}
onSelect={async (ev: SyntheticEvent<HTMLTextAreaElement>) => {
const pos = (ev.target as HTMLTextAreaElement).selectionStart
await recompute (pos)
}}
onFocus={() => setFocused (true)}
onBlur={() => {
setFocused (false)
setSuggestionsVsbl (false)
}}/>
{focused && (
<TagSearchBox
suggestions={suggestionsVsbl && suggestions.length > 0
? suggestions
: [] as Tag[]}
activeIndex={-1}
onSelect={handleTagSelect}/>)}
</>)}
</FormField>)
}
export default PostFormTagsArea
frontend/src/components/PostOriginalCreatedTimeField.tsx
+63 -63
ファイルの表示
@@ -1,6 +1,5 @@
import DateTimeField from '@/components/common/DateTimeField'
import { FieldError } from '@/components/common/FieldError'
import Label from '@/components/common/Label'
import FormField from '@/components/common/FormField'
import { Button } from '@/components/ui/button'
import type { FC } from 'react'
@@ -22,68 +21,69 @@ const PostOriginalCreatedTimeField: FC<Props> = (
setOriginalCreatedBefore,
errors }: Props,
) => (
<div>
<Label invalid={errors && errors.length > 0}>オリジナルの作成日時</Label>
<FormField label="オリジナルの作成日時" messages={errors}>
{({ describedBy, invalid }) => (
<>
<div className="my-1 flex">
<div className="w-80">
<DateTimeField
className="mr-2"
disabled={disabled ?? false}
aria-describedby={describedBy}
aria-invalid={invalid}
invalid={invalid}
value={originalCreatedFrom ?? undefined}
onChange={setOriginalCreatedFrom}
onBlur={ev => {
const v = ev.target.value
if (!(v))
return
<div className="my-1 flex">
<div className="w-80">
<DateTimeField
className="mr-2"
disabled={disabled ?? false}
aria-invalid={errors && errors.length > 0}
invalid={errors && errors.length > 0}
value={originalCreatedFrom ?? undefined}
onChange={setOriginalCreatedFrom}
onBlur={ev => {
const v = ev.target.value
if (!(v))
return
const d = new Date (v)
if (d.getMinutes () === 0 && d.getHours () === 0)
d.setDate (d.getDate () + 1)
else
d.setMinutes (d.getMinutes () + 1)
setOriginalCreatedBefore (d.toISOString ())
}}/>
以降
</div>
<div>
<Button
className="bg-gray-600 text-white rounded"
disabled={disabled}
onClick={() => {
setOriginalCreatedFrom (null)
}}>
リセット
</Button>
</div>
</div>
const d = new Date (v)
if (d.getMinutes () === 0 && d.getHours () === 0)
d.setDate (d.getDate () + 1)
else
d.setMinutes (d.getMinutes () + 1)
setOriginalCreatedBefore (d.toISOString ())
}}/>
以降
</div>
<div>
<Button
className="bg-gray-600 text-white rounded"
disabled={disabled}
onClick={() => {
setOriginalCreatedFrom (null)
}}>
リセット
</Button>
</div>
</div>
<div className="my-1 flex">
<div className="w-80">
<DateTimeField
className="mr-2"
disabled={disabled}
aria-invalid={errors && errors.length > 0}
invalid={errors && errors.length > 0}
value={originalCreatedBefore ?? undefined}
onChange={setOriginalCreatedBefore}/>
より前
</div>
<div>
<Button
className="bg-gray-600 text-white rounded"
disabled={disabled}
onClick={() => {
setOriginalCreatedBefore (null)
}}>
リセット
</Button>
</div>
</div>
<FieldError messages={errors}/>
</div>)
<div className="my-1 flex">
<div className="w-80">
<DateTimeField
className="mr-2"
disabled={disabled}
aria-describedby={describedBy}
aria-invalid={invalid}
invalid={invalid}
value={originalCreatedBefore ?? undefined}
onChange={setOriginalCreatedBefore}/>
より前
</div>
<div>
<Button
className="bg-gray-600 text-white rounded"
disabled={disabled}
onClick={() => {
setOriginalCreatedBefore (null)
}}>
リセット
</Button>
</div>
</div>
</>)}
</FormField>)
export default PostOriginalCreatedTimeField
frontend/src/components/TagSearch.tsx
+4 -2
ファイルの表示
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { apiGet } from '@/lib/api'
import { inputClass } from '@/lib/utils'
import TagSearchBox from './TagSearchBox'
@@ -110,11 +111,12 @@ const TagSearch: FC = () => {
onFocus={() => setSuggestionsVsbl (true)}
onBlur={() => setSuggestionsVsbl (false)}
onKeyDown={handleKeyDown}
className="w-full px-3 py-2 border rounded dark:border-gray-600 dark:bg-gray-800 dark:text-white"/>
className={inputClass (false,
'px-3 py-2 dark:border-gray-600 dark:bg-gray-800 dark:text-white')}/>
<TagSearchBox suggestions={suggestionsVsbl && suggestions.length ? suggestions : [] as Tag[]}
activeIndex={activeIndex}
onSelect={handleTagSelect}/>
</div>)
}
export default TagSearch
export default TagSearch
frontend/src/components/common/FieldError.tsx
+4 -3
ファイルの表示
@@ -1,14 +1,15 @@
import type { FC } from 'react'
type Props = { messages?: string[] }
type Props = { id?: string
messages?: string[] }
export const FieldError: FC<Props> = ({ messages }: Props) => {
export const FieldError: FC<Props> = ({ id, messages }: Props) => {
if (!(messages) || messages.length === 0)
return null
return (
<ul className="mt-1 space-y-1 text-red-700 dark:text-red-300">
<ul id={id} className="mt-1 space-y-1 text-red-700 dark:text-red-300">
{messages.map ((message, i) => <li key={i}>{message}</li>)}
</ul>)
}
frontend/src/components/common/FormField.tsx
+36
ファイルの表示
@@ -0,0 +1,36 @@
import { useId } from 'react'
import FieldError from '@/components/common/FieldError'
import Label from '@/components/common/Label'
import { cn } from '@/lib/utils'
import type { FC, ReactNode } from 'react'
type FieldState = { describedBy?: string
invalid: boolean }
type Props = {
children: (state: FieldState) => ReactNode
checkBox?: { label: string
checked: boolean
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void }
className?: string
label: ReactNode
messages?: string[] }
const FormField: FC<Props> = ({ children, checkBox, className, label, messages }: Props) => {
const id = useId ()
const invalid = messages != null && messages.length > 0
const errorId = invalid ? `${ id }-error` : undefined
return (
<div className={cn (className)}>
<Label checkBox={checkBox} invalid={invalid}>{label}</Label>
{children ({ describedBy: errorId, invalid })}
<FieldError id={errorId} messages={messages}/>
</div>)
}
export default FormField
frontend/src/components/common/TagInput.tsx
+11 -5
ファイルの表示
@@ -2,6 +2,7 @@ import { useState } from 'react'
import TagSearchBox from '@/components/TagSearchBox'
import { apiGet } from '@/lib/api'
import { inputClass } from '@/lib/utils'
import type { FC, ChangeEvent, KeyboardEvent } from 'react'
@@ -9,10 +10,13 @@ import type { Tag } from '@/types'
type Props = {
value: string
setValue: (value: string) => void }
describedBy?: string
invalid?: boolean
value: string
setValue: (value: string) => void }
const TagInput: FC<Props> = ({ value, setValue }) => {
const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
const [activeIndex, setActiveIndex] = useState (-1)
const [suggestions, setSuggestions] = useState<Tag[]> ([])
const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
@@ -85,12 +89,14 @@ const TagInput: FC<Props> = ({ value, setValue }) => {
<div className="relative">
<input
type="text"
aria-describedby={describedBy}
aria-invalid={invalid}
value={value}
onChange={whenChanged}
onFocus={() => setSuggestionsVsbl (true)}
onBlur={() => setSuggestionsVsbl (false)}
onKeyDown={handleKeyDown}
className="w-full border p-2 rounded"/>
className={inputClass (invalid)}/>
<TagSearchBox
suggestions={
suggestionsVsbl && suggestions.length > 0 ? suggestions : [] as Tag[]}
@@ -99,4 +105,4 @@ const TagInput: FC<Props> = ({ value, setValue }) => {
</div>)
}
export default TagInput
export default TagInput
frontend/src/components/common/TextArea.tsx
+1 -1
ファイルの表示
@@ -16,7 +16,7 @@ export default forwardRef<HTMLTextAreaElement, Props> (
(invalid
? ['border-red-500 bg-red-50 text-red-900',
'focus:border-red-500 focus:outline-none focus:ring-2',
'foucs:ring-red-200',
'focus:ring-red-200',
'dark:border-red-500 dark:bg-red-950/30 dark:text-red-100']
: ['border-gray-300',
'focus:border-blue-500 focus:outline-none focus:ring-2',
frontend/src/lib/useValidationErrors.ts
+28
ファイルの表示
@@ -0,0 +1,28 @@
import { useState } from 'react'
import { extractValidationError } from '@/lib/apiErrors'
import type { FieldErrors } from '@/lib/apiErrors'
export const useValidationErrors = <T extends string> () => {
const [baseErrors, setBaseErrors] = useState<string[]> ([])
const [fieldErrors, setFieldErrors] = useState<FieldErrors<T>> ({ })
const clearValidationErrors = () => {
setBaseErrors ([])
setFieldErrors ({ })
}
const applyValidationError = (error: unknown): boolean => {
const validationError = extractValidationError<T> (error)
if (!(validationError))
return false
setBaseErrors (validationError.baseErrors)
setFieldErrors (validationError.fieldErrors)
return true
}
return { baseErrors, fieldErrors, clearValidationErrors, applyValidationError }
}
frontend/src/pages/deerjikists/DeerjikistDetailPage.tsx
+33 -13
ファイルの表示
@@ -3,7 +3,8 @@ import { useEffect, useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'
import TagLink from '@/components/TagLink'
import Label from '@/components/common/Label'
import FieldError from '@/components/common/FieldError'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import { toast } from '@/components/ui/use-toast'
@@ -11,12 +12,16 @@ import { PLATFORM_NAMES, PLATFORMS } from '@/consts'
import { apiPut } from '@/lib/api'
import { tagsKeys } from '@/lib/queryKeys'
import { fetchDeerjikistsByTag } from '@/lib/tags'
import { cn } from '@/lib/utils'
import { cn, inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import type { FC, FormEvent } from 'react'
import type { Deerjikist, Platform } from '@/types'
type DeerjikistFormField =
'deerjikists' | `deerjikists.${ number }.platform` | `deerjikists.${ number }.code`
const DeerjikistDetailPage: FC = () => {
const { id } = useParams ()
@@ -31,11 +36,14 @@ const DeerjikistDetailPage: FC = () => {
const [data, setData] =
useState<(Omit<Deerjikist, 'platform'> & { platform: Platform | null })[]> ([])
const [disabled, setDisabled] = useState (true)
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<DeerjikistFormField> ()
const qc = useQueryClient ()
const handleSubmit = async (e: FormEvent) => {
e.preventDefault ()
clearValidationErrors ()
try
{
@@ -46,8 +54,9 @@ const DeerjikistDetailPage: FC = () => {
toast ({ description: '更新しました．' })
}
catch
catch (e)
{
applyValidationError (e)
toast ({ title: '更新失敗', description: '入力内容を確認してください．' })
}
finally
@@ -76,6 +85,9 @@ const DeerjikistDetailPage: FC = () => {
</PageTitle>
<form onSubmit={handleSubmit} className="my-4 space-y-2">
<FieldError messages={baseErrors}/>
<FieldError messages={fieldErrors.deerjikists}/>
{data.map ((datum, i) => (
<fieldset key={i} className="min-w-0 rounded-lg border border-gray-300
dark:border-gray-700 p-4">
@@ -91,12 +103,16 @@ const DeerjikistDetailPage: FC = () => {
</legend>
{/* プラットフォーム */}
<div>
<Label>プラットフォーム</Label>
<FormField
label="プラットフォーム"
messages={fieldErrors[`deerjikists.${ i }.platform`]}>
{({ describedBy, invalid }) => (
<select
className="w-full border p-2 rounded"
disabled={disabled}
value={datum.platform ?? ''}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}
onChange={e => setData (prev => {
const rtn = [...prev]
rtn[i] = { ...rtn[i],
@@ -108,23 +124,27 @@ const DeerjikistDetailPage: FC = () => {
<option key={p} value={p}>
{PLATFORM_NAMES[p]}
</option>))}
</select>
</div>
</select>)}
</FormField>
{/* コード */}
<div>
<Label>コード</Label>
<FormField
label="コード"
messages={fieldErrors[`deerjikists.${ i }.code`]}>
{({ describedBy, invalid }) => (
<input
type="text"
disabled={disabled}
className="w-full border p-2 rounded"
value={datum.code}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}
onChange={e => setData (prev => {
const rtn = [...prev]
rtn[i] = { ...rtn[i], code: e.target.value }
return rtn
})}/>
</div>
})}/>)}
</FormField>
</fieldset>
))}
frontend/src/pages/materials/MaterialDetailPage.tsx
+68 -46
ファイルの表示
@@ -4,7 +4,8 @@ import { useParams } from 'react-router-dom'
import TagLink from '@/components/TagLink'
import WikiBody from '@/components/WikiBody'
import Label from '@/components/common/Label'
import FieldError from '@/components/common/FieldError'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import TabGroup, { Tab } from '@/components/common/TabGroup'
import TagInput from '@/components/common/TagInput'
@@ -13,6 +14,8 @@ import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiGet, apiPut } from '@/lib/api'
import { inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import type { FC } from 'react'
@@ -20,6 +23,8 @@ import type { Material, Tag } from '@/types'
type MaterialWithTag = Material & { tag: Tag }
type MaterialFormField = 'tag' | 'file' | 'url'
const MaterialDetailPage: FC = () => {
const { id } = useParams ()
@@ -31,8 +36,12 @@ const MaterialDetailPage: FC = () => {
const [sending, setSending] = useState (false)
const [tag, setTag] = useState ('')
const [url, setURL] = useState ('')
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<MaterialFormField> ()
const handleSubmit = async () => {
clearValidationErrors ()
const formData = new FormData
if (tag.trim ())
formData.append ('tag', tag)
@@ -48,8 +57,9 @@ const MaterialDetailPage: FC = () => {
setMaterial (data)
toast ({ title: '更新成功!' })
}
catch
catch (e)
{
applyValidationError (e)
toast ({ title: '更新失敗……', description: '入力を見直してください．' })
}
finally
@@ -118,54 +128,66 @@ const MaterialDetailPage: FC = () => {
<Tab name="編輯">
<div className="max-w-wl pt-2 space-y-4">
<FieldError messages={baseErrors}/>
{/* タグ */}
<div>
<Label>タグ</Label>
<TagInput value={tag} setValue={setTag}/>
</div>
<FormField label="タグ" messages={fieldErrors.tag}>
{({ describedBy, invalid }) => (
<TagInput
describedBy={describedBy}
invalid={invalid}
value={tag}
setValue={setTag}/>)}
</FormField>
{/* ファイル */}
<div>
<Label>ファイル</Label>
<input
type="file"
accept="image/*,video/*,audio/*"
onChange={e => {
const f = e.target.files?.[0]
setFile (f ?? null)
setFilePreview (f ? URL.createObjectURL (f) : '')
}}/>
{(file && filePreview) && (
(/image\/.*/.test (file.type) && (
<img
src={filePreview}
alt="preview"
className="mt-2 max-h-48 rounded border"/>))
|| (/video\/.*/.test (file.type) && (
<video
src={filePreview}
controls
className="mt-2 max-h-48 rounded border"/>))
|| (/audio\/.*/.test (file.type) && (
<audio
src={filePreview}
controls
className="mt-2 max-h-48"/>))
|| (
<p className="text-red-600 dark:text-red-400">
その形式のファイルには対応していません．
</p>))}
</div>
<FormField label="ファイル" messages={fieldErrors.file}>
{({ describedBy, invalid }) => (
<>
<input
type="file"
accept="image/*,video/*,audio/*"
aria-describedby={describedBy}
aria-invalid={invalid}
onChange={e => {
const f = e.target.files?.[0]
setFile (f ?? null)
setFilePreview (f ? URL.createObjectURL (f) : '')
}}/>
{(file && filePreview) && (
(/image\/.*/.test (file.type) && (
<img
src={filePreview}
alt="preview"
className="mt-2 max-h-48 rounded border"/>))
|| (/video\/.*/.test (file.type) && (
<video
src={filePreview}
controls
className="mt-2 max-h-48 rounded border"/>))
|| (/audio\/.*/.test (file.type) && (
<audio
src={filePreview}
controls
className="mt-2 max-h-48"/>))
|| (
<p className="text-red-600 dark:text-red-400">
その形式のファイルには対応していません．
</p>))}
</>)}
</FormField>
{/* 参考 URL */}
<div>
<Label>参考 URL</Label>
<input
type="url"
value={url}
onChange={e => setURL (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="参考 URL" messages={fieldErrors.url}>
{({ describedBy, invalid }) => (
<input
type="url"
value={url}
onChange={e => setURL (e.target.value)}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}/>)}
</FormField>
{/* 送信 */}
<Button
@@ -181,4 +203,4 @@ const MaterialDetailPage: FC = () => {
</MainArea>)
}
export default MaterialDetailPage
export default MaterialDetailPage
frontend/src/pages/materials/MaterialNewPage.tsx
+67 -46
ファイルの表示
@@ -2,8 +2,9 @@ import { useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { useLocation, useNavigate } from 'react-router-dom'
import FieldError from '@/components/common/FieldError'
import Form from '@/components/common/Form'
import Label from '@/components/common/Label'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import TagInput from '@/components/common/TagInput'
import MainArea from '@/components/layout/MainArea'
@@ -11,9 +12,13 @@ import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiPost } from '@/lib/api'
import { inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import type { FC } from 'react'
type MaterialFormField = 'tag' | 'file' | 'url'
const MaterialNewPage: FC = () => {
const location = useLocation ()
@@ -27,8 +32,12 @@ const MaterialNewPage: FC = () => {
const [sending, setSending] = useState (false)
const [tag, setTag] = useState (tagQuery)
const [url, setURL] = useState ('')
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<MaterialFormField> ()
const handleSubmit = async () => {
clearValidationErrors ()
const formData = new FormData
if (tag)
formData.append ('tag', tag)
@@ -44,8 +53,9 @@ const MaterialNewPage: FC = () => {
toast ({ title: '送信成功!' })
navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
}
catch
catch (e)
{
applyValidationError (e)
toast ({ title: '送信失敗……', description: '入力を見直してください．' })
}
finally
@@ -62,55 +72,66 @@ const MaterialNewPage: FC = () => {
<Form>
<PageTitle>素材追加</PageTitle>
<FieldError messages={baseErrors}/>
{/* タグ */}
<div>
<Label>タグ</Label>
<TagInput value={tag} setValue={setTag}/>
</div>
<FormField label="タグ" messages={fieldErrors.tag}>
{({ describedBy, invalid }) => (
<TagInput
describedBy={describedBy}
invalid={invalid}
value={tag}
setValue={setTag}/>)}
</FormField>
{/* ファイル */}
<div>
<Label>ファイル</Label>
<input
type="file"
accept="image/*,video/*,audio/*"
onChange={e => {
const f = e.target.files?.[0]
setFile (f ?? null)
setFilePreview (f ? URL.createObjectURL (f) : '')
}}/>
{(file && filePreview) && (
(/image\/.*/.test (file.type) && (
<img
src={filePreview}
alt="preview"
className="mt-2 max-h-48 rounded border"/>))
|| (/video\/.*/.test (file.type) && (
<video
src={filePreview}
controls
className="mt-2 max-h-48 rounded border"/>))
|| (/audio\/.*/.test (file.type) && (
<audio
src={filePreview}
controls
className="mt-2 max-h-48"/>))
|| (
<p className="text-red-600 dark:text-red-400">
その形式のファイルには対応していません．
</p>))}
</div>
<FormField label="ファイル" messages={fieldErrors.file}>
{({ describedBy, invalid }) => (
<>
<input
type="file"
accept="image/*,video/*,audio/*"
aria-describedby={describedBy}
aria-invalid={invalid}
onChange={e => {
const f = e.target.files?.[0]
setFile (f ?? null)
setFilePreview (f ? URL.createObjectURL (f) : '')
}}/>
{(file && filePreview) && (
(/image\/.*/.test (file.type) && (
<img
src={filePreview}
alt="preview"
className="mt-2 max-h-48 rounded border"/>))
|| (/video\/.*/.test (file.type) && (
<video
src={filePreview}
controls
className="mt-2 max-h-48 rounded border"/>))
|| (/audio\/.*/.test (file.type) && (
<audio
src={filePreview}
controls
className="mt-2 max-h-48"/>))
|| (
<p className="text-red-600 dark:text-red-400">
その形式のファイルには対応していません．
</p>))}
</>)}
</FormField>
{/* 参考 URL */}
<div>
<Label>参考 URL</Label>
<input
type="url"
value={url}
onChange={e => setURL (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="参考 URL" messages={fieldErrors.url}>
{({ describedBy, invalid }) => (
<input
type="url"
value={url}
onChange={e => setURL (e.target.value)}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}/>)}
</FormField>
{/* 送信 */}
<Button
@@ -123,4 +144,4 @@ const MaterialNewPage: FC = () => {
</MainArea>)
}
export default MaterialNewPage
export default MaterialNewPage
frontend/src/pages/materials/MaterialSearchPage.tsx
+14 -14
ファイルの表示
@@ -1,7 +1,7 @@
import { useState } from 'react'
import { Helmet } from 'react-helmet-async'
import Label from '@/components/common/Label'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import TagInput from '@/components/common/TagInput'
import MainArea from '@/components/layout/MainArea'
@@ -29,23 +29,23 @@ const MaterialSearchPage: FC = () => {
<form onSubmit={handleSearch} className="space-y-2">
{/* タグ */}
<div>
<Label>タグ</Label>
<TagInput
value={tagName}
setValue={setTagName}/>
</div>
<FormField label="タグ">
{() => (
<TagInput
value={tagName}
setValue={setTagName}/>)}
</FormField>
{/* 親タグ */}
<div>
<Label>親タグ</Label>
<TagInput
value={parentTagName}
setValue={setParentTagName}/>
</div>
<FormField label="親タグ">
{() => (
<TagInput
value={parentTagName}
setValue={setParentTagName}/>)}
</FormField>
</form>
</div>
</MainArea>)
}
export default MaterialSearchPage
export default MaterialSearchPage
frontend/src/pages/posts/PostNewPage.tsx
+91 -65
ファイルの表示
@@ -4,8 +4,9 @@ import { useNavigate } from 'react-router-dom'
import PostFormTagsArea from '@/components/PostFormTagsArea'
import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
import FieldError from '@/components/common/FieldError'
import Form from '@/components/common/Form'
import Label from '@/components/common/Label'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import { Button } from '@/components/ui/button'
@@ -13,6 +14,8 @@ import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiGet, apiPost } from '@/lib/api'
import { canEditContent } from '@/lib/users'
import { inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import Forbidden from '@/pages/Forbidden'
import type { FC } from 'react'
@@ -21,12 +24,18 @@ import type { User } from '@/types'
type Props = { user: User | null }
type PostFormField =
'url' | 'title' | 'tags' | 'parentPostIds' | 'originalCreatedAt' | 'thumbnail'
const PostNewPage: FC<Props> = ({ user }) => {
const editable = canEditContent (user)
const navigate = useNavigate ()
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<PostFormField> ()
const [originalCreatedBefore, setOriginalCreatedBefore] = useState<string | null> (null)
const [originalCreatedFrom, setOriginalCreatedFrom] = useState<string | null> (null)
const [parentPostIds, setParentPostIds] = useState ('')
@@ -44,6 +53,8 @@ const PostNewPage: FC<Props> = ({ user }) => {
const thumbnailPreviewRef = useRef ('')
const handleSubmit = async () => {
clearValidationErrors ()
const formData = new FormData
formData.append ('title', title)
formData.append ('url', url)
@@ -62,8 +73,9 @@ const PostNewPage: FC<Props> = ({ user }) => {
toast ({ title: '投稿成功!' })
navigate ('/posts')
}
catch
catch (e)
{
applyValidationError (e)
toast ({ title: '投稿失敗', description: '入力を確認してください。' })
}
}
@@ -127,85 +139,99 @@ const PostNewPage: FC<Props> = ({ user }) => {
</Helmet>
<Form>
<PageTitle>広場に投稿を追加する</PageTitle>
<FieldError messages={baseErrors}/>
{/* URL */}
<div>
<Label>URL</Label>
<input type="url"
placeholder="例：https://www.nicovideo.jp/watch/..."
value={url}
onChange={e => setURL (e.target.value)}
className="w-full border p-2 rounded"
onBlur={handleURLBlur}/>
</div>
<FormField label="URL" messages={fieldErrors.url}>
{({ describedBy, invalid }) => (
<input type="url"
placeholder="例：https://www.nicovideo.jp/watch/..."
value={url}
onChange={e => setURL (e.target.value)}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}
onBlur={handleURLBlur}/>)}
</FormField>
{/* タイトル */}
<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>
<FormField
checkBox={{
label: '自動',
checked: titleAutoFlg,
onChange: ev => setTitleAutoFlg (ev.target.checked)}}
label="タイトル"
messages={fieldErrors.title}>
{({ describedBy, invalid }) => (
<input type="text"
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}
value={title}
placeholder={titleLoading ? 'Loading...' : ''}
onChange={ev => setTitle (ev.target.value)}
disabled={titleAutoFlg}/>)}
</FormField>
{/* サムネール */}
<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>
<FormField
checkBox={{
label: '自動',
checked: thumbnailAutoFlg,
onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
label="サムネール"
messages={fieldErrors.thumbnail}>
{({ describedBy, invalid }) => (
<>
{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/*"
aria-describedby={describedBy}
aria-invalid={invalid}
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"/>)}
</>)}
</FormField>
{/* 親投稿 */}
<div>
<Label>親投稿</Label>
<input
type="text"
value={parentPostIds}
onChange={e => setParentPostIds (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="親投稿" messages={fieldErrors.parentPostIds}>
{({ describedBy, invalid }) => (
<input
type="text"
value={parentPostIds}
onChange={e => setParentPostIds (e.target.value)}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}/>)}
</FormField>
{/* タグ */}
<PostFormTagsArea tags={tags} setTags={setTags}/>
<PostFormTagsArea tags={tags} setTags={setTags} errors={fieldErrors.tags}/>
{/* オリジナルの作成日時 */}
<PostOriginalCreatedTimeField
originalCreatedFrom={originalCreatedFrom}
setOriginalCreatedFrom={setOriginalCreatedFrom}
originalCreatedBefore={originalCreatedBefore}
setOriginalCreatedBefore={setOriginalCreatedBefore}/>
setOriginalCreatedBefore={setOriginalCreatedBefore}
errors={fieldErrors.originalCreatedAt}/>
{/* 送信 */}
<Button onClick={handleSubmit}
frontend/src/pages/posts/PostSearchPage.tsx
+60 -52
ファイルの表示
@@ -8,7 +8,7 @@ import PrefetchLink from '@/components/PrefetchLink'
import SortHeader from '@/components/SortHeader'
import TagLink from '@/components/TagLink'
import DateTimeField from '@/components/common/DateTimeField'
import Label from '@/components/common/Label'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import Pagination from '@/components/common/Pagination'
import TagInput from '@/components/common/TagInput'
@@ -16,7 +16,7 @@ import MainArea from '@/components/layout/MainArea'
import { SITE_TITLE } from '@/config'
import { fetchPosts } from '@/lib/posts'
import { postsKeys } from '@/lib/queryKeys'
import { dateString, originalCreatedAtString } from '@/lib/utils'
import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
import type { FC, FormEvent } from 'react'
@@ -138,31 +138,33 @@ const PostSearchPage: FC = () => {
<form onSubmit={handleSearch} className="space-y-2">
{/* タイトル */}
<div>
<Label>タイトル</Label>
<input
type="text"
value={title}
onChange={e => setTitle (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="タイトル">
{({ invalid }) => (
<input
type="text"
value={title}
onChange={e => setTitle (e.target.value)}
className={inputClass (invalid)}/>)}
</FormField>
{/* URL */}
<div>
<Label>URL</Label>
<input
type="text"
value={url}
onChange={e => setURL (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="URL">
{({ invalid }) => (
<input
type="text"
value={url}
onChange={e => setURL (e.target.value)}
className={inputClass (invalid)}/>)}
</FormField>
{/* タグ */}
<FormField label="タグ">
{() => (
<TagInput
value={tagsStr}
setValue={setTagsStr}/>)}
</FormField>
<div>
<Label>タグ</Label>
<TagInput
value={tagsStr}
setValue={setTagsStr}/>
<fieldset className="w-full my-2">
<label>検索区分：</label>
<label className="mx-2">
@@ -185,40 +187,46 @@ const PostSearchPage: FC = () => {
</div>
{/* オリジナルの投稿日時 */}
<div>
<Label>オリジナルの投稿日時</Label>
<DateTimeField
value={originalCreatedFrom ?? undefined}
onChange={setOriginalCreatedFrom}/>
<span className="mx-1">〜</span>
<DateTimeField
value={originalCreatedTo ?? undefined}
onChange={setOriginalCreatedTo}/>
</div>
<FormField label="オリジナルの投稿日時">
{() => (
<>
<DateTimeField
value={originalCreatedFrom ?? undefined}
onChange={setOriginalCreatedFrom}/>
<span className="mx-1">〜</span>
<DateTimeField
value={originalCreatedTo ?? undefined}
onChange={setOriginalCreatedTo}/>
</>)}
</FormField>
{/* 投稿日時 */}
<div>
<Label>投稿日時</Label>
<DateTimeField
value={createdFrom ?? undefined}
onChange={setCreatedFrom}/>
<span className="mx-1">〜</span>
<DateTimeField
value={createdTo ?? undefined}
onChange={setCreatedTo}/>
</div>
<FormField label="投稿日時">
{() => (
<>
<DateTimeField
value={createdFrom ?? undefined}
onChange={setCreatedFrom}/>
<span className="mx-1">〜</span>
<DateTimeField
value={createdTo ?? undefined}
onChange={setCreatedTo}/>
</>)}
</FormField>
{/* 更新日時 */}
<div>
<Label>更新日時</Label>
<DateTimeField
value={updatedFrom ?? undefined}
onChange={setUpdatedFrom}/>
<span className="mx-1">〜</span>
<DateTimeField
value={updatedTo ?? undefined}
onChange={setUpdatedTo}/>
</div>
<FormField label="更新日時">
{() => (
<>
<DateTimeField
value={updatedFrom ?? undefined}
onChange={setUpdatedFrom}/>
<span className="mx-1">〜</span>
<DateTimeField
value={updatedTo ?? undefined}
onChange={setUpdatedTo}/>
</>)}
</FormField>
{/* 検索 */}
<div className="py-3">
frontend/src/pages/tags/NicoTagListPage.tsx
+34 -11
ファイルの表示
@@ -4,12 +4,14 @@ import { useCallback, useEffect, useRef, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import TagLink from '@/components/TagLink'
import FieldError from '@/components/common/FieldError'
import PageTitle from '@/components/common/PageTitle'
import TextArea from '@/components/common/TextArea'
import MainArea from '@/components/layout/MainArea'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiGet, apiPut } from '@/lib/api'
import { extractValidationError } from '@/lib/apiErrors'
import { canEditContent } from '@/lib/users'
import type { NicoTag, Tag, User } from '@/types'
@@ -20,6 +22,7 @@ type Props = { user: User | null }
const NicoTagListPage: FC<Props> = ({ user }) => {
const [cursor, setCursor] = useState ('')
const [editing, setEditing] = useState<{ [key: number]: boolean }> ({ })
const [errorsByTagId, setErrorsByTagId] = useState<Record<number, string[]>> ({ })
const [loading, setLoading] = useState (false)
const [nicoTags, setNicoTags] = useState<NicoTag[]> ([])
const [rawTags, setRawTags] = useState<{ [key: number]: string }> ({ })
@@ -66,15 +69,27 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
const formData = new FormData
formData.append ('tags', rawTags[id])
const data = await apiPut<Tag[]> (`/tags/nico/${ id }`, formData,
{ headers: { 'Content-Type': 'multipart/form-data' } })
setNicoTags (nicoTags => {
nicoTags.find (t => t.id === id)!.linkedTags = data
return [...nicoTags]
})
setRawTags (rawTags => ({ ...rawTags, [id]: data.map (t => t.name).join (' ') }))
try
{
const data = await apiPut<Tag[]> (`/tags/nico/${ id }`, formData,
{ headers: { 'Content-Type': 'multipart/form-data' } })
setNicoTags (nicoTags => {
nicoTags.find (t => t.id === id)!.linkedTags = data
return [...nicoTags]
})
setRawTags (rawTags => ({ ...rawTags, [id]: data.map (t => t.name).join (' ') }))
setErrorsByTagId (errors => ({ ...errors, [id]: [] }))
toast ({ title: '更新しました．' })
toast ({ title: '更新しました．' })
}
catch (e)
{
const validationError = extractValidationError<'tags'> (e)
setErrorsByTagId (errors => ({ ...errors,
[id]: validationError?.fieldErrors.tags ?? [] }))
toast ({ title: '更新失敗', description: '入力内容を確認してください．' })
return
}
}
setEditing (editing => ({ ...editing, [id]: !(editing[id]) }))
@@ -130,9 +145,17 @@ const NicoTagListPage: FC<Props> = ({ user }) => {
<td className="p-2">
{editing[tag.id]
? (
<TextArea value={rawTags[tag.id]} onChange={ev => {
setRawTags (rawTags => ({ ...rawTags, [tag.id]: ev.target.value }))
}}/>)
<>
<TextArea
value={rawTags[tag.id]}
invalid={(errorsByTagId[tag.id] ?? []).length > 0}
onChange={ev => {
setRawTags (rawTags => ({
...rawTags,
[tag.id]: ev.target.value }))
}}/>
<FieldError messages={errorsByTagId[tag.id]}/>
</>)
: tag.linkedTags.map((lt, j) => (
<span key={j} className="mr-2">
<TagLink tag={lt}
frontend/src/pages/tags/TagDetailPage.tsx
+63 -39
ファイルの表示
@@ -3,7 +3,8 @@ import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import TagLink from '@/components/TagLink'
import Label from '@/components/common/Label'
import FieldError from '@/components/common/FieldError'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import { toast } from '@/components/ui/use-toast'
@@ -11,12 +12,15 @@ import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
import { apiPut } from '@/lib/api'
import { postsKeys, tagsKeys } from '@/lib/queryKeys'
import { fetchTag } from '@/lib/tags'
import { cn } from '@/lib/utils'
import { cn, inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import type { FC, FormEvent } from 'react'
import type { Category, Tag } from '@/types'
type TagFormField = 'name' | 'category' | 'aliases' | 'parentTags'
const TagDetailPage: FC = () => {
const { id } = useParams ()
@@ -32,11 +36,14 @@ const TagDetailPage: FC = () => {
const [aliases, setAliases] = useState ('')
const [parentTags, setParentTags] = useState ('')
const [disabled, setDisabled] = useState (true)
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<TagFormField> ()
const qc = useQueryClient ()
const handleSubmit = async (e: FormEvent) => {
e.preventDefault ()
clearValidationErrors ()
const formData = new FormData
formData.append ('name', name)
@@ -57,8 +64,9 @@ const TagDetailPage: FC = () => {
qc.invalidateQueries ({ queryKey: tagsKeys.root })
toast ({ description: '更新しました．' })
}
catch
catch (e)
{
applyValidationError (e)
toast ({ description: '更新に失敗しました．' })
}
}
@@ -89,57 +97,73 @@ const TagDetailPage: FC = () => {
</PageTitle>
<form onSubmit={handleSubmit} className="my-4 space-y-2">
<FieldError messages={baseErrors}/>
{/* 名称 */}
<div>
<Label>名称</Label>
{/* TODO: 補完に対応させる */}
<input
type="text"
disabled={disabled}
value={name}
onChange={e => setName (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="名称" messages={fieldErrors.name}>
{({ describedBy, invalid }) => (
<>
{/* TODO: 補完に対応させる */}
<input
type="text"
disabled={disabled}
value={name}
onChange={e => setName (e.target.value)}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}/>
</>)}
</FormField>
{/* カテゴリ */}
<div>
<Label>カテゴリ</Label>
<FormField label="カテゴリ" messages={fieldErrors.category}>
{({ describedBy, invalid }) => (
<select
disabled={disabled}
value={category ?? ''}
onChange={e => setCategory(e.target.value as Category)}
className="w-full border p-2 rounded">
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}>
{CATEGORIES.filter (cat => tag.category === 'nico' || cat !== 'nico')
.map (cat => (
<option key={cat} value={cat}>
{CATEGORY_NAMES[cat]}
</option>))}
</select>
</div>
</select>)}
</FormField>
{/* 別名 */}
<div>
<Label>別名</Label>
{/* TODO: 補完に対応させる */}
<input
type="text"
disabled={disabled}
value={aliases}
onChange={e => setAliases (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="別名" messages={fieldErrors.aliases}>
{({ describedBy, invalid }) => (
<>
{/* TODO: 補完に対応させる */}
<input
type="text"
disabled={disabled}
value={aliases}
onChange={e => setAliases (e.target.value)}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}/>
</>)}
</FormField>
{/* 上位タグ */}
<div>
<Label>上位タグ</Label>
{/* TODO: 補完に対応させる */}
<input
type="text"
disabled={disabled}
value={parentTags}
onChange={e => setParentTags (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="上位タグ" messages={fieldErrors.parentTags}>
{({ describedBy, invalid }) => (
<>
{/* TODO: 補完に対応させる */}
<input
type="text"
disabled={disabled}
value={parentTags}
onChange={e => setParentTags (e.target.value)}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}/>
</>)}
</FormField>
<div className="py-3">
<button
@@ -157,4 +181,4 @@ const TagDetailPage: FC = () => {
</MainArea>)
}
export default TagDetailPage
export default TagDetailPage
frontend/src/pages/tags/TagListPage.tsx
+67 -59
ファイルの表示
@@ -7,7 +7,7 @@ import PrefetchLink from '@/components/PrefetchLink'
import SortHeader from '@/components/SortHeader'
import TagLink from '@/components/TagLink'
import DateTimeField from '@/components/common/DateTimeField'
import Label from '@/components/common/Label'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import Pagination from '@/components/common/Pagination'
import MainArea from '@/components/layout/MainArea'
@@ -15,7 +15,7 @@ import { SITE_TITLE } from '@/config'
import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
import { tagsKeys } from '@/lib/queryKeys'
import { fetchTags } from '@/lib/tags'
import { dateString } from '@/lib/utils'
import { dateString, inputClass } from '@/lib/utils'
import type { FC, FormEvent } from 'react'
@@ -127,71 +127,79 @@ const TagListPage: FC = () => {
<form onSubmit={handleSearch} className="space-y-2">
{/* 名前 */}
<div>
<Label>名前</Label>
<input
type="text"
value={name}
onChange={e => setName (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="名前">
{({ invalid }) => (
<input
type="text"
value={name}
onChange={e => setName (e.target.value)}
className={inputClass (invalid)}/>)}
</FormField>
{/* カテゴリ */}
<div>
<Label>カテゴリ</Label>
<select
value={category ?? ''}
onChange={e => setCategory((e.target.value || null) as Category | null)}
className="w-full border p-2 rounded">
<option value="">&nbsp;</option>
{CATEGORIES.map (cat => (
<option key={cat} value={cat}>
{CATEGORY_NAMES[cat]}
</option>))}
</select>
</div>
<FormField label="カテゴリ">
{({ invalid }) => (
<select
value={category ?? ''}
onChange={e => setCategory((e.target.value || null) as Category | null)}
className={inputClass (invalid)}>
<option value="">&nbsp;</option>
{CATEGORIES.map (cat => (
<option key={cat} value={cat}>
{CATEGORY_NAMES[cat]}
</option>))}
</select>)}
</FormField>
{/* 広場の投稿数 */}
<div>
<Label>広場の投稿数</Label>
<input
type="number"
min="0"
value={postCountGTE < 0 ? 0 : String (postCountGTE)}
onChange={e => setPostCountGTE (Number (e.target.value || 0))}
className="border rounded p-2"/>
<span className="mx-1">〜</span>
<input
type="number"
min="0"
value={postCountLTE == null ? '' : String (postCountLTE)}
onChange={e => setPostCountLTE (e.target.value ? Number (e.target.value) : null)}
className="border rounded p-2"/>
</div>
<FormField label="広場の投稿数">
{({ invalid }) => (
<>
<input
type="number"
min="0"
value={postCountGTE < 0 ? 0 : String (postCountGTE)}
onChange={e => setPostCountGTE (Number (e.target.value || 0))}
className={inputClass (invalid, 'w-auto')}/>
<span className="mx-1">〜</span>
<input
type="number"
min="0"
value={postCountLTE == null ? '' : String (postCountLTE)}
onChange={e => setPostCountLTE (e.target.value
? Number (e.target.value)
: null)}
className={inputClass (invalid, 'w-auto')}/>
</>)}
</FormField>
{/* はじめて記載された日時 */}
<div>
<Label>はじめて記載された日時</Label>
<DateTimeField
value={createdFrom ?? undefined}
onChange={setCreatedFrom}/>
<span className="mx-1">〜</span>
<DateTimeField
value={createdTo ?? undefined}
onChange={setCreatedTo}/>
</div>
<FormField label="はじめて記載された日時">
{() => (
<>
<DateTimeField
value={createdFrom ?? undefined}
onChange={setCreatedFrom}/>
<span className="mx-1">〜</span>
<DateTimeField
value={createdTo ?? undefined}
onChange={setCreatedTo}/>
</>)}
</FormField>
{/* 定義の更新日時 */}
<div>
<Label>定義の更新日時</Label>
<DateTimeField
value={updatedFrom ?? undefined}
onChange={setUpdatedFrom}/>
<span className="mx-1">〜</span>
<DateTimeField
value={updatedTo ?? undefined}
onChange={setUpdatedTo}/>
</div>
<FormField label="定義の更新日時">
{() => (
<>
<DateTimeField
value={updatedFrom ?? undefined}
onChange={setUpdatedFrom}/>
<span className="mx-1">〜</span>
<DateTimeField
value={updatedTo ?? undefined}
onChange={setUpdatedTo}/>
</>)}
</FormField>
<div className="py-3">
<button
frontend/src/pages/theatres/TheatreDetailPage.tsx
+14 -2
ファイルの表示
@@ -6,12 +6,14 @@ import ErrorScreen from '@/components/ErrorScreen'
import PostEmbed from '@/components/PostEmbed'
import PrefetchLink from '@/components/PrefetchLink'
import TagDetailSidebar from '@/components/TagDetailSidebar'
import FieldError from '@/components/common/FieldError'
import MainArea from '@/components/layout/MainArea'
import SidebarComponent from '@/components/layout/SidebarComponent'
import { SITE_TITLE } from '@/config'
import { apiGet, apiPatch, apiPost, apiPut, isApiError } from '@/lib/api'
import { fetchPost } from '@/lib/posts'
import { dateString } from '@/lib/utils'
import { dateString, inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import type { FC } from 'react'
@@ -27,6 +29,8 @@ type TheatreInfo = {
postStartedAt: string | null
watchingUsers: { id: number; name: string }[] }
type TheatreCommentField = 'content'
const INITIAL_THEATRE_INFO =
{ hostFlg: false,
postId: null,
@@ -53,6 +57,8 @@ const TheatreDetailPage: FC = () => {
const [theatreInfo, setTheatreInfo] = useState<TheatreInfo> (INITIAL_THEATRE_INFO)
const [post, setPost] = useState<Post | null> (null)
const [videoLength, setVideoLength] = useState (0)
const { fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<TheatreCommentField> ()
useEffect (() => {
loadingRef.current = loading
@@ -284,22 +290,28 @@ const TheatreDetailPage: FC = () => {
try
{
setSending (true)
clearValidationErrors ()
await apiPost (`/theatres/${ id }/comments`, { content })
setContent ('')
commentsRef.current?.scrollTo ({ top: 0, behavior: 'smooth' })
}
catch (error)
{
applyValidationError (error)
}
finally
{
setSending (false)
}
}}>
<input
className="w-full p-2 border rounded"
className={inputClass ((fieldErrors.content ?? []).length > 0)}
type="text"
placeholder="ここにコメントを入力"
value={content}
onChange={e => setContent (e.target.value)}
disabled={sending}/>
<FieldError messages={fieldErrors.content}/>
<div
ref={commentsRef}
frontend/src/pages/users/SettingPage.tsx
+22 -5
ファイルの表示
@@ -3,7 +3,9 @@ import type { FC } from 'react'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import FieldError from '@/components/common/FieldError'
import Form from '@/components/common/Form'
import FormField from '@/components/common/FormField'
import Label from '@/components/common/Label'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
@@ -13,22 +15,30 @@ import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiPut } from '@/lib/api'
import { inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import type { User } from '@/types'
type Props = { user: User | null
setUser: React.Dispatch<React.SetStateAction<User | null>> }
type UserFormField = 'name'
const SettingPage: FC<Props> = ({ user, setUser }) => {
const [name, setName] = useState ('')
const [userCodeVsbl, setUserCodeVsbl] = useState (false)
const [inheritVsbl, setInheritVsbl] = useState (false)
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<UserFormField> ()
const handleSubmit = async () => {
if (!(user))
return
clearValidationErrors ()
const formData = new FormData
formData.append ('name', name)
@@ -40,8 +50,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
setUser (user => ({ ...user, ...data }))
toast ({ title: '設定を更新しました．' })
}
catch
catch (e)
{
applyValidationError (e)
toast ({ title: 'しっぱい……' })
}
}
@@ -65,11 +76,16 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
{user ? (
<>
<FieldError messages={baseErrors}/>
{/* 名前 */}
<div>
<Label>表示名</Label>
<FormField label="表示名" messages={fieldErrors.name}>
{({ describedBy, invalid }) => (
<>
<input type="text"
className="w-full border rounded p-2"
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}
value={name}
placeholder="名もなきニジラー"
onChange={ev => setName (ev.target.value)}/>
@@ -77,7 +93,8 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
<p className="mt-1 text-sm text-red-500">
名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
</p>)}
</div>
</>)}
</FormField>
{/* 送信 */}
<Button onClick={handleSubmit}
frontend/src/pages/wiki/WikiEditPage.tsx
+30 -15
ファイルの表示
@@ -5,12 +5,16 @@ import { Helmet } from 'react-helmet-async'
import MdEditor from 'react-markdown-editor-lite'
import { useParams, useNavigate } from 'react-router-dom'
import FieldError from '@/components/common/FieldError'
import FormField from '@/components/common/FormField'
import MainArea from '@/components/layout/MainArea'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiGet, apiPut } from '@/lib/api'
import { wikiKeys } from '@/lib/queryKeys'
import { canEditContent } from '@/lib/users'
import { inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import Forbidden from '@/pages/Forbidden'
import 'react-markdown-editor-lite/lib/index.css'
@@ -23,6 +27,8 @@ const mdParser = new MarkdownIt
type Props = { user: User | null }
type WikiFormField = 'title' | 'body'
const WikiEditPage: FC<Props> = ({ user }) => {
const editable = canEditContent (user)
@@ -36,8 +42,12 @@ const WikiEditPage: FC<Props> = ({ user }) => {
const [body, setBody] = useState ('')
const [loading, setLoading] = useState (true)
const [title, setTitle] = useState ('')
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<WikiFormField> ()
const handleSubmit = async () => {
clearValidationErrors ()
const formData = new FormData ()
formData.append ('title', title)
formData.append ('body', body)
@@ -52,8 +62,9 @@ const WikiEditPage: FC<Props> = ({ user }) => {
toast ({ title: '投稿成功!' })
navigate (`/wiki/${ title }`)
}
catch
catch (e)
{
applyValidationError (e)
toast ({ title: '投稿失敗', description: '入力を確認してください。' })
}
}
@@ -84,24 +95,28 @@ const WikiEditPage: FC<Props> = ({ user }) => {
{loading ? 'Loading...' : (
<>
<FieldError messages={baseErrors}/>
{/* タイトル */}
{/* TODO: タグ補完 */}
<div>
<label className="block font-semibold mb-1">タイトル</label>
<input type="text"
value={title}
onChange={e => setTitle (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="タイトル" messages={fieldErrors.title}>
{({ describedBy, invalid }) => (
<input type="text"
value={title}
onChange={e => setTitle (e.target.value)}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}/>)}
</FormField>
{/* 本文 */}
<div>
<label className="block font-semibold mb-1">本文</label>
<MdEditor value={body}
style={{ height: '500px' }}
renderHTML={text => mdParser.render (text)}
onChange={({ text }) => setBody (text)}/>
</div>
<FormField label="本文" messages={fieldErrors.body}>
{() => (
<MdEditor value={body}
style={{ height: '500px' }}
renderHTML={text => mdParser.render (text)}
onChange={({ text }) => setBody (text)}/>)}
</FormField>
{/* 送信 */}
<button onClick={handleSubmit}
frontend/src/pages/wiki/WikiNewPage.tsx
+29 -15
ファイルの表示
@@ -6,11 +6,15 @@ import { Helmet } from 'react-helmet-async'
import MdEditor from 'react-markdown-editor-lite'
import { useLocation, useNavigate } from 'react-router-dom'
import FieldError from '@/components/common/FieldError'
import FormField from '@/components/common/FormField'
import MainArea from '@/components/layout/MainArea'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiPost } from '@/lib/api'
import { canEditContent } from '@/lib/users'
import { inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import Forbidden from '@/pages/Forbidden'
import 'react-markdown-editor-lite/lib/index.css'
@@ -21,6 +25,8 @@ const mdParser = new MarkdownIt
type Props = { user: User | null }
type WikiFormField = 'title' | 'body'
const WikiNewPage: FC<Props> = ({ user }) => {
const editable = canEditContent (user)
@@ -33,8 +39,12 @@ const WikiNewPage: FC<Props> = ({ user }) => {
const [title, setTitle] = useState (titleQuery)
const [body, setBody] = useState ('')
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<WikiFormField> ()
const handleSubmit = async () => {
clearValidationErrors ()
const formData = new FormData
formData.append ('title', title)
formData.append ('body', body)
@@ -46,8 +56,9 @@ const WikiNewPage: FC<Props> = ({ user }) => {
toast ({ title: '投稿成功!' })
navigate (`/wiki/${ data.title }`)
}
catch
catch (e)
{
applyValidationError (e)
toast ({ title: '投稿失敗', description: '入力を確認してください。' })
}
}
@@ -62,25 +73,28 @@ const WikiNewPage: FC<Props> = ({ user }) => {
</Helmet>
<div className="max-w-xl mx-auto p-4 space-y-4">
<h1 className="text-2xl font-bold mb-2">新規 Wiki ページ</h1>
<FieldError messages={baseErrors}/>
{/* タイトル */}
{/* TODO: タグ補完 */}
<div>
<label className="block font-semibold mb-1">タイトル</label>
<input type="text"
value={title}
onChange={e => setTitle (e.target.value)}
className="w-full border p-2 rounded"/>
</div>
<FormField label="タイトル" messages={fieldErrors.title}>
{({ describedBy, invalid }) => (
<input type="text"
value={title}
onChange={e => setTitle (e.target.value)}
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}/>)}
</FormField>
{/* 本文 */}
<div>
<label className="block font-semibold mb-1">本文</label>
<MdEditor value={body}
style={{ height: '500px' }}
renderHTML={text => mdParser.render (text)}
onChange={({ text }) => setBody (text)}/>
</div>
<FormField label="本文" messages={fieldErrors.body}>
{() => (
<MdEditor value={body}
style={{ height: '500px' }}
renderHTML={text => mdParser.render (text)}
onChange={({ text }) => setBody (text)}/>)}
</FormField>
{/* 送信 */}
<button onClick={handleSubmit}
frontend/src/pages/wiki/WikiSearchPage.tsx
+16 -15
ファイルの表示
@@ -2,11 +2,12 @@ import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import PrefetchLink from '@/components/PrefetchLink'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import { SITE_TITLE } from '@/config'
import { apiGet } from '@/lib/api'
import { dateString } from '@/lib/utils'
import { dateString, inputClass } from '@/lib/utils'
import type { FormEvent , FC } from 'react'
@@ -43,22 +44,22 @@ const WikiSearchPage: FC = () => {
<PageTitle>Wiki</PageTitle>
<form onSubmit={handleSearch} className="space-y-2">
{/* タイトル */}
<div>
<label>タイトル：</label><br />
<input type="text"
value={title}
onChange={e => setTitle (e.target.value)}
className="border p-1 w-full" />
</div>
<FormField label="タイトル">
{({ invalid }) => (
<input type="text"
value={title}
onChange={e => setTitle (e.target.value)}
className={inputClass (invalid)}/>)}
</FormField>
{/* 内容 */}
<div>
<label>内容：</label><br />
<input type="text"
value={text}
onChange={e => setText (e.target.value)}
className="border p-1 w-full" />
</div>
<FormField label="内容">
{({ invalid }) => (
<input type="text"
value={text}
onChange={e => setText (e.target.value)}
className={inputClass (invalid)}/>)}
</FormField>
{/* 検索 */}
<div className="py-3">