diff options
| -rw-r--r-- | src/App.css | 15 | ||||
| -rw-r--r-- | src/components/UploadForm.jsx | 11 | ||||
| -rw-r--r-- | src/components/ViewAds.css | 21 | ||||
| -rw-r--r-- | src/components/ViewAds.jsx | 51 | ||||
| -rw-r--r-- | src/pages/ManageAds.jsx | 27 |
5 files changed, 95 insertions, 30 deletions
diff --git a/src/App.css b/src/App.css index b9d355d..11b9e12 100644 --- a/src/App.css +++ b/src/App.css @@ -33,6 +33,21 @@ } } +.ads-container { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + +.ad-item { + width: 200px; + height: auto; +} + +.ad-item img, .ad-item video { + width: 100%; + height: auto; +} .card { padding: 2em; } diff --git a/src/components/UploadForm.jsx b/src/components/UploadForm.jsx index 9bb16e7..531feda 100644 --- a/src/components/UploadForm.jsx +++ b/src/components/UploadForm.jsx @@ -4,7 +4,6 @@ import { storage } from '../firebase'; const UploadForm = ({ onUploadComplete }) => { const [file, setFile] = useState(null); - const [progress, setProgress] = useState(0); const handleFileChange = (e) => { setFile(e.target.files[0]); @@ -16,16 +15,15 @@ const UploadForm = ({ onUploadComplete }) => { const storageRef = ref(storage, `ads/${file.name}`); const uploadTask = uploadBytesResumable(storageRef, file); - uploadTask.on( - 'state_changed', + uploadTask.on('state_changed', (snapshot) => { - const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; - setProgress(progress); + // Observe state change events such as progress, pause, and resume }, (error) => { - console.error('Upload failed', error); + console.error('Upload error:', error); }, () => { + // Handle successful uploads on complete getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { onUploadComplete(downloadURL); }); @@ -37,7 +35,6 @@ const UploadForm = ({ onUploadComplete }) => { <div> <input type="file" onChange={handleFileChange} /> <button onClick={handleUpload}>Upload</button> - <div>Upload Progress: {progress}%</div> </div> ); }; diff --git a/src/components/ViewAds.css b/src/components/ViewAds.css new file mode 100644 index 0000000..ec1ccf6 --- /dev/null +++ b/src/components/ViewAds.css @@ -0,0 +1,21 @@ +.ads-container { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.ad-item { + border: 1px solid #ddd; + padding: 10px; + border-radius: 4px; +} + +img { + max-width: 100%; + height: auto; +} + +video { + max-width: 100%; + height: auto; +} diff --git a/src/components/ViewAds.jsx b/src/components/ViewAds.jsx index 719d1b2..0c5486c 100644 --- a/src/components/ViewAds.jsx +++ b/src/components/ViewAds.jsx @@ -1,30 +1,49 @@ -import React, { useEffect, useState } from 'react'; -import { ref, listAll, getDownloadURL } from 'firebase/storage'; +import React, { useState, useEffect } from 'react'; +import './ViewAds.css'; +import { getDownloadURL, listAll, ref } from 'firebase/storage'; import { storage } from '../firebase'; const ViewAds = () => { - const [ads, setAds] = useState([]); + const [urls, setUrls] = useState([]); useEffect(() => { - const fetchAds = async () => { - const adsRef = ref(storage, 'ads/'); - const adList = await listAll(adsRef); - const adUrls = await Promise.all(adList.items.map((item) => getDownloadURL(item))); - setAds(adUrls); + const fetchUrls = async () => { + const listRef = ref(storage, 'ads/'); + try { + const res = await listAll(listRef); + const urlsPromises = res.items.map(itemRef => getDownloadURL(itemRef)); + const urls = await Promise.all(urlsPromises); + setUrls(urls); + } catch (error) { + console.error('Error fetching URLs:', error); + } }; - fetchAds(); + fetchUrls(); }, []); return ( <div> - <h2>View Ads</h2> - <div> - {ads.map((url, index) => ( - <div key={index}> - <img src={url} alt={`Ad ${index + 1}`} style={{ maxWidth: '200px' }} /> - </div> - ))} + <h2>Uploaded Ads</h2> + <div className="ads-container"> + {urls.map((url, index) => { + const isImage = url.match(/\.(jpeg|jpg|gif|png)$/); + const isVideo = url.match(/\.(mp4|mov|avi|mkv)$/); + return ( + <div key={index} className="ad-item"> + {isImage ? ( + <img src={url} alt={`Ad ${index + 1}`} style={{ maxWidth: '100%', height: 'auto' }} /> + ) : isVideo ? ( + <video controls style={{ maxWidth: '100%', height: 'auto' }}> + <source src={url} type={`video/${url.split('.').pop()}`} /> + Your browser does not support the video tag. + </video> + ) : ( + <p>Unsupported file type</p> + )} + </div> + ); + })} </div> </div> ); diff --git a/src/pages/ManageAds.jsx b/src/pages/ManageAds.jsx index 88fc3b0..8f72d0f 100644 --- a/src/pages/ManageAds.jsx +++ b/src/pages/ManageAds.jsx @@ -2,10 +2,13 @@ import React, { useState, useEffect } from 'react'; import AdCard from '../components/AdCard'; import AdForm from '../components/AdForm'; import UploadForm from '../components/UploadForm'; +import ViewAds from '../components/ViewAds'; import { fetchAds, addAd } from '../utils/api'; const ManageAds = () => { const [ads, setAds] = useState([]); + const [showUploadedAds, setShowUploadedAds] = useState(false); + const [uploadedUrls, setUploadedUrls] = useState([]); useEffect(() => { const getAds = async () => { @@ -20,9 +23,12 @@ const ManageAds = () => { setAds([...ads, ad]); }; + const toggleViewAds = () => { + setShowUploadedAds(!showUploadedAds); + }; + const handleUploadComplete = (url) => { - console.log('Uploaded file URL:', url); - // You can add logic here to save the uploaded file URL to your backend if needed + setUploadedUrls([...uploadedUrls, url]); }; return ( @@ -30,11 +36,18 @@ const ManageAds = () => { <h1>Manage Ads</h1> <AdForm onAddAd={handleAddAd} /> <UploadForm onUploadComplete={handleUploadComplete} /> - <div> - {ads.map((ad) => ( - <AdCard key={ad.id} ad={ad} /> - ))} - </div> + <button onClick={toggleViewAds}> + {showUploadedAds ? 'Hide Uploaded Ads' : 'View Uploaded Ads'} + </button> + {showUploadedAds ? ( + <ViewAds /> + ) : ( + <div> + {ads.map((ad) => ( + <AdCard key={ad.id} ad={ad} /> + ))} + </div> + )} </div> ); }; |