From 0f671fa1b1ff8e1b4e7d2e8a6490b7e05df10694 Mon Sep 17 00:00:00 2001 From: Mercurio <47455213+NotLugozzi@users.noreply.github.com> Date: Thu, 5 Jun 2025 23:53:43 +0200 Subject: [PATCH] Minor UI Edits --- frontend/src/App.css | 1 + frontend/src/components/FileComponent.tsx | 100 ++++++++----- frontend/src/components/Login.tsx | 2 +- frontend/src/components/MainPage.tsx | 1 + frontend/src/components/Register.tsx | 2 +- frontend/src/components/ShareComponent.tsx | 2 +- frontend/src/index.css | 161 +++++++++++++++++++++ 7 files changed, 228 insertions(+), 41 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index b9d355d..da78883 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -40,3 +40,4 @@ .read-the-docs { color: #888; } + diff --git a/frontend/src/components/FileComponent.tsx b/frontend/src/components/FileComponent.tsx index ddea819..53b9459 100644 --- a/frontend/src/components/FileComponent.tsx +++ b/frontend/src/components/FileComponent.tsx @@ -21,13 +21,14 @@ export const FilesComponent: React.FC = ({ isDarkMode }) => const [success, setSuccess] = useState(null); const [openDropdown, setOpenDropdown] = useState(null); const [token, setToken] = useState(null); + const [shareDuration, setShareDuration] = useState(7); // durata di default 7 giorni const fileInputRef = useRef(null); const dropdownRef = useRef(null); // Recupera il token solo una volta al mount o quando cambia useEffect(() => { - const storedToken = localStorage.getItem('token'); + const storedToken = localStorage.getItem('litecloud_token'); // <-- usa la chiave corretta setToken(storedToken); }, []); @@ -54,7 +55,7 @@ export const FilesComponent: React.FC = ({ isDarkMode }) => try { setLoading(true); setError(null); - const response = await apiCall('http://192.168.1.120:8082/api/files'); + const response = await apiCall('/api/files'); const filesData = await response.json(); setFiles(filesData); } catch (err) { @@ -90,8 +91,8 @@ export const FilesComponent: React.FC = ({ isDarkMode }) => formData.append('file', file); formData.append('filename', file.name); - const token = getAuthToken(); - const response = await fetch('http://192.168.1.120:8082/api/upload', { + if (!token) throw new Error('No auth token found'); + const response = await fetch('/api/upload', { method: 'POST', headers: { 'Authorization': `Bearer ${token}`, @@ -106,7 +107,7 @@ export const FilesComponent: React.FC = ({ isDarkMode }) => throw new Error('Upload failed'); } } catch (err) { - setError('Failed to upload file'); + setError('Failed to upload file - ' + (err instanceof Error ? err.message : 'Unknown error')); } finally { setLoading(false); if (fileInputRef.current) { @@ -115,24 +116,26 @@ export const FilesComponent: React.FC = ({ isDarkMode }) => } }; - const handleFileAction = async (action: 'share' | 'delete', fileId: number) => { + const handleFileAction = async ( + action: 'share' | 'delete', + fileId: number, + duration?: number + ) => { try { setLoading(true); setError(null); - if (action === 'share') { - const response = await apiCall('http://192.168.1.120:8082/api/share', { + const response = await apiCall('/api/share', { method: 'POST', body: JSON.stringify({ file_id: fileId, - expires_in_days: 7 + expires_in_days: duration || 7 }), }); const shareId = await response.json(); setSuccess(`Share link created: /shared/${shareId}`); - } else if (action === 'delete') { - await apiCall(`http://192.168.1.120:8082/api/files/${fileId}`, { + await apiCall(`/api/files/${fileId}`, { method: 'DELETE', }); setSuccess('File deleted successfully'); @@ -146,9 +149,28 @@ export const FilesComponent: React.FC = ({ isDarkMode }) => } }; - const formatDate = (dateString: string) => { - return new Date(dateString).toLocaleString(); - }; +const formatDate = (dateString: string) => { + const now = new Date(); + const date = new Date(dateString); + const diff = (now.getTime() - date.getTime()) / 1000; + + const isSameDay = (d1: Date, d2: Date) => + d1.getFullYear() === d2.getFullYear() && + d1.getMonth() === d2.getMonth() && + d1.getDate() === d2.getDate(); + + const yesterday = new Date(); + yesterday.setDate(now.getDate() - 1); + + if (diff < 10) return "now"; + + if (isSameDay(date, yesterday)) { + return `yesterday at ${date.toLocaleTimeString()}`; + } + + return date.toLocaleString(); +}; + const formatFileSize = (bytes: number) => { const sizes = ['B', 'KB', 'MB', 'GB']; @@ -193,7 +215,6 @@ export const FilesComponent: React.FC = ({ isDarkMode }) => }`} > - Upload File @@ -204,44 +225,47 @@ export const FilesComponent: React.FC = ({ isDarkMode }) => )}
- +
- + {/* Nessuna scritta */} - + {files.map((file) => ( - - - - + + +
Name Size UploadedActions
- {file.original_name} - - {formatFileSize(file.size)} - - {formatDate(file.uploaded_at)} - + {file.original_name}{formatFileSize(file.size)}{formatDate(file.uploaded_at)} - {openDropdown === file.id && ( -
+
+
+ + +