From 55aed6d7c2df0daedbdabea0d1727acb1815ce2b Mon Sep 17 00:00:00 2001
From: Biswakalyan Bhuyan <biswa@surgot.in>
Date: Fri, 26 Jul 2024 21:21:03 +0530
Subject: added upload feature

---
 src/components/UploadForm.jsx | 45 +++++++++++++++++++++++++++++++++++++++++++
 src/components/ViewAds.jsx    | 33 +++++++++++++++++++++++++++++++
 src/firebase.js               | 10 ++++++----
 src/pages/ManageAds.jsx       |  7 +++++++
 src/utils/api.js              | 39 ++++++++++++++-----------------------
 5 files changed, 105 insertions(+), 29 deletions(-)
 create mode 100644 src/components/UploadForm.jsx
 create mode 100644 src/components/ViewAds.jsx

(limited to 'src')

diff --git a/src/components/UploadForm.jsx b/src/components/UploadForm.jsx
new file mode 100644
index 0000000..9bb16e7
--- /dev/null
+++ b/src/components/UploadForm.jsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage';
+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]);
+  };
+
+  const handleUpload = () => {
+    if (!file) return;
+
+    const storageRef = ref(storage, `ads/${file.name}`);
+    const uploadTask = uploadBytesResumable(storageRef, file);
+
+    uploadTask.on(
+      'state_changed',
+      (snapshot) => {
+        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+        setProgress(progress);
+      },
+      (error) => {
+        console.error('Upload failed', error);
+      },
+      () => {
+        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
+          onUploadComplete(downloadURL);
+        });
+      }
+    );
+  };
+
+  return (
+    <div>
+      <input type="file" onChange={handleFileChange} />
+      <button onClick={handleUpload}>Upload</button>
+      <div>Upload Progress: {progress}%</div>
+    </div>
+  );
+};
+
+export default UploadForm;
diff --git a/src/components/ViewAds.jsx b/src/components/ViewAds.jsx
new file mode 100644
index 0000000..719d1b2
--- /dev/null
+++ b/src/components/ViewAds.jsx
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import { ref, listAll, getDownloadURL } from 'firebase/storage';
+import { storage } from '../firebase';
+
+const ViewAds = () => {
+  const [ads, setAds] = 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);
+    };
+
+    fetchAds();
+  }, []);
+
+  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>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ViewAds;
diff --git a/src/firebase.js b/src/firebase.js
index b875eb9..d008bdd 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -1,5 +1,6 @@
-import { initializeApp } from "firebase/app";
-import { getAnalytics } from "firebase/analytics";
+import { initializeApp } from 'firebase/app';
+import { getAnalytics } from 'firebase/analytics';
+import { getStorage } from 'firebase/storage';
 
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
@@ -8,10 +9,11 @@ const firebaseConfig = {
   storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
   messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
   appId: process.env.REACT_APP_FIREBASE_APP_ID,
-  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
+  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
 };
 
 const app = initializeApp(firebaseConfig);
 const analytics = getAnalytics(app);
+const storage = getStorage(app);
 
-export { app, analytics };
+export { app, analytics, storage };
diff --git a/src/pages/ManageAds.jsx b/src/pages/ManageAds.jsx
index 834a898..88fc3b0 100644
--- a/src/pages/ManageAds.jsx
+++ b/src/pages/ManageAds.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import AdCard from '../components/AdCard';
 import AdForm from '../components/AdForm';
+import UploadForm from '../components/UploadForm';
 import { fetchAds, addAd } from '../utils/api';
 
 const ManageAds = () => {
@@ -19,10 +20,16 @@ const ManageAds = () => {
     setAds([...ads, ad]);
   };
 
+  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
+  };
+
   return (
     <div>
       <h1>Manage Ads</h1>
       <AdForm onAddAd={handleAddAd} />
+      <UploadForm onUploadComplete={handleUploadComplete} />
       <div>
         {ads.map((ad) => (
           <AdCard key={ad.id} ad={ad} />
diff --git a/src/utils/api.js b/src/utils/api.js
index 1f8e92d..7b63aa4 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,32 +1,21 @@
-const API_URL = 'http://localhost:5000'; // Replace with your actual API URL
-
 export const fetchAds = async () => {
-  try {
-    const response = await fetch(`${API_URL}/ads`);
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-    return await response.json();
-  } catch (error) {
-    console.error('Error fetching ads:', error);
-    return [];
+  const response = await fetch('http://localhost:5000/ads');
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
   }
+  return response.json();
 };
 
 export const addAd = async (ad) => {
-  try {
-    const response = await fetch(`${API_URL}/ads`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(ad),
-    });
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-    return await response.json();
-  } catch (error) {
-    console.error('Error adding ad:', error);
+  const response = await fetch('http://localhost:5000/ads', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(ad),
+  });
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
   }
+  return response.json();
 };
-- 
cgit v1.2.3-59-g8ed1b