フォームのバリデーションとニコ連携の画面変更 (#090) (#355)

Reviewed-on: #355
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/lib/apiErrors.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it, vi } from 'vitest'
+
+const api = vi.hoisted (() => ({
+  isApiError: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('extractValidationError', () => {
+  it ('extracts field and base errors from 422 validation responses', async () => {
+    api.isApiError.mockReturnValueOnce (true)
+
+    const { extractValidationError } = await import ('@/lib/apiErrors')
+    const validationError = extractValidationError<'name'> ({
+      response: {
+        status: 422,
+        data:   {
+          type:        'validation_error',
+          message:     '入力内容を確認してください．',
+          errors:      { name: ['名前は必須です．'] },
+          base_errors: ['全体エラー'],
+        },
+      },
+    })
+
+    expect (validationError).toEqual ({
+      message:     '入力内容を確認してください．',
+      fieldErrors: { name: ['名前は必須です．'] },
+      baseErrors:  ['全体エラー'],
+    })
+  })
+
+  it ('preserves dotted field keys for indexed form rows', async () => {
+    api.isApiError.mockReturnValueOnce (true)
+
+    const { extractValidationError } = await import ('@/lib/apiErrors')
+    const validationError = extractValidationError<'deerjikists.0.platform'> ({
+      response: {
+        status: 422,
+        data:   {
+          type:        'validation_error',
+          errors:      { 'deerjikists.0.platform': ['プラットフォームを入力してください．'] },
+          base_errors: [],
+        },
+      },
+    })
+
+    expect (validationError?.fieldErrors).toEqual ({
+      'deerjikists0Platform': ['プラットフォームを入力してください．'],
+    })
+  })
+
+  it ('does not treat 400 bad requests as form validation errors', async () => {
+    api.isApiError.mockReturnValueOnce (true)
+
+    const { extractValidationError } = await import ('@/lib/apiErrors')
+    const validationError = extractValidationError ({
+      response: {
+        status: 400,
+        data:   {
+          type:        'bad_request',
+          message:     'リクエストが不正です．',
+          errors:      {},
+          base_errors: ['リクエストが不正です．'],
+        },
+      },
+    })
+
+    expect (validationError).toBeNull ()
+  })
+
+  it ('ignores non-api errors', async () => {
+    api.isApiError.mockReturnValueOnce (false)
+
+    const { extractValidationError } = await import ('@/lib/apiErrors')
+
+    expect (extractValidationError (new Error ('network'))).toBeNull ()
+  })
+})

frontend/src/lib/apiErrors.ts

@@ -0,0 +1,36 @@
+import toCamel from 'camelcase-keys'
+
+import { isApiError } from '@/lib/api'
+
+export type FieldErrors<T extends string = string> = Partial<Record<T, string[]>>
+
+export type ValidationError<T extends string = string> =
+    { message:      string
+      fieldErrors:  FieldErrors<T>
+      baseErrors:   string[] }
+
+type RawValidationError = { type?:        string
+			    message?:     string
+			    errors?:      Record<string, string[]>
+			    baseErrors?:  string[] }
+
+
+export const extractValidationError = <T extends string = string> (err: unknown) => {
+  if (!(isApiError (err)) || err.response?.status !== 422)
+    return null
+
+  const rawData = toCamel ((err.response.data ?? { }) as Record<string, unknown>,
+			   { deep: true }) as RawValidationError
+  const data: RawValidationError = {
+      type:       rawData.type as string | undefined,
+      message:    rawData.message as string | undefined,
+      errors:     rawData.errors as Record<string, string[]> | undefined,
+      baseErrors: rawData.baseErrors as string[] | undefined }
+
+  if (data.type !== 'validation_error' && !(data.errors))
+    return null
+
+  return { message: data.message ?? '入力内容を確認してください．',
+	   fieldErrors: (data.errors ?? { }) as FieldErrors<T>,
+	   baseErrors: data.baseErrors ?? [] }
+}

frontend/src/lib/prefetchers.test.ts

@@ -10,6 +10,7 @@ const postsApi = vi.hoisted (() => ({
 }))
 
 const tagsApi = vi.hoisted (() => ({
+  fetchNicoTags:   vi.fn (),
   fetchTag:        vi.fn (),
   fetchTagByName:  vi.fn (),
   fetchTagChanges: vi.fn (),
@@ -37,6 +38,7 @@ describe ('prefetchForURL', () => {
     postsApi.fetchPost.mockResolvedValue ({ id: 1 })
     postsApi.fetchPostChanges.mockResolvedValue ({ versions: [], count: 0 })
     tagsApi.fetchTags.mockResolvedValue ({ tags: [], count: 0 })
+    tagsApi.fetchNicoTags.mockResolvedValue ({ tags: [], count: 0 })
     tagsApi.fetchTag.mockResolvedValue ({ id: 1 })
     tagsApi.fetchTagByName.mockResolvedValue (null)
     tagsApi.fetchTagChanges.mockResolvedValue ({ versions: [], count: 0 })
@@ -85,6 +87,32 @@ describe ('prefetchForURL', () => {
     )
   })
 
+  it ('prefetches nico tag indexes and their alias from query parameters', async () => {
+    await prefetchForURL (
+        qc (),
+        'http://localhost/tags/nico?name=source&linked_tag=destination'
+	    + '&link_status=linked&page=3&limit=10',
+    )
+    await prefetchForURL (qc (), 'http://localhost/nico/tags?page=2')
+
+    expect (tagsApi.fetchNicoTags).toHaveBeenNthCalledWith (1, {
+      name:       'source',
+      linkedTag:  'destination',
+      linkStatus: 'linked',
+      page:       3,
+      limit:      10,
+      order:      'updated_at:desc',
+    })
+    expect (tagsApi.fetchNicoTags).toHaveBeenNthCalledWith (2, {
+      name:       '',
+      linkedTag:  '',
+      linkStatus: 'all',
+      page:       2,
+      limit:      20,
+      order:      'updated_at:desc',
+    })
+  })
+
   it ('prefetches wiki show pages and related tag/post data', async () => {
     wikiApi.fetchWikiPageByTitle.mockResolvedValueOnce ({
       id:    3,

frontend/src/lib/prefetchers.ts

@@ -3,7 +3,7 @@ import { match } from 'path-to-regexp'
 
 import { fetchPost, fetchPosts, fetchPostChanges } from '@/lib/posts'
 import { postsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
-import { fetchTagByName, fetchTag, fetchTagChanges, fetchTags } from '@/lib/tags'
+import { fetchNicoTags, fetchTagByName, fetchTag, fetchTagChanges, fetchTags } from '@/lib/tags'
 import { fetchWikiPage,
 	 fetchWikiPageByTitle,
 	 fetchWikiPages } from '@/lib/wiki'
@@ -170,6 +170,24 @@ const prefetchTagsIndex: Prefetcher = async (qc, url) => {
 }
 
 
+const prefetchNicoTagsIndex: Prefetcher = async (qc, url) => {
+  const keys = {
+      name:       url.searchParams.get ('name') ?? '',
+      linkedTag:  url.searchParams.get ('linked_tag') ?? '',
+      linkStatus: (url.searchParams.get ('link_status') || 'all') as
+		  'all' | 'linked' | 'unlinked',
+      page:       Number (url.searchParams.get ('page') || 1),
+      limit:      Number (url.searchParams.get ('limit') || 20),
+      order:      (url.searchParams.get ('order') || 'updated_at:desc') as
+		  'name:asc' | 'name:desc' | 'created_at:asc' | 'created_at:desc'
+		  | 'updated_at:asc' | 'updated_at:desc' }
+
+  await qc.prefetchQuery ({
+      queryKey: tagsKeys.nicoIndex (keys),
+      queryFn:  () => fetchNicoTags (keys) })
+}
+
+
 const prefetchTagShow: Prefetcher = async (qc, url) => {
   const m = mTag (url.pathname)
   if (!(m))
@@ -206,6 +224,8 @@ export const routePrefetchers: { test: (u: URL) => boolean; run: Prefetcher }[]
 		  && Boolean (mWiki (u.pathname))),
       run: prefetchWikiPageShow },
     { test: u => u.pathname === '/tags', run: prefetchTagsIndex },
+    { test: u => ['/tags/nico', '/nico/tags'].includes (u.pathname),
+      run: prefetchNicoTagsIndex },
     { test: u => (!(['/tags/nico', '/tags/changes'].includes (u.pathname))
 		  && Boolean (mTag (u.pathname))),
       run: prefetchTagShow },

frontend/src/lib/queryKeys.ts

@@ -1,4 +1,4 @@
-import type { FetchPostsParams, FetchTagsParams } from '@/types'
+import type { FetchNicoTagsParams, FetchPostsParams, FetchTagsParams } from '@/types'
 
 export const postsKeys = {
     root:     ['posts'] as const,
@@ -11,6 +11,8 @@ export const postsKeys = {
 export const tagsKeys = {
     root:         ['tags'] as const,
     index:        (p: FetchTagsParams) => ['tags', 'index', p] as const,
+    nicoRoot:     ['tags', 'nico'] as const,
+    nicoIndex:    (p: FetchNicoTagsParams) => ['tags', 'nico', 'index', p] as const,
     show:         (name: string) => ['tags', name] as const,
     changes:      (p: { id?: string; page: number; limit: number }) =>
 		      ['tags', 'changes', p] as const,

frontend/src/lib/tags.ts

@@ -1,6 +1,11 @@
 import { apiGet } from '@/lib/api'
 
-import type { Deerjikist, FetchTagsParams, Tag, TagVersion } from '@/types'
+import type { Deerjikist,
+	      FetchNicoTagsParams,
+	      FetchTagsParams,
+	      NicoTag,
+	      Tag,
+	      TagVersion } from '@/types'
 
 
 export const fetchTags = async (
@@ -23,6 +28,19 @@ export const fetchTags = async (
 	...(order && { order }) } })
 
 
+export const fetchNicoTags = async (
+    { name, linkedTag, linkStatus, page, limit, order }: FetchNicoTagsParams,
+): Promise<{ tags:  NicoTag[]
+	     count: number }> =>
+    await apiGet ('/tags/nico', { params: {
+	page,
+	limit,
+	name,
+	linked_tag:  linkedTag,
+	link_status: linkStatus === 'all' ? '' : linkStatus,
+	order } })
+
+
 export const fetchTag = async (id: string): Promise<Tag | null> => {
   try
   {

frontend/src/lib/useValidationErrors.ts

@@ -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/lib/users.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+
+import { canEditContent } from '@/lib/users'
+
+import type { UserRole } from '@/types'
+
+const userWithRole = (role: UserRole) => ({ role })
+
+describe ('user permission helpers', () => {
+  it ('allows admins and members to edit content', () => {
+    expect (canEditContent (userWithRole ('admin'))).toBe (true)
+    expect (canEditContent (userWithRole ('member'))).toBe (true)
+  })
+
+  it ('does not allow guests or missing users to edit content', () => {
+    expect (canEditContent (userWithRole ('guest'))).toBe (false)
+    expect (canEditContent (null)).toBe (false)
+    expect (canEditContent (undefined)).toBe (false)
+  })
+})

frontend/src/lib/users.ts

@@ -0,0 +1,7 @@
+import type { User, UserRole } from '@/types'
+
+const CONTENT_EDITOR_ROLES: readonly UserRole[] = ['admin', 'member']
+
+export const canEditContent = (
+    user: Pick<User, 'role'> | null | undefined,
+): boolean => user != null && CONTENT_EDITOR_ROLES.includes (user.role)

frontend/src/lib/utils.ts

@@ -71,3 +71,15 @@ export const originalCreatedAtString = (
 	       .join (' '))
   return rtn === '〜' ? '年月日不詳' : rtn
 }
+
+
+export const inputClass = (invalid?: boolean, className?: string): string =>
+    cn ('w-full rounded border p-2',
+	(invalid
+	 ? ['border-red-500 bg-red-50 text-red-900',
+	    'placeholder:text-red-300',
+	    'focus:border-red-500 focus:outline-none focus:ring-2 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 focus:ring-blue-200']),
+	className)