diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 92889fe..b7b1726 100644 --- a/frontend/src/App.tsx +++ b/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 ( -
-
-

Posts File

- postFile = e.target.files?.[0]}> -
-
-

Comments File

- commentFile = e.target.files?.[0]}> -
- - -

{returnMessage}

-
- ) + + } /> + } /> + + ); } -export default App +export default App; diff --git a/frontend/src/pages/Stats.tsx b/frontend/src/pages/Stats.tsx new file mode 100644 index 0000000..ef4d445 --- /dev/null +++ b/frontend/src/pages/Stats.tsx @@ -0,0 +1,5 @@ +const StatPage = () => { + return
Stats Page
; +}; + +export default StatPage; \ No newline at end of file diff --git a/frontend/src/pages/Upload.tsx b/frontend/src/pages/Upload.tsx new file mode 100644 index 0000000..d72f9f0 --- /dev/null +++ b/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 ( +
+
+

Posts File

+ postFile = e.target.files?.[0]}> +
+
+

Comments File

+ commentFile = e.target.files?.[0]}> +
+ + +

{returnMessage}

+
+ ) +} + +export default UploadPage;