skeleton for home, upload, download page

skeleton for home, upload, download page

safeshare/safeshare-frontend/src/index.js

@@ -4,7 +4,9 @@ import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
 import './index.css';
 //import App from './App';
 import reportWebVitals from './reportWebVitals';
+import ShareFile from "./pages/shareFile";
 import HomePage from "./pages/home";
+import DownloadFile from "./pages/downloadFile";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -14,6 +16,8 @@ root.render(
     <Router>
         <Routes>
             <Route path='*' element={<HomePage/>}/>
+            <Route path='/upload' element={<ShareFile/>}/>
+            <Route path='/download' element={<DownloadFile/>}/>
         </Routes>
     </Router>
 );

safeshare/safeshare-frontend/src/pages/downloadFile.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+function DownloadFile() {
+    const [passcode, setPasscode] = useState('');
+    const [fileData, setFileData] = useState(null);
+
+    const handlePasscodeChange = (e) => {
+        setPasscode(e.target.value);
+    };
+
+    const handleDownloadFile = () => {
+        if (passcode) {
+            // Send an API request to your backend with the passcode
+            axios.get(`http://127.0.0.1:8000/api/files/${passcode}`, { responseType: 'blob' })
+                .then((response) => {
+                    // Create a blob from the response data
+                    const blob = new Blob([response.data], { type: response.headers['content-type'] });
+
+                    // Create a URL for the blob
+                    const url = window.URL.createObjectURL(blob);
+
+                    // Create a temporary anchor element for downloading the file
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = 'downloaded-file.txt'; // Specify the filename
+                    a.click();
+
+                    // Revoke the URL to release resources
+                    window.URL.revokeObjectURL(url);
+                })
+                .catch((error) => {
+                    // Handle errors, e.g., show an error message
+                    console.error('File download failed', error);
+                });
+        } else {
+            // Handle the case when passcode is null or empty
+            console.error('Passcode is required.');
+            // You can show an error message or take other actions as needed.
+        }
+    };
+
+    return (
+        <div className="h-screen flex flex-col items-center justify-center bg-gray-100">
+            <div className="border p-6 rounded-lg bg-white shadow-md w-96 relative">
+                <Link to="/" className="absolute top-2 right-2 text-gray-600 text-sm hover:text-blue-600">
+                    Back
+                </Link>
+                <h1 className="text-2xl font-bold mb-4">Download File</h1>
+                <div className="mb-4">
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Enter Passcode:
+                    </label>
+                    <input
+                        type="text"
+                        value={passcode}
+                        onChange={handlePasscodeChange}
+                        className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-300"
+                    />
+                </div>
+                <button onClick={handleDownloadFile} className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg w-full">
+                    Download File
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export default DownloadFile;

safeshare/safeshare-frontend/src/pages/home.js

@@ -1,31 +1,24 @@
-import React, {useState} from 'react';
+import React from 'react';
-import {FileUploader} from "react-drag-drop-files";
+import { Link } from 'react-router-dom'; // Assuming you're using React Router for navigation
-import axios from "axios";
 
 function HomePage() {
-    const [file, setFile] = useState(null);
-    const handleChange = (file) => {
-        setFile(file);
-        console.log(file);
-        if (file) {
-            const formData = new FormData();
-            formData.append('file', file);
-
-            // Send POST request to backend API using Axios
-            axios.post('http://127.0.0.1:8000/api/files/', formData)
-                .then(response => {
-                    // Handle a successful response from the server
-                    console.log('File uploaded successfully');
-                })
-                .catch(error => {
-                    // Handle errors here
-                    console.error('File upload failed', error);
-                });
-        }
-
-    };
     return (
-        <FileUploader handleChange={handleChange} name="file"/>
+        <div className="h-screen flex flex-col items-center justify-center bg-gray-100">
+            <div className="text-3xl text-gray-800 text-center my-10">SafeShare</div>
+
+            <div className="text-center">
+                <div className="mb-4">
+                    <Link to="/upload" className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 mx-2 rounded-lg w-48">
+                        Upload a File
+                    </Link>
+                </div>
+                <div>
+                    <Link to="/download" className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 mx-2 rounded-lg w-48">
+                        Download a File
+                    </Link>
+                </div>
+            </div>
+        </div>
     );
 }
 

safeshare/safeshare-frontend/src/pages/shareFile.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { FileUploader } from 'react-drag-drop-files';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+function ShareFile() {
+    const [file, setFile] = useState(null);
+    const [passcode, setPasscode] = useState('');
+
+    const handleFileUpload = (file) => {
+        setFile(file);
+        setPasscode('1234');
+        if (file) {
+            const formData = new FormData();
+            formData.append('files', file);
+
+            // Send POST request to the backend API using Axios
+            axios.post('http://127.0.0.1:8000/api/files/', formData)
+                .then(response => {
+                    // Handle a successful response from the server
+                    setPasscode(response.data.passcode);
+                })
+                .catch(error => {
+                    // Handle errors here
+                    console.error('File upload failed', error);
+                });
+        }
+    };
+
+    // return (
+    //     <div className="h-screen flex flex-col items-center justify-center bg-gray-100">
+    //         <div className="border p-6 rounded-lg bg-white shadow-md w-96">
+    //             <h1 className="text-2xl font-bold mb-4">Safe-Share</h1>
+    //             <label className="block text-sm font-medium text-gray-700 mb-2">
+    //                 Upload a File
+    //             </label>
+    //             <FileUploader handleChange={handleFileUpload} name="file" />
+    //             {passcode && (
+    //                 <div className="mt-4">
+    //                     <label className="block text-sm font-medium text-gray-700">
+    //                         Passcode:
+    //                     </label>
+    //                     <div className="text-lg font-bold text-blue-600">{passcode}</div>
+    //                 </div>
+    //             )}
+    //         </div>
+    //     </div>
+    // );
+    return (
+        <div className="h-screen flex flex-col items-center justify-center bg-gray-100">
+            <div className="border p-6 rounded-lg bg-white shadow-md w-96 relative">
+                <Link to="/" className="absolute top-2 right-2 text-gray-600 text-sm hover:text-blue-600">
+                    Back
+                </Link>
+                <h1 className="text-2xl font-bold mb-4">Share a file with others!</h1>
+                <FileUploader handleChange={handleFileUpload} name="file" />
+                {passcode && (
+                    <div className="mt-4">
+                        <label className="block text-sm font-medium text-gray-700">
+                            Passcode:
+                        </label>
+                        <div className="text-lg font-bold text-blue-600">{passcode}</div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default ShareFile;