aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.css15
-rw-r--r--src/components/UploadForm.jsx11
-rw-r--r--src/components/ViewAds.css21
-rw-r--r--src/components/ViewAds.jsx51
-rw-r--r--src/pages/ManageAds.jsx27
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>
);
};