From c59e615ce1c9453131ffabeb525993190f52c34c Mon Sep 17 00:00:00 2001 From: grtw2116 <15563588+grtw2116@users.noreply.github.com> Date: Sat, 4 Nov 2023 15:37:27 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=E8=B3=BC=E5=85=A5=E5=B1=A5=E6=AD=B4?= =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 9 ++ .../home => }/components/MemberPane.tsx | 2 +- frontend/src/components/TwoColumnLayout.tsx | 2 +- frontend/src/contexts/MembersContext.tsx | 13 +- frontend/src/features/home/Home.tsx | 2 +- .../purchase-history/PurchaseHistory.tsx | 34 +++++ .../components/HistoryCard.tsx | 122 ++++++++++++++++++ .../components/HistoryList.tsx | 71 ++++++++++ 8 files changed, 251 insertions(+), 4 deletions(-) rename frontend/src/{features/home => }/components/MemberPane.tsx (95%) create mode 100644 frontend/src/features/purchase-history/PurchaseHistory.tsx create mode 100644 frontend/src/features/purchase-history/components/HistoryCard.tsx create mode 100644 frontend/src/features/purchase-history/components/HistoryList.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8eef912..a158d90 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,5 +1,6 @@ import { faGear, + faHistory, faHouse, faUserEdit, IconDefinition, @@ -12,6 +13,7 @@ import { Header } from "components/Header"; import { UserSetting } from "Setting/User/UserSetting"; import { AdminPane } from "Setting/Admin/AdminPane"; import { Home } from "features/home/Home"; +import { PurchaseHistory } from "features/purchase-history/PurchaseHistory"; export const TabIndex = createContext(0); @@ -34,6 +36,13 @@ function App() { iconPosition: "left", contents: , }, + { + item: "history", + displayText: "購入履歴", + icon: faHistory, + iconPosition: "left", + contents: , + }, { item: "memberSettings", displayText: "利用者設定", diff --git a/frontend/src/features/home/components/MemberPane.tsx b/frontend/src/components/MemberPane.tsx similarity index 95% rename from frontend/src/features/home/components/MemberPane.tsx rename to frontend/src/components/MemberPane.tsx index a326722..42b2bfe 100644 --- a/frontend/src/features/home/components/MemberPane.tsx +++ b/frontend/src/components/MemberPane.tsx @@ -1,6 +1,6 @@ import { Heading, Stack } from "@chakra-ui/react"; import { useMembers } from "contexts/MembersContext"; -import { MemberCard } from "./MemberCard"; +import { MemberCard } from "features/home/components/MemberCard"; type Props = { selectedMemberId: string; diff --git a/frontend/src/components/TwoColumnLayout.tsx b/frontend/src/components/TwoColumnLayout.tsx index 78ba4b5..bbd27a8 100644 --- a/frontend/src/components/TwoColumnLayout.tsx +++ b/frontend/src/components/TwoColumnLayout.tsx @@ -3,7 +3,7 @@ import { ReactNode } from "react"; type Props = { children: ReactNode; - h: string; + h?: string; }; export function TwoColumnLayout({ children, h = "100%" }: Props) { diff --git a/frontend/src/contexts/MembersContext.tsx b/frontend/src/contexts/MembersContext.tsx index 9610ef8..d2adf99 100644 --- a/frontend/src/contexts/MembersContext.tsx +++ b/frontend/src/contexts/MembersContext.tsx @@ -59,7 +59,8 @@ type Action = | { type: "added"; id: string; name: string; attribute: string } | { type: "deleted"; id: string } | { type: "switchedActivity"; id: string; active: boolean } - | { type: "purchased"; id: string; price: number }; + | { type: "purchased"; id: string; price: number } + | { type: "purchaseCanceled"; id: string; price: number }; function membersReducer(members: Member[], action: Action) { switch (action.type) { @@ -98,6 +99,16 @@ function membersReducer(members: Member[], action: Action) { } return member; }); + case "purchaseCanceled": + return members.map((member) => { + if (member.id === action.id) { + return { + ...member, + payment: Number(member.payment) - Number(action.price), // TODO: 明示的にNumberに変換しないとなぜかNaNになる + }; + } + return member; + }); default: throw new Error("invalid action"); } diff --git a/frontend/src/features/home/Home.tsx b/frontend/src/features/home/Home.tsx index d93df1a..0592090 100644 --- a/frontend/src/features/home/Home.tsx +++ b/frontend/src/features/home/Home.tsx @@ -5,7 +5,7 @@ import { RightColumn, } from "components/TwoColumnLayout"; import { ItemPane } from "./components/ItemPane"; -import { MemberPane } from "./components/MemberPane"; +import { MemberPane } from "components/MemberPane"; import { ConfrimPane } from "./components/ConfirmPane"; function Home() { diff --git a/frontend/src/features/purchase-history/PurchaseHistory.tsx b/frontend/src/features/purchase-history/PurchaseHistory.tsx new file mode 100644 index 0000000..91730b0 --- /dev/null +++ b/frontend/src/features/purchase-history/PurchaseHistory.tsx @@ -0,0 +1,34 @@ +import { useState } from "react"; +import { Heading } from "@chakra-ui/react"; +import { + LeftColumn, + RightColumn, + TwoColumnLayout, +} from "components/TwoColumnLayout"; +import { MemberPane } from "components/MemberPane"; +import { HistoryList } from "./components/HistoryList"; + +function PurchaseHistory() { + const [selectedMemberId, setSelectedMemberId] = useState(""); + + return ( + + + + setSelectedMemberId(memberId) + } + /> + + + + 購入履歴 + + + + + ); +} + +export { PurchaseHistory }; diff --git a/frontend/src/features/purchase-history/components/HistoryCard.tsx b/frontend/src/features/purchase-history/components/HistoryCard.tsx new file mode 100644 index 0000000..23cffa5 --- /dev/null +++ b/frontend/src/features/purchase-history/components/HistoryCard.tsx @@ -0,0 +1,122 @@ +import { + AspectRatio, + Box, + Flex, + HStack, + IconButton, + Image, + Spacer, + Text, +} from "@chakra-ui/react"; +import { History } from "types"; +import { DateFormatter } from "util/DateFormatter"; +import { Backend } from "util/Backend"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faTrash } from "@fortawesome/free-solid-svg-icons"; +import { useEffect, useState } from "react"; +import LogoDefaultItem from "image/default_item.svg"; +import { useMembersDispatch } from "contexts/MembersContext"; + +type Props = { + history: History; + deleteHistory: (history: History) => void; +}; + +function HistoryCard({ history, deleteHistory }: Props) { + // TODO: 画像処理の共通化 + const [imageURL, setImageURL] = useState(""); + const dispatch = useMembersDispatch(); + + useEffect(() => { + let ignore = false; + + async function getImage() { + if (history === null) { + setImageURL(LogoDefaultItem); + return; + } + + const res = await Backend.getItemImage(history.itemId); + if (!ignore) { + if (res === null) { + console.log( + history.itemId + ": Custom image not found. So use default image.", + ); + setImageURL(LogoDefaultItem); + return; + } + setImageURL(URL.createObjectURL(res)); + } + } + getImage(); + + return () => { + ignore = true; + }; + }, []); + + async function deletePurchaseHistory(history: History) { + if (!(await Backend.recall(history.historyId))) { + console.error("recall: failed"); + return; + } + + // memberの利用金額を更新 + dispatch({ + type: "purchaseCanceled", + id: history.memberId, + price: history.price, + }); + + // historyを更新 + deleteHistory(history); + } + + return ( + + + {history.itemId === null ? ( + + ) : ( + + )} + + + + + {history.itemName} + + + + {DateFormatter.convertDateFormat(history.date) + + ", " + + history.price + + " 円"} + + + + deletePurchaseHistory(history)} + icon={} + /> + + ); +} + +export { HistoryCard }; diff --git a/frontend/src/features/purchase-history/components/HistoryList.tsx b/frontend/src/features/purchase-history/components/HistoryList.tsx new file mode 100644 index 0000000..98c5744 --- /dev/null +++ b/frontend/src/features/purchase-history/components/HistoryList.tsx @@ -0,0 +1,71 @@ +import { Center, Heading, Text } from "@chakra-ui/react"; +import { useMembers } from "contexts/MembersContext"; +import { useEffect, useState } from "react"; +import { Member, History } from "types"; +import { Backend } from "util/Backend"; +import { HistoryCard } from "./HistoryCard"; + +function HistoryList({ selectedMemberId }: { selectedMemberId: string }) { + const [histories, setHistories] = useState([]); + const members = useMembers(); + const selectedMember = members.find( + (member: Member) => member.id === selectedMemberId, + ); + + function deleteHistory(history: History) { + setHistories(histories.filter((h) => h.historyId !== history.historyId)); + } + + useEffect(() => { + async function fetchHistories() { + if (selectedMember === undefined) { + setHistories([]); + return; + } + + const histories = await Backend.getUserHistory(selectedMember.id); + if (histories === null) { + console.error("getUserHistory: failed"); + return; + } + + setHistories(histories); + } + + fetchHistories(); + }, [selectedMemberId]); + + if (selectedMemberId === "") { + return ( +
+ + 利用者を選択してください + +
+ ); + } + + if (histories.length === 0) { + return ( +
+ + 購入履歴がありません + +
+ ); + } + + return ( + <> + {histories.map((history) => ( + + ))} + + ); +} + +export { HistoryList }; From 45e90abc14d48619acbf38e71bbf2357e501e943 Mon Sep 17 00:00:00 2001 From: grtw2116 <15563588+grtw2116@users.noreply.github.com> Date: Sat, 4 Nov 2023 15:38:06 +0900 Subject: [PATCH 2/8] format --- .../src/features/purchase-history/components/HistoryCard.tsx | 2 +- .../src/features/purchase-history/components/HistoryList.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/features/purchase-history/components/HistoryCard.tsx b/frontend/src/features/purchase-history/components/HistoryCard.tsx index 23cffa5..ebc521c 100644 --- a/frontend/src/features/purchase-history/components/HistoryCard.tsx +++ b/frontend/src/features/purchase-history/components/HistoryCard.tsx @@ -40,7 +40,7 @@ function HistoryCard({ history, deleteHistory }: Props) { if (!ignore) { if (res === null) { console.log( - history.itemId + ": Custom image not found. So use default image.", + history.itemId + ": Custom image not found. So use default image." ); setImageURL(LogoDefaultItem); return; diff --git a/frontend/src/features/purchase-history/components/HistoryList.tsx b/frontend/src/features/purchase-history/components/HistoryList.tsx index 98c5744..433bb1e 100644 --- a/frontend/src/features/purchase-history/components/HistoryList.tsx +++ b/frontend/src/features/purchase-history/components/HistoryList.tsx @@ -9,7 +9,7 @@ function HistoryList({ selectedMemberId }: { selectedMemberId: string }) { const [histories, setHistories] = useState([]); const members = useMembers(); const selectedMember = members.find( - (member: Member) => member.id === selectedMemberId, + (member: Member) => member.id === selectedMemberId ); function deleteHistory(history: History) { @@ -61,7 +61,7 @@ function HistoryList({ selectedMemberId }: { selectedMemberId: string }) { ))} From 264befadaf9c055dee5dd72f3ae13110ebb5fe32 Mon Sep 17 00:00:00 2001 From: grtw2116 <15563588+grtw2116@users.noreply.github.com> Date: Fri, 29 Dec 2023 22:05:16 +0900 Subject: [PATCH 3/8] =?UTF-8?q?=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF?= =?UTF-8?q?=E3=82=BF=E3=83=AA=E3=83=B3=E3=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../purchase-history/PurchaseHistory.tsx | 47 +++++++++++++++++-- .../components/HistoryCard.tsx | 4 +- .../components/HistoryList.tsx | 43 ++++------------- 3 files changed, 53 insertions(+), 41 deletions(-) diff --git a/frontend/src/features/purchase-history/PurchaseHistory.tsx b/frontend/src/features/purchase-history/PurchaseHistory.tsx index 91730b0..80382f8 100644 --- a/frontend/src/features/purchase-history/PurchaseHistory.tsx +++ b/frontend/src/features/purchase-history/PurchaseHistory.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { Heading } from "@chakra-ui/react"; import { LeftColumn, @@ -7,25 +7,62 @@ import { } from "components/TwoColumnLayout"; import { MemberPane } from "components/MemberPane"; import { HistoryList } from "./components/HistoryList"; +import { Backend } from "util/Backend"; +import { History } from "types"; +import { useMembersDispatch } from "contexts/MembersContext"; function PurchaseHistory() { const [selectedMemberId, setSelectedMemberId] = useState(""); + const [histories, setHistories] = useState([]); + const dispatch = useMembersDispatch(); + + async function fetchHistories(memberId: string) { + const histories = await Backend.getUserHistory(memberId); + if (histories === null) { + console.error("getUserHistory: failed"); + return; + } + setHistories(histories); + } + + async function deleteHistory(history: History) { + if (!(await Backend.recall(history.historyId))) { + console.error("recall: failed"); + return; + } + + // memberの利用金額を更新 + dispatch({ + type: "purchaseCanceled", + id: history.memberId, + price: history.price, + }); + + // historyを更新 + setHistories(histories.filter((h) => h.historyId !== history.historyId)); + } + return ( - setSelectedMemberId(memberId) - } + onClickMemberCard={(memberId) => { + setSelectedMemberId(memberId); + fetchHistories(memberId); + }} /> 購入履歴 - + deleteHistory(history)} + /> ); diff --git a/frontend/src/features/purchase-history/components/HistoryCard.tsx b/frontend/src/features/purchase-history/components/HistoryCard.tsx index ebc521c..bddd0a4 100644 --- a/frontend/src/features/purchase-history/components/HistoryCard.tsx +++ b/frontend/src/features/purchase-history/components/HistoryCard.tsx @@ -19,10 +19,10 @@ import { useMembersDispatch } from "contexts/MembersContext"; type Props = { history: History; - deleteHistory: (history: History) => void; + onDeleteHistory: (history: History) => void; }; -function HistoryCard({ history, deleteHistory }: Props) { +function HistoryCard({ history, onDeleteHistory: deleteHistory }: Props) { // TODO: 画像処理の共通化 const [imageURL, setImageURL] = useState(""); const dispatch = useMembersDispatch(); diff --git a/frontend/src/features/purchase-history/components/HistoryList.tsx b/frontend/src/features/purchase-history/components/HistoryList.tsx index 433bb1e..05250dc 100644 --- a/frontend/src/features/purchase-history/components/HistoryList.tsx +++ b/frontend/src/features/purchase-history/components/HistoryList.tsx @@ -1,41 +1,16 @@ import { Center, Heading, Text } from "@chakra-ui/react"; -import { useMembers } from "contexts/MembersContext"; -import { useEffect, useState } from "react"; -import { Member, History } from "types"; -import { Backend } from "util/Backend"; +import { History } from "types"; import { HistoryCard } from "./HistoryCard"; -function HistoryList({ selectedMemberId }: { selectedMemberId: string }) { - const [histories, setHistories] = useState([]); - const members = useMembers(); - const selectedMember = members.find( - (member: Member) => member.id === selectedMemberId - ); - - function deleteHistory(history: History) { - setHistories(histories.filter((h) => h.historyId !== history.historyId)); - } - - useEffect(() => { - async function fetchHistories() { - if (selectedMember === undefined) { - setHistories([]); - return; - } - - const histories = await Backend.getUserHistory(selectedMember.id); - if (histories === null) { - console.error("getUserHistory: failed"); - return; - } - - setHistories(histories); - } +type Props = { + histories: History[]; + isMemberSelected: boolean; + onDeleteHistory: (history: History) => void; +}; - fetchHistories(); - }, [selectedMemberId]); +function HistoryList({ histories, isMemberSelected, onDeleteHistory }: Props) { - if (selectedMemberId === "") { + if (isMemberSelected === false) { return (
@@ -61,7 +36,7 @@ function HistoryList({ selectedMemberId }: { selectedMemberId: string }) { ))} From 7249533b6407c6287d74f7d8a75a630b8b41ea1f Mon Sep 17 00:00:00 2001 From: grtw2116 <15563588+grtw2116@users.noreply.github.com> Date: Sun, 31 Dec 2023 11:59:11 +0900 Subject: [PATCH 4/8] =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=9E?= =?UTF-8?q?=E3=83=83=E3=83=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../purchase-history/PurchaseHistory.tsx | 1 - .../purchase-history/components/HistoryCard.tsx | 17 ----------------- .../purchase-history/components/HistoryList.tsx | 1 - 3 files changed, 19 deletions(-) diff --git a/frontend/src/features/purchase-history/PurchaseHistory.tsx b/frontend/src/features/purchase-history/PurchaseHistory.tsx index 80382f8..36f5175 100644 --- a/frontend/src/features/purchase-history/PurchaseHistory.tsx +++ b/frontend/src/features/purchase-history/PurchaseHistory.tsx @@ -42,7 +42,6 @@ function PurchaseHistory() { setHistories(histories.filter((h) => h.historyId !== history.historyId)); } - return ( diff --git a/frontend/src/features/purchase-history/components/HistoryCard.tsx b/frontend/src/features/purchase-history/components/HistoryCard.tsx index bddd0a4..5c0f191 100644 --- a/frontend/src/features/purchase-history/components/HistoryCard.tsx +++ b/frontend/src/features/purchase-history/components/HistoryCard.tsx @@ -55,23 +55,6 @@ function HistoryCard({ history, onDeleteHistory: deleteHistory }: Props) { }; }, []); - async function deletePurchaseHistory(history: History) { - if (!(await Backend.recall(history.historyId))) { - console.error("recall: failed"); - return; - } - - // memberの利用金額を更新 - dispatch({ - type: "purchaseCanceled", - id: history.memberId, - price: history.price, - }); - - // historyを更新 - deleteHistory(history); - } - return ( From e37f00421dbb2a8107a191d299b1b35362577d4b Mon Sep 17 00:00:00 2001 From: grtw2116 <15563588+grtw2116@users.noreply.github.com> Date: Sun, 31 Dec 2023 13:56:23 +0900 Subject: [PATCH 5/8] =?UTF-8?q?=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E5=90=8D=E3=82=92=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 4 +-- .../src/features/home/{Home.tsx => index.tsx} | 0 .../components/HistoryCard.tsx | 4 +-- .../{PurchaseHistory.tsx => index.tsx} | 27 ++++++++++++++++--- 4 files changed, 26 insertions(+), 9 deletions(-) rename frontend/src/features/home/{Home.tsx => index.tsx} (100%) rename frontend/src/features/purchase-history/{PurchaseHistory.tsx => index.tsx} (75%) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a158d90..52caf6e 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -12,8 +12,8 @@ import { ItemsProvider } from "contexts/ItemsContext"; import { Header } from "components/Header"; import { UserSetting } from "Setting/User/UserSetting"; import { AdminPane } from "Setting/Admin/AdminPane"; -import { Home } from "features/home/Home"; -import { PurchaseHistory } from "features/purchase-history/PurchaseHistory"; +import { Home } from "features/home"; +import { PurchaseHistory } from "features/purchase-history"; export const TabIndex = createContext(0); diff --git a/frontend/src/features/home/Home.tsx b/frontend/src/features/home/index.tsx similarity index 100% rename from frontend/src/features/home/Home.tsx rename to frontend/src/features/home/index.tsx diff --git a/frontend/src/features/purchase-history/components/HistoryCard.tsx b/frontend/src/features/purchase-history/components/HistoryCard.tsx index 5c0f191..f0e3217 100644 --- a/frontend/src/features/purchase-history/components/HistoryCard.tsx +++ b/frontend/src/features/purchase-history/components/HistoryCard.tsx @@ -15,7 +15,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faTrash } from "@fortawesome/free-solid-svg-icons"; import { useEffect, useState } from "react"; import LogoDefaultItem from "image/default_item.svg"; -import { useMembersDispatch } from "contexts/MembersContext"; type Props = { history: History; @@ -25,7 +24,6 @@ type Props = { function HistoryCard({ history, onDeleteHistory: deleteHistory }: Props) { // TODO: 画像処理の共通化 const [imageURL, setImageURL] = useState(""); - const dispatch = useMembersDispatch(); useEffect(() => { let ignore = false; @@ -95,7 +93,7 @@ function HistoryCard({ history, onDeleteHistory: deleteHistory }: Props) { deletePurchaseHistory(history)} + onClick={() => deleteHistory(history)} icon={} /> diff --git a/frontend/src/features/purchase-history/PurchaseHistory.tsx b/frontend/src/features/purchase-history/index.tsx similarity index 75% rename from frontend/src/features/purchase-history/PurchaseHistory.tsx rename to frontend/src/features/purchase-history/index.tsx index 36f5175..20d5cde 100644 --- a/frontend/src/features/purchase-history/PurchaseHistory.tsx +++ b/frontend/src/features/purchase-history/index.tsx @@ -1,5 +1,5 @@ -import { useEffect, useState } from "react"; -import { Heading } from "@chakra-ui/react"; +import { useState } from "react"; +import { Heading, useToast } from "@chakra-ui/react"; import { LeftColumn, RightColumn, @@ -14,7 +14,8 @@ import { useMembersDispatch } from "contexts/MembersContext"; function PurchaseHistory() { const [selectedMemberId, setSelectedMemberId] = useState(""); const [histories, setHistories] = useState([]); - const dispatch = useMembersDispatch(); + const dispatchMembers = useMembersDispatch(); + const toast = useToast(); async function fetchHistories(memberId: string) { const histories = await Backend.getUserHistory(memberId); @@ -26,13 +27,22 @@ function PurchaseHistory() { } async function deleteHistory(history: History) { + + // TODO: ここで確認ダイアログを出す + if (!(await Backend.recall(history.historyId))) { console.error("recall: failed"); + toast({ + title: "購入履歴の削除に失敗しました", + status: "error", + duration: 2000, + isClosable: true, + }); return; } // memberの利用金額を更新 - dispatch({ + dispatchMembers({ type: "purchaseCanceled", id: history.memberId, price: history.price, @@ -40,6 +50,15 @@ function PurchaseHistory() { // historyを更新 setHistories(histories.filter((h) => h.historyId !== history.historyId)); + + // toastを表示 + toast({ + title: "購入履歴を削除しました", + status: "success", + duration: 2000, + isClosable: true, + }); + } return ( From eccf26daf24215341ff05fec01d423d2fa69cc62 Mon Sep 17 00:00:00 2001 From: grtw2116 <15563588+grtw2116@users.noreply.github.com> Date: Sun, 31 Dec 2023 13:57:51 +0900 Subject: [PATCH 6/8] =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=9E?= =?UTF-8?q?=E3=83=83=E3=83=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/features/purchase-history/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/features/purchase-history/index.tsx b/frontend/src/features/purchase-history/index.tsx index 20d5cde..8161e9d 100644 --- a/frontend/src/features/purchase-history/index.tsx +++ b/frontend/src/features/purchase-history/index.tsx @@ -27,7 +27,6 @@ function PurchaseHistory() { } async function deleteHistory(history: History) { - // TODO: ここで確認ダイアログを出す if (!(await Backend.recall(history.historyId))) { @@ -58,7 +57,6 @@ function PurchaseHistory() { duration: 2000, isClosable: true, }); - } return ( From 329c1e78aec088e1dbf5808df816fd812aab8b78 Mon Sep 17 00:00:00 2001 From: grtw2116 <15563588+grtw2116@users.noreply.github.com> Date: Sun, 31 Dec 2023 14:20:03 +0900 Subject: [PATCH 7/8] =?UTF-8?q?=E5=88=A9=E7=94=A8=E8=80=85=E9=81=B8?= =?UTF-8?q?=E6=8A=9E=E6=99=82=E3=81=AB=E4=B8=80=E7=9E=AC=E3=81=A0=E3=81=91?= =?UTF-8?q?=E3=80=8C=E8=B3=BC=E5=85=A5=E5=B1=A5=E6=AD=B4=E3=81=8C=E3=81=82?= =?UTF-8?q?=E3=82=8A=E3=81=BE=E3=81=9B=E3=82=93=E3=80=8D=E3=81=A8=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B=E3=81=AE=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/features/purchase-history/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/features/purchase-history/index.tsx b/frontend/src/features/purchase-history/index.tsx index 8161e9d..760a656 100644 --- a/frontend/src/features/purchase-history/index.tsx +++ b/frontend/src/features/purchase-history/index.tsx @@ -23,6 +23,7 @@ function PurchaseHistory() { console.error("getUserHistory: failed"); return; } + console.log("histories", histories); setHistories(histories); } @@ -64,9 +65,10 @@ function PurchaseHistory() { { + onClickMemberCard={async (memberId) => { + // 購入履歴の取得が完了するまでmemberIdをセットしない + await fetchHistories(memberId); setSelectedMemberId(memberId); - fetchHistories(memberId); }} /> From 357da5b1a1fbfc6439dc1a0dda72ce7b4839f859 Mon Sep 17 00:00:00 2001 From: grtw2116 <15563588+grtw2116@users.noreply.github.com> Date: Sun, 31 Dec 2023 15:05:33 +0900 Subject: [PATCH 8/8] =?UTF-8?q?=E8=B3=BC=E5=85=A5=E5=B1=A5=E6=AD=B4?= =?UTF-8?q?=E5=89=8A=E9=99=A4=E6=99=82=E3=81=AB=E7=A2=BA=E8=AA=8D=E3=83=80?= =?UTF-8?q?=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0=E3=82=92=E8=A1=A8=E7=A4=BA?= =?UTF-8?q?=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/HistoryCard.tsx | 94 +++++++++++-------- .../components/HistoryDeleteConfirm.tsx | 42 +++++++++ .../src/features/purchase-history/index.tsx | 5 +- 3 files changed, 97 insertions(+), 44 deletions(-) create mode 100644 frontend/src/features/purchase-history/components/HistoryDeleteConfirm.tsx diff --git a/frontend/src/features/purchase-history/components/HistoryCard.tsx b/frontend/src/features/purchase-history/components/HistoryCard.tsx index f0e3217..251ab04 100644 --- a/frontend/src/features/purchase-history/components/HistoryCard.tsx +++ b/frontend/src/features/purchase-history/components/HistoryCard.tsx @@ -7,6 +7,7 @@ import { Image, Spacer, Text, + useDisclosure, } from "@chakra-ui/react"; import { History } from "types"; import { DateFormatter } from "util/DateFormatter"; @@ -15,6 +16,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faTrash } from "@fortawesome/free-solid-svg-icons"; import { useEffect, useState } from "react"; import LogoDefaultItem from "image/default_item.svg"; +import { HistoryDeleteConfirm } from "./HistoryDeleteConfirm"; type Props = { history: History; @@ -24,6 +26,7 @@ type Props = { function HistoryCard({ history, onDeleteHistory: deleteHistory }: Props) { // TODO: 画像処理の共通化 const [imageURL, setImageURL] = useState(""); + const { isOpen, onClose, onOpen } = useDisclosure(); useEffect(() => { let ignore = false; @@ -54,49 +57,60 @@ function HistoryCard({ history, onDeleteHistory: deleteHistory }: Props) { }, []); return ( - - + - {history.itemId === null ? ( - - ) : ( - - )} - - - - - {history.itemName} + + {history.itemId === null ? ( + + ) : ( + + )} + + + + + {history.itemName} + + + + {DateFormatter.convertDateFormat(history.date) + + ", " + + history.price + + " 円"} - - - {DateFormatter.convertDateFormat(history.date) + - ", " + - history.price + - " 円"} - - - - deleteHistory(history)} - icon={} + + + } + /> + + { + deleteHistory(history); + onClose(); + }} /> - + ); } diff --git a/frontend/src/features/purchase-history/components/HistoryDeleteConfirm.tsx b/frontend/src/features/purchase-history/components/HistoryDeleteConfirm.tsx new file mode 100644 index 0000000..090a126 --- /dev/null +++ b/frontend/src/features/purchase-history/components/HistoryDeleteConfirm.tsx @@ -0,0 +1,42 @@ +import { + Button, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, +} from "@chakra-ui/react"; + +type Props = { + isOpen: boolean; + onClose: () => void; + historyId: number; + onClickDeleteButton: () => void; +}; + +function HistoryDeleteConfirm({ isOpen, onClose, onClickDeleteButton }: Props) { + return ( + + + + 購入履歴の削除 + + +

購入履歴を削除しますか？

+ + + + + + + + ); +} + +export { HistoryDeleteConfirm }; diff --git a/frontend/src/features/purchase-history/index.tsx b/frontend/src/features/purchase-history/index.tsx index 760a656..996d610 100644 --- a/frontend/src/features/purchase-history/index.tsx +++ b/frontend/src/features/purchase-history/index.tsx @@ -23,13 +23,10 @@ function PurchaseHistory() { console.error("getUserHistory: failed"); return; } - console.log("histories", histories); setHistories(histories); } async function deleteHistory(history: History) { - // TODO: ここで確認ダイアログを出す - if (!(await Backend.recall(history.historyId))) { console.error("recall: failed"); toast({ @@ -79,7 +76,7 @@ function PurchaseHistory() { deleteHistory(history)} + onDeleteHistory={deleteHistory} />