From b88a35f518645aa67acb5dd1fbb1e5eb069d0ad7 Mon Sep 17 00:00:00 2001
From: 2004yash <134356616+2004yash@users.noreply.github.com>
Date: Mon, 23 Sep 2024 19:35:52 +0530
Subject: [PATCH] added edit option in leads page

---
 components/leadspage.tsx | 497 ++++++++++++++++++++++++++-------------
 package-lock.json        |   1 +
 2 files changed, 338 insertions(+), 160 deletions(-)

diff --git a/components/leadspage.tsx b/components/leadspage.tsx
index 90185d6..f884d2d 100644
--- a/components/leadspage.tsx
+++ b/components/leadspage.tsx
@@ -1,11 +1,14 @@
 "use client";
 
+
 import React, { useState, useEffect } from 'react';
 import { getAuth, onAuthStateChanged } from 'firebase/auth';
-import { getFirestore, doc, getDoc, setDoc, collection, getDocs, addDoc } from 'firebase/firestore';
+import { getFirestore, doc, getDoc, getDocs, collection, addDoc, updateDoc, deleteDoc } from 'firebase/firestore';
 import { getStorage, ref, uploadBytes, getDownloadURL } from 'firebase/storage';
 import { auth } from "@/Firebase";
 import { db } from "@/Firebase";
+import { ClipLoader } from 'react-spinners'; // If you're using react-spinners
+
 
 interface Lead {
   id: string;
@@ -17,28 +20,50 @@ interface Lead {
 }
 
 const Leads: React.FC = () => {
+  const [loading, setLoading] = useState(true);
+
   const [showForm, setShowForm] = useState(false);
   const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false);
   const [currentLeads, setCurrentLeads] = useState<Lead[]>([]);
   const [alumniLeads, setAlumniLeads] = useState<Lead[]>([]);
+  const [selectedLead, setSelectedLead] = useState<Lead | null>(null); // For editing leads
 
-  useEffect(() => {
-    // const auth = getAuth();
-    // const db = getFirestore();
+  // Fetch leads from Firestore
+  const fetchLeads = async () => {
+    try {
+      const leadsRef = collection(db, "leads");
+      const querySnapshot = await getDocs(leadsRef);
+      const currentLeads: Lead[] = [];
+      const alumniLeads: Lead[] = [];
 
+      querySnapshot.forEach((doc) => {
+        const leadData = doc.data() as Lead;
+        if (leadData.position === "Current") {
+          currentLeads.push({ ...leadData, id: doc.id });
+        } else {
+          alumniLeads.push({ ...leadData, id: doc.id });
+        }
+      });
+
+      setCurrentLeads(currentLeads);
+      setAlumniLeads(alumniLeads);
+      await fetchLeads();
+        setLoading(false);
+    } catch (error) {
+      console.error("Error fetching leads:", error);
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
     const checkAdmin = async (uid: string) => {
       try {
-        console.log(uid);
         const docRef = doc(db, "admin", uid);
         const docSnap = await getDoc(docRef);
         if (docSnap.exists()) {
-          console.log("helo")
           setIsAdminLoggedIn(true);
-          console.log("checked")
-          // isAdminLoggedIn(true);
         } else {
           setIsAdminLoggedIn(false);
-          console.log(docRef)
         }
       } catch (error) {
         console.error("Error checking admin status:", error);
@@ -54,33 +79,74 @@ const Leads: React.FC = () => {
       }
     });
 
-    // Fetch leads from Firestore
-    const fetchLeads = async () => {
-      const leadsRef = collection(db, "leads");
-      const querySnapshot = await getDocs(leadsRef);
-      const currentLeads: Lead[] = [];
-      const alumniLeads: Lead[] = [];
+    fetchLeads(); // Call fetchLeads when component mounts
 
-      querySnapshot.forEach((doc) => {
-        const leadData = doc.data() as Lead;
-        if (leadData.position === "Current") {
-          currentLeads.push({ ...leadData, id: doc.id });
-        } else {
-          alumniLeads.push({ ...leadData, id: doc.id });
-        }
-      });
+    return () => unsubscribe();
+  }, []);
 
-      setCurrentLeads(currentLeads);
-      setAlumniLeads(alumniLeads);
-    };
+  const handleAddOrEditLead = async () => {
+    if (!selectedLead?.name || !selectedLead?.position) {
+      alert("Please fill in all required fields (Name and Position).");
+      return;
+    }
 
-    fetchLeads();
+    try {
+      const leadData = { ...selectedLead };
+      const storage = getStorage();
 
-    return () => unsubscribe();
-  }, []);
+      let imageUrl = selectedLead.imageUrl;
+
+      if (selectedLead.imageUrl && selectedLead.imageUrl.startsWith("blob")) {
+        const imageRef = ref(storage, `images/${selectedLead.name}`);
+        const imageBlob = await fetch(selectedLead.imageUrl).then((r) => r.blob());
+        await uploadBytes(imageRef, imageBlob);
+        imageUrl = await getDownloadURL(imageRef);
+      }
+
+      if (selectedLead.id) {
+        // Update lead in Firestore
+        await updateDoc(doc(db, 'leads', selectedLead.id), {
+          ...leadData,
+          imageUrl: imageUrl,
+        });
+        alert("Lead updated successfully");
+      } else {
+        // Add new lead to Firestore
+        await addDoc(collection(db, 'leads'), {
+          ...leadData,
+          imageUrl: imageUrl,
+        });
+        alert("Lead added successfully");
+      }
+
+      setShowForm(false);
+      setSelectedLead(null);
+      await fetchLeads(); // Refresh leads after adding/editing
+    } catch (error) {
+      console.error("Error adding/updating lead:", error);
+      alert("An error occurred. Check the console for details.");
+    }
+  };
+
+  const handleEditLead = (lead: Lead) => {
+    setSelectedLead(lead);
+    setShowForm(true);
+  };
+
+  const handleDeleteLead = async (id: string) => {
+    try {
+      await deleteDoc(doc(db, 'leads', id));
+      alert("Lead deleted successfully");
+      await fetchLeads(); // Refresh leads after deleting
+    } catch (error) {
+      console.error("Error deleting lead:", error);
+      alert("An error occurred. Check the console for details.");
+    }
+  };
 
   const toggleForm = () => {
     setShowForm(!showForm);
+    setSelectedLead(null); // Reset form for new lead
   };
 
   return (
@@ -101,14 +167,20 @@ const Leads: React.FC = () => {
             zIndex: 1000,
           }}
         >
-          Add Lead
+          {selectedLead ? 'Edit Lead' : 'Add Lead'}
         </button>
       )}
 
