From 2aaea9505ce5e9255fa449885a150cdbf0c2948e Mon Sep 17 00:00:00 2001 From: Walnuts Date: Sun, 5 Nov 2023 14:23:04 +0900 Subject: [PATCH] add --- front/package-lock.json | 12 +++ front/package.json | 1 + front/src/app/mypage/AddButton.tsx | 11 ++- front/src/app/mypage/Balance.tsx | 90 +++++++++++++++++++---- front/src/app/mypage/MypageComponent.tsx | 70 +++++++++--------- front/src/app/mypage/transactionTable.tsx | 38 ++++++++-- front/src/app/mypage/type.tsx | 9 ++- 7 files changed, 171 insertions(+), 60 deletions(-) diff --git a/front/package-lock.json b/front/package-lock.json index e124f7d..6d17335 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -13,6 +13,7 @@ "@mui/material": "^5.14.16", "@mui/styled-engine-sc": "^6.0.0-alpha.4", "@types/react-modal": "^3.16.2", + "emoji-picker-react": "^4.5.14", "next": "14.0.1", "next-auth": "^4.24.4", "react": "^18", @@ -2091,6 +2092,17 @@ "integrity": "sha512-Sc+VtKwKCDj3f/kLBjdyjMpNzoZsU6WuL/wFb6EH8USmHEcebxRXcRrVpOpayxd52tuey4RUDpUsw5OS5LhJqg==", "dev": true }, + "node_modules/emoji-picker-react": { + "version": "4.5.14", + "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.5.14.tgz", + "integrity": "sha512-NVqbBZIngSnM19nEcMkkgfM6YFutxW/INL1aWC91GLnnSSTYBKZkBiNu0tVxY63lIRoht3wsWfztameTw8TNow==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16" + } + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", diff --git a/front/package.json b/front/package.json index 13e6b3b..f4db343 100644 --- a/front/package.json +++ b/front/package.json @@ -14,6 +14,7 @@ "@mui/material": "^5.14.16", "@mui/styled-engine-sc": "^6.0.0-alpha.4", "@types/react-modal": "^3.16.2", + "emoji-picker-react": "^4.5.14", "next": "14.0.1", "next-auth": "^4.24.4", "react": "^18", diff --git a/front/src/app/mypage/AddButton.tsx b/front/src/app/mypage/AddButton.tsx index 6a0bb0a..dfdf6d9 100644 --- a/front/src/app/mypage/AddButton.tsx +++ b/front/src/app/mypage/AddButton.tsx @@ -5,9 +5,11 @@ import { useSession } from "next-auth/react"; export function AddButton({ color, moneyPoolID, + setReloadContext, }: { color: string; moneyPoolID: string; + setReloadContext: React.Dispatch>; }) { const { data: session } = useSession(); const [isAddMode, setIsAddMode] = useState(false); @@ -27,23 +29,24 @@ export function AddButton({ async function addTransaction() { if (session && session.user) { - const res = await fetch(`/moneypools/${moneyPoolID}/payments`, { + const res = await fetch(`/api/back/moneypools/${moneyPoolID}/payments`, { method: "POST", headers: { Authorization: `Bearer ${session.user.idToken}`, }, body: JSON.stringify({ title: transactionTitle, - amount: transactionAmount, + amount: Number(transactionAmount), description: "", is_planned: false, }), }); if (res.ok) { - const data = await res.json(); - console.log(data); setTransactionTitle(""); setTransactionAmount(""); + setReloadContext({}); + } else { + console.log("post transaction error", res); } } } diff --git a/front/src/app/mypage/Balance.tsx b/front/src/app/mypage/Balance.tsx index 0322755..6ecc55c 100644 --- a/front/src/app/mypage/Balance.tsx +++ b/front/src/app/mypage/Balance.tsx @@ -6,8 +6,9 @@ import { ThemeProvider, createTheme, styled } from "@mui/material/styles"; import Modal from "react-modal"; import { Plus } from "react-feather"; import { useRef } from "react"; -import { useEffect } from "react"; import { useSession } from "next-auth/react"; +import Picker from "emoji-picker-react"; +import { EmojiClickData } from "emoji-picker-react"; const tabColors = ["#f5c33f", "#31aedd"]; const theme1 = createTheme({ @@ -55,6 +56,16 @@ export function Balance({ const [newMoneyPoolEmoji, setNewMoneyPoolEmoji] = useState(""); const [newMoneyPoolName, setNewMoneyPoolName] = useState(""); + const [newMoneyProviderName, setNewMoneyProviderName] = useState(""); + const [newMoneyProviderBalance, setNewMoneyProviderBalance] = useState(""); + + const [isEmojiPicking, setIsEmojiPicking] = useState(false); + + const onEmojiClick = (emoji: EmojiClickData, event: MouseEvent) => { + setNewMoneyPoolEmoji(emoji.emoji); + setIsEmojiPicking(false); + }; + async function addMoneyPool() { if (session && session.user) { const res = await fetch(`/api/back/moneypools`, { @@ -63,6 +74,7 @@ export function Balance({ Authorization: `Bearer ${session.user.idToken}`, }, body: JSON.stringify({ + emoji: newMoneyPoolEmoji, name: newMoneyPoolName, description: "", type: "private", @@ -70,6 +82,30 @@ export function Balance({ }); if (res.ok) { const data = await res.json(); + setNewMoneyPoolEmoji(""); + setNewMoneyPoolName(""); + console.log(data); + } + } + } + + async function addMoneyProvider() { + console.log("addMoneyProvider"); + if (session && session.user) { + const res = await fetch(`/api/back/moneyproviders`, { + method: "POST", + headers: { + Authorization: `Bearer ${session.user.idToken}`, + }, + body: JSON.stringify({ + name: newMoneyProviderName, + balance: Number(newMoneyProviderBalance), + }), + }); + if (res.ok) { + const data = await res.json(); + setNewMoneyProviderName(""); + setNewMoneyProviderBalance(""); console.log(data); } } @@ -178,7 +214,14 @@ export function Balance({ > -
+
+ {isEmojiPicking ? ( +
+ +
+ ) : ( + <> + )} { + setIsEmojiPicking(true); + }} onChange={(e) => { setNewMoneyPoolEmoji(e.target.value); }} @@ -253,21 +299,21 @@ export function Balance({ > {isAddMode2 ? (
{ e.currentTarget.style.borderColor = "transparent"; }} onMouseOver={(e) => { - e.currentTarget.style.borderColor = tabColors[0]; + e.currentTarget.style.borderColor = tabColors[1]; }} >
) : (
{ e.currentTarget.style.borderColor = "transparent"; }} onMouseOver={(e) => { - e.currentTarget.style.borderColor = tabColors[0]; + e.currentTarget.style.borderColor = tabColors[1]; }} > -
+
- +
追加 @@ -439,7 +499,7 @@ function BalanceItem({ moneyPool }: { moneyPool: MoneyPoolSum }) { }); if (res.ok) { const data = await res.json(); - console.log(data); + console.log("change public", data); } } setMoneyPoolType(type); @@ -487,7 +547,7 @@ function BalanceItem({ moneyPool }: { moneyPool: MoneyPoolSum }) { )}
-
+
{isEditName ? (
) : (
{ setIsEditName((v) => { return !v; diff --git a/front/src/app/mypage/MypageComponent.tsx b/front/src/app/mypage/MypageComponent.tsx index 6dd0d2e..9ac14ce 100644 --- a/front/src/app/mypage/MypageComponent.tsx +++ b/front/src/app/mypage/MypageComponent.tsx @@ -10,6 +10,9 @@ import { ThemeProvider, createTheme } from "@mui/material/styles"; import Image from "next/image"; import { AddButton } from "./AddButton"; import { MoneyPoolSum } from "./type"; +import { createContext } from "react"; + +export const TransactionContext = createContext({}); export function MypageComponent({ userID }: { userID?: string }) { return ( @@ -44,22 +47,9 @@ 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, - }, - ]); + const [moneyPoolSums, setMoneyPoolSums] = useState([]); + const [moneyProviders, setMoneyProviders] = useState([]); + const [tableReloadContext, setTableReloadContext] = useState({}); if (userID === undefined) { userID = session?.user.sub; @@ -79,8 +69,9 @@ function MypageContents({ userID }: { userID?: string }) { ); if (res.ok) { const json = await res.json(); - if (json.Pool !== null && json.Pool !== undefined) { - const mps: MoneyPoolSum[] = json.Pool as MoneyPoolSum[]; + console.log("getMoneyPools json raw", json); + if (json.pools !== null && json.pools !== undefined) { + const mps: MoneyPoolSum[] = json.pools as MoneyPoolSum[]; setMoneyPoolSums(mps); } } @@ -98,8 +89,8 @@ function MypageContents({ userID }: { userID?: string }) { if (res.ok) { const json = await res.json(); console.log(json); - if (json.Providers !== null && json.Provider !== undefined) { - const mps: MoneyProviderSum[] = json.Providers; + if (json.providers !== null && json.providers !== undefined) { + const mps: MoneyProviderSum[] = json.providers; setMoneyProviders(mps); } } @@ -110,7 +101,7 @@ function MypageContents({ userID }: { userID?: string }) { getMoneyProviders(); }, [session, userID]); - if (userID) { + if (userID !== undefined) { console.log(typeof moneyPoolSums); console.log(moneyPoolSums); return ( @@ -135,13 +126,15 @@ function MypageContents({ userID }: { userID?: string }) {
diff --git a/front/src/app/mypage/transactionTable.tsx b/front/src/app/mypage/transactionTable.tsx index 5477561..fd303f4 100644 --- a/front/src/app/mypage/transactionTable.tsx +++ b/front/src/app/mypage/transactionTable.tsx @@ -25,9 +25,13 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({ export function TransactionTable({ moneyPoolID, scroll, + userID, + reloadContext, }: { moneyPoolID: string; scroll: boolean; + userID: string; + reloadContext: {}; }) { const [transactions, setTransactions] = useState([]); const scrollBottomRef = useRef(null); @@ -36,17 +40,37 @@ export function TransactionTable({ useEffect(() => { const getMoneyPools = async () => { if (session && session?.user) { - const res = await fetch(`/backend/v1/moneypools/${moneyPoolID}`, { - method: "GET", - }); + const res = await fetch( + `/api/back/moneypools/${moneyPoolID}?user_id=${userID}`, + { + method: "GET", + headers: { + Authorization: `Bearer ${session.user.idToken}`, + }, + } + ); if (res.ok) { - const mpr: MoneyPoolResponse = await res.json(); - setTransactions(mpr.payments); + const json = await res.json(); + console.log("get moneypools", json); + const mpr: MoneyPoolResponse = json; + if (mpr.payments) { + const payments: MoneyTransaction[] = mpr.payments.map((payment) => { + return { + id: payment.id, + date: new Date(payment.date), + title: payment.title, + amount: payment.amount, + }; + }); + setTransactions(payments); + } + } else { + console.log(); } } }; getMoneyPools(); - }, [session, moneyPoolID]); + }, [session, moneyPoolID, userID, reloadContext]); useLayoutEffect(() => { if (scroll) { @@ -91,7 +115,7 @@ export function TransactionTable({ scope="row" className="border-l-0" > - {transaction.date.toLocaleDateString()} + {transaction.date && transaction.date.toLocaleDateString()} {transaction.title} diff --git a/front/src/app/mypage/type.tsx b/front/src/app/mypage/type.tsx index 434f95d..8de0351 100644 --- a/front/src/app/mypage/type.tsx +++ b/front/src/app/mypage/type.tsx @@ -15,7 +15,14 @@ export type MoneyPoolResponse = { name: string; description: string; type: "private" | "public" | "restricted"; - payments: MoneyTransaction[]; + payments: MoneyPoolResponsePayment[]; +}; + +export type MoneyPoolResponsePayment = { + id: string; + date: string; + title: string; + amount: number; }; export type MoneyPoolSum = {