import React, { useState, useEffect } from 'react';
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 [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 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 adsList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
setAds(adsList);
};
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 (
<>
Manage Ads
{ads.map(ad => (
{ad.name}
{ad.description}
{ad.fileURL && (
ad.fileURL.includes('image') ?
:
)}
handleEditAd(ad)}>
handleDeleteAd(ad.id)}>
))}
>
);
};
export default ManageAds;