-      {showForm && <LeadForm closeForm={toggleForm} />}
+      {showForm && (
+        <LeadForm
+          closeForm={toggleForm}
+          selectedLead={selectedLead}
+          onLeadUpdate={fetchLeads} // Pass fetchLeads to the form for updating leads
+        />
+      )}
 
-      <LeadSection title="Current Leads" leads={currentLeads} />
-      <LeadSection title="Alumni Leads" leads={alumniLeads} />
+      <LeadSection title="Current Leads" leads={currentLeads} onEdit={handleEditLead} onDelete={handleDeleteLead} isAdminLoggedIn={isAdminLoggedIn} />
+      <LeadSection title="Alumni Leads" leads={alumniLeads} onEdit={handleEditLead} onDelete={handleDeleteLead} isAdminLoggedIn={isAdminLoggedIn} />
     </section>
   );
 };
@@ -116,9 +188,12 @@ const Leads: React.FC = () => {
 interface LeadSectionProps {
   title: string;
   leads: Lead[];
+  onEdit: (lead: Lead) => void;
+  onDelete: (id: string) => void;
+  isAdminLoggedIn: boolean; // Added prop to handle admin check
 }
 
-const LeadSection: React.FC<LeadSectionProps> = ({ title, leads }) => (
+const LeadSection: React.FC<LeadSectionProps> = ({ title, leads, onEdit, onDelete, isAdminLoggedIn }) => (
   <div style={{ padding: '1rem', marginTop: '2rem' }}>
     <h3 style={{
       textAlign: 'center',
@@ -140,16 +215,23 @@ const LeadSection: React.FC<LeadSectionProps> = ({ title, leads }) => (
       margin: '0 auto',
     }}>
       {leads.map((lead) => (
-        <div key={lead.id} style={{
-          backgroundImage: `url(${lead.imageUrl})`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          borderRadius: '15px',
-          height: '325px',
-          width: '250px',
-          position: 'relative',
-          overflow: 'hidden',
-        }}>
+        <div
+          key={lead.id}
+          style={{
+            backgroundImage: `url(${lead.imageUrl})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            borderRadius: '15px',
+            height: '325px',
+            width: '250px',
+            position: 'relative',
+            overflow: 'hidden',
+            cursor: isAdminLoggedIn ? 'pointer' : 'default', // Change cursor if admin is logged in
+          }}
+          onMouseEnter={(e) => isAdminLoggedIn && (e.currentTarget.style.transform = 'scale(1.05)')}
+          onMouseLeave={(e) => isAdminLoggedIn && (e.currentTarget.style.transform = 'scale(1)')}
+          onClick={() => isAdminLoggedIn && onEdit(lead)} // Only allow edit on click if admin
+        >
           <div style={{
             position: 'absolute',
             bottom: '0',
@@ -160,9 +242,27 @@ const LeadSection: React.FC<LeadSectionProps> = ({ title, leads }) => (
             textAlign: 'center',
           }}>
             <h3 style={{ margin: '0', fontSize: '1.2rem', fontWeight: 'bold' }}>{lead.name}</h3>
-            <p style={{ margin: '0', fontSize: '1rem' }}>{lead.position}</p>
             <p style={{ margin: '0', fontSize: '1rem' }}>{lead.organization}</p>
             <p style={{ margin: '0', fontSize: '1rem' }}>{lead.additionalInfo}</p>
+            {isAdminLoggedIn && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete(lead.id);
+                }}
+                style={{
+                  backgroundColor: 'red',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '5px',
+                  cursor: 'pointer',
+                  padding: '0.5rem 1rem',
+                  marginTop: '0.5rem',
+                }}
+              >
+                Delete
+              </button>
+            )}
           </div>
         </div>
       ))}
@@ -172,139 +272,216 @@ const LeadSection: React.FC<LeadSectionProps> = ({ title, leads }) => (
 
 interface LeadFormProps {
   closeForm: () => void;
+  selectedLead: Lead | null;
+  onLeadUpdate: () => void;
 }
 
-const LeadForm: React.FC<LeadFormProps> = ({ closeForm }) => {
-  const [newLead, setNewLead] = useState<Partial<Lead>>({
-    name: '',
-    position: 'Current',
-    organization: '',
-    additionalInfo: '',
-  });
-  const [image, setImage] = useState<File | null>(null);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-    setNewLead({
-      ...newLead,
-      [e.target.name]: e.target.value,
-    });
+const LeadForm: React.FC<LeadFormProps> = ({ closeForm, selectedLead, onLeadUpdate }) => {
+  const [lead, setLead] = useState<Lead>(
+    selectedLead || { id: '', name: '', position: '', organization: '', additionalInfo: '', imageUrl: '' }
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setLead((prevLead) => ({ ...prevLead, [name]: value }));
   };
 
-  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
-      setImage(e.target.files[0]);
+      setLead((prevLead) => ({
+        ...prevLead,
+        imageUrl: URL.createObjectURL(e.target.files[0]),
+      }));
     }
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!newLead.name || !image) {
-      alert("Please provide the lead name and image.");
-      return;
-    }
-
-    const db = getFirestore();
-    const storage = getStorage();
-
-    try {
-      // Upload the image to Firebase Storage
-      const imageRef = ref(storage, `images/${newLead.name}`);
-      await uploadBytes(imageRef, image);
-      const imageUrl = await getDownloadURL(imageRef);
-
-      // Add lead to Firestore
-      await addDoc(collection(db, 'leads'), {
-        ...newLead,
-        imageUrl: imageUrl,
-      });
-
-      console.log("New Lead Submitted:", { ...newLead, imageUrl });
-      closeForm();
-    } catch (error) {
-      console.error("Error adding new lead:", error);
-    }
+    await onLeadUpdate(); // Call onLeadUpdate to refresh the leads
+    closeForm(); // Close the form after submission
   };
 
   return (
-    <form
-      onSubmit={handleSubmit}
-      style={{
-        backgroundColor: '#222',
-        color: '#fff',
-        padding: '1rem',
-        margin: '2rem auto',
-        width: '300px',
-        borderRadius: '10px',
-        border: '1px solid #555',
-      }}
-    >
-      <h2 style={{ textAlign: 'center' }}>Add New Lead</h2>
-      <div style={{ marginBottom: '1rem' }}>
-        <label>Name:</label>
-        <input
-          type="text"
-          name="name"
-          value={newLead.name || ''}
-          onChange={handleChange}
-          style={{ display: 'block', width: '100%', padding: '0.5rem', marginBottom: '0.5rem', color: '#000' }} // Make text color black for visibility
-        />
-      </div>
-      <div style={{ marginBottom: '1rem' }}>
-        <label>Position:</label>
-        <select
-          name="position"
-          value={newLead.position}
-          onChange={handleChange}
-          style={{ display: 'block', width: '100%', padding: '0.5rem', marginBottom: '0.5rem', color: '#000' }} // Dropdown menu
-        >
-          <option value="Current">Current</option>
-          <option value="Alumni">Alumni</option>
-        </select>
-      </div>
-      <div style={{ marginBottom: '1rem' }}>
-        <label>Organization:</label>
-        <input
-          type="text"
-          name="organization"
-          value={newLead.organization || ''}
-          onChange={handleChange}
-          style={{ display: 'block', width: '100%', padding: '0.5rem', marginBottom: '0.5rem', color: '#000' }} // Make text color black for visibility
-        />
-      </div>
-      <div style={{ marginBottom: '1rem' }}>
-        <label>Additional Info:</label>
-        <input
-          type="text"
-          name="additionalInfo"
-          value={newLead.additionalInfo || ''}
-          onChange={handleChange}
-          style={{ display: 'block', width: '100%', padding: '0.5rem', marginBottom: '0.5rem', color: '#000' }} // Make text color black for visibility
-        />
-      </div>
-      <div style={{ marginBottom: '1rem' }}>
-        <label>Image:</label>
-        <input
-          type="file"
-          accept="image/*"
-          onChange={handleImageChange}
-          style={{ display: 'block', width: '100%', padding: '0.5rem', marginBottom: '0.5rem', color: '#000' }} // File input
-        />
-      </div>
-      <button
-        type="submit"
-        style={{
+    <div style={{
+      position: 'fixed',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      zIndex: 1001,
+      padding: '2rem',
+      paddingTop: '0.5rem',
+      backgroundColor: '#ffffff',
+      borderRadius: '10px',
+      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+      width: '400px',
+      maxWidth: '90%',
+      maxHeight: '90vh',
+      color: 'black'
+    }}>
+      <h2 style={{
+        fontSize: '1.5rem',
+        fontWeight: 'bold',
+        textAlign: 'center',
+        color: '#000000',
+        // marginBottom: '1rem',
+        marginTop: '0px'
+      }}>
+        {selectedLead ? 'Edit Lead' : 'Add Lead'}
+      </h2>
+      <form onSubmit={handleSubmit}>
+        <div style={{ marginBottom: '1rem' }}>
+          <label htmlFor="name" style={{
+            display: 'block',
+            fontSize: '1rem',
+            // marginBottom: '0.5rem',
+            color: '#333',
+          }}>Name:</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            value={lead.name}
+            onChange={handleChange}
+            required
+            style={{
+              width: '100%',
+              // padding: '0.5rem',
+              borderRadius: '5px',
+              border: '1px solid #ccc',
+              fontSize: '1rem',
+              outline: 'none',
+              boxSizing: 'border-box',
+            }}
+          />
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label htmlFor="position" style={{
+            display: 'block',
+            fontSize: '1rem',
+            // marginBottom: '0.5rem',
+            color: '#333',
+          }}>Position:</label>
+          <input
+            type="text"
+            id="position"
+            name="position"
+            value={lead.position}
+            onChange={handleChange}
+            required
+            style={{
+              width: '100%',
+              // padding: '0.5rem',
+              borderRadius: '5px',
+              border: '1px solid #ccc',
+              fontSize: '1rem',
+              outline: 'none',
+              boxSizing: 'border-box',
+            }}
+          />
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label htmlFor="organization" style={{
+            display: 'block',
+            fontSize: '1rem',
+            // marginBottom: '0.5rem',
+            color: '#333',
+          }}>Organization:</label>
+          <input
+            type="text"
+            id="organization"
+            name="organization"
+            value={lead.organization}
+            onChange={handleChange}
+            style={{
+              width: '100%',
+              // padding: '0.5rem',
+              borderRadius: '5px',
+              border: '1px solid #ccc',
+              fontSize: '1rem',
+              outline: 'none',
+              boxSizing: 'border-box',
+            }}
+          />
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label htmlFor="additionalInfo" style={{
+            display: 'block',
+            fontSize: '1rem',
+            // marginBottom: '0.5rem',
+            color: '#333',
+          }}>Additional Info:</label>
+          <textarea
+            id="additionalInfo"
+            name="additionalInfo"
+            value={lead.additionalInfo}
+            onChange={handleChange}
+            style={{
+              width: '100%',
+              padding: '0.5rem',
+              borderRadius: '5px',
+              border: '1px solid #ccc',
+              fontSize: '1rem',
+              outline: 'none',
+              boxSizing: 'border-box',
+              resize: 'vertical',
+            }}
+          />
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label htmlFor="image" style={{
+            display: 'block',
+            fontSize: '1rem',
+            marginBottom: '0.5rem',
+            color: '#333',
+          }}>Image:</label>
+          <input
+            type="file"
+            id="image"
+            onChange={handleFileChange}
+            style={{
+              width: '100%',
+              padding: '0.5rem',
+              borderRadius: '5px',
+              border: '1px solid #ccc',
+              fontSize: '1rem',
+              outline: 'none',
+              boxSizing: 'border-box',
+            }}
+          />
+          {/* {lead.imageUrl && ( */}
+          {/* <div style={{ marginTop: '1rem' }}>
+              <img src={lead.imageUrl} alt="Selected" style={{ maxWidth: '100%', borderRadius: '5px' }} />
+            </div>
+          // )} */}
+        </div>
+        <button type="submit" style={{
           backgroundColor: '#00ff33',
-          color: '#000',
-          padding: '0.5rem 1rem',
+          color: '#000000',
           border: 'none',
           borderRadius: '5px',
+          padding: '0.5rem 1rem',
           cursor: 'pointer',
-        }}
-      >
-        Submit
+          width: '100%',
+          fontSize: '1rem',
+        }}>
+          {selectedLead ? 'Update Lead' : 'Add Lead'}
+        </button>
+      </form>
+      <button onClick={closeForm} style={{
+        backgroundColor: '#999',
+        color: '#fff',
+        border: 'none',
+        borderRadius: '5px',
+        padding: '0.5rem 1rem',
+        cursor: 'pointer',
+        marginTop: '1rem',
+        width: '100%',
+        fontSize: '1rem',
+      }}>
+        Cancel
       </button>
-    </form>
+    </div>
   );
 };
 
-export default Leads;
\ No newline at end of file
+export default Leads;
diff --git a/package-lock.json b/package-lock.json
index 48c6987..525e014 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15075,6 +15075,7 @@
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz",
       "integrity": "sha512-2Izq+qgQ08HTofCVEdcAQCXFEYfqTDdfeDQJeo/HHQiQJD4imOicNLhkfN2eh1NYEWVOX4D9ok2lhuDB0z3Aag==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"