add stat page and separate home page and upload

frontend/src/App.tsx

@@ -1,50 +1,14 @@
-import axios from 'axios'
-import './App.css'
-import { useState } from 'react'
+import { Routes, Route } from "react-router-dom";
+import UploadPage from "./pages/Upload";
+import StatPage from "./pages/Stats";
 
 function App() {
-  let postFile: File | undefined
-  let commentFile: File | undefined
-  const [returnMessage, setReturnMessage] = useState('')
-
-  const uploadFiles = async () => {
-    if (!postFile || !commentFile) {
-      alert('Please select both files before uploading.')
-      return
-    }
-
-    const formData = new FormData()
-    formData.append('posts', postFile)
-    formData.append('comments', commentFile)
-
-    try {
-      const response = await axios.post('http://localhost:5000/upload', formData, {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
-      })
-      console.log('Files uploaded successfully:', response.data)
-      setReturnMessage(`Upload successful! Posts: ${response.data.posts_count}, Comments: ${response.data.comments_count}`)
-    } catch (error) {
-      console.error('Error uploading files:', error)
-      setReturnMessage('Error uploading files. Error details: ' + error)
-    }
-  }
   return (
-    <div>
-      <div className="post-file-upload">
-        <h2>Posts File</h2>
-        <input type="file" onChange={(e) => postFile = e.target.files?.[0]}></input>
-      </div>
-      <div className="comment-file-upload">
-        <h2>Comments File</h2>
-        <input type="file" onChange={(e) => commentFile = e.target.files?.[0]}></input>
-      </div>
-      <button onClick={uploadFiles}>Upload</button>
-
-      <p>{returnMessage}</p>
-    </div>
-  )
+    <Routes>
+      <Route path="/upload" element={<UploadPage />} />
+      <Route path="/stats" element={<StatPage />} />
+    </Routes>
+  );
 }
 
-export default App
+export default App;

frontend/src/pages/Stats.tsx

@@ -0,0 +1,5 @@
+const StatPage = () => {
+  return <div>Stats Page</div>;
+};
+
+export default StatPage;

frontend/src/pages/Upload.tsx

@@ -0,0 +1,53 @@
+import axios from 'axios'
+import './../App.css'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+const UploadPage = () => {
+  let postFile: File | undefined
+  let commentFile: File | undefined
+  const [returnMessage, setReturnMessage] = useState('')
+  const navigate = useNavigate()
+
+  const uploadFiles = async () => {
+    if (!postFile || !commentFile) {
+      alert('Please select both files before uploading.')
+      return
+    }
+
+    const formData = new FormData()
+    formData.append('posts', postFile)
+    formData.append('comments', commentFile)
+
+    try {
+      const response = await axios.post('http://localhost:5000/upload', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      })
+      console.log('Files uploaded successfully:', response.data)
+      setReturnMessage(`Upload successful! Posts: ${response.data.posts_count}, Comments: ${response.data.comments_count}`)
+      navigate('/stats')
+    } catch (error) {
+      console.error('Error uploading files:', error)
+      setReturnMessage('Error uploading files. Error details: ' + error)
+    }
+  }
+  return (
+    <div>
+      <div className="post-file-upload">
+        <h2>Posts File</h2>
+        <input type="file" onChange={(e) => postFile = e.target.files?.[0]}></input>
+      </div>
+      <div className="comment-file-upload">
+        <h2>Comments File</h2>
+        <input type="file" onChange={(e) => commentFile = e.target.files?.[0]}></input>
+      </div>
+      <button onClick={uploadFiles}>Upload</button>
+
+      <p>{returnMessage}</p>
+    </div>
+  )
+}
+
+export default UploadPage;