このコミットが含まれているのは:
@@ -1,4 +1,4 @@
|
||||
import type { FC } from 'react'
|
||||
import type { Dispatch, FC, SetStateAction } from 'react'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
@@ -9,35 +9,115 @@ import FormField from '@/components/common/FormField'
|
||||
import Label from '@/components/common/Label'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { useUserSettings } from '@/components/users/UserSettingsProvider'
|
||||
import InheritDialogue from '@/components/users/InheritDialogue'
|
||||
import UserCodeDialogue from '@/components/users/UserCodeDialogue'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
import { apiPut } from '@/lib/api'
|
||||
import {
|
||||
AUTO_FETCH_OPTIONS,
|
||||
DEFAULT_USER_SETTINGS,
|
||||
DISPLAY_DENSITY_OPTIONS,
|
||||
FONT_SIZE_OPTIONS,
|
||||
POST_LIST_LIMIT_OPTIONS,
|
||||
POST_LIST_ORDER_OPTIONS,
|
||||
THEME_OPTIONS,
|
||||
VIEWED_POST_DISPLAY_OPTIONS,
|
||||
WIKI_EDITOR_MODE_OPTIONS,
|
||||
updateUserSettings,
|
||||
} from '@/lib/settings'
|
||||
import { inputClass } from '@/lib/utils'
|
||||
import { useValidationErrors } from '@/lib/useValidationErrors'
|
||||
|
||||
import type { User } from '@/types'
|
||||
import type { UserSettings } from '@/lib/settings'
|
||||
|
||||
type Props = { user: User | null
|
||||
setUser: React.Dispatch<React.SetStateAction<User | null>> }
|
||||
setUser: Dispatch<SetStateAction<User | null>> }
|
||||
|
||||
type UserFormField = 'name'
|
||||
type SettingsFormField =
|
||||
| 'theme'
|
||||
| 'displayDensity'
|
||||
| 'fontSize'
|
||||
| 'postListLimit'
|
||||
| 'postListOrder'
|
||||
| 'viewedPostDisplay'
|
||||
| 'tagAutocompleteNico'
|
||||
| 'autoFetchTitle'
|
||||
| 'autoFetchThumbnail'
|
||||
| 'wikiEditorMode'
|
||||
|
||||
const sectionClassName = 'space-y-4 rounded-xl border border-border bg-background/80 p-4'
|
||||
|
||||
const themeLabel: Record<UserSettings['theme'], string> = {
|
||||
system: 'システム設定に従う',
|
||||
light: '明',
|
||||
dark: '暗' }
|
||||
|
||||
const densityLabel: Record<UserSettings['displayDensity'], string> = {
|
||||
comfortable: '標準',
|
||||
compact: '詰める' }
|
||||
|
||||
const fontSizeLabel: Record<UserSettings['fontSize'], string> = {
|
||||
small: '小',
|
||||
normal: '標準',
|
||||
large: '大' }
|
||||
|
||||
const postListOrderLabel: Record<UserSettings['postListOrder'], string> = {
|
||||
title_asc: 'タイトル昇順',
|
||||
title_desc: 'タイトル降順',
|
||||
url_asc: 'URL 昇順',
|
||||
url_desc: 'URL 降順',
|
||||
original_created_at_asc: 'オリジナル投稿日時 昇順',
|
||||
original_created_at_desc: 'オリジナル投稿日時 降順',
|
||||
created_at_asc: '投稿日 昇順',
|
||||
created_at_desc: '投稿日 降順',
|
||||
updated_at_asc: '更新日 昇順',
|
||||
updated_at_desc: '更新日 降順' }
|
||||
|
||||
const viewedPostDisplayLabel: Record<UserSettings['viewedPostDisplay'], string> = {
|
||||
show: '通常表示',
|
||||
dim: '薄く表示',
|
||||
hide: '隠す' }
|
||||
|
||||
const autoFetchLabel: Record<UserSettings['autoFetchTitle'], string> = {
|
||||
auto: '自動',
|
||||
manual: '手動',
|
||||
off: '無効' }
|
||||
|
||||
const wikiEditorModeLabel: Record<UserSettings['wikiEditorMode'], string> = {
|
||||
split: '左右表示',
|
||||
write: '本文のみ',
|
||||
preview: 'プレビューのみ' }
|
||||
|
||||
|
||||
const SettingPage: FC<Props> = ({ user, setUser }) => {
|
||||
const [draftSettings, setDraftSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
|
||||
const [name, setName] = useState ('')
|
||||
const [userCodeVsbl, setUserCodeVsbl] = useState (false)
|
||||
const [inheritVsbl, setInheritVsbl] = useState (false)
|
||||
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
|
||||
useValidationErrors<UserFormField> ()
|
||||
const { loaded, settings, setSettings } = useUserSettings ()
|
||||
const {
|
||||
baseErrors: nameBaseErrors,
|
||||
fieldErrors: nameFieldErrors,
|
||||
clearValidationErrors: clearNameValidationErrors,
|
||||
applyValidationError: applyNameValidationError,
|
||||
} = useValidationErrors<UserFormField> ()
|
||||
const {
|
||||
baseErrors: settingsBaseErrors,
|
||||
fieldErrors: settingsFieldErrors,
|
||||
clearValidationErrors: clearSettingsValidationErrors,
|
||||
applyValidationError: applySettingsValidationError,
|
||||
} = useValidationErrors<SettingsFormField> ()
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const handleUserSubmit = async () => {
|
||||
if (!(user))
|
||||
return
|
||||
|
||||
clearValidationErrors ()
|
||||
clearNameValidationErrors ()
|
||||
|
||||
const formData = new FormData
|
||||
formData.append ('name', name)
|
||||
@@ -47,13 +127,41 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
|
||||
const data = await apiPut<User> (
|
||||
`/users/${ user.id }`, formData,
|
||||
{ headers: { 'Content-Type': 'multipart/form-data' } })
|
||||
setUser (user => ({ ...user, ...data }))
|
||||
toast ({ title: '設定を更新しました．' })
|
||||
setUser (currentUser => ({ ...currentUser, ...data }))
|
||||
toast ({ title: '表示名を更新しました．' })
|
||||
}
|
||||
catch (e)
|
||||
catch (error)
|
||||
{
|
||||
applyValidationError (e)
|
||||
toast ({ title: 'しっぱい……' })
|
||||
applyNameValidationError (error)
|
||||
toast ({ title: '表示名を更新できませんでした．' })
|
||||
}
|
||||
}
|
||||
|
||||
const handleSettingsSubmit = async () => {
|
||||
clearSettingsValidationErrors ()
|
||||
|
||||
try
|
||||
{
|
||||
const data = await updateUserSettings ({
|
||||
theme: draftSettings.theme,
|
||||
display_density: draftSettings.displayDensity,
|
||||
font_size: draftSettings.fontSize,
|
||||
post_list_limit: draftSettings.postListLimit,
|
||||
post_list_order: draftSettings.postListOrder,
|
||||
viewed_post_display: draftSettings.viewedPostDisplay,
|
||||
tag_autocomplete_nico: draftSettings.tagAutocompleteNico,
|
||||
auto_fetch_title: draftSettings.autoFetchTitle,
|
||||
auto_fetch_thumbnail: draftSettings.autoFetchThumbnail,
|
||||
wiki_editor_mode: draftSettings.wikiEditorMode,
|
||||
})
|
||||
setDraftSettings (data)
|
||||
setSettings (data)
|
||||
toast ({ title: '設定を保存しました．' })
|
||||
}
|
||||
catch (error)
|
||||
{
|
||||
applySettingsValidationError (error)
|
||||
toast ({ title: '設定を保存できませんでした．' })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,6 +172,10 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
|
||||
setName (user.name ?? '')
|
||||
}, [user])
|
||||
|
||||
useEffect (() => {
|
||||
setDraftSettings (settings)
|
||||
}, [settings])
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
<Helmet>
|
||||
@@ -74,48 +186,234 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
|
||||
<Form>
|
||||
<PageTitle>設定</PageTitle>
|
||||
|
||||
{user ? (
|
||||
{user && loaded ? (
|
||||
<>
|
||||
<FieldError messages={baseErrors}/>
|
||||
<section className={sectionClassName}>
|
||||
<h2 className="text-xl font-bold">アカウント</h2>
|
||||
<FieldError messages={nameBaseErrors}/>
|
||||
|
||||
{/* 名前 */}
|
||||
<FormField label="表示名" messages={fieldErrors.name}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<>
|
||||
<input type="text"
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid}
|
||||
className={inputClass (invalid)}
|
||||
value={name}
|
||||
placeholder="名もなきニジラー"
|
||||
onChange={ev => setName (ev.target.value)}/>
|
||||
{(user && !(user.name)) && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
|
||||
</p>)}
|
||||
</>)}
|
||||
</FormField>
|
||||
<FormField label="表示名" messages={nameFieldErrors.name}>
|
||||
{({ describedBy, invalid }) => (
|
||||
<>
|
||||
<input type="text"
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid}
|
||||
className={inputClass (invalid)}
|
||||
value={name}
|
||||
placeholder="名もなきニジラー"
|
||||
onChange={ev => setName (ev.target.value)}/>
|
||||
{!(user.name) && (
|
||||
<p className="mt-1 text-sm text-red-500">
|
||||
名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
|
||||
</p>)}
|
||||
</>)}
|
||||
</FormField>
|
||||
|
||||
{/* 送信 */}
|
||||
<Button onClick={handleSubmit}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
|
||||
更新
|
||||
</Button>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button onClick={handleUserSubmit}>表示名を更新</Button>
|
||||
</div>
|
||||
|
||||
{/* 引継ぎ */}
|
||||
<div>
|
||||
<Label>引継ぎ</Label>
|
||||
<Button onClick={() => setUserCodeVsbl (true)}
|
||||
className="px-4 py-2 bg-gray-600 text-white rounded disabled:bg-gray-400"
|
||||
<div className="space-y-2">
|
||||
<Label>引継ぎ</Label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
onClick={() => setUserCodeVsbl (true)}
|
||||
className="bg-gray-600 text-white"
|
||||
disabled={!(user)}>
|
||||
引継ぎコードを表示
|
||||
</Button>
|
||||
<Button onClick={() => setInheritVsbl (true)}
|
||||
className="ml-2 px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400"
|
||||
引継ぎコードを表示
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setInheritVsbl (true)}
|
||||
className="bg-red-600 text-white"
|
||||
disabled={!(user)}>
|
||||
ほかのブラウザから引継ぐ
|
||||
</Button>
|
||||
</div>
|
||||
ほかのブラウザから引継ぐ
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={sectionClassName}>
|
||||
<h2 className="text-xl font-bold">表示</h2>
|
||||
|
||||
<FormField label="テーマ" messages={settingsFieldErrors.theme}>
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (Boolean (settingsFieldErrors.theme?.length))}
|
||||
value={draftSettings.theme}
|
||||
onChange={ev => setDraftSettings (current => ({
|
||||
...current,
|
||||
theme: ev.target.value as UserSettings['theme'],
|
||||
}))}>
|
||||
{THEME_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{themeLabel[value]}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="表示密度" messages={settingsFieldErrors.displayDensity}>
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (Boolean (settingsFieldErrors.displayDensity?.length))}
|
||||
value={draftSettings.displayDensity}
|
||||
onChange={ev => setDraftSettings (current => ({
|
||||
...current,
|
||||
displayDensity: ev.target.value as UserSettings['displayDensity'],
|
||||
}))}>
|
||||
{DISPLAY_DENSITY_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{densityLabel[value]}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="文字サイズ" messages={settingsFieldErrors.fontSize}>
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (Boolean (settingsFieldErrors.fontSize?.length))}
|
||||
value={draftSettings.fontSize}
|
||||
onChange={ev => setDraftSettings (current => ({
|
||||
...current,
|
||||
fontSize: ev.target.value as UserSettings['fontSize'],
|
||||
}))}>
|
||||
{FONT_SIZE_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{fontSizeLabel[value]}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<section className={sectionClassName}>
|
||||
<h2 className="text-xl font-bold">投稿一覧</h2>
|
||||
|
||||
<FormField label="既定の件数" messages={settingsFieldErrors.postListLimit}>
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (Boolean (settingsFieldErrors.postListLimit?.length))}
|
||||
value={draftSettings.postListLimit}
|
||||
onChange={ev => setDraftSettings (current => ({
|
||||
...current,
|
||||
postListLimit: Number (ev.target.value) as UserSettings['postListLimit'],
|
||||
}))}>
|
||||
{POST_LIST_LIMIT_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{value} 件
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="既定の並び順" messages={settingsFieldErrors.postListOrder}>
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (Boolean (settingsFieldErrors.postListOrder?.length))}
|
||||
value={draftSettings.postListOrder}
|
||||
onChange={ev => setDraftSettings (current => ({
|
||||
...current,
|
||||
postListOrder: ev.target.value as UserSettings['postListOrder'],
|
||||
}))}>
|
||||
{POST_LIST_ORDER_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{postListOrderLabel[value]}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="既読投稿の表示" messages={settingsFieldErrors.viewedPostDisplay}>
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (Boolean (settingsFieldErrors.viewedPostDisplay?.length))}
|
||||
value={draftSettings.viewedPostDisplay}
|
||||
onChange={ev => setDraftSettings (current => ({
|
||||
...current,
|
||||
viewedPostDisplay:
|
||||
ev.target.value as UserSettings['viewedPostDisplay'],
|
||||
}))}>
|
||||
{VIEWED_POST_DISPLAY_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{viewedPostDisplayLabel[value]}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<section className={sectionClassName}>
|
||||
<h2 className="text-xl font-bold">編輯支援</h2>
|
||||
|
||||
<FormField label="ニコニコタグを補完に含める" messages={settingsFieldErrors.tagAutocompleteNico}>
|
||||
{() => (
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={draftSettings.tagAutocompleteNico}
|
||||
onChange={ev => setDraftSettings (current => ({
|
||||
...current,
|
||||
tagAutocompleteNico: ev.target.checked,
|
||||
}))}/>
|
||||
<span>含める</span>
|
||||
</label>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="タイトル自動取得" messages={settingsFieldErrors.autoFetchTitle}>
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (Boolean (settingsFieldErrors.autoFetchTitle?.length))}
|
||||
value={draftSettings.autoFetchTitle}
|
||||
onChange={ev => setDraftSettings (current => ({
|
||||
...current,
|
||||
autoFetchTitle: ev.target.value as UserSettings['autoFetchTitle'],
|
||||
}))}>
|
||||
{AUTO_FETCH_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{autoFetchLabel[value]}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
|
||||
<FormField label="サムネール自動取得" messages={settingsFieldErrors.autoFetchThumbnail}>
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (Boolean (settingsFieldErrors.autoFetchThumbnail?.length))}
|
||||
value={draftSettings.autoFetchThumbnail}
|
||||
onChange={ev => setDraftSettings (current => ({
|
||||
...current,
|
||||
autoFetchThumbnail:
|
||||
ev.target.value as UserSettings['autoFetchThumbnail'],
|
||||
}))}>
|
||||
{AUTO_FETCH_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{autoFetchLabel[value]}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<section className={sectionClassName}>
|
||||
<h2 className="text-xl font-bold">Wiki</h2>
|
||||
|
||||
<FormField label="エディタ表示" messages={settingsFieldErrors.wikiEditorMode}>
|
||||
{() => (
|
||||
<select
|
||||
className={inputClass (Boolean (settingsFieldErrors.wikiEditorMode?.length))}
|
||||
value={draftSettings.wikiEditorMode}
|
||||
onChange={ev => setDraftSettings (current => ({
|
||||
...current,
|
||||
wikiEditorMode: ev.target.value as UserSettings['wikiEditorMode'],
|
||||
}))}>
|
||||
{WIKI_EDITOR_MODE_OPTIONS.map (value => (
|
||||
<option key={value} value={value}>
|
||||
{wikiEditorModeLabel[value]}
|
||||
</option>))}
|
||||
</select>)}
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<section className={sectionClassName}>
|
||||
<FieldError messages={settingsBaseErrors}/>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button onClick={handleSettingsSubmit}>設定を保存</Button>
|
||||
</div>
|
||||
</section>
|
||||
</>) : 'Loading...'}
|
||||
</Form>
|
||||
|
||||
|
||||
新しい課題から参照
ユーザをブロックする