diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 21 | ||||
| -rw-r--r-- | src/components/Dashboard.js | 83 | ||||
| -rw-r--r-- | src/components/Login.js | 39 | ||||
| -rw-r--r-- | src/components/PrivateRoute.js | 17 | ||||
| -rw-r--r-- | src/firebase/firebaseConfig.js | 20 | ||||
| -rw-r--r-- | src/index.js | 16 |
6 files changed, 141 insertions, 55 deletions
@@ -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 ( - <div className="App"> - {isAuth ? <AdminPanel /> : <Login setAuth={setIsAuth} />} - </div> + <Router> + <Switch> + <Route path="/login" component={Login} /> + <PrivateRoute path="/dashboard" component={Dashboard} /> + </Switch> + </Router> ); }; -const AdminPanel = () => { - // Admin panel logic - return <div>Admin Panel</div>; -}; - 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 ( + <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; 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 ( - <form onSubmit={onSubmit}> - <input type="text" name="username" value={username} onChange={onChange} required /> - <input type="password" name="password" value={password} onChange={onChange} required /> - <button type="submit">Login</button> - </form> + <div> + <h2>Login</h2> + <form onSubmit={handleSubmit}> + <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required /> + <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} required /> + <button type="submit">Login</button> + </form> + </div> ); }; 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 ( + <Route + {...rest} + render={(props) => + isAuthenticated ? <Component {...props} /> : <Redirect to="/login" /> + } + /> + ); +}; + +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( - <React.StrictMode> - <App /> - </React.StrictMode> -); - -// 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(<App />, document.getElementById('root')); |