delete option added

Vinamra-21 · Oct 11, 2024 · 26772aa · 26772aa
1 parent 3994ab8
commit 26772aa
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 89 deletions.
diff --git a/app/components/News.module.css → app/components/Highlights.module.css b/app/components/News.module.css → app/components/Highlights.module.css
diff --git a/app/components/News.tsx → app/components/Highlights.tsx b/app/components/News.tsx → app/components/Highlights.tsx
@@ -1,10 +1,11 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { auth, db } from "./firebase";
-import { collection, getDocs, updateDoc, doc, addDoc } from "firebase/firestore";
+import { auth, db, storage } from "./firebase";
+import { collection, getDocs, updateDoc, doc, addDoc, deleteDoc } from "firebase/firestore";
+import { ref, uploadBytes, getDownloadURL, deleteObject } from "firebase/storage";
 import { onAuthStateChanged } from "firebase/auth";
 import { signInWithGoogle, logout } from "./authservice";
-import styles from "./News.module.css";
+import styles from "./Highlights.module.css";
 
 interface NewsItem {
   id: string;
@@ -20,10 +21,11 @@ const NewsAndEvents: React.FC = () => {
   const [editing, setEditing] = useState<string | null>(null);
   const [editContent, setEditContent] = useState<string>("");
   const [editHeadline, setEditHeadline] = useState<string>("");
-  const [editPicture, setEditPicture] = useState<string>("");
+  const [editImageFile, setEditImageFile] = useState<File | null>(null); 
+  const [editImageURL, setEditImageURL] = useState<string>(""); 
   const [newHeadline, setNewHeadline] = useState<string>("");
   const [newContent, setNewContent] = useState<string>("");
-  const [newPicture, setNewPicture] = useState<string>("");
+  const [newImageFile, setNewImageFile] = useState<File | null>(null); 
   const [newNews, setNewNews] = useState<boolean>(true);
 
   useEffect(() => {
@@ -63,23 +65,28 @@ const NewsAndEvents: React.FC = () => {
   };
 
   const handleAddItem = async () => {
-    if (!newHeadline || !newContent) return;
+    if (!newHeadline || !newContent || !newImageFile) return;
+
     try {
+      const storageRef = ref(storage, `News/${newImageFile.name}`);
+      await uploadBytes(storageRef, newImageFile);
+      const imageUrl = await getDownloadURL(storageRef);
+
       const docRef = await addDoc(collection(db, "News"), {
         Headline: newHeadline,
         Content: newContent,
-        Image: newPicture,
+        Image: imageUrl,
         News: newNews,
       });
 
       setItems((prevItems) => [
         ...prevItems,
-        { id: docRef.id, Headline: newHeadline, Content: newContent, Image: newPicture, News: newNews },
+        { id: docRef.id, Headline: newHeadline, Content: newContent, Image: imageUrl, News: newNews },
       ]);
 
       setNewHeadline("");
       setNewContent("");
-      setNewPicture("");
+      setNewImageFile(null); 
       setNewNews(true);
     } catch (error: any) {
       console.error("Error adding item:", error);
@@ -90,34 +97,60 @@ const NewsAndEvents: React.FC = () => {
     setEditing(id);
     setEditHeadline(Headline);
     setEditContent(Content);
-    setEditPicture(Image);
+    setEditImageURL(Image);
+    setEditImageFile(null); 
   };
 
   const saveEdit = async (id: string) => {
     try {
+      let imageUrl = editImageURL;
+
+      if (editImageFile) {
+        const storageRef = ref(storage, `News/${editImageFile.name}`);
+        await uploadBytes(storageRef, editImageFile);
+        imageUrl = await getDownloadURL(storageRef);
+      }
+
       const itemRef = doc(db, "News", id);
       await updateDoc(itemRef, {
         Headline: editHeadline,
         Content: editContent,
-        Image: editPicture
+        Image: imageUrl,
       });
+
       setItems((prevItems) =>
         prevItems.map((item) =>
-          item.id === id ? { ...item, Headline: editHeadline, Content: editContent, Image: editPicture } : item
+          item.id === id ? { ...item, Headline: editHeadline, Content: editContent, Image: imageUrl } : item
         )
       );
       setEditing(null);
-    } catch (error: any) {
+    }
+    catch (error: any) {
       console.error("Error updating document:", error);
     }
   };
 
+  const handleDelete = async (id: string, imageUrl: string) => {
+    try {
+      await deleteDoc(doc(db, "News", id));
+      const imageRef = ref(storage, imageUrl);
+      if(imageRef){
+        await deleteObject(imageRef);
+      }
+
+
+      setItems((prevItems) => prevItems.filter((item) => item.id !== id));
+    }
+    catch (error: any) {
+      console.error("Error deleting document or image:", error);
+    }
+  };
+
   const newsItems = items.filter((item) => item.News);
   const eventItems = items.filter((item) => !item.News);
 
   return (
     <div>
-      {/* Events Section */}
       <section className={styles.section}>
         <div className={styles.container}>
           <div className={styles.eventsSection}>
@@ -127,7 +160,6 @@ const NewsAndEvents: React.FC = () => {
                 <li key={event.id} className={styles.li}>
                   <div className={styles.textContainer}>
                     <h3 className={styles.h3}>{event.Headline}</h3>
-                    <p className={styles.p}>{event.Content}</p>
                     {editing === event.id ? (
                       <div>
                         <input
@@ -142,9 +174,8 @@ const NewsAndEvents: React.FC = () => {
                           className={styles.textarea}
                         />
                         <input
-                          type="text"
-                          value={editPicture}
-                          onChange={(e) => setEditPicture(e.target.value)}
+                          type="file"
+                          onChange={(e) => setEditImageFile(e.target.files ? e.target.files[0] : null)}
                           className={styles.input}
                         />
                         <div className={styles.editingButtons}>
@@ -163,12 +194,20 @@ const NewsAndEvents: React.FC = () => {
                       <p className={styles.p}>{event.Content}</p>
                     )}
                     {isAuthenticated && editing !== event.id && (
-                      <button
-                        onClick={() => handleEdit(event.id, event.Content, event.Headline, event.Image)}
-                        className={styles.button}
-                      >
-                        Edit
-                      </button>
+                      <>
+                        <button
+                          onClick={() => handleEdit(event.id, event.Content, event.Headline, event.Image)}
+                          className={styles.button}
+                        >
+                          Edit
+                        </button>
+                        <button
+                          onClick={() => handleDelete(event.id, event.Image)}
+                          className={`${styles.button} ${styles.deleteButton}`}
+                        >
+                          Delete
+                        </button>
+                      </>
                     )}
                   </div>
                   <img src={event.Image} alt="event image" className={styles.image} />
@@ -179,7 +218,6 @@ const NewsAndEvents: React.FC = () => {
         </div>
       </section>
 
-      {/* News Section */}
       <section className={styles.section}>
         <div className={styles.container}>
           <div className={styles.newsSection}>
@@ -203,9 +241,8 @@ const NewsAndEvents: React.FC = () => {
                           className={styles.textarea}
                         />
                         <input
-                          type="text"
-                          value={editPicture}
-                          onChange={(e) => setEditPicture(e.target.value)}
+                          type="file"
+                          onChange={(e) => setEditImageFile(e.target.files ? e.target.files[0] : null)}
                           className={styles.input}
                         />
                         <div className={styles.editingButtons}>
@@ -224,12 +261,20 @@ const NewsAndEvents: React.FC = () => {
                       <p className={styles.p}>{news.Content}</p>
                     )}
                     {isAuthenticated && editing !== news.id && (
-                      <button
-                        onClick={() => handleEdit(news.id, news.Content, news.Headline, news.Image)}
-                        className={styles.button}
-                      >
-                        Edit
-                      </button>
+                      <>
+                        <button
+                          onClick={() => handleEdit(news.id, news.Content, news.Headline, news.Image)}
+                          className={styles.button}
+                        >
+                          Edit
+                        </button>
+                        <button
+                          onClick={() => handleDelete(news.id, news.Image)}
+                          className={`${styles.button} ${styles.deleteButton}`}
+                        >
+                          Delete
+                        </button>
+                      </>
                     )}
                   </div>
                   <img src={news.Image} alt="news image" className={styles.image} />
@@ -240,53 +285,50 @@ const NewsAndEvents: React.FC = () => {
         </div>
       </section>
 
-      {/* Sign-in to Add News or Event */}
-        <div className={styles.container}>
-          {isAuthenticated ? (
-            <>
-              <div className={styles.addItemForm}>
+      <div className={styles.container}>
+        {isAuthenticated ? (
+          <>
+            <div className={styles.addItemForm}>
+              <input
+                type="text"
+                placeholder="Headline"
+                value={newHeadline}
+                onChange={(e) => setNewHeadline(e.target.value)}
+                className={styles.input}
+              />
+              <textarea
+                placeholder="Content"
+                value={newContent}
+                onChange={(e) => setNewContent(e.target.value)}
+                className={styles.textarea}
+              />
+              <input
+                type="file"
+                onChange={(e) => setNewImageFile(e.target.files ? e.target.files[0] : null)}
+                className={styles.input}
+              />
+              <label>
                 <input
-                  type="text"
-                  placeholder="Headline"
-                  value={newHeadline}
-                  onChange={(e) => setNewHeadline(e.target.value)}
-                  className={styles.input}
-                />
-                <textarea
-                  placeholder="Content"
-                  value={newContent}
-                  onChange={(e) => setNewContent(e.target.value)}
-                  className={styles.textarea}
+                  type="checkbox"
+                  checked={newNews}
+                  onChange={(e) => setNewNews(e.target.checked)}
                 />
-                <input
-                  type="text"
-                  placeholder="Image Link"
-                  value={newPicture}
-                  onChange={(e) => setNewPicture(e.target.value)}
-                  className={styles.input}
-                />
-                <label>
-                  <input
-                    type="checkbox"
-                    checked={newNews}
-                    onChange={(e) => setNewNews(e.target.checked)}
-                  />
-                  Is this news?
-                </label>
-                <button onClick={handleAddItem} className={styles.button}>
-                  Add News/Event
-                </button>
-              </div>
-              <button onClick={handleSignOut} className={`${styles.button} ${styles.signInOutButton}`}>
-                Sign Out
+                Is this news?
+              </label>
+              <button onClick={handleAddItem} className={styles.button}>
+                Add News/Event
               </button>
-            </>
-          ) : (
-            <button onClick={handleSignIn} className={`${styles.button} ${styles.signInOutButton}`}>
-              Sign In to Add Event
+            </div>
+            <button onClick={handleSignOut} className={`${styles.button} ${styles.signInOutButton}`}>
+              Sign Out
             </button>
-          )}
-        </div>
+          </>
+        ) : (
+          <button onClick={handleSignIn} className={`${styles.button} ${styles.signInOutButton}`}>
+            Sign In to Add Event
+          </button>
+        )}
+      </div>
     </div>
   );
 };

diff --git a/app/components/Navbar.module.css b/app/components/Navbar.module.css
@@ -120,7 +120,7 @@
 
   .navRight ul, .navLeft ul {
     padding: 0;
-    justify-content: center; /* Center links within each section */
+    justify-content: center; 
   }
 
   .logo.hidden {

diff --git a/app/components/SAETeam.tsx b/app/components/SAETeam.tsx
@@ -1,8 +1,8 @@
-"use client";
+"use client"
 import React, { useEffect, useState } from "react";
 import { auth, db, storage } from "./firebase";
-import { collection, getDocs, updateDoc, doc, addDoc } from "firebase/firestore";
-import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
+import { collection, getDocs, updateDoc, doc, addDoc, deleteDoc } from "firebase/firestore"; 
+import { ref, uploadBytes, getDownloadURL, deleteObject } from "firebase/storage"; 
 import { onAuthStateChanged } from "firebase/auth";
 import { signInWithGoogle, logout } from "./authservice";
 import styles from "./SAETeam.module.css";
@@ -134,6 +134,21 @@ const SAETeam: React.FC = () => {
     }
   };
 
+  const handleDelete = async (id: string, imageUrl: string) => {
+    try {
+      const itemRef = doc(db, "Members", id);
+      await deleteDoc(itemRef); 
+      const imageRef = ref(storage, imageUrl);
+      if(imageRef){
+        await deleteObject(imageRef);
+      }
+      setItems((prevItems) => prevItems.filter((item) => item.id !== id));
+    } 
+    catch (error: any) {
+      console.error("Error deleting member:", error);
+    }
+  };
+
   return (
     <div>
       <h3 className={styles.sectionTitle}>Core Team</h3>
@@ -186,12 +201,20 @@ const SAETeam: React.FC = () => {
               />
             )}
             {isAuthenticated && editing !== member.id && (
-              <button
-                onClick={() => handleEdit(member.id, member.Name, member.Image, member.Linkedin, member.Instagram)}
-                className={styles.button}
-              >
-                Edit
-              </button>
+              <div>
+                <button
+                  onClick={() => handleEdit(member.id, member.Name, member.Image, member.Linkedin, member.Instagram)}
+                  className={styles.button}
+                >
+                  Edit
+                </button>
+                <button
+                  onClick={() => handleDelete(member.id, member.Image)}
+                  className={`${styles.button} ${styles.deleteButton}`}
+                >
+                  Delete
+                </button>
+              </div>
             )}
           </div>
         ))}

diff --git a/app/highlights/page.tsx b/app/highlights/page.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import NewsSection from '../components/News';
+import NewsAndEvents from '../components/Highlights';
 
 export default function Highlights() {
   return (
     <main>
-      <NewsSection/>
+      <NewsAndEvents/>
     </main>
   );
 };