chore: ハンドルにも対応させてみた

calloc134 · Oct 26, 2023 · f6bfedd · f6bfedd
1 parent 46aa1f6
commit f6bfedd
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/packages/frontend/src/features/users/components/UserDetailCard.tsx b/packages/frontend/src/features/users/components/UserDetailCard.tsx
@@ -2,6 +2,7 @@ import { graphql } from "src/lib/generated/gql";
 import { Card, CardBody, CardFooter, Image, Spacer, Modal, useDisclosure } from "@nextui-org/react";
 import { FragmentType, useFragment } from "src/lib/generated";
 import { UserDetailScreenNameInput } from "./UserDetailScreenNameInput";
+import { UserDetailHandleInput } from "./UserDetailHandleInput";
 
 // クエリするフラグメントを定義
 const UserDetailFragment = graphql(`
@@ -34,6 +35,8 @@ const UserDetailCard = ({ my_user_uuid, user_frag }: { my_user_uuid: string; use
 
   // スクリーンネーム用のモーダル用のフックを実行
   const { isOpen: sc_isOpen, onOpen: sc_onOpen, onOpenChange: sc_onOpenChange } = useDisclosure();
+  // ハンドル用のモーダル用のフックを実行
+  const { isOpen: hd_isOpen, onOpen: hd_onOpen, onOpenChange: hd_onOpenChange } = useDisclosure();
 
   // 現在のログインユーザが自分自身かどうかを判定
   const is_myself = my_user_uuid === user.user_uuid;
@@ -58,7 +61,7 @@ const UserDetailCard = ({ my_user_uuid, user_frag }: { my_user_uuid: string; use
               <h1 className={`text-2xl font-bold ${is_myself ? "cursor-pointer hover:scale-105 hover:opacity-80 duration-75" : ""}`} onClick={sc_onOpen}>
                 {user.screen_name}
               </h1>
-              <p className={`text-xl ${is_myself ? "cursor-pointer hover:scale-105 hover:opacity-80 duration-75" : ""}`} onClick={sc_onOpen}>
+              <p className={`text-xl ${is_myself ? "cursor-pointer hover:scale-105 hover:opacity-80 duration-75" : ""}`} onClick={hd_onOpen}>
                 @{user.handle}
               </p>
             </div>
@@ -78,6 +81,13 @@ const UserDetailCard = ({ my_user_uuid, user_frag }: { my_user_uuid: string; use
                 </Modal>
               </>
             )}
+            {is_myself && (
+              <>
+                <Modal isOpen={hd_isOpen} onOpenChange={hd_onOpenChange}>
+                  <UserDetailHandleInput screen_name={user.handle} />
+                </Modal>
+              </>
+            )}
           </div>
         </CardFooter>
       </Card>

diff --git a/packages/frontend/src/features/users/components/UserDetailHandleInput.tsx b/packages/frontend/src/features/users/components/UserDetailHandleInput.tsx
@@ -0,0 +1,29 @@
+import { useRef } from "react";
+import { ModalContent, ModalBody, ModalHeader, ModalFooter, Button, Input } from "@nextui-org/react";
+
+const UserDetailHandleInput = ({ screen_name }: { screen_name: string }) => {
+  const input_ref = useRef<HTMLInputElement>(null);
+
+  const handle_submit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log(input_ref.current?.value);
+  };
+
+  return (
+    <ModalContent>
+      <form onSubmit={handle_submit}>
+        <ModalHeader>ハンドルを編集</ModalHeader>
+        <ModalBody>
+          <Input defaultValue={screen_name} ref={input_ref} />
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" type="submit">
+            保存
+          </Button>
+        </ModalFooter>
+      </form>
+    </ModalContent>
+  );
+};
+
+export { UserDetailHandleInput };