Merge pull request #140 from Coding-Club-IITG/ps

Approve/Reject Contributions from profile

Author: aditya-samal

client/src/api/Contribution.js

@@ -11,3 +11,8 @@ export const GetMyContributions = async () => {
     const resp = await axios.get(`${root}/api/contribution/`);
     return resp;
 };
+
+export const GetBrContribution = async (courses) => {
+    const resp = await axios.post(`${root}/api/contribution/br`, { courses });
+    return resp;
+}

client/src/screens/dashboard/components/addcoursemodal/components/wrapper/styles.scss

@@ -3,7 +3,6 @@
     width: 40%;
     padding: 3rem 4rem;
     background-color: white;
-    height: auto;
     position: absolute;
 
     z-index: 200;
@@ -16,7 +15,7 @@
 }
 .add-course-scroll {
     overflow: auto;
-    max-height: 250px;
+    max-height: 25vh;
 }
 
 @media screen and (max-width:1270px) {

client/src/screens/dashboard/components/addcoursemodal/index.jsx

@@ -80,7 +80,7 @@ const AddCourseModal = ({ handleAddCourse }) => {
                 <form onSubmit={(e) => e.preventDefault()}>
                     <div className="course" style={{marginTop: "1.5rem"}}>
                         <label htmlFor="course" className="label_course">
-                            KEYWORD :
+                            KEY :
                         </label>
                         <input
                             placeholder="Course Code"

client/src/screens/profile.js/components/Contri_section/ContributionCard/Buttons/index.jsx

@@ -1,5 +1,11 @@
 import "./styles.scss";
+
 const Button = (props) => {
-  return <div className="btn">{props.text}</div>;
+  return (
+    <div className="btn" onClick={props.onClick}>
+      {props.text}
+    </div>
+  );
 };
-export default Button;
+
+export default Button;

client/src/screens/profile.js/components/Contri_section/ContributionCard/Buttons/styles.scss

@@ -6,7 +6,7 @@
     font-size: 1rem;
     cursor: pointer;
     transition: 200ms ease;
-
+    
     &:hover {
         transform: scale(1.02);
     }

client/src/screens/profile.js/components/Contri_section/ContributionCard/ConfirmDialog.jsx

@@ -0,0 +1,155 @@
+import React from "react";
+import tick from "./assets/tick.svg";
+import cross from "./assets/cross.svg";
+
+const styles = {
+    overlay: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1000,
+    },
+    dialog: {
+        backgroundColor: "#fff",
+        padding: "25px 30px",
+        borderRadius: "8px",
+        maxWidth: "400px",
+        width: "90%",
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.2)",
+        textAlign: "center",
+        fontFamily: "sans-serif",
+    },
+
+    iconImage: {
+        width: "80px",
+        height: "80px",
+        margin: "1em",
+    },
+    heading: {
+        fontSize: "2em",
+    },
+    message: {
+        fontSize: "1em",
+        color: "#374151",
+        margin: "1em",
+    },
+    buttonGroup: {
+        display: "flex",
+        justifyContent: "center",
+        gap: "1em",
+    },
+    confirmBtn: {
+        display: "flex",
+        alignItems: "center",
+        backgroundColor: "#22c55e",
+        color: "#fff",
+        border: "none",
+        padding: "10px 18px",
+        borderRadius: "5px",
+        cursor: "pointer",
+        fontWeight: "bold",
+        fontSize: "1em",
+    },
+    deleteBtn: {
+        display: "flex",
+        alignItems: "center",
+        backgroundColor: "#ef4444",
+        color: "#fff",
+        border: "none",
+        padding: "10px 18px",
+        borderRadius: "5px",
+        cursor: "pointer",
+        fontWeight: "bold",
+        fontSize: "1em",
+    },
+    disabledBtn: {
+        display: "flex",
+        alignItems: "center",
+        backgroundColor: "#9ca3af",
+        color: "#fff",
+        border: "none",
+        padding: "10px 18px",
+        borderRadius: "5px",
+        cursor: "not-allowed",
+        fontWeight: "bold",
+        fontSize: "1em",
+        opacity: 0.6,
+    },
+    cancelBtn: {
+        backgroundColor: "#9ca3af",
+        color: "#fff",
+        border: "none",
+        padding: "10px 18px",
+        borderRadius: "5px",
+        cursor: "pointer",
+        fontWeight: "bold",
+        fontSize: "1em",
+    },
+    cancelBtnDisabled: {
+        backgroundColor: "#d1d5db",
+        color: "#6b7280",
+        border: "none",
+        padding: "10px 18px",
+        borderRadius: "5px",
+        cursor: "not-allowed",
+        fontWeight: "bold",
+        fontSize: "1em",
+        opacity: 0.6,
+    },
+};
+
+const ConfirmDialog = ({ isOpen, type, onConfirm, onCancel, isLoading = false }) => {
+    if (!isOpen) return null;
+
+    const isDelete = type === "delete";
+
+    const message = isDelete
+        ? "Do you want to permanently delete this file? This action cannot be undone."
+        : "Do you want to verify this file? Once verified, it will be visible to all users.";
+
+    const getButtonStyle = () => {
+        if (isLoading) return styles.disabledBtn;
+        return isDelete ? styles.deleteBtn : styles.confirmBtn;
+    };
+
+    const getButtonText = () => {
+        if (isLoading) {
+            return isDelete ? "Deleting..." : "Verifying...";
+        }
+        return isDelete ? "Delete" : "Verify";
+    };
+
+    return (
+        <div style={styles.overlay}>
+            <div style={styles.dialog}>
+                <img
+                    src={isDelete ? cross : tick}
+                    alt={isDelete ? "Delete" : "Verify"}
+                    style={styles.iconImage}
+                />
+                <h3 style={styles.heading}>Are you sure?</h3>
+                <p style={styles.message}>{message}</p>
+                <div style={styles.buttonGroup}>
+                    <button style={getButtonStyle()} onClick={onConfirm} disabled={isLoading}>
+                        {getButtonText()}
+                    </button>
+                    <button
+                        style={isLoading ? styles.cancelBtnDisabled : styles.cancelBtn}
+                        onClick={onCancel}
+                        disabled={isLoading}
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmDialog;

client/src/screens/profile.js/components/Contri_section/ContributionCard/assets/cross.svg

@@ -1,22 +1,87 @@
 import "./styles.scss";
 import Button from "./Buttons";
+import { toast } from "react-toastify";
 import date from "date-and-time";
+import { verifyFile, unverifyFile } from "../../../../../api/File";
+import { useState } from "react";
+import ConfirmDialog from "./ConfirmDialog";
+
 export default function ContributionCard(props) {
+    const [showDialog, setShowDialog] = useState(false);
+    const [dialogType, setDialogType] = useState("verify");
+    const [onConfirmAction, setOnConfirmAction] = useState(() => () => {});
+    const handleVerify = async () => {
+        setDialogType("verify");
+        setOnConfirmAction(() => async () => {
+            try {
+                //console.log("Verifying file:", props?.file?._id);
+                await verifyFile(props?.file?._id);
+                props.verify();
+                toast.success("File verified!");
+            } catch (err) {
+                console.error("Error verifying:", err);
+                toast.error("Failed to verify file.");
+            } finally {
+                setShowDialog(false);
+            }
+        });
+        setShowDialog(true);
+    };
+
+    const handleUnverify = async () => {
+        setDialogType("delete");
+        setOnConfirmAction(() => async () => {
+            try {
+                await unverifyFile(props?.file?._id, props?.file?.fileId, props.parentFolder);
+                props.unverify();
+                toast.success("File deleted!");
+            } catch (err) {
+                console.error("Error deleting:", err);
+                toast.error("Failed to delete file.");
+            } finally {
+                setShowDialog(false);
+            }
+        });
+        setShowDialog(true);
+    };
+
     const now = new Date(props.uploadDate);
     const pattern = date.compile(`DD MMM YYYY   hh:mm A`);
     const finalDate = date.format(now, pattern);
     return (
         <div className="main_card">
             <div className="path">
                 <p>{finalDate}</p>
-                <p>
-                    {props.courseCode}
-                </p>
+                <p>{props.courseCode}</p>
             </div>
-            <p className="content">{props.content}</p>
-            <div className="btn">
-                <Button text={props.isApproved === true ? "APPROVED" : "PENDING"} />
+            <p className="content">
+                <a className="file-link" href={props?.file?.webUrl} target="_blank">
+                    {props?.file?.name}
+                </a>
+            </p>
+
+            <div>
+                {props.isBR ? (
+                    <div className="br_btn">
+                        <div className="btn approve">
+                            <Button text="APPROVE" onClick={handleVerify} />
+                        </div>
+                        <div className="btn delete">
+                            <Button text="DELETE" onClick={handleUnverify} />
+                        </div>
+                    </div>
+                ) : (
+                    <div className="btn approve">
+                        <Button text={props?.file?.isVerified === true ? "APPROVED" : "PENDING"} />
+                    </div>
+                )}
             </div>
+            <ConfirmDialog
+                isOpen={showDialog}
+                type={dialogType}
+                onConfirm={onConfirmAction}
+                onCancel={() => setShowDialog(false)}
+            />
         </div>
     );
 }

client/src/screens/profile.js/components/Contri_section/ContributionCard/assets/tick.svg

@@ -7,6 +7,21 @@
     align-items: center;
     margin-bottom: 20px;
 
+    .br_btn {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+    }
+    
+    .file-link {
+        text-decoration: none;
+        color: black;
+    }
+
+    .file-link:hover {
+        color: blue;
+    }
+
     .path {
         display: flex;
         flex-direction: column;
@@ -28,7 +43,10 @@
     .content {
         justify-content: start;
         align-self: flex-start;
-        width: 50%;
+        width: 400px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         margin: 0px 8px 0px 8px;
     }
 }
@@ -130,4 +148,4 @@
             font-size: 0.8rem;
         }
     }
-}
+}