#32

frontend/src/pages/users/SettingPage.tsx

@@ -1,50 +1,103 @@
 import { useEffect, useState } from 'react'
-import { Helmet } from 'react-helmet'
+import { Helmet } from 'react-helmet-async'
 
 import Form from '@/components/common/Form'
 import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
-import { SITE_TITLE } from '@/config'
+import InheritDialogue from '@/components/users/InheritDialogue'
+import UserCodeDialogue from '@/components/users/UserCodeDialogue'
+import { API_BASE_URL, SITE_TITLE } from '@/config'
+import { Button } from '@/components/ui/button'
 
 import type { User } from '@/types'
 
-type Props = { user:    User
-               setUser: (user: User) => void }
+type Props = { user:    User | null
+	       setUser: (user: User) => void }
 
 
 export default ({ user, setUser }: Props) => {
   const [name, setName] = useState ('')
+  const [userCodeVsbl, setUserCodeVsbl] = useState (false)
+  const [inheritVsbl, setInheritVsbl] = useState (false)
+
+  const handleSubmit = async () => {
+    const formData = new FormData ()
+    formData.append ('name', name)
+
+    try
+    {
+      await axios.post (`${ API_BASE_URL }/users`, formData, { headers: {
+	  'Content-Type':     'multipart/form-data',
+	  'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
+      toast ({ title: '設定を更新しました．' })
+    }
+    catch
+    {
+      toast ({ title: 'しっぱい……' })
+    }
+  }
 
   useEffect (() => {
     if (!user)
       return
 
-    setName (user?.name)
+    setName (user.name)
   }, [user])
 
   return (
       <MainArea>
-        <Helmet>
-          <meta name="robots" content="noindex" />
-          <title>設定 | {SITE_TITLE}</title>
-        </Helmet>
-        <Form>
-          <PageTitle>設定</PageTitle>
+	<Helmet>
+	  <meta name="robots" content="noindex" />
+	  <title>設定 | {SITE_TITLE}</title>
+	</Helmet>
 
-          {/* 名前 */}
-          <div>
-            <Label>表示名</Label>
-            <input type="text"
-                   className="w-full border rounded p-2"
-                   value={name}
-                   placeholder="名もなきニジラー"
-                   onChange={ev => setName (ev.target.value)} />
-            {(user && !(user.name)) && (
-                <p class="mt-1 text-sm text-red-500">
-                  名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
-                </p>)}
-          </div>
-        </Form>
+	<Form>
+	  <PageTitle>設定</PageTitle>
+
+	  {/* 名前 */}
+	  <div>
+	    <Label>表示名</Label>
+	    <input type="text"
+		   className="w-full border rounded p-2"
+		   value={name}
+		   placeholder="名もなきニジラー"
+		   onChange={ev => setName (ev.target.value)} />
+	    {(user && !(user.name)) && (
+		<p className="mt-1 text-sm text-red-500">
+		  名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
+		</p>)}
+	  </div>
+
+	  {/* 送信 */}
+          <Button onClick={handleSubmit}
+                  className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
+	    更新
+	  </Button>
+
+	  {/* 引継ぎ */}
+	  <div>
+	    <Label>引継ぎ</Label>
+	    <Button onClick={() => setUserCodeVsbl (true)}
+		    className="px-4 py-2 bg-gray-600 text-white rounded disabled:bg-gray-400"
+		    disabled={!(user)}>
+	      引継ぎコードを表示
+	    </Button>
+	    <Button onClick={() => setInheritVsbl (true)}
+		    className="ml-2 px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400"
+		    disabled={!(user)}>
+	      ほかのブラウザから引継ぐ
+	    </Button>
+	  </div>
+	</Form>
+
+	<UserCodeDialogue visible={userCodeVsbl}
+			  onVisibleChange={setUserCodeVsbl}
+			  user={user} />
+
+	<InheritDialogue visible={inheritVsbl}
+			 onVisibleChange={setInheritVsbl}
+			 user={user}
+			 setUser={setUser} />
       </MainArea>)
 }