Skip to content

Commit b7bdfb3

Browse files
authored
Merge pull request #67 from Coding-Club-IITG/Avni
Improved UI for verification/deletion of files
2 parents 199ae42 + 1937036 commit b7bdfb3

File tree

6 files changed

+167
-8
lines changed

6 files changed

+167
-8
lines changed
Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React from "react";
2+
import tick from "../assets/tick.svg";
3+
import cross from "../assets/cross.svg";
4+
5+
const styles = {
6+
overlay: {
7+
position: "fixed",
8+
top: 0,
9+
left: 0,
10+
right: 0,
11+
bottom: 0,
12+
backgroundColor: "rgba(0, 0, 0, 0.4)",
13+
display: "flex",
14+
alignItems: "center",
15+
justifyContent: "center",
16+
zIndex: 1000,
17+
},
18+
dialog: {
19+
backgroundColor: "#fff",
20+
padding: "25px 30px",
21+
borderRadius: "8px",
22+
maxWidth: "400px",
23+
width: "90%",
24+
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.2)",
25+
textAlign: "center",
26+
fontFamily: "sans-serif",
27+
},
28+
29+
iconImage: {
30+
width: "80px",
31+
height: "80px",
32+
margin:"1em",
33+
},
34+
heading: {
35+
fontSize:"2em",
36+
},
37+
message: {
38+
fontSize: "1em",
39+
color: "#374151",
40+
margin: "1em",
41+
},
42+
buttonGroup: {
43+
display: "flex",
44+
justifyContent: "center",
45+
gap: "1em",
46+
},
47+
confirmBtn: {
48+
display: "flex",
49+
alignItems: "center",
50+
backgroundColor: "#22c55e",
51+
color: "#fff",
52+
border: "none",
53+
padding: "10px 18px",
54+
borderRadius: "5px",
55+
cursor: "pointer",
56+
fontWeight: "bold",
57+
fontSize:"1em",
58+
},
59+
deleteBtn: {
60+
display: "flex",
61+
alignItems: "center",
62+
backgroundColor: "#ef4444",
63+
color: "#fff",
64+
border: "none",
65+
padding: "10px 18px",
66+
borderRadius: "5px",
67+
cursor: "pointer",
68+
fontWeight: "bold",
69+
fontSize:"1em",
70+
},
71+
cancelBtn: {
72+
backgroundColor: "#9ca3af",
73+
color: "#fff",
74+
border: "none",
75+
padding: "10px 18px",
76+
borderRadius: "5px",
77+
cursor: "pointer",
78+
fontWeight: "bold",
79+
fontSize:"1em",
80+
},
81+
};
82+
83+
const ConfirmDialog = ({ isOpen, type, onConfirm, onCancel }) => {
84+
if (!isOpen) return null;
85+
86+
const isDelete = type === "delete";
87+
88+
const message = isDelete
89+
? "Do you want to permanently delete this file? This action cannot be undone."
90+
: "Do you want to verify this file? Once verified, it will be visible to all users.";
91+
92+
return (
93+
<div style={styles.overlay}>
94+
<div style={styles.dialog}>
95+
<img
96+
src={isDelete ? cross : tick}
97+
alt={isDelete ? "Delete" : "Verify"}
98+
style={styles.iconImage}
99+
/>
100+
<h3 style={styles.heading}>Are you sure?</h3>
101+
<p style={styles.message}>{message}</p>
102+
<div style={styles.buttonGroup}>
103+
<button
104+
style={isDelete ? styles.deleteBtn : styles.confirmBtn}
105+
onClick={onConfirm}
106+
>
107+
{isDelete ? "Delete" : "Verify"}
108+
</button>
109+
<button style={styles.cancelBtn} onClick={onCancel}>
110+
Cancel
111+
</button>
112+
</div>
113+
</div>
114+
</div>
115+
);
116+
};
117+
118+
export default ConfirmDialog;

client/src/screens/browse/components/file-display/index.jsx

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import "./styles.scss";
2+
import React, { useState } from "react";
23
import { formatFileName, formatFileSize, formatFileType } from "../../../../utils/formatFile";
34
import { AddToFavourites } from "../../../../api/User";
45
import { toast } from "react-toastify";
@@ -12,11 +13,16 @@ import capitalise from "../../../../utils/capitalise.js";
1213
import Share from "../../../share";
1314
import { verifyFile, unverifyFile } from "../../../../api/File";
1415
import { RemoveFileFromFolder, UpdateFileVerificationStatus } from "../../../../actions/filebrowser_actions.js";
16+
import ConfirmDialog from "./components/ConfirmDialog.jsx";
1517

