From 51a93fdcaf8b6aafddc56901831b28df0381e430 Mon Sep 17 00:00:00 2001
From: Biswakalyan Bhuyan <biswa@surgot.in>
Date: Fri, 2 Aug 2024 14:19:40 +0530
Subject: updated ManageAds

---
 panel/src/pages/ManageAds.jsx | 153 ++++++++++++++++++++++++++++--------------
 1 file changed, 104 insertions(+), 49 deletions(-)

(limited to 'panel/src/pages/ManageAds.jsx')

diff --git a/panel/src/pages/ManageAds.jsx b/panel/src/pages/ManageAds.jsx
index 8999db3..9f6e28c 100644
--- a/panel/src/pages/ManageAds.jsx
+++ b/panel/src/pages/ManageAds.jsx
@@ -1,74 +1,129 @@
 import React, { useState, useEffect } from 'react';
-import { db } from '../firebase';
-import { collection, addDoc, getDocs } from 'firebase/firestore';
-import './ManageAds.css';
+import { Container, Button, Typography, Box, TextField, Dialog, IconButton } from '@mui/material';
+import { collection, addDoc, getDocs, deleteDoc, doc, updateDoc } from 'firebase/firestore';
+import { db, storage } from '../firebase';
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
 import Navbar from '../components/Navbar';
+import './ManageAds.css';
 
 const ManageAds = () => {
+  const [open, setOpen] = useState(false);
+  const [adName, setAdName] = useState('');
+  const [adDescription, setAdDescription] = useState('');
+  const [file, setFile] = useState(null);
   const [ads, setAds] = useState([]);
-  const [newAd, setNewAd] = useState({ title: '', description: '', imageUrl: '' });
+  const [editAdId, setEditAdId] = useState(null);
 
   useEffect(() => {
+    const fetchAds = async () => {
+      const querySnapshot = await getDocs(collection(db, 'ads'));
+      const adsList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+      setAds(adsList);
+    };
+
     fetchAds();
   }, []);
 
-  const fetchAds = async () => {
+  const handleAddAd = async () => {
+    if (!file) return;
+
+    const storageRef = ref(storage, `ads/${file.name}`);
+    await uploadBytes(storageRef, file);
+    const fileURL = await getDownloadURL(storageRef);
+
+    if (editAdId) {
+      const adRef = doc(db, 'ads', editAdId);
+      await updateDoc(adRef, {
+        name: adName,
+        description: adDescription,
+        fileURL,
+      });
+      setEditAdId(null);
+    } else {
+      await addDoc(collection(db, 'ads'), {
+        name: adName,
+        description: adDescription,
+        fileURL,
+      });
+    }
+
+    setOpen(false);
+    setAdName('');
+    setAdDescription('');
+    setFile(null);
+
     const querySnapshot = await getDocs(collection(db, 'ads'));
-    const adsData = querySnapshot.docs.map(doc => doc.data());
-    setAds(adsData);
+    const adsList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+    setAds(adsList);
   };
 
-  const handleAddAd = async () => {
-    await addDoc(collection(db, 'ads'), newAd);
-    fetchAds();
+  const handleDeleteAd = async (id) => {
+    await deleteDoc(doc(db, 'ads', id));
+    setAds(ads.filter(ad => ad.id !== id));
+  };
+
+  const handleEditAd = (ad) => {
+    setAdName(ad.name);
+    setAdDescription(ad.description);
+    setFile(null);
+    setEditAdId(ad.id);
+    setOpen(true);
   };
 
   return (
-    <div>
+    <>
       <Navbar />
-      <div className="container mt-5">
-        <h4>Manage Ads</h4>
-        <div className="mb-4">
-          <div className="mb-3">
-            <label>Title</label>
-            <input
-              type="text"
-              value={newAd.title}
-              onChange={(e) => setNewAd({ ...newAd, title: e.target.value })}
-              className="form-control"
+      <Container className="manage-ads">
+        <Typography variant="h4" className="manage-ads-header">Manage Ads</Typography>
+        <Button variant="contained" className="add-ad-button" onClick={() => setOpen(true)}>Add Ad</Button>
+        <Dialog open={open} onClose={() => setOpen(false)}>
+          <Box className="add-ad-dialog">
+            <TextField
+              label="Ad Name"
+              value={adName}
+              onChange={(e) => setAdName(e.target.value)}
+              fullWidth
             />
-          </div>
-          <div className="mb-3">
-            <label>Description</label>
-            <input
-              type="text"
-              value={newAd.description}
-              onChange={(e) => setNewAd({ ...newAd, description: e.target.value })}
-              className="form-control"
+            <TextField
+              label="Ad Description"
+              value={adDescription}
+              onChange={(e) => setAdDescription(e.target.value)}
+              fullWidth
             />
-          </div>
-          <div className="mb-3">
-            <label>Image URL</label>
             <input
-              type="text"
-              value={newAd.imageUrl}
-              onChange={(e) => setNewAd({ ...newAd, imageUrl: e.target.value })}
-              className="form-control"
+              type="file"
+              onChange={(e) => setFile(e.target.files[0])}
             />
-          </div>
-          <button onClick={handleAddAd} className="btn btn-primary">Add Ad</button>
-        </div>
-        <div>
-          {ads.map((ad, index) => (
-            <div key={index} className="mb-3">
-              <h5>{ad.title}</h5>
-              <p>{ad.description}</p>
-              <img src={ad.imageUrl} alt={ad.title} className="img-fluid" />
-            </div>
+            <Button onClick={handleAddAd}>Upload Ad</Button>
+          </Box>
+        </Dialog>
+        <Box className="manage-ads-list">
+          {ads.map(ad => (
+            <Box key={ad.id} className="ad-item">
+              <Box className="ad-item-content">
+                <Typography variant="h6">{ad.name}</Typography>
+                <Typography variant="body1">{ad.description}</Typography>
+                {ad.fileURL && (
+                  ad.fileURL.includes('image') ?
+                  <img src={ad.fileURL} alt={ad.name} /> :
+                  <video src={ad.fileURL} controls />
+                )}
+              </Box>
+              <Box className="ad-item-actions">
+                <IconButton onClick={() => handleEditAd(ad)}>
+                  <EditIcon />
+                </IconButton>
+                <IconButton onClick={() => handleDeleteAd(ad.id)}>
+                  <DeleteIcon />
+                </IconButton>
+              </Box>
+            </Box>
           ))}
-        </div>
-      </div>
-    </div>
+        </Box>
+      </Container>
+    </>
   );
 };
 
-- 
cgit v1.2.3-59-g8ed1b