fetching the content from firebase

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>
   );
 };