Skip to content

Commit 016b790

Browse files
bryanlundbergbryanlundberg
authored
Merge pull request #191 from bryanlundberg/improve-delete-modal-ui
style the delete modal
2 parents 24f86f9 + dce9188 commit 016b790

File tree

5 files changed

+235
-42
lines changed

5 files changed

+235
-42
lines changed

‎src/components/cubes/DeleteModal.tsx

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

‎src/components/cubes/Modal.tsx

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import genId from "@/lib/genId";
55
import translation from "@/translations/global.json";
66
import useModalCube from "@/hooks/useModalCube";
77
import { useCubesModalStore } from "@/store/CubesModalStore";
8+
import DeleteModal from "./DeleteModal";
89

910
export default function Modal() {
1011
const { editingCube } = useCubesModalStore();
@@ -22,7 +23,7 @@ export default function Modal() {
2223
confirmDelete,
2324
cancelDelete,
2425
showDeleteConfirmation,
25-
deleteConfirmationMessage,
26+
cubeData,
2627
} = useModalCube();
2728
return (
2829
<>
@@ -156,27 +157,11 @@ export default function Modal() {
156157
</div>
157158
</div>
158159
{showDeleteConfirmation && (
159-
<div className="fixed top-0 left-0 z-50 flex items-center justify-center w-full h-screen bg-opacity-80 bg-neutral-900">
160-
<div className="p-4 text-center bg-white rounded-lg shadow-lg">
161-
<p className="mb-4 text-lg font-semibold text-neutral-900">
162-
{deleteConfirmationMessage}
163-
</p>
164-
<div className="flex justify-center space-x-4">
165-
<button
166-
onClick={cancelDelete}
167-
className="px-4 py-2 rounded-lg bg-neutral-300 text-neutral-900 hover:bg-neutral-400"
168-
>
169-
Cancel
170-
</button>
171-
<button
172-
onClick={confirmDelete}
173-
className="px-4 py-2 text-white bg-red-600 rounded-lg hover-bg-red-700"
174-
>
175-
Confirm
176-
</button>
177-
</div>
178-
</div>
179-
</div>
160+
<DeleteModal
161+
confirmDelete={confirmDelete}
162+
cancelDelete={cancelDelete}
163+
cubeData={cubeData}
164+
/>
180165
)}
181166
</>
182167
);

‎src/hooks/useModalCube.ts

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import createCube from "@/lib/createCube";
55
import { useTimerStore } from "@/store/timerStore";
66
import loadCubes from "@/lib/loadCubes";
77
import { useSettingsModalStore } from "@/store/SettingsModalStore";
8+
import calcBestTime from "@/lib/calcBestTime";
9+
import calcAoStatistics from "@/lib/calcAoStatistics";
10+
import { DeleteCubeDetails } from "@/interfaces/DeleteCubeDetails";
11+
import formatTime from "@/lib/formatTime";
812

913
export default function useModalCube() {
1014
const {
@@ -16,11 +20,13 @@ export default function useModalCube() {
1620
cubeName,
1721
setCubeName,
1822
} = useCubesModalStore();
23+
1924
const { lang } = useSettingsModalStore();
20-
const { setCubes, setSelectedCube, setNewScramble, selectedCube } = useTimerStore();
25+
const { setCubes, setSelectedCube, setNewScramble, selectedCube } =
26+
useTimerStore();
2127
const [error, setError] = useState<boolean>(false);
22-
// Add state for the confirmation message
23-
const [deleteConfirmationMessage, setDeleteConfirmationMessage] = useState("");
28+
const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
29+
const [cubeData, setCubeData] = useState<DeleteCubeDetails | null>(null);
2430

2531
const handleClickRadio = (category: Categories) => {
2632
setSelectedCategory(category);
@@ -70,19 +76,31 @@ export default function useModalCube() {
7076
setSelectedCategory("2x2");
7177
};
7278

73-
const handleMessage = () => {
74-
const cubeDB = loadCubes();
79+
const handleCubeDetails = () => {
7580
if (!editingCube) return;
76-
77-
// Get the solve count for the cube
78-
const cubeToBeDeleted = cubeDB.find((cube) => cube.id === editingCube.id);
79-
const solveCount = cubeToBeDeleted ? cubeToBeDeleted.solves.session.length : 0;
80-
81-
// Construct the message with the solve count
82-
const message = `You have solved this cube ${solveCount} time(s). Are you sure you want to delete it?`;
83-
// Show the delete confirmation dialog with the message
84-
setDeleteConfirmationMessage(message);
85-
}
81+
const cubeDB = loadCubes();
82+
const cubeToBeDeleted = cubeDB.find((cube) => cube.id === editingCube.id);
83+
if (!cubeToBeDeleted) return;
84+
const name = cubeToBeDeleted ? cubeToBeDeleted.name : "Undefined";
85+
const solveCount = cubeToBeDeleted
86+
? cubeToBeDeleted.solves.session.length +
87+
cubeToBeDeleted.solves.all.length
88+
: 0;
89+
const bestTime = cubeToBeDeleted
90+
? calcBestTime(cubeToBeDeleted.category, cubeToBeDeleted.name)
91+
: null;
92+
const bestAo = cubeToBeDeleted
93+
? calcAoStatistics(cubeToBeDeleted.category, cubeToBeDeleted.name)
94+
: null;
95+
96+
setCubeData({
97+
name: name,
98+
category: cubeToBeDeleted.category,
99+
count: solveCount,
100+
best: bestTime ? formatTime(bestTime.cubeAll) : "--",
101+
ao5: bestAo ? formatTime(bestAo.cubeAll.ao5) : "--",
102+
});
103+
};
86104

87105
const handleDeleteCube = () => {
88106
const cubeDB = loadCubes();
@@ -109,10 +127,9 @@ export default function useModalCube() {
109127
setSelectedCategory("2x2");
110128
};
111129

112-
const [showDeleteConfirmation,setShowDeleteConfirmation]=useState(false);
113130
const handleDeleteClick = () => {
114131
// Show the delete confirmation dialog
115-
handleMessage();
132+
handleCubeDetails();
116133
setShowDeleteConfirmation(true);
117134
};
118135

@@ -138,11 +155,10 @@ export default function useModalCube() {
138155
selectedCategory,
139156
cubeName,
140157
lang,
141-
handleMessage,
142-
deleteConfirmationMessage,
158+
cubeData,
143159
handleDeleteClick,
144160
confirmDelete,
145161
cancelDelete,
146-
showDeleteConfirmation
162+
showDeleteConfirmation,
147163
};
148164
}

‎src/interfaces/DeleteCubeDetails.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface DeleteCubeDetails {
2+
name: string;
3+
best: any;
4+
ao5: any;
5+
count: number;
6+
category: string;
7+
}

‎src/translations/global.json

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2469,6 +2469,74 @@
24692469
"sk": "Aktuálny výber:",
24702470
"fil": "Kasalukuyang Piling:",
24712471
"et": "Praegune valik:"
2472+
},
2473+
2474+
"question-delete": {
2475+
"en": "Are you sure you want to delete?",
2476+
"es": "¿Estás seguro/a de que quieres eliminar?",
2477+
"fr": "Êtes-vous sûr(e) de vouloir supprimer ?",
2478+
"de": "Möchten Sie wirklich löschen?",
2479+
"ja": "削除してもよろしいですか？",
2480+
"zh": "您确定要删除吗？",
2481+
"ru": "Вы уверены, что хотите удалить?",
2482+
"hi": "क्या आप सुनिश्चित हैं कि आपको हटाना है?",
2483+
"pt": "Tem certeza de que deseja excluir?",
2484+
"it": "Sei sicuro/a di voler eliminare?",
2485+
"ko": "정말 삭제하시겠습니까?",
2486+
"nl": "Weet u zeker dat u wilt verwijderen?",
2487+
"sv": "Är du säker på att du vill ta bort?",
2488+
"tr": "Silmek istediğinizden emin misiniz?",
2489+
"pl": "Czy na pewno chcesz usunąć?",
2490+
"vi": "Bạn có chắc chắn muốn xóa không?",
2491+
"th": "คุณแน่ใจหรือไม่ว่าต้องการลบ?",
2492+
"el": "Είστε σίγουρος/η ότι θέλετε να διαγράψετε;",
2493+
"fi": "Oletko varma, että haluat poistaa?",
2494+
"uk": "Ви впевнені, що хочете видалити?",
2495+
"cs": "Jste si jisti, že chcete smazat?",
2496+
"ro": "Sigur doriți să ștergeți?",
2497+
"no": "Er du sikker på at du vil slette?",
2498+
"da": "Er du sikker på, at du vil slette?",
2499+
"ms": "Adakah anda pasti ingin memadam?",
2500+
"hu": "Biztosan törölni szeretné?",
2501+
"id": "Apakah Anda yakin ingin menghapus?",
2502+
"bn": "আপনি কি নিশ্চিত যে আপনি মুছতে চান?",
2503+
"sk": "Ste si istý/á, že chcete vymazať?",
2504+
"fil": "Sigurado ka bang nais mong burahin?",
2505+
"et": "Kas soovite kindlasti kustutada?"
2506+
},
2507+
2508+
"warning-delete": {
2509+
"en": "This irreversible action will delete all solve history for this cube and may impact your statistics.",
2510+
"es": "Esta acción irreversible eliminará todo el historial de resolución para este cubo y puede afectar tus estadísticas.",
2511+
"fr": "Cette action irréversible supprimera tout l'historique de résolution pour ce cube et pourrait avoir un impact sur vos statistiques.",
2512+
"de": "Diese nicht umkehrbare Aktion wird den gesamten Lösungsverlauf für diesen Würfel löschen und kann sich auf Ihre Statistiken auswirken.",
2513+
"ja": "この取り消しできないアクションは、このキューブのすべての解決履歴を削除し、統計に影響を与える可能性があります。",
2514+
"zh": "这个不可逆的操作将删除此魔方的所有解决历史，可能影响您的统计数据。",
2515+
"ru": "Это необратимое действие удалит всю историю решения для этого куба и может повлиять на ваши статистические данные.",
2516+
"hi": "यह पराक्रमशील क्रिया इस क्यूब के लिए सभी हल करने का इतिहास मिटा देगी और आपके आंकड़ों पर असर डाल सकती है।",
2517+
"pt": "Esta ação irreversível excluirá todo o histórico de resolução para este cubo e pode impactar suas estatísticas.",
2518+
"it": "Questa azione irreversibile cancellerà tutto lo storico delle soluzioni per questo cubo e potrebbe influire sulle tue statistiche.",
2519+
"ko": "이 불가역적인 조치는 이 큐브에 대한 모든 해결 이력을 삭제하고 통계에 영향을 줄 수 있습니다.",
2520+
"nl": "Deze onomkeerbare actie zal alle oplossingsgeschiedenis voor deze kubus verwijderen en kan invloed hebben op uw statistieken.",
2521+
"sv": "Denna oåterkalleliga åtgärd kommer att ta bort all lösningshistorik för denna kub och kan påverka dina statistik.",
2522+
"tr": "Bu geri alınamaz eylem, bu küp için tüm çözüm geçmişini silecek ve istatistiklerinizi etkileyebilir.",
2523+
"pl": "To nieodwracalne działanie spowoduje usunięcie całej historii rozwiązania dla tego sześcianu i może wpłynąć na twoje statystyki.",
2524+
"vi": "Hành động không thể đảo ngược này sẽ xóa tất cả lịch sử giải cho chiếc kệt này và có thể ảnh hưởng đến thống kê của bạn.",
2525+
"th": "การกระทำที่ไม่สามารถย้อนกลับนี้จะลบประวัติการแก้ปัญหาทั้งหมดสำหรับคิวบ์นี้และอาจมีผลต่อสถิติของคุณ",
2526+
"el": "Αυτή η αναίρεση δράση θα διαγράψει όλο το ιστορικό επίλυσης για αυτό το κύβο και ενδέχεται να επηρεάσει τα στατιστικά σας.",
2527+
"fi": "Tämä peruuttamaton toimenpide poistaa kaiken ratkaisuhistorian tältä kuutiolta ja voi vaikuttaa tilastoihisi.",
2528+
"uk": "Ця необоротна дія видалить всю історію вирішення для цього куба та може вплинути на вашу статистику.",
2529+
"cs": "Tato nevratná akce smaže veškerou historii řešení pro tento kostky a může ovlivnit vaši statistiku.",
2530+
"ro": "Această acțiune ireversibilă va șterge întreaga istorie a rezolvării pentru acest cub și ar putea afecta statistica ta.",
2531+
"no": "Denne uopprettelige handlingen vil slette all løsninghistorikk for denne kuben og kan påvirke statistikken din.",
2532+
"da": "Denne uoprettelige handling vil slette al løsningshistorik for denne kube og kan påvirke dine statistikker.",
2533+
"ms": "Tindakan ini yang tidak boleh dibatalkan akan memadamkan semua sejarah penyelesaian untuk kubus ini dan mungkin memberi kesan kepada statistik anda.",
2534+
"hu": "Ez a nem visszafordítható cselekvés törölni fogja a kocka összes megoldási történetét, és befolyásolhatja a statisztikáit.",
2535+
"id": "Tindakan ini yang tidak dapat diurungkan akan menghapus semua riwayat penyelesaian untuk kubus ini dan dapat mempengaruhi statistik Anda.",
2536+
"bn": "এই অবনিবৃত্ত ক্রিয়াটি এই কিউবের সম্পূর্ণ সমাধান ইতিহাসটি মুছে ফেলবে এবং আপনার পরিস্থিতিতে প্রভাব ফেলতে পারে।",
2537+
"sk": "Táto nevratná akcia vymaže celú históriu riešenia pre túto kocku a môže ovplyvniť vašu štatistiku.",
2538+
"fil": "Ang hindi mababawiang aksyon na ito ay maglilinis ng buong kasaysayan ng paglutas para sa kahong ito at maaaring makaapekto sa iyong estadistika.",
2539+
"et": "See pöördumatu toiming kustutab selle kuubi jaoks kogu lahendusajaloo ja võib mõjutada teie statistikat."
24722540
}
24732541
}
24742542
},
@@ -2711,6 +2779,40 @@
27112779
"et": "Loo"
27122780
},
27132781

2782+
"confirm": {
2783+
"en": "Confirm",
2784+
"es": "Confirmar",
2785+
"fr": "Confirmer",
2786+
"de": "Bestätigen",
2787+
"ja": "確認",
2788+
"zh": "确认",
2789+
"ru": "Подтвердить",
2790+
"hi": "पुष्टि करें",
2791+
"pt": "Confirmar",
2792+
"it": "Conferma",
2793+
"ko": "확인",
2794+
"nl": "Bevestigen",
2795+
"sv": "Bekräfta",
2796+
"tr": "Onayla",
2797+
"pl": "Potwierdź",
2798+
"vi": "Xác nhận",
2799+
"th": "ยืนยัน",
2800+
"el": "Επιβεβαίωση",
2801+
"fi": "Vahvista",
2802+
"uk": "Підтвердити",
2803+
"cs": "Potvrdit",
2804+
"ro": "Confirma",
2805+
"no": "Bekreft",
2806+
"da": "Bekræft",
2807+
"ms": "Sahkan",
2808+
"hu": "Megerősít",
2809+
"id": "Konfirmasi",
2810+
"bn": "অনুমোদন করুন",
2811+
"sk": "Potvrdiť",
2812+
"fil": "Kumpirmahin",
2813+
"et": "Kinnita"
2814+
},
2815+
27142816
"cancel": {
27152817
"en": "Cancel",
27162818
"es": "Cancelar",

0 commit comments

Comments
 (0)