Skip to content

Commit

Permalink
add
Browse files Browse the repository at this point in the history
  • Loading branch information
@walnuts1018
walnuts1018 committed Nov 5, 2023
1 parent 8aacc53 commit 2aaea95
Show file tree
Hide file tree
Showing 7 changed files with 171 additions and 60 deletions.
12 changes: 12 additions & 0 deletions front/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions front/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 7 additions & 4 deletions front/src/app/mypage/AddButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ import { useSession } from "next-auth/react";
export function AddButton({
color,
moneyPoolID,
setReloadContext,
}: {
color: string;
moneyPoolID: string;
setReloadContext: React.Dispatch<React.SetStateAction<{}>>;
}) {
const { data: session } = useSession();
const [isAddMode, setIsAddMode] = useState(false);
Expand All @@ -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);
}
}
}
Expand Down
90 changes: 75 additions & 15 deletions front/src/app/mypage/Balance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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`, {
Expand All @@ -63,13 +74,38 @@ export function Balance({
Authorization: `Bearer ${session.user.idToken}`,
},
body: JSON.stringify({
emoji: newMoneyPoolEmoji,
name: newMoneyPoolName,
description: "",
type: "private",
}),
});
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);
}
}
Expand Down Expand Up @@ -178,7 +214,14 @@ export function Balance({
>
<Plus className="h-full w-full" />
</button>
<div className="w-11/12 flex gap-2 justify-start items-center p-1">
<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>
) : (
<></>
)}
<input
type="text"
ref={inputEl}
Expand All @@ -189,6 +232,9 @@ export function Balance({
}
}}
value={newMoneyPoolEmoji}
onClick={(e) => {
setIsEmojiPicking(true);
}}
onChange={(e) => {
setNewMoneyPoolEmoji(e.target.value);
}}
Expand Down Expand Up @@ -253,21 +299,21 @@ export function Balance({
>
{isAddMode2 ? (
<div
className={`flex h-12 items-center gap-2 w-full border-2 border-gray-200 hover:border-primary-default rounded-full shadow-md px-2 font-Noto`}
className={`flex h-12 items-center gap-2 w-full border-2 border-gray-200 rounded-full shadow-md px-2 font-Noto`}
onMouseOut={(e) => {
e.currentTarget.style.borderColor = "transparent";
}}
onMouseOver={(e) => {
e.currentTarget.style.borderColor = tabColors[0];
e.currentTarget.style.borderColor = tabColors[1];
}}
>
<button
className="h-5/6"
style={{ color: tabColors[0] }}
style={{ color: tabColors[1] }}
tabIndex={0}
onClick={async (e) => {
e.preventDefault();
await addMoneyPool();
await addMoneyProvider();
}}
>
<Plus className="h-full w-full" />
Expand All @@ -283,6 +329,10 @@ export function Balance({
}
}}
placeholder="名前"
value={newMoneyProviderName}
onChange={(e) => {
setNewMoneyProviderName(e.target.value);
}}
/>
<input
type="text"
Expand All @@ -293,29 +343,39 @@ export function Balance({
e.currentTarget.blur();
}
e.preventDefault();
await addMoneyPool();
await addMoneyProvider();
}
}}
placeholder="残高"
value={newMoneyProviderBalance}
onChange={(e) => {
setNewMoneyProviderBalance(e.target.value);
}}
/>
</div>
</div>
) : (
<div
className="flex h-12 items-center gap-2 w-full border-2 border-transparent hover:bg-gray-50 hover:border-primary-default rounded-full hover:shadow-md px-2 font-Noto"
className="flex h-12 items-center gap-2 w-full border-2 border-transparent hover:bg-gray-50 rounded-full hover:shadow-md px-2 font-Noto"
onMouseOut={(e) => {
e.currentTarget.style.borderColor = "transparent";
}}
onMouseOver={(e) => {
e.currentTarget.style.borderColor = tabColors[0];
e.currentTarget.style.borderColor = tabColors[1];
}}
>
<div className="h-5/6 border-primary-default aspect-square">
<div
className="h-5/6 aspect-square"
style={{ borderColor: tabColors[1] }}
>
<div
className="h-full w-full"
style={{ color: tabColors[0] }}
style={{ color: tabColors[1] }}
>
<Plus className="h-full w-full" />
<Plus
className="h-full w-full"
style={{ borderColor: tabColors[1] }}
/>
</div>
</div>
追加
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -487,7 +547,7 @@ function BalanceItem({ moneyPool }: { moneyPool: MoneyPoolSum }) {
)}
</div>
<div className="flex items-center justify-between w-9/12">
<div className="w-1/2 h-full">
<div className="w-1/2 h-10 min-w-[10px]">
{isEditName ? (
<div className="w-full h-full">
<input
Expand All @@ -513,7 +573,7 @@ function BalanceItem({ moneyPool }: { moneyPool: MoneyPoolSum }) {
</div>
) : (
<div
className="cursor-pointer"
className="cursor-pointer w-full h-full"
onClick={() => {
setIsEditName((v) => {
return !v;
Expand Down
Loading

0 comments on commit 2aaea95

Please sign in to comment.