1 files changed, 75 insertions, 27 deletions
diff --git a/client/src/App.js b/client/src/App.js
index eaeca2c..2d19281 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,9 +1,13 @@
 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();
@@ -22,35 +26,79 @@ function App() {
     }
   };
 
+  const handleLogin = (password) => {
+    setAdminPassword(password);
+    setIsAuthenticated(true);
+  };
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <h1 className="App-title">Insta Local</h1>
-        <div className="downloaded-content">
-          {downloadedFiles.length === 0 ? (
-            <p>No content available</p>
-          ) : (
-            downloadedFiles.map((file, index) => {
-              const fileUrl = `http://localhost:5001/static/${file}`;
-              console.log('Fetching file:', fileUrl); // Log the file URL
-              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>
-      </header>
-    </div>
+    <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;