chore: 自己紹介文の編集実装テスト

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

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/packages/frontend/src/features/users/components/UserCard.tsx b/packages/frontend/src/features/users/components/UserCard.tsx
@@ -26,10 +26,10 @@ const UserCard = ({ user: user_flag }: { user: FragmentType<typeof UserFragment>
           height={200}
           radius="full"
           removeWrapper
-          className="shadow-md absolute top-1/2 -left-8 transform -translate-y-1/2"
+          className="shadow-md absolute top-1/2 -left-16 transform -translate-y-1/2"
         />
         <div className="flex flex-row justify-between">
-          <Spacer x={48} />
+          <Spacer x={36} />
           <CardBody>
             <div className="grid grid-flow-col grid-cols-6 md:grid-cols-12">
               <div className="flex flex-col justify-start col-span-6">

diff --git a/packages/frontend/src/features/users/components/UserDetailBioInput.tsx b/packages/frontend/src/features/users/components/UserDetailBioInput.tsx
@@ -0,0 +1,29 @@
+import { useRef } from "react";
+import { ModalContent, ModalBody, ModalHeader, ModalFooter, Button, Textarea } from "@nextui-org/react";
+
+const UserDetailBioInput = ({ bio }: { bio: 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>
+          <Textarea defaultValue={bio} ref={input_ref} />
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" type="submit">
+            保存
+          </Button>
+        </ModalFooter>
+      </form>
+    </ModalContent>
+  );
+};
+
+export { UserDetailBioInput };
diff --git a/packages/frontend/src/features/users/components/UserDetailCard.tsx b/packages/frontend/src/features/users/components/UserDetailCard.tsx
@@ -3,6 +3,7 @@ import { Card, CardBody, CardFooter, Image, Spacer, Modal, useDisclosure } from
 import { FragmentType, useFragment } from "src/lib/generated";
 import { UserDetailScreenNameInput } from "./UserDetailScreenNameInput";
 import { UserDetailHandleInput } from "./UserDetailHandleInput";
+import { UserDetailBioInput } from "./UserDetailBioInput";
 
 // クエリするフラグメントを定義
 const UserDetailFragment = graphql(`
@@ -37,6 +38,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 { isOpen: bio_isOpen, onOpen: bio_onOpen, onOpenChange: bio_onOpenChange } = useDisclosure();
 
   // 現在のログインユーザが自分自身かどうかを判定
   const is_myself = my_user_uuid === user.user_uuid;
@@ -56,17 +59,17 @@ const UserDetailCard = ({ my_user_uuid, user_frag }: { my_user_uuid: string; use
       <Spacer y={6} />
       <Card isBlurred className="w-full bg-secondary" shadow="sm">
         <CardBody>
-          <div className="flex">
-            <div className="flex flex-col justify-star">
-              <h1 className={`text-2xl font-bold ${is_myself ? "cursor-pointer hover:scale-105 hover:opacity-80 duration-75" : ""}`} onClick={sc_onOpen}>
+          <div className="grid grid-flow-col grid-cols-6 md:grid-cols-12">
+            <div className="flex flex-col justify-star col-span-3">
+              <h1 className={`text-2xl font-bold line-clamp-3 ${is_myself ? "cursor-pointer hover:opacity-60" : ""}`} onClick={sc_onOpen}>
                 {user.screen_name}
               </h1>
-              <p className={`text-xl ${is_myself ? "cursor-pointer hover:scale-105 hover:opacity-80 duration-75" : ""}`} onClick={hd_onOpen}>
+              <p className={`text-xl line-clamp-3 ${is_myself ? "cursor-pointer hover:opacity-60" : ""}`} onClick={hd_onOpen}>
                 @{user.handle}
               </p>
             </div>
-            <div className="flex">
-              <p className="text-xl" onClick={sc_onOpen}>
+            <div className="flex col-span-4 md:col-span-10">
+              <p className={`text-xl ${is_myself ? "cursor-pointer hover:opacity-60" : ""}`} onClick={bio_onOpen}>
                 {user.bio}
               </p>
             </div>
@@ -84,7 +87,14 @@ const UserDetailCard = ({ my_user_uuid, user_frag }: { my_user_uuid: string; use
             {is_myself && (
               <>
                 <Modal isOpen={hd_isOpen} onOpenChange={hd_onOpenChange}>
-                  <UserDetailHandleInput screen_name={user.handle} />
+                  <UserDetailHandleInput handle={user.handle} />
+                </Modal>
+              </>
+            )}
+            {is_myself && (
+              <>
+                <Modal isOpen={bio_isOpen} onOpenChange={bio_onOpenChange}>
+                  <UserDetailBioInput bio={user.bio} />
                 </Modal>
               </>
             )}

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