ニジラー詳細ページ作成 (#63) (#341)

#63

#63

#63

#63

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

frontend/src/pages/deerjikists/DeerjikistDetailPage.tsx

@@ -0,0 +1,155 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+
+import TagLink from '@/components/TagLink'
+import Label from '@/components/common/Label'
+import PageTitle from '@/components/common/PageTitle'
+import MainArea from '@/components/layout/MainArea'
+import { toast } from '@/components/ui/use-toast'
+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 type { FC, FormEvent } from 'react'
+
+import type { Deerjikist, Platform } from '@/types'
+
+
+export default (() => {
+  const { id } = useParams ()
+  const tagId = String (id ?? '')
+  const tagKey = tagsKeys.deerjikists (tagId)
+
+  const { data: qData, isLoading: loading } =
+      useQuery ({ queryKey: tagKey, queryFn: () => fetchDeerjikistsByTag (tagId) })
+  const tag = qData?.tag
+  const deerjikists = qData?.deerjikists ?? []
+
+  const [data, setData] =
+      useState<(Omit<Deerjikist, 'platform'> & { platform: Platform | null })[]> ([])
+  const [disabled, setDisabled] = useState (true)
+
+  const qc = useQueryClient ()
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault ()
+
+    try
+    {
+      setDisabled (true)
+
+      setData (await apiPut<Deerjikist[]> (`/tags/${ id }/deerjikists`, data))
+      qc.invalidateQueries ({ queryKey: tagsKeys.root })
+
+      toast ({ description: '更新しました．' })
+    }
+    catch
+    {
+      toast ({ title: '更新失敗', description: '入力内容を確認してください．' })
+    }
+    finally
+    {
+      setDisabled (false)
+    }
+  }
+
+  useEffect (() => {
+    if (!(tag))
+      {
+	setDisabled (true)
+	return
+      }
+
+    setData (deerjikists)
+    setDisabled (false)
+  }, [tag, deerjikists])
+
+  return (
+      <MainArea>
+	{(loading || !(tag)) ? 'Loading...' : (
+	    <div className="max-w-xl">
+	      <PageTitle>
+		<TagLink tag={tag} withWiki={false} withCount={false}/>
+	      </PageTitle>
+
+	      <form onSubmit={handleSubmit} className="my-4 space-y-2">
+		{data.map ((datum, i) => (
+		    <fieldset key={i} className="min-w-0 rounded-lg border border-gray-300
+						 dark:border-gray-700 p-4">
+		      <legend className="px-2 text-sm font-semibold text-gray-700
+					 dark:text-gray-300">
+			<button
+			    type="button"
+			    disabled={disabled}
+			    onClick={() => setData (prev => [...prev.slice (0, i),
+							     ...prev.slice (i + 1)])}>
+			  #{i + 1}
+			</button>
+		      </legend>
+
+		      {/* プラットフォーム */}
+		      <div>
+			<Label>プラットフォーム</Label>
+			<select
+			    className="w-full border p-2 rounded"
+			    disabled={disabled}
+			    value={datum.platform ?? ''}
+			    onChange={e => setData (prev => {
+			      const rtn = [...prev]
+			      rtn[i] = { ...rtn[i],
+					 platform: (e.target.value || null) as Platform | null }
+			      return rtn
+			    })}>
+			  <option value="">&nbsp;</option>
+			  {PLATFORMS.map (p => (
+			      <option key={p} value={p}>
+				{PLATFORM_NAMES[p]}
+			      </option>))}
+			</select>
+		      </div>
+
+		      {/* コード */}
+		      <div>
+			<Label>コード</Label>
+			<input
+			    type="text"
+			    disabled={disabled}
+			    className="w-full border p-2 rounded"
+			    value={datum.code}
+			    onChange={e => setData (prev => {
+			      const rtn = [...prev]
+			      rtn[i] = { ...rtn[i], code: e.target.value }
+			      return rtn
+			    })}/>
+		      </div>
+		    </fieldset>
+		))}
+
+		<div className="py-3">
+		  <button
+		      type="button"
+		      disabled={disabled}
+		      onClick={() => setData (prev => [...prev, { platform: null, code: '' }])}>
+		    +
+		  </button>
+		</div>
+
+		<div className="py-3">
+		  <button
+		      type="submit"
+		      disabled={disabled}
+		      className={cn ('px-4 py-2 rounded',
+				     (disabled
+				      ? 'text-gray-300 bg-gray-500'
+				      : 'text-white bg-blue-500'))}>
+		    更新
+		  </button>
+		</div>
+	      </form>
+	    </div>
+	)}
+      </MainArea>)
+}) satisfies FC