From 390e48bd36f591998e1d857cb550ab209b4f930d Mon Sep 17 00:00:00 2001
From: Walnuts <r.juglans.1018@gmail.com>
Date: Mon, 6 Nov 2023 11:06:20 +0900
Subject: [PATCH 1/4] Add new input fields and fix emoji picker bug in Balance
 component. Update share button URL in MypageComponent.

---
 front/src/app/mypage/Balance.tsx         | 63 +++++++++++++-----------
 front/src/app/mypage/MypageComponent.tsx |  2 +-
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/front/src/app/mypage/Balance.tsx b/front/src/app/mypage/Balance.tsx
index 1a0f4a8..61b4d00 100644
--- a/front/src/app/mypage/Balance.tsx
+++ b/front/src/app/mypage/Balance.tsx
@@ -55,7 +55,8 @@ export function Balance({
   const [swiperIndex, setSwiperIndex] = useState(0);
   const [isAddMode, setIsAddMode] = useState(false);
   const [isAddMode2, setIsAddMode2] = useState(false);
-  const inputEl = useRef<HTMLInputElement>(null!);
+  const inputMoneyPoolEmojiElement = useRef<HTMLInputElement>(null!);
+  const inputMoneyPoolNameElement = useRef<HTMLInputElement>(null!);
   const [newMoneyPoolEmoji, setNewMoneyPoolEmoji] = useState("");
   const [newMoneyPoolName, setNewMoneyPoolName] = useState("");
 
@@ -67,6 +68,10 @@ export function Balance({
   const onEmojiClick = (emoji: EmojiClickData, event: MouseEvent) => {
     setNewMoneyPoolEmoji(emoji.emoji);
     setIsEmojiPicking(false);
+    if (inputMoneyPoolNameElement.current) {
+      console.debug("NewMoneyPool, focus to name");
+      inputMoneyPoolNameElement.current.focus();
+    }
   };
 
   async function addMoneyPool() {
@@ -230,33 +235,34 @@ export function Balance({
                     </button>
                     <div className="w-11/12 flex gap-2 justify-start items-center p-1 relative">
                       {isEmojiPicking ? (
-                        <div className=" absolute bottom-0">
-                          <Picker onEmojiClick={onEmojiClick} />
-                        </div>
+                        <>
+                          <div className=" absolute bottom-0 z-10">
+                            <Picker onEmojiClick={onEmojiClick} />
+                          </div>
+                          <div
+                            className="h-screen w-screen fixed left-0 top-0 z-0"
+                            onClick={() => {
+                              setIsEmojiPicking(false);
+                            }}
+                          />
+                        </>
                       ) : (
                         <></>
                       )}
                       <input
                         type="text"
-                        ref={inputEl}
+                        ref={inputMoneyPoolEmojiElement}
                         className="h-[80%] hover:border-0 focus:outline-none w-[15%] px-0"
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") {
-                            e.preventDefault();
-                          }
-                        }}
                         value={newMoneyPoolEmoji}
                         onClick={(e) => {
                           setIsEmojiPicking(true);
                         }}
-                        onChange={(e) => {
-                          setNewMoneyPoolEmoji(e.target.value);
-                        }}
                         placeholder="絵文字"
                       />
                       <input
                         type="text"
                         className="h-[80%] hover:border-0 focus:outline-none w-[75%]"
+                        ref={inputMoneyPoolNameElement}
                         onKeyDown={async (e) => {
                           if (e.key === "Enter") {
                             if (e.currentTarget) {
@@ -335,7 +341,6 @@ export function Balance({
                     <div className="w-11/12 flex gap-2 justify-start items-center p-1">
                       <input
                         type="text"
-                        ref={inputEl}
                         className="h-[80%] hover:border-0 focus:outline-none px-0"
                         onKeyDown={(e) => {
                           if (e.key === "Enter") {
@@ -542,29 +547,29 @@ function BalanceItem({
 
   return (
     <div className="flex gap-4 font-Noto font-normal py-2 text-4xl items-center justify-between px-0 overflow-hidden border-b-2 border-gray-300">
-      <div className="w-10 h-10">
+      <div className="w-10 h-10 overflow-visible">
         {isEditEmoji ? (
-          <div className="w-full h-full">
-            <input
-              ref={inputName}
-              type="text"
-              className="w-full"
-              defaultValue={moneyPoolEmoji}
+          <div className="w-full h-full fixed">
+            <div
+              className="absolute left-0 z-20"
               onBlur={(fe) => {
-                onEmojiChange(fe.currentTarget.value);
                 if (!fe.currentTarget.contains(fe.relatedTarget)) {
                   setIsEditEmoji(false);
                 }
               }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  onEmojiChange(e.currentTarget.value);
+            >
+              <Picker
+                onEmojiClick={(emoji) => {
+                  onEmojiChange(emoji.emoji);
                   setIsEditEmoji(false);
-                  e.currentTarget.blur();
-                }
+                }}
+              />
+            </div>
+            <div
+              className="h-screen w-screen z-10 fixed"
+              onClick={() => {
+                setIsEditEmoji(false);
               }}
-              autoFocus
-              tabIndex={0}
             />
           </div>
         ) : (
diff --git a/front/src/app/mypage/MypageComponent.tsx b/front/src/app/mypage/MypageComponent.tsx
index 4500efd..c572424 100644
--- a/front/src/app/mypage/MypageComponent.tsx
+++ b/front/src/app/mypage/MypageComponent.tsx
@@ -154,7 +154,7 @@ function MypageContents({ userID }: { userID?: string }) {
                     }, 0)
                     .toLocaleString(undefined, {
                       maximumFractionDigits: 5,
-                    })}%E5%86%86%E3%81%A7%E3%81%99%EF%BC%81%0D%0AOpenChokin%E3%81%A7%E5%AE%B6%E8%A8%88%E7%B0%BF%E3%82%92%E5%85%A8%E4%B8%96%E7%95%8C%E3%81%AB%E5%85%AC%E9%96%8B%EF%BC%81&url=https://openchokin.walnuts.dev/${userID}&hashtags=OpenChokina&via=walnuts1018`}
+                    })}%E5%86%86%E3%81%A7%E3%81%99%EF%BC%81%0D%0AOpenChokin%E3%81%A7%E5%AE%B6%E8%A8%88%E7%B0%BF%E3%82%92%E5%85%A8%E4%B8%96%E7%95%8C%E3%81%AB%E5%85%AC%E9%96%8B%EF%BC%81&url=https://openchokin.walnuts.dev/${userID}&hashtags=OpenChokin&via=walnuts1018`}
                   rel="nofollow"
                   target="_blank"
                   className="h-full font-Nunito text-xl"

From 9f5735b5a0292f8c108210bb9d83f40810ca07dc Mon Sep 17 00:00:00 2001
From: Walnuts <r.juglans.1018@gmail.com>
Date: Mon, 6 Nov 2023 11:14:28 +0900
Subject: [PATCH 2/4] Add .hintrc file and update Balance component in mypage

---
 front/.hintrc                    |  8 ++++++++
 front/src/app/mypage/Balance.tsx | 12 +++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 front/.hintrc

diff --git a/front/.hintrc b/front/.hintrc
new file mode 100644
index 0000000..cb34607
--- /dev/null
+++ b/front/.hintrc
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}
\ No newline at end of file
diff --git a/front/src/app/mypage/Balance.tsx b/front/src/app/mypage/Balance.tsx
index 61b4d00..d82af0c 100644
--- a/front/src/app/mypage/Balance.tsx
+++ b/front/src/app/mypage/Balance.tsx
@@ -9,7 +9,6 @@ import { useRef } from "react";
 import { useSession } from "next-auth/react";
 import Picker from "emoji-picker-react";
 import { EmojiClickData } from "emoji-picker-react";
-import { colors } from "@mui/material";
 import Image from "next/image";
 
 const tabColors = ["#f5c33f", "#31aedd"];
@@ -223,6 +222,7 @@ export function Balance({
                     }}
                   >
                     <button
+                      type="button"
                       className="h-5/6"
                       style={{ color: tabColors[0] }}
                       tabIndex={0}
@@ -230,6 +230,7 @@ export function Balance({
                         e.preventDefault();
                         await addMoneyPool();
                       }}
+                      title="MoneyPoolを追加"
                     >
                       <Plus className="h-full w-full" />
                     </button>
@@ -328,6 +329,7 @@ export function Balance({
                     }}
                   >
                     <button
+                      type="button"
                       className="h-5/6"
                       style={{ color: tabColors[1] }}
                       tabIndex={0}
@@ -335,6 +337,7 @@ export function Balance({
                         e.preventDefault();
                         await addMoneyProvider();
                       }}
+                      title="MoneyProviderを追加"
                     >
                       <Plus className="h-full w-full" />
                     </button>
@@ -591,6 +594,7 @@ function BalanceItem({
           {isEditName ? (
             <div className="w-full h-full">
               <input
+                aria-label="money pool name"
                 ref={inputName}
                 type="text"
                 className="w-full"
@@ -685,6 +689,7 @@ function BalanceItem({
           <div>このMoney Poolを公開してもよろしいですか？</div>
           <div className="flex justify-between gap-x-8">
             <button
+              type="button"
               className="bg-primary-default hover:bg-primary-dark rounded-full  text-white px-4 py-1 border-primary-default border-2 hover:border-primary-dark font-Noto font-semibold text-xl"
               onClick={() => {
                 setChangePublicCheckIsOpen(false);
@@ -697,6 +702,7 @@ function BalanceItem({
               公開する
             </button>
             <button
+              type="button"
               className="bg-white hover:bg-gray-100 rounded-full  text-primary-default px-4 py-1 border-primary-default border-2 font-Noto font-semibold text-xl"
               onClick={() => setChangePublicCheckIsOpen(false)}
             >
@@ -717,6 +723,7 @@ function BalanceItem({
           <div>Money Pool {moneyPool.name} を削除してもよろしいですか？</div>
           <div className="flex justify-between gap-x-8">
             <button
+              type="button"
               className="bg-primary-default hover:bg-primary-dark rounded-full  text-white px-4 py-1 border-primary-default border-2 hover:border-primary-dark font-Noto font-semibold text-xl"
               onClick={() => {
                 setDeleteCheckIsOpen(false);
@@ -729,6 +736,7 @@ function BalanceItem({
               削除する
             </button>
             <button
+              type="button"
               className="bg-white hover:bg-gray-100 rounded-full  text-primary-default px-4 py-1 border-primary-default border-2 font-Noto font-semibold text-xl"
               onClick={() => setDeleteCheckIsOpen(false)}
             >
@@ -810,6 +818,7 @@ function MoneyProviderItems({
           {isEditProviderName ? (
             <div className="w-full h-full">
               <input
+                aria-label="money provider name"
                 ref={inputProviderName}
                 type="text"
                 className="w-full"
@@ -852,6 +861,7 @@ function MoneyProviderItems({
           {isEditBalance ? (
             <div className="w-full h-full">
               <input
+                aria-label="money provider balance"
                 ref={inputBalance}
                 type="text"
                 className="w-full"

From 35adf790f091f6de27272c5bce5fe1ce208c0ae0 Mon Sep 17 00:00:00 2001
From: Walnuts <r.juglans.1018@gmail.com>
Date: Mon, 6 Nov 2023 11:22:59 +0900
Subject: [PATCH 3/4] Update Balance component styles

---
 front/src/app/mypage/Balance.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/front/src/app/mypage/Balance.tsx b/front/src/app/mypage/Balance.tsx
index d82af0c..8165d4c 100644
--- a/front/src/app/mypage/Balance.tsx
+++ b/front/src/app/mypage/Balance.tsx
@@ -156,7 +156,7 @@ export function Balance({
               const swiperInstance = swiper;
               setSwiper(swiperInstance);
             }}
-            className="flex w-full h-[90%]"
+            className="flex w-full h-[90%] z-20"
           >
             <SwiperSlide className="">
               <ThemeProvider theme={theme1}>
@@ -200,7 +200,7 @@ export function Balance({
           <div className="flex justify-center items-center h-16 w-full ">
             {swiperIndex === 0 ? (
               <div
-                className="w-[95%] h-12 cursor-pointer z-50"
+                className="w-[95%] h-12 cursor-pointer z-0"
                 onClick={() => {
                   setIsAddMode(true);
                 }}
@@ -237,11 +237,11 @@ export function Balance({
                     <div className="w-11/12 flex gap-2 justify-start items-center p-1 relative">
                       {isEmojiPicking ? (
                         <>
-                          <div className=" absolute bottom-0 z-10">
+                          <div className="absolute bottom-0 z-20 bg-white">
                             <Picker onEmojiClick={onEmojiClick} />
                           </div>
                           <div
-                            className="h-screen w-screen fixed left-0 top-0 z-0"
+                            className="h-screen w-screen fixed left-0 top-0 z-10 bg-transparent"
                             onClick={() => {
                               setIsEmojiPicking(false);
                             }}
@@ -305,7 +305,7 @@ export function Balance({
               </div>
             ) : (
               <div
-                className="w-[95%] h-12 cursor-pointer"
+                className="w-[95%] h-12 cursor-pointer z-0"
                 onClick={() => {
                   setIsAddMode2(true);
                 }}
@@ -549,12 +549,12 @@ function BalanceItem({
   }
 
   return (
-    <div className="flex gap-4 font-Noto font-normal py-2 text-4xl items-center justify-between px-0 overflow-hidden border-b-2 border-gray-300">
-      <div className="w-10 h-10 overflow-visible">
+    <div className="flex gap-4 font-Noto font-normal py-2 text-4xl items-center justify-between px-0 border-b-2 border-gray-300">
+      <div className="w-10 h-10">
         {isEditEmoji ? (
           <div className="w-full h-full fixed">
             <div
-              className="absolute left-0 z-20"
+              className="absolute left-0 z-20 bg-white"
               onBlur={(fe) => {
                 if (!fe.currentTarget.contains(fe.relatedTarget)) {
                   setIsEditEmoji(false);
@@ -569,7 +569,7 @@ function BalanceItem({
               />
             </div>
             <div
-              className="h-screen w-screen z-10 fixed"
+              className="h-screen w-screen z-10 fixed bg-transparent"
               onClick={() => {
                 setIsEditEmoji(false);
               }}

From 9e82365ee9b51ae9abea9f2410847ecac0fd913e Mon Sep 17 00:00:00 2001
From: Walnuts <r.juglans.1018@gmail.com>
Date: Mon, 6 Nov 2023 12:08:42 +0900
Subject: [PATCH 4/4] Refactor Balance component and add useCallback to improve
 performance

---
 front/src/app/mypage/Balance.tsx         |  47 ++++-----
 front/src/app/mypage/MypageComponent.tsx | 120 ++++++++++++-----------
 2 files changed, 90 insertions(+), 77 deletions(-)

diff --git a/front/src/app/mypage/Balance.tsx b/front/src/app/mypage/Balance.tsx
index 8165d4c..a69f563 100644
--- a/front/src/app/mypage/Balance.tsx
+++ b/front/src/app/mypage/Balance.tsx
@@ -156,7 +156,7 @@ export function Balance({
               const swiperInstance = swiper;
               setSwiper(swiperInstance);
             }}
-            className="flex w-full h-[90%] z-20"
+            className="flex w-full h-[90%]"
           >
             <SwiperSlide className="">
               <ThemeProvider theme={theme1}>
@@ -197,10 +197,10 @@ export function Balance({
               <></>
             )}
           </Swiper>
-          <div className="flex justify-center items-center h-16 w-full ">
+          <div className="flex justify-center items-center h-16 w-full">
             {swiperIndex === 0 ? (
               <div
-                className="w-[95%] h-12 cursor-pointer z-0"
+                className="w-[95%] h-12 cursor-pointer"
                 onClick={() => {
                   setIsAddMode(true);
                 }}
@@ -254,8 +254,8 @@ export function Balance({
                         type="text"
                         ref={inputMoneyPoolEmojiElement}
                         className="h-[80%] hover:border-0 focus:outline-none w-[15%] px-0"
-                        value={newMoneyPoolEmoji}
-                        onClick={(e) => {
+                        defaultValue={newMoneyPoolEmoji}
+                        onClick={() => {
                           setIsEmojiPicking(true);
                         }}
                         placeholder="絵文字"
@@ -305,7 +305,7 @@ export function Balance({
               </div>
             ) : (
               <div
-                className="w-[95%] h-12 cursor-pointer z-0"
+                className="w-[95%] h-12 cursor-pointer"
                 onClick={() => {
                   setIsAddMode2(true);
                 }}
@@ -484,9 +484,9 @@ function BalanceItem({
       if (res.ok) {
         const data = await res.json();
         console.log(data);
+        setMoneyPoolEmoji(newValue);
       }
     }
-    setMoneyPoolEmoji(newValue);
   }
 
   async function onNameChange(newValue: string) {
@@ -552,9 +552,9 @@ function BalanceItem({
     <div className="flex gap-4 font-Noto font-normal py-2 text-4xl items-center justify-between px-0 border-b-2 border-gray-300">
       <div className="w-10 h-10">
         {isEditEmoji ? (
-          <div className="w-full h-full fixed">
+          <>
             <div
-              className="absolute left-0 z-20 bg-white"
+              className="fixed z-20 flex justify-center items-center top-1/3 left-40 shadow-xl rounded-xl"
               onBlur={(fe) => {
                 if (!fe.currentTarget.contains(fe.relatedTarget)) {
                   setIsEditEmoji(false);
@@ -569,25 +569,28 @@ function BalanceItem({
               />
             </div>
             <div
-              className="h-screen w-screen z-10 fixed bg-transparent"
+              className="h-screen w-screen z-10 fixed bg-transparent left-0 top-0"
               onClick={() => {
                 setIsEditEmoji(false);
               }}
             />
-          </div>
+          </>
         ) : (
-          <div
-            className="cursor-pointer h-full"
-            onClick={() => {
-              setIsEditEmoji((v) => {
-                return !v;
-              });
-            }}
-            tabIndex={0}
-          >
-            {moneyPoolEmoji}
-          </div>
+          <></>
         )}
+        <div
+          className="cursor-pointer h-full"
+          onClick={() => {
+            if (!isEditEmoji) {
+              setIsEditEmoji(() => {
+                return true;
+              });
+            }
+          }}
+          tabIndex={0}
+        >
+          {moneyPoolEmoji}
+        </div>
       </div>
       <div className="flex items-center justify-between w-9/12">
         <div className="w-1/2 h-10 min-w-[10px]">
diff --git a/front/src/app/mypage/MypageComponent.tsx b/front/src/app/mypage/MypageComponent.tsx
index c572424..c203136 100644
--- a/front/src/app/mypage/MypageComponent.tsx
+++ b/front/src/app/mypage/MypageComponent.tsx
@@ -11,6 +11,7 @@ import Image from "next/image";
 import { AddButton } from "./AddButton";
 import { MoneyPoolSum } from "./type";
 import { createContext } from "react";
+import { useCallback } from "react";
 
 export const TransactionContext = createContext({});
 
@@ -55,71 +56,80 @@ function MypageContents({ userID }: { userID?: string }) {
     userID = session?.user.sub;
   }
 
-  useEffect(() => {
-    const getMoneyPools = async () => {
-      console.log("start getMoneyPools by", userID);
-      if (userID) {
-        const authHeader =
-          userID === session?.user.sub ? `Bearer ${session.user.idToken}` : "";
-        const res = await fetch(
-          `/api/back/moneypools?type=summary&user_id=${userID}`,
-          {
-            method: "GET",
-            headers: {
-              Authorization: authHeader,
-            },
-          }
-        );
-        console.log("getMoneyPools res", res);
-        if (res.ok) {
-          const json = await res.json();
-          console.log("getMoneyPools json raw", json);
-          if (json.pools !== null && json.pools !== undefined) {
-            const mps: MoneyPoolSum[] = json.pools as MoneyPoolSum[];
-            setMoneyPoolSums(mps);
-          }
-        } else {
-          console.log("getMoneyPools error", res);
-        }
-      }
-    };
-
-    const getMoneyProviders = async () => {
-      if (session && session?.user && userID) {
-        const authHeader =
-          userID === session?.user.sub ? `Bearer ${session.user.idToken}` : "";
-        const res = await fetch(`/api/back/moneyproviders?type=summary`, {
+  const getMoneyPools = useCallback(async () => {
+    console.log("start getMoneyPools by", userID);
+    if (userID) {
+      const authHeader =
+        userID === session?.user.sub ? `Bearer ${session.user.idToken}` : "";
+      const res = await fetch(
+        `/api/back/moneypools?type=summary&user_id=${userID}`,
+        {
           method: "GET",
           headers: {
             Authorization: authHeader,
           },
-        });
-        if (res.ok) {
-          const json = await res.json();
-          console.log(json);
-          if (json.provider !== null && json.provider !== undefined) {
-            const provider = json.provider;
-            const mps: MoneyProviderSum[] = provider.map(
-              (p: { id: string; name: string; balance: Number }) => {
-                return {
-                  id: p.id,
-                  name: p.name,
-                  balance: p.balance.toLocaleString(undefined, {
-                    maximumFractionDigits: 5,
-                  }),
-                };
-              }
-            );
+        }
+      );
+      console.log("getMoneyPools res", res);
+      if (res.ok) {
+        const json = await res.json();
+        console.log("getMoneyPools json raw", json);
+        if (json.pools !== null && json.pools !== undefined) {
+          const mps: MoneyPoolSum[] = json.pools as MoneyPoolSum[];
+          setMoneyPoolSums(mps);
+        }
+      } else {
+        console.log("getMoneyPools error", res);
+      }
+    }
+  }, [userID, session]);
 
-            setMoneyProviders(mps);
-          }
+  const getMoneyProviders = useCallback(async () => {
+    if (session && session?.user && userID) {
+      const authHeader =
+        userID === session?.user.sub ? `Bearer ${session.user.idToken}` : "";
+      const res = await fetch(`/api/back/moneyproviders?type=summary`, {
+        method: "GET",
+        headers: {
+          Authorization: authHeader,
+        },
+      });
+      if (res.ok) {
+        const json = await res.json();
+        console.log(json);
+        if (json.provider !== null && json.provider !== undefined) {
+          const provider = json.provider;
+          const mps: MoneyProviderSum[] = provider.map(
+            (p: { id: string; name: string; balance: Number }) => {
+              return {
+                id: p.id,
+                name: p.name,
+                balance: p.balance.toLocaleString(undefined, {
+                  maximumFractionDigits: 5,
+                }),
+              };
+            }
+          );
+
+          setMoneyProviders(mps);
         }
       }
-    };
+    }
+  }, [session, userID]);
 
+  useEffect(() => {
     getMoneyPools();
     getMoneyProviders();
-  }, [session, userID]);
+  }, [getMoneyPools, getMoneyProviders]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      getMoneyPools();
+      getMoneyProviders();
+    }, 1000 * 60);
+
+    return () => clearInterval(interval);
+  }, [getMoneyPools, getMoneyProviders]);
 
   if (userID !== undefined) {
     console.log(typeof moneyPoolSums);