1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
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));
const querySnapshot = await getDocs(collection(db, 'ads'));
const adsList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
setAds(adsList);
};
const handleEditAd = (ad) => {
setAdName(ad.name);
setAdDescription(ad.description);
setFile(null);
setEditAdId(ad.id);
setOpen(true);
};
return (
<div className="manage-ads">
<Navbar />
<Container className="manage-ads-container">
<Typography variant="h4" className="manage-ads-header">Manage Ads</Typography>
<Button variant="contained" color="primary" className="add-ad-button" onClick={() => setOpen(true)}>Add Ad</Button>
<Box className="manage-ads-list">
{ads.map(ad => (
<Box key={ad.id} className="ad-item">
{ad.fileURL && (ad.fileURL.includes('.mp4') ? (
<video src={ad.fileURL} controls className="ad-item-media" />
) : (
<img src={ad.fileURL} alt={ad.name} className="ad-item-media" />
))}
<Box>
<Typography variant="h6">{ad.name}</Typography>
<Typography>{ad.description}</Typography>
</Box>
<Box className="ad-item-actions">
<IconButton onClick={() => handleEditAd(ad)}>
<EditIcon />
</IconButton>
<IconButton onClick={() => handleDeleteAd(ad.id)}>
<DeleteIcon />
</IconButton>
</Box>
</Box>
))}
</Box>
<Dialog open={open} onClose={() => setOpen(false)} className="add-ad-dialog">
<Box p={2}>
<Typography variant="h6">{editAdId ? 'Edit Ad' : 'Add New Ad'}</Typography>
<TextField
label="Ad Name"
value={adName}
onChange={(e) => setAdName(e.target.value)}
fullWidth
margin="normal"
/>
<TextField
label="Ad Description"
value={adDescription}
onChange={(e) => setAdDescription(e.target.value)}
fullWidth
margin="normal"
multiline
rows={4}
/>
<input
type="file"
onChange={(e) => setFile(e.target.files[0])}
/>
<Button variant="contained" color="primary" onClick={handleAddAd} fullWidth>
{editAdId ? 'Update Ad' : 'Add Ad'}
</Button>
</Box>
</Dialog>
</Container>
</div>
);
};
export default ManageAds;
|
