From cf0421c94b8ca14e819bad45e7db6875b92d547b Mon Sep 17 00:00:00 2001 From: Biswakalyan Bhuyan Date: Thu, 18 Jul 2024 15:49:21 +0530 Subject: added and setup dashboard login auth and many more --- src/App.js | 21 +++++------ src/components/Dashboard.js | 83 ++++++++++++++++++++++++++++++++++++++++++ src/components/Login.js | 39 ++++++++++---------- src/components/PrivateRoute.js | 17 +++++++++ src/firebase/firebaseConfig.js | 20 +++++----- src/index.js | 16 +------- 6 files changed, 141 insertions(+), 55 deletions(-) create mode 100644 src/components/Dashboard.js create mode 100644 src/components/PrivateRoute.js (limited to 'src') diff --git a/src/App.js b/src/App.js index ffc907d..437278a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,18 @@ -import React, { useState } from 'react'; +import React from 'react'; +import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Login from './components/Login'; +import Dashboard from './components/Dashboard'; +import PrivateRoute from './components/PrivateRoute'; const App = () => { - const [isAuth, setIsAuth] = useState(false); - return ( -
- {isAuth ? : } -
+ + + + + + ); }; -const AdminPanel = () => { - // Admin panel logic - return
Admin Panel
; -}; - export default App; 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 ( +
+

Dashboard

+ + +
+ {ads.map(ad => ( +
+

{ad.name}

+ +
+ ))} +
+
+ +
+
+ ); +}; + +export default Dashboard; diff --git a/src/components/Login.js b/src/components/Login.js index 9a67051..64539c6 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -1,33 +1,32 @@ import React, { useState } from 'react'; import axios from 'axios'; +import { useHistory } from 'react-router-dom'; -const Login = ({ setAuth }) => { - const [formData, setFormData] = useState({ - username: '', - password: '', - }); +const Login = () => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const history = useHistory(); - const { username, password } = formData; - - const onChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value }); - - const onSubmit = async (e) => { + const handleSubmit = async (e) => { e.preventDefault(); try { - const res = await axios.post('/api/auth/login', formData); - localStorage.setItem('token', res.data.token); - setAuth(true); - } catch (err) { - console.error(err.response.data); + const response = await axios.post('/api/auth/login', { email, password }); + localStorage.setItem('token', response.data.token); + history.push('/dashboard'); + } catch (error) { + console.error('Error logging in:', error); } }; return ( -
- - - -
+
+

Login

+
+ setEmail(e.target.value)} required /> + setPassword(e.target.value)} required /> + +
+
); }; diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js new file mode 100644 index 0000000..1296935 --- /dev/null +++ b/src/components/PrivateRoute.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Route, Redirect } from 'react-router-dom'; + +const PrivateRoute = ({ component: Component, ...rest }) => { + const isAuthenticated = !!localStorage.getItem('token'); + + return ( + + isAuthenticated ? : + } + /> + ); +}; + +export default PrivateRoute; diff --git a/src/firebase/firebaseConfig.js b/src/firebase/firebaseConfig.js index 12f2a35..87546fd 100644 --- a/src/firebase/firebaseConfig.js +++ b/src/firebase/firebaseConfig.js @@ -1,17 +1,17 @@ import firebase from 'firebase/app'; -import 'firebase/storage'; +import 'firebase/auth'; +import 'firebase/firestore'; const firebaseConfig = { - apiKey: process.env.REACT_APP_FIREBASE_API_KEY, - authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, - projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, - 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, + apiKey: "YOUR_API_KEY", + authDomain: "YOUR_AUTH_DOMAIN", + projectId: "YOUR_PROJECT_ID", + storageBucket: "YOUR_STORAGE_BUCKET", + messagingSenderId: "YOUR_MESSAGING_SENDER_ID", + appId: "YOUR_APP_ID" }; firebase.initializeApp(firebaseConfig); -const storage = firebase.storage(); - -export { storage, firebase as default }; +export const auth = firebase.auth(); +export const firestore = firebase.firestore(); diff --git a/src/index.js b/src/index.js index d563c0f..b597a44 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,5 @@ import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; +import ReactDOM from 'react-dom'; import App from './App'; -import reportWebVitals from './reportWebVitals'; -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - - -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +ReactDOM.render(, document.getElementById('root')); -- cgit v1.2.3-59-g8ed1b