1618
const FileDisplay = ({ file, path, code }) => {
1719
const user = useSelector((state) => state.user?.user);
1820
const fileSize = formatFileSize(file.size);
1921
const fileType = formatFileType(file.name);
22+
const [showDialog, setShowDialog] = useState(false);
23+
const [dialogType, setDialogType] = useState("verify");
24+
const [onConfirmAction, setOnConfirmAction] = useState(() => () => {});
25+
2026
let name = file.name;
2127
let _dispName = formatFileName(name);
2228
let contributor = file.name;
@@ -92,9 +98,11 @@ if (!file.isVerified && !currentUser?.isBR) {
9298
dispatch(UpdateFavourites(resp?.data?.favourites));
9399
}
94100
};
95-
const handleVerify = async () => {
96-
const confirmAction = window.confirm("Are you sure you want to verify this file?");
97-
if (!confirmAction) return;
101+
const handleVerify = () => {
102+
// const confirmAction = window.confirm("Are you sure you want to verify this file?");
103+
// if (!confirmAction) return;
104+
setDialogType("verify");
105+
setOnConfirmAction(()=> async()=>{
98106

99107
try {
100108
console.log("Verifying file:", file._id);
@@ -107,13 +115,18 @@ const handleVerify = async () => {
107115
} catch (err) {
108116
console.error("Error verifying:", err);
109117
toast.error("Failed to verify file.");
118+
} finally{
119+
setShowDialog(false);
110120
}
121+
});
122+
setShowDialog(true);
111123
};
112124

113-
const handleUnverify = async () => {
114-
const confirmAction = window.confirm("Are you sure you want to permanently delete this file?");
115-
if (!confirmAction) return;
116-
125+
const handleUnverify = () => {
126+
// const confirmAction = window.confirm("Are you sure you want to permanently delete this file?");
127+
// if (!confirmAction) return;
128+
setDialogType("delete");
129+
setOnConfirmAction(()=>async()=>{
117130
try {
118131
console.log("Deleting file:", file._id);
119132
await unverifyFile(file._id, file.fileId, currFolderId);
@@ -124,7 +137,11 @@ const handleUnverify = async () => {
124137
} catch (err) {
125138
console.error("Error deleting:", err);
126139
toast.error("Failed to delete file.");
127-
}
140+
} finally {
141+
setShowDialog(false);
142+
}
143+
});
144+
setShowDialog(true);
128145
};
129146

130147

@@ -188,6 +205,13 @@ const handleUnverify = async () => {
188205
</div>
189206
</div>
190207
<Share link={`${clientRoot}/browse/${currCourseCode.toLowerCase()}/${currFolderId}`} />
208+
<ConfirmDialog
209+
isOpen={showDialog}
210+
type={dialogType}
211+
onConfirm={onConfirmAction}
212+
onCancel={() => setShowDialog(false)}
213+
/>
214+
191215
</div>
192216
);
193217
};

client/yarn.lock

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -487,6 +487,11 @@ electron-to-chromium@^1.4.251:
487487
resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz"
488488
integrity sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==
489489

490+
491+
version "0.15.16"
492+
resolved "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.16.tgz"
493+
integrity sha512-fMXaUr5ou0M4WnewBKsspMtX++C1yIa3nJ5R2LSbLCfJT3uFdcRoU/NZjoM4kOMKyOD9Sa/2vlgN8G07K3SJnw==
494+
490495
esbuild@^0.15.9:
491496
version "0.15.16"
492497
resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.15.16.tgz"
@@ -551,6 +556,11 @@ form-data@^4.0.0:
551556
combined-stream "^1.0.8"
552557
mime-types "^2.1.12"
553558

559+
fsevents@~2.3.2:
560+
version "2.3.2"
561+
resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
562+
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
563+
554564
function-bind@^1.1.1:
555565
version "1.1.1"
556566
resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"

server/yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1541,6 +1541,11 @@ fs.realpath@^1.0.0:
15411541
resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
15421542
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
15431543

1544+
fsevents@~2.3.2:
1545+
version "2.3.2"
1546+
resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
1547+
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
1548+
15441549
function-bind@^1.1.1:
15451550
version "1.1.1"
15461551
resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"

0 commit comments

Comments
 (0)