Added list refresh

frontend/src/App.tsx

@@ -1,30 +1,49 @@
-import React from 'react';
-import Container from 'react-bootstrap/Container';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import FileUpload from './components/FileUpload';
 import FileList from './components/FileList';
-import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
-import './App.css'; // Import custom CSS
+import { Container } from 'react-bootstrap';
 
-function App() {
-  return (
-    <Container fluid className="App">
-      <header className="App-header py-3">
-        <h1>File Management App</h1>
-      </header>
-      <main className="py-3">
-        <Row>
-          <Col md={6} className="mb-4">
-            <FileUpload />
-          </Col>
-          <Col md={6}>
-            <FileList />
-          </Col>
-        </Row>
-      </main>
-    </Container>
-  );
-}
+const App = () => {
+    const [files, setFiles] = useState([]);
+    const [loadingFiles, setLoadingFiles] = useState(false);
+    const apiUrl = process.env.REACT_APP_API_GATEWAY_URL;
+
+    useEffect(() => {
+        fetchFiles();
+    }, []);
+
+    const fetchFiles = async () => {
+        setLoadingFiles(true);
+        try {
+            const response = await axios.get(`${apiUrl}listFiles`);
+            if (response.status === 200) {
+                setFiles(response.data);
+            } else {
+                console.error('Unexpected status code:', response.status);
+            }
+        } catch (error) {
+            console.error('Error fetching files:', error);
+        } finally {
+            setLoadingFiles(false);
+        }
+    };
+
+    const handleFileUploadSuccess = () => {
+        fetchFiles();  // Reload the file list
+    };
+
+    return (
+        <Container className="mt-5">
+            <h1 className="text-center mb-4">File Management App</h1>
+            <FileUpload apiUrl={apiUrl} onUploadSuccess={handleFileUploadSuccess} />
+            {loadingFiles ? (
+                <p>Loading files...</p>
+            ) : (
+                <FileList files={files} apiUrl={apiUrl} />
+            )}
+        </Container>
+    );
+};
 
 export default App;

frontend/src/components/FileUpload.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import axios from 'axios';
 import { Container, Form, Button, Alert, Spinner } from 'react-bootstrap';
-import 'bootstrap/dist/css/bootstrap.min.css'; // Ensure Bootstrap CSS is imported
 
 class FileUpload extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             selectedFile: null,
-            apiUrl: process.env.REACT_APP_API_GATEWAY_URL,
             error: null,
             presignedUrl: null,
             uploading: false,
@@ -21,7 +19,8 @@ class FileUpload extends React.Component {
 
     onFileUpload = async event => {
         event.preventDefault();
-        const { selectedFile, apiUrl } = this.state;
+        const { selectedFile } = this.state;
+        const { apiUrl, onUploadSuccess } = this.props;
 
         if (!selectedFile) {
             this.setError('No file selected!');
@@ -52,6 +51,11 @@ class FileUpload extends React.Component {
                 this.setState({ uploading: false });
                 alert('File uploaded successfully!');
                 console.log('File uploaded successfully:', uploadResponse.data);
+
+                // Notify parent component to refresh the file list
+                if (onUploadSuccess) {
+                    onUploadSuccess();
+                }
             } else {
                 console.error('Unexpected status code:', response.status);
                 this.setError(`Unexpected status code: ${response.status}`);
@@ -60,7 +64,6 @@ class FileUpload extends React.Component {
             this.setState({ uploading: false });
             if (error.response) {
                 console.error('Server responded with an error status:', error.response.status);
-                console.error('Error details:', error.response.data);
                 this.setError(`Error: ${error.response.status} - ${error.response.data}`);
             } else if (error.request) {
                 console.error('No response received:', error.request);
@@ -77,17 +80,11 @@ class FileUpload extends React.Component {
     };
 
     render() {
-        const { error, presignedUrl, uploading } = this.state;
+        const { error, uploading } = this.state;
         return (
             <Container className="file-upload-container mt-5">
                 <h3 className="text-center mb-4">File Upload</h3>
                 {error && <Alert variant="danger">{error}</Alert>}
-                {presignedUrl && (
-                    <Alert variant="info">
-                        <p><strong>Presigned URL:</strong> {presignedUrl}</p>
-                    </Alert>
-                )}
-
                 <Form onSubmit={this.onFileUpload}>
                     <Form.Group controlId="formFile" className="mb-3">
                         <Form.Label>Select file to upload</Form.Label>