1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
import axios from 'axios';
import './App.css';
import Influencers from './Influencers';
function App() {
const [downloadedFiles, setDownloadedFiles] = useState([]);
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [adminPassword, setAdminPassword] = useState('');
useEffect(() => {
fetchDownloadedFiles();
const interval = setInterval(() => {
fetchDownloadedFiles();
}, 60000); // Fetch new content every minute
return () => clearInterval(interval);
}, []);
const fetchDownloadedFiles = async () => {
try {
const response = await axios.get('http://localhost:5001/downloads');
setDownloadedFiles(response.data);
} catch (error) {
console.error('Error fetching downloaded files:', error);
}
};
const handleLogin = (password) => {
setAdminPassword(password);
setIsAuthenticated(true);
};
return (
<Router>
<div className="App">
<header className="App-header">
<h1 className="App-title">Insta Local</h1>
<nav>
<Link to="/">Home</Link>
<Link to="/influencers">Add Influencers</Link>
</nav>
</header>
<Routes>
<Route path="/" element={
<div className="downloaded-content">
{downloadedFiles.length === 0 ? (
<p>No content available</p>
) : (
downloadedFiles.map((file, index) => {
const fileUrl = `http://localhost:5001/static/${file}`;
return (
<div key={index} className="file-item">
{file.endsWith('.mp4') ? (
<video controls>
<source src={fileUrl} type="video/mp4" />
Your browser does not support the video tag.
</video>
) : (
<img src={fileUrl} alt={file} />
)}
</div>
);
})
)}
</div>
} />
<Route path="/influencers" element={
isAuthenticated ? (
<Influencers adminPassword={adminPassword} />
) : (
<Login onLogin={handleLogin} />
)
} />
</Routes>
</div>
</Router>
);
}
const Login = ({ onLogin }) => {
const [password, setPassword] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
onLogin(password);
};
return (
<form onSubmit={handleSubmit}>
<label>
Password:
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</label>
<button type="submit">Login</button>
</form>
);
};
export default App;
|
