#32

frontend/src/components/users/UserCodeDialogue.tsx

@@ -1,16 +1,38 @@
+import axios from 'axios'
+
 import { Button } from '@/components/ui/button'
 import { Dialog,
          DialogContent,
          DialogDescription,
          DialogTitle,
          DialogTrigger } from '@/components/ui/dialog'
+import { toast } from '@/components/ui/use-toast'
+import { API_BASE_URL } from '@/config'
+
+import type { User } from '@/types'
 
 type Props = { visible:         boolean
 	       onVisibleChange: (visible: boolean) => void
-	       user:            User | null }
+	       user:            User | null
+	       setUser:         (user: User) => void }
 
 
-export default ({ visible, onVisibleChange, user }: Props) => {
+export default ({ visible, onVisibleChange, user, setUser }: Props) => {
+  const handleChange = async () => {
+    if (!(confirm ('引継ぎコードを再発行しますか?')))
+      return
+
+    const { data } = await axios.post (`${ API_BASE_URL }/users/code/renew`, { }, { headers: {
+	'Content-Type':     'multipart/form-data',
+	'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
+    if (data.code)
+      {
+	localStorage.setItem ('user_code', data.code)
+	setUser (user => ({ ...user, inheritanceCode: data.code }))
+	toast ({ title: '再発行しました．' })
+      }
+  }
+
   return (
       <Dialog open={visible} onOpenChange={onVisibleChange}>
         <DialogContent className="space-y-6">
@@ -22,8 +44,9 @@ export default ({ visible, onVisibleChange, user }: Props) => {
 	      このコードはほかの人には教えないでください!
 	    </p>
 	    <div className="my-4">
-	      <Button className="px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400">
-		引継ぎコードを変更する
+	      <Button onClick={handleChange}
+		      className="px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400">
+		引継ぎコード再発行
 	      </Button>
 	    </div>
 	  </div>