From e9d14a0a516217da02e1ef8a6e1dc78e46116b18 Mon Sep 17 00:00:00 2001
From: Biswakalyan Bhuyan <biswa@surgot.in>
Date: Fri, 26 Jul 2024 21:35:30 +0530
Subject: fetching the content from firebase

---
 src/components/UploadForm.jsx | 11 ++++------
 src/components/ViewAds.css    | 21 ++++++++++++++++++
 src/components/ViewAds.jsx    | 51 +++++++++++++++++++++++++++++--------------
 3 files changed, 60 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ViewAds.css

(limited to 'src/components')

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>
   );
-- 
cgit v1.2.3-59-g8ed1b