added and setup dashboard login auth and many more

1 files changed, 83 insertions, 0 deletions

diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
new file mode 100644
index 0000000..cb14e26
--- /dev/null
+++ b/src/components/Dashboard.js
@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import { auth, firestore } from '../firebase/firebaseConfig';
+import { getStorage, ref, uploadBytes, deleteObject } from "firebase/storage";
+import { collection, getDocs, addDoc, deleteDoc, doc } from "firebase/firestore";
+import { Bar } from 'react-chartjs-2';
+
+const Dashboard = () => {
+  const history = useHistory();
+  const [ads, setAds] = useState([]);
+  const [views, setViews] = useState([]);
+  const storage = getStorage();
+  const adsCollectionRef = collection(firestore, "ads");
+
+  useEffect(() => {
+    const fetchAds = async () => {
+      const adsSnapshot = await getDocs(adsCollectionRef);
+      setAds(adsSnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id })));
+    };
+
+    const fetchViews = async () => {
+      // Assume we have a 'views' collection to track ad views
+      const viewsSnapshot = await getDocs(collection(firestore, "views"));
+      setViews(viewsSnapshot.docs.map(doc => doc.data()));
+    };
+
+    fetchAds();
+    fetchViews();
+  }, []);
+
+  const handleLogout = () => {
+    auth.signOut();
+    localStorage.removeItem('token');
+    history.push('/login');
+  };
+
+  const handleUpload = async (event) => {
+    const file = event.target.files[0];
+    const storageRef = ref(storage, `ads/${file.name}`);
+    await uploadBytes(storageRef, file);
+    await addDoc(adsCollectionRef, { name: file.name, url: `ads/${file.name}` });
+    setAds([...ads, { name: file.name, url: `ads/${file.name}` }]);
+  };
+
+  const handleDelete = async (id, url) => {
+    const storageRef = ref(storage, url);
+    await deleteObject(storageRef);
+    await deleteDoc(doc(firestore, "ads", id));
+    setAds(ads.filter(ad => ad.id !== id));
+  };
+
+  const viewData = {
+    labels: ads.map(ad => ad.name),
+    datasets: [
+      {
+        label: 'Ad Views',
+        data: views.map(view => view.count),
+        backgroundColor: 'rgba(75, 192, 192, 0.6)',
+      },
+    ],
+  };
+
+  return (
+    <div>
+      <h2>Dashboard</h2>
+      <button onClick={handleLogout}>Logout</button>
+      <input type="file" onChange={handleUpload} />
+      <div>
+        {ads.map(ad => (
+          <div key={ad.id}>
+            <p>{ad.name}</p>
+            <button onClick={() => handleDelete(ad.id, ad.url)}>Delete</button>
+          </div>
+        ))}
+      </div>
+      <div>
+        <Bar data={viewData} />
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;