Skip to content

Commit 3851180

Browse files
bryanlundbergbryanlundberg
authored
feat: add confirmation prompt for session deletion (#274)
1 parent bbb13d7 commit 3851180

File tree

4 files changed

+188
-2
lines changed

4 files changed

+188
-2
lines changed

‎src/app/solves/page.tsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import useSolvesPage from "@/hooks/useSolvesPage";
1616
import { InputText } from "@/components/input-text/index";
1717
import { useTimerStore } from "@/store/timerStore";
1818
import MoveModal from "@/components/solves/MoveModal";
19+
import ConfirmDelete from "@/components/solves/ConfirmDelete";
1920

2021
export default function SolvesPage() {
2122
const {
@@ -28,6 +29,9 @@ export default function SolvesPage() {
2829
isOpenMoveModal,
2930
setIsOpenMoveModal,
3031
handleGetMoveData,
32+
setIsOpenDeleteModal,
33+
handleGetDeleteData,
34+
isOpenDeleteModal,
3135
} = useSolvesPage();
3236
const { selectedCube } = useTimerStore();
3337
const { lang } = useSettingsModalStore();
@@ -61,7 +65,7 @@ export default function SolvesPage() {
6165
}
6266
/>
6367
<Button
64-
onClick={() => handleTrashAll()}
68+
onClick={() => setIsOpenDeleteModal(true)}
6569
icon={
6670
<div className="w-4 h-4">
6771
<Trash />
@@ -89,6 +93,16 @@ export default function SolvesPage() {
8993
data={handleGetMoveData}
9094
/>
9195
)}
96+
{isOpenDeleteModal && (
97+
<ConfirmDelete
98+
onCancel={() => setIsOpenDeleteModal(false)}
99+
onConfirm={() => {
100+
setIsOpenDeleteModal(false);
101+
handleTrashAll();
102+
}}
103+
data={handleGetDeleteData}
104+
/>
105+
)}
92106
</>
93107
);
94108
}

‎src/components/solves/ConfirmDelete.tsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { Categories } from "@/interfaces/Categories";
2+
import formatTime from "@/lib/formatTime";
3+
import { useSettingsModalStore } from "@/store/SettingsModalStore";
4+
import translation from "@/translations/global.json";
5+
6+
export interface ConfirmDeleteData {
7+
category: Categories;
8+
bestTime: number;
9+
average: number;
10+
count: number;
11+
}
12+
13+
export default function ConfirmDelete({
14+
onConfirm,
15+
onCancel,
16+
data,
17+
}: {
18+
onConfirm: () => void;
19+
onCancel: () => void;
20+
data: () => ConfirmDeleteData | null;
21+
}) {
22+
const { lang } = useSettingsModalStore();
23+
const getData = data();
24+
if (getData === null) return null;
25+
26+
return (
27+
<>
28+
<div className="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-screen text-black bg-opacity-75 bg-neutral-900">
29+
<div className="flex flex-col w-full h-auto gap-3 p-3 m-8 bg-white rounded-lg shadow-lg sm:w-96">
30+
<div className="text-lg font-medium text-center">
31+
{translation.solves["eliminate-session"][lang]}
32+
</div>
33+
34+
<div className="flex justify-center gap-2 ">
35+
<div className="flex flex-col text-end">
36+
<div className="text-black">
37+
{translation.cubes.table["category"][lang]}:
38+
</div>
39+
<div className="text-black">
40+
{translation.settings["best-time"][lang]}:
41+
</div>
42+
<div className="text-black">
43+
{translation.timer["mean"][lang]}:
44+
</div>
45+
<div className="text-black">
46+
{translation.timer["counter"][lang]}:
47+
</div>
48+
</div>
49+
50+
<div className="flex flex-col text-start">
51+
<div className="w-full overflow-hidden text-black">
52+
{getData.category}
53+
</div>
54+
<div className="w-auto overflow-hidden text-black">
55+
{formatTime(getData.bestTime)}
56+
</div>
57+
<div className="w-auto overflow-hidden text-black">
58+
{formatTime(getData.average)}
59+
</div>
60+
<div className="w-auto overflow-hidden text-black">
61+
{getData.count}
62+
</div>
63+
</div>
64+
</div>
65+
66+
<div className="w-11/12 mx-auto text-xs text-center">
67+
{translation.solves["delete-session-legend"][lang]}
68+
</div>
69+
70+
<div className="flex justify-center w-full h-10 gap-3">
71+
<button
72+
onClick={onCancel}
73+
className="px-5 py-2 text-sm font-medium text-center transition duration-300 rounded-lg text-neutral-800 bg-neutral-200 hover:bg-neutral-300"
74+
>
75+
{translation.inputs["cancel"][lang]}
76+
</button>
77+
78+
<button
79+
onClick={onConfirm}
80+
className="px-5 py-2 text-sm font-medium text-center text-white transition duration-200 border rounded-md bg-red-500 border-red-500 hover:border-red-600 hover:bg-red-600"
81+
autoFocus={true}
82+
>
83+
{translation.inputs["delete"][lang]}
84+
</button>
85+
</div>
86+
</div>
87+
</div>
88+
</>
89+
);
90+
}

‎src/hooks/useSolvesPage.ts

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ import { useTimerStore } from "@/store/timerStore";
88
import { useEffect, useRef, useState } from "react";
99
import { useTimerStatistics } from "./useTimerStatistics";
1010
import { MoveData } from "@/components/solves/MoveModal";
11+
import { ConfirmDeleteData } from "@/components/solves/ConfirmDelete";
1112

1213
export default function useSolvesPage() {
1314
const [currentTab, setCurrentTab] = useState<SolveTab>("Session");
1415
const { selectedCube, setCubes, setSelectedCube, cubes } = useTimerStore();
1516
const [displaySolves, setDisplaySolves] = useState<Solve[] | null>(null);
1617
const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
17-
const { session } = useTimerStatistics();
18+
const [isOpenDeleteModal, setIsOpenDeleteModal] = useState(false);
19+
const { session, cubeSession } = useTimerStatistics();
1820
const searchBox = useRef<any>(null);
1921

2022
const handleTabClick = (clickedTab: SolveTab) => {
@@ -31,6 +33,16 @@ export default function useSolvesPage() {
3133
};
3234
};
3335

36+
const handleGetDeleteData = (): ConfirmDeleteData | null => {
37+
if (!selectedCube) return null;
38+
return {
39+
category: selectedCube.category,
40+
bestTime: cubeSession.best,
41+
average: cubeSession.mean,
42+
count: cubeSession.count,
43+
};
44+
};
45+
3446
const handleMoveAll = () => {
3547
if (selectedCube) {
3648
const updateCubes = updateSessions(selectedCube);
@@ -113,5 +125,8 @@ export default function useSolvesPage() {
113125
isOpenMoveModal,
114126
setIsOpenMoveModal,
115127
handleGetMoveData,
128+
handleGetDeleteData,
129+
setIsOpenDeleteModal,
130+
isOpenDeleteModal,
116131
};
117132
}

‎src/translations/global.json

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1571,6 +1571,40 @@
15711571
"et": "Lõpeta seanss"
15721572
},
15731573

1574+
"eliminate-session": {
1575+
"en": "Eliminate session",
1576+
"es": "Eliminar sesión",
1577+
"fr": "Éliminer la session",
1578+
"de": "Sitzung beenden",
1579+
"ja": "セッションを終了する",
1580+
"zh": "结束会话",
1581+
"ru": "Завершить сеанс",
1582+
"hi": "सत्र समाप्त करें",
1583+
"pt": "Eliminar sessão",
1584+
"it": "Elimina sessione",
1585+
"ko": "세션 종료",
1586+
"nl": "Sessie beëindigen",
1587+
"sv": "Avsluta session",
1588+
"tr": "Oturumu sonlandır",
1589+
"pl": "Zakończ sesję",
1590+
"vi": "Chấm dứt phiên",
1591+
"th": "สิ้นสุดเซสชัน",
1592+
"el": "Εξάλειψη συνεδρίας",
1593+
"fi": "Päättää istunto",
1594+
"uk": "Завершити сеанс",
1595+
"cs": "Ukončit relaci",
1596+
"ro": "Eliminați sesiunea",
1597+
"no": "Avslutt økt",
1598+
"da": "Afslut session",
1599+
"ms": "Hapuskan sesi",
1600+
"hu": "Munkamenet megszüntetése",
1601+
"id": "Hapus sesi",
1602+
"bn": "সেশন মুছুন",
1603+
"sk": "Ukončiť reláciu",
1604+
"fil": "Tanggalin ang sesyon",
1605+
"et": "Lõpeta seanss"
1606+
},
1607+
15741608
"archive-sessions-legend": {
15751609
"en": "This action will archive all ongoing sessions from the same category.",
15761610
"es": "Esta acción archivará todas las sesiones en curso de la misma categoría.",
@@ -1604,6 +1638,39 @@
16041638
"fil": "Ang aksyong ito ay mag-a-archive ng lahat ng ongoing na sesyon mula sa parehong kategorya.",
16051639
"et": "See tegevus salvestab kõik käimasolevad seansid samast kategooriast."
16061640
},
1641+
"delete-session-legend": {
1642+
"en": "This action will delete only your current solves with the selected cube.",
1643+
"es": "Esta acción eliminará solo tus resoluciones actuales con el cubo seleccionado.",
1644+
"fr": "Cette action supprimera uniquement vos résolutions en cours avec le cube sélectionné.",
1645+
"de": "Diese Aktion löscht nur Ihre aktuellen Lösungen mit dem ausgewählten Würfel.",
1646+
"ja": "このアクションは、選択したキューブの現在の解答のみを削除します。",
1647+
"zh": "此操作仅会删除您当前选择的魔方的解决方案。",
1648+
"ru": "Это действие удалит только ваши текущие решения с выбранным кубом.",
1649+
"hi": "यह क्रिया केवल आपकी चयनित क्यूब के साथ आपकी वर्तमान हल को हटा देगी।",
1650+
"pt": "Esta ação excluirá apenas as resoluções atuais com o cubo selecionado.",
1651+
"it": "Questa azione eliminerà solo le tue soluzioni attuali con il cubo selezionato.",
1652+
"ko": "이 작업은 선택한 큐브의 현재 해결책만 삭제합니다.",
1653+
"nl": "Deze actie zal alleen uw huidige oplossingen met de geselecteerde kubus verwijderen.",
1654+
"sv": "Denna åtgärd kommer endast att radera dina nuvarande lösningar med den valda kuben.",
1655+
"tr": "Bu eylem yalnızca seçilen küp ile olan mevcut çözümlerinizi silecektir.",
1656+
"pl": "To działanie usunie tylko twoje bieżące rozwiązania z wybraną kostką.",
1657+
"vi": "Hành động này chỉ sẽ xóa bỏ giải pháp hiện tại của bạn với ký hiệu được chọn.",
1658+
"th": "การดำเนินการนี้จะลบเฉพาะการแก้ปัญหาปัจจุบันของคุณกับลูกบี้ที่เลือก",
1659+
"el": "Αυτή η ενέργεια θα διαγράψει μόνο τις τρέχουσες επιλυμένες καταστάσεις σας με το επιλεγμένο κύβο.",
1660+
"fi": "Tämä toiminto poistaa vain nykyiset ratkaisusi valitulla kuutiolla.",
1661+
"uk": "Ця дія видалить лише ваші поточні рішення з вибраним кубом.",
1662+
"cs": "Tato akce smaže pouze vaše aktuální řešení s vybraným kostkou.",
1663+
"ro": "Această acțiune va șterge doar soluțiile curente cu cubul selectat.",
1664+
"no": "Denne handlingen vil bare slette dine nåværende løsninger med den valgte kuben.",
1665+
"da": "Denne handling vil kun slette dine nuværende løsninger med den valgte terning.",
1666+
"ms": "Tindakan ini hanya akan memadam penyelesaian semasa anda dengan kubus yang dipilih.",
1667+
"hu": "Ez a művelet csak a kiválasztott kockával végzett aktuális feloldásokat fogja törölni.",
1668+
"id": "Tindakan ini hanya akan menghapus penyelesaian saat ini Anda dengan kubus yang dipilih.",
1669+
"bn": "এই অ্যাকশনটি শুধুমাত্র আপনার নির্বাচিত কিউব দিয়ে আপনার বর্তমান সমাধানগুলি মুছবে।",
1670+
"sk": "Táto akcia vymaže iba vaše aktuálne riešenia s vybraným kockou.",
1671+
"fil": "Ang aksyon na ito ay maglilinis lamang ng iyong kasalukuyang mga solusyon sa piniling cube.",
1672+
"et": "See tegevus kustutab ainult teie praegused lahendused valitud kuubiga."
1673+
},
16071674

16081675
"archive": {
16091676
"en": "Archive",

0 commit comments

Comments
 (0)