From 8aacc53294b42d9b9c59ac5b0e24958801cbf7ae Mon Sep 17 00:00:00 2001 From: Walnuts Date: Sun, 5 Nov 2023 11:30:01 +0900 Subject: [PATCH] Refactor mypage component and transaction table --- front/src/app/[userid]/page.tsx | 3 +- front/src/app/mypage/AddButton.tsx | 6 +- front/src/app/mypage/Balance.tsx | 479 ++++++++++++---------- front/src/app/mypage/MypageComponent.tsx | 243 +++++++++++ front/src/app/mypage/page.tsx | 234 +---------- front/src/app/mypage/transactionTable.tsx | 2 +- front/src/app/mypage/type.tsx | 4 +- 7 files changed, 512 insertions(+), 459 deletions(-) create mode 100644 front/src/app/mypage/MypageComponent.tsx diff --git a/front/src/app/[userid]/page.tsx b/front/src/app/[userid]/page.tsx index 66e31a3..073afe3 100644 --- a/front/src/app/[userid]/page.tsx +++ b/front/src/app/[userid]/page.tsx @@ -1,3 +1,4 @@ +import { MypageComponent } from "../mypage/MypageComponent"; export default function Page({ params }: { params: { userid: string } }) { - return
My Post: {params.userid}
; + return ; } diff --git a/front/src/app/mypage/AddButton.tsx b/front/src/app/mypage/AddButton.tsx index b3980b7..6a0bb0a 100644 --- a/front/src/app/mypage/AddButton.tsx +++ b/front/src/app/mypage/AddButton.tsx @@ -16,7 +16,7 @@ export function AddButton({ new Date().toISOString().split("T")[0] ); const [transactionTitle, setTransactionTitle] = useState(""); - const [transactionAmount, setTransactionAmount] = useState(0); + const [transactionAmount, setTransactionAmount] = useState(""); useEffect(() => { if (inputEl.current) { @@ -42,6 +42,8 @@ export function AddButton({ if (res.ok) { const data = await res.json(); console.log(data); + setTransactionTitle(""); + setTransactionAmount(""); } } } @@ -125,7 +127,7 @@ export function AddButton({ }} value={transactionAmount} onChange={(e) => { - setTransactionAmount(Number(e.target.value)); + setTransactionAmount(e.target.value); }} placeholder="金額" /> diff --git a/front/src/app/mypage/Balance.tsx b/front/src/app/mypage/Balance.tsx index b738f03..0322755 100644 --- a/front/src/app/mypage/Balance.tsx +++ b/front/src/app/mypage/Balance.tsx @@ -36,263 +36,300 @@ const theme2 = createTheme({ export function Balance({ className, - user, + userID, moneypoolSums, moneyProviders, }: { children?: React.ReactNode; className?: string; - user: { - name?: string | null | undefined; - email?: string | null | undefined; - image?: string | null | undefined; - }; + userID: string | undefined; moneypoolSums: MoneyPoolSum[]; moneyProviders: MoneyProviderSum[]; }) { + const { data: session } = useSession(); const [swiper, setSwiper] = useState(); const [swiperIndex, setSwiperIndex] = useState(0); const [isAddMode, setIsAddMode] = useState(false); const [isAddMode2, setIsAddMode2] = useState(false); const inputEl = useRef(null!); + const [newMoneyPoolEmoji, setNewMoneyPoolEmoji] = useState(""); + const [newMoneyPoolName, setNewMoneyPoolName] = useState(""); - async function addMoneyPool() {} + async function addMoneyPool() { + if (session && session.user) { + const res = await fetch(`/api/back/moneypools`, { + method: "POST", + headers: { + Authorization: `Bearer ${session.user.idToken}`, + }, + body: JSON.stringify({ + name: newMoneyPoolName, + description: "", + type: "private", + }), + }); + if (res.ok) { + const data = await res.json(); + console.log(data); + } + } + } Modal.setAppElement("body"); - return ( -
-
- - -
-
- setSwiperIndex(i.activeIndex)} - onSwiper={(swiper) => { - const swiperInstance = swiper; - setSwiper(swiperInstance); - }} - className="flex w-full h-[90%]" + if (userID) { + return ( +
+
+ + {userID === session?.user.sub ? ( + + ) : ( + <> + )} +
+
- - -
- {moneypoolSums.map((moneyPool, index) => ( - - ))} -
- - - - -
+ setSwiperIndex(i.activeIndex)} + onSwiper={(swiper) => { + const swiperInstance = swiper; + setSwiper(swiperInstance); + }} + className="flex w-full h-[90%]" + > + +
- {moneyProviders.map((MoneyProvider, index) => ( - + {moneypoolSums.map((moneyPool, index) => ( + ))}
-
- - - -
- {swiperIndex === 0 ? ( -
{ - setIsAddMode(true); - }} - onBlur={(fe) => { - if (!fe.currentTarget.contains(fe.relatedTarget)) { - setIsAddMode(false); - } - }} - tabIndex={0} - > - {isAddMode ? ( -
{ - e.currentTarget.style.borderColor = "transparent"; - }} - onMouseOver={(e) => { - e.currentTarget.style.borderColor = tabColors[0]; - }} - > - -
- { - if (e.key === "Enter") { - e.preventDefault(); - } - }} - placeholder="絵文字" - /> - { - if (e.key === "Enter") { - if (e.currentTarget) { - e.currentTarget.blur(); - } - e.preventDefault(); - await addMoneyPool(); - } - }} - placeholder="名前" - /> -
-
- ) : ( -
{ - e.currentTarget.style.borderColor = "transparent"; - }} - onMouseOver={(e) => { - e.currentTarget.style.borderColor = tabColors[0]; - }} - > -
-
{ + e.preventDefault(); + await addMoneyPool(); + }} > + +
+ { + if (e.key === "Enter") { + e.preventDefault(); + } + }} + value={newMoneyPoolEmoji} + onChange={(e) => { + setNewMoneyPoolEmoji(e.target.value); + }} + placeholder="絵文字" + /> + { + if (e.key === "Enter") { + if (e.currentTarget) { + e.currentTarget.blur(); + } + e.preventDefault(); + await addMoneyPool(); + } + }} + placeholder="名前" + value={newMoneyPoolName} + onChange={(e) => { + setNewMoneyPoolName(e.target.value); + }} + />
- 追加 -
- )} -
- ) : ( -
{ - setIsAddMode2(true); - }} - onBlur={(fe) => { - console.log(fe.relatedTarget); - console.log(fe.currentTarget.contains(fe.relatedTarget)); - if (!fe.currentTarget.contains(fe.relatedTarget)) { - setIsAddMode2(false); - } - }} - tabIndex={0} - > - {isAddMode2 ? ( -
{ - e.currentTarget.style.borderColor = "transparent"; - }} - onMouseOver={(e) => { - e.currentTarget.style.borderColor = tabColors[0]; - }} - > - -
- { - if (e.key === "Enter") { - e.preventDefault(); - } - }} - placeholder="名前" - /> - { - if (e.key === "Enter") { - if (e.currentTarget) { - e.currentTarget.blur(); - } - e.preventDefault(); - await addMoneyPool(); - } - }} - placeholder="残高" - /> +
+
+ +
+
+ 追加
-
- ) : ( -
{ - e.currentTarget.style.borderColor = "transparent"; - }} - onMouseOver={(e) => { - e.currentTarget.style.borderColor = tabColors[0]; - }} - > -
-
+ ) : ( +
{ + setIsAddMode2(true); + }} + onBlur={(fe) => { + console.log(fe.relatedTarget); + console.log(fe.currentTarget.contains(fe.relatedTarget)); + if (!fe.currentTarget.contains(fe.relatedTarget)) { + setIsAddMode2(false); + } + }} + tabIndex={0} + > + {isAddMode2 ? ( +
{ + e.currentTarget.style.borderColor = "transparent"; + }} + onMouseOver={(e) => { + e.currentTarget.style.borderColor = tabColors[0]; + }} + > + +
+ { + if (e.key === "Enter") { + e.preventDefault(); + } + }} + placeholder="名前" + /> + { + if (e.key === "Enter") { + if (e.currentTarget) { + e.currentTarget.blur(); + } + e.preventDefault(); + await addMoneyPool(); + } + }} + placeholder="残高" + />
- 追加 -
- )} -
- )} + ) : ( +
{ + e.currentTarget.style.borderColor = "transparent"; + }} + onMouseOver={(e) => { + e.currentTarget.style.borderColor = tabColors[0]; + }} + > +
+
+ +
+
+ 追加 +
+ )} +
+ )} +
-
- ); + ); + } else { + return
; + } } function SwiperTabs({ @@ -489,7 +526,7 @@ function BalanceItem({ moneyPool }: { moneyPool: MoneyPoolSum }) { )}
- {moneyPool.Sum.toLocaleString(undefined, { + {moneyPool.sum.toLocaleString(undefined, { maximumFractionDigits: 5, })} 円 diff --git a/front/src/app/mypage/MypageComponent.tsx b/front/src/app/mypage/MypageComponent.tsx new file mode 100644 index 0000000..6dd0d2e --- /dev/null +++ b/front/src/app/mypage/MypageComponent.tsx @@ -0,0 +1,243 @@ +"use client"; +import { useSession } from "next-auth/react"; +import { NextAuthProvider } from "../providers"; +import { TransactionTable } from "./transactionTable"; +import { useState, useRef, useEffect, ReactElement } from "react"; +import { Swiper, SwiperSlide, SwiperClass } from "swiper/react"; +import { Balance } from "./Balance"; +import { MoneyProviderSum } from "./type"; +import { ThemeProvider, createTheme } from "@mui/material/styles"; +import Image from "next/image"; +import { AddButton } from "./AddButton"; +import { MoneyPoolSum } from "./type"; + +export function MypageComponent({ userID }: { userID?: string }) { + return ( + + + + ); +} + +const moneyPoolColors = [ + "#00BFFF", + "#FFA500", + "#FF69B4", + "#ADFF2F", + "#D8BFD8", + "#CD853F", +]; + +const theme = createTheme({ + palette: { + primary: { + main: "#f9842c", + dark: "#FA6C28", + }, + }, + typography: { + fontFamily: "var(--font-Noto)", + }, +}); + +function MypageContents({ userID }: { userID?: string }) { + const { data: session } = useSession(); + const [moneyPoolIndex, setMoneyPoolIndex] = useState(0); + const [swiper, setSwiper] = useState(); + const [moneyPoolSums, setMoneyPoolSums] = useState([ + { + id: "1", + name: "食費", + sum: 1000, + type: "public", + emoji: "🍣", + }, + ]); + const [moneyProviders, setMoneyProviders] = useState([ + { + id: "1", + name: "PayPay", + balance: 1000, + }, + ]); + + if (userID === undefined) { + userID = session?.user.sub; + } + + useEffect(() => { + const getMoneyPools = async () => { + if (session && session?.user && userID) { + const res = await fetch( + `/api/back/moneypools?type=summary&user_id=${userID}`, + { + method: "GET", + headers: { + Authorization: `Bearer ${session.user.idToken}`, + }, + } + ); + if (res.ok) { + const json = await res.json(); + if (json.Pool !== null && json.Pool !== undefined) { + const mps: MoneyPoolSum[] = json.Pool as MoneyPoolSum[]; + setMoneyPoolSums(mps); + } + } + } + }; + + const getMoneyProviders = async () => { + if (session && session?.user && userID) { + const res = await fetch(`/api/back/moneyproviders?type=summary`, { + method: "GET", + headers: { + Authorization: `Bearer ${session.user.idToken}`, + }, + }); + if (res.ok) { + const json = await res.json(); + console.log(json); + if (json.Providers !== null && json.Provider !== undefined) { + const mps: MoneyProviderSum[] = json.Providers; + setMoneyProviders(mps); + } + } + } + }; + + getMoneyPools(); + getMoneyProviders(); + }, [session, userID]); + + if (userID) { + console.log(typeof moneyPoolSums); + console.log(moneyPoolSums); + return ( + +
+
+
+
+
総残高
+
+

+ {moneyPoolSums + .reduce(function (sum, moneypool) { + return sum + moneypool.sum; + }, 0) + .toLocaleString(undefined, { + maximumFractionDigits: 5, + })} +

+

円

+
+
+
+ + x + +
+
+
+ +
+
+ +
+
+ {moneyPoolSums.map((moneyPool, index) => ( +
{ + if (swiper) { + swiper.slideTo(index); + } + }} + > +
{moneyPool.name}
+
+ ))} +
+
+ setMoneyPoolIndex(i.activeIndex)} + onSwiper={(swiper) => { + const swiperInstance = swiper; + setSwiper(swiperInstance); + }} + initialSlide={0} + className="flex w-full h-[calc(100%-4rem)]" + > + {moneyPoolSums.map((moneyPool, index) => ( + +
+ +
+ + ))} + +
+ +
+
+
+
+ + ); + } +} diff --git a/front/src/app/mypage/page.tsx b/front/src/app/mypage/page.tsx index 33f21ac..a50b569 100644 --- a/front/src/app/mypage/page.tsx +++ b/front/src/app/mypage/page.tsx @@ -1,235 +1,5 @@ -"use client"; -import { useSession } from "next-auth/react"; -import { NextAuthProvider } from "../providers"; -import { TransactionTable } from "./transactionTable"; -import { useState, useRef, useEffect, ReactElement } from "react"; -import { Swiper, SwiperSlide, SwiperClass } from "swiper/react"; -import { Balance } from "./Balance"; -import { MoneyPool, MoneyProviderSum } from "./type"; -import { ThemeProvider, createTheme } from "@mui/material/styles"; -import Image from "next/image"; -import { AddButton } from "./AddButton"; -import { MoneyPoolSum } from "./type"; +import { MypageComponent } from "./MypageComponent"; export default function Mypage() { - return ( - - - - ); -} - -const moneyPoolColors = [ - "#00BFFF", - "#FFA500", - "#FF69B4", - "#ADFF2F", - "#D8BFD8", - "#CD853F", -]; - -const theme = createTheme({ - palette: { - primary: { - main: "#f9842c", - dark: "#FA6C28", - }, - }, - typography: { - fontFamily: "var(--font-Noto)", - }, -}); - -function MypageContents() { - const { data: session } = useSession(); - const [moneyPoolIndex, setMoneyPoolIndex] = useState(0); - const [swiper, setSwiper] = useState(); - const [moneyPoolSums, setMoneyPoolSums] = useState([ - { - id: "1", - name: "食費", - Sum: 1000, - type: "public", - emoji: "🍣", - }, - ]); - const [moneyProviders, setMoneyProviders] = useState([ - { - id: "1", - name: "PayPay", - balance: 1000, - }, - ]); - useEffect(() => { - const getMoneyPools = async () => { - if (session && session?.user) { - const res = await fetch( - `/api/back/moneypools?type=summary&user_id=${session.user.sub}`, - { - method: "GET", - headers: { - Authorization: `Bearer ${session.user.idToken}`, - }, - } - ); - if (res.ok) { - const json = await res.json(); - if (json.Pools !== null) { - const mps: MoneyPoolSum[] = json.Pools; - setMoneyPoolSums(mps); - } - } - } - }; - - const getMoneyProviders = async () => { - if (session && session?.user) { - const res = await fetch( - `/api/back/moneyproviders?type=summary&user_id=${session.user.sub}`, - { - method: "GET", - headers: { - Authorization: `Bearer ${session.user.idToken}`, - }, - } - ); - if (res.ok) { - const mps: MoneyProviderSum[] = await res.json(); - setMoneyProviders(mps); - } - } - }; - - getMoneyPools(); - getMoneyProviders(); - }, [session]); - - if (session && session.user) { - return ( - -
-
-
-
-
総残高
-
-

- {moneyPoolSums - .reduce(function (sum, moneypool) { - return sum + moneypool.Sum; - }, 0) - .toLocaleString(undefined, { - maximumFractionDigits: 5, - })} -

-

円

-
-
-
- - x - -
-
-
- -
-
- -
-
- {moneyPoolSums.map((moneyPool, index) => ( -
{ - if (swiper) { - swiper.slideTo(index); - } - }} - > -
{moneyPool.name}
-
- ))} -
-
- setMoneyPoolIndex(i.activeIndex)} - onSwiper={(swiper) => { - const swiperInstance = swiper; - setSwiper(swiperInstance); - }} - initialSlide={0} - className="flex w-full h-[calc(100%-4rem)]" - > - {moneyPoolSums.map((moneyPool, index) => ( - -
- -
- - ))} - -
- -
-
-
-
- - ); - } + return ; } diff --git a/front/src/app/mypage/transactionTable.tsx b/front/src/app/mypage/transactionTable.tsx index 2a26b26..5477561 100644 --- a/front/src/app/mypage/transactionTable.tsx +++ b/front/src/app/mypage/transactionTable.tsx @@ -41,7 +41,7 @@ export function TransactionTable({ }); if (res.ok) { const mpr: MoneyPoolResponse = await res.json(); - setTransactions(mpr.Payments); + setTransactions(mpr.payments); } } }; diff --git a/front/src/app/mypage/type.tsx b/front/src/app/mypage/type.tsx index 0e4bfaa..434f95d 100644 --- a/front/src/app/mypage/type.tsx +++ b/front/src/app/mypage/type.tsx @@ -15,13 +15,13 @@ export type MoneyPoolResponse = { name: string; description: string; type: "private" | "public" | "restricted"; - Payments: MoneyTransaction[]; + payments: MoneyTransaction[]; }; export type MoneyPoolSum = { id: string; name: string; - Sum: number; + sum: number; type: "private" | "public" | "restricted"; emoji: string; };