Added error modal for share and download
This commit is contained in:
xypoon
parent
de235d5ec2
commit
3a451efbc3
|
|
@ -15,6 +15,7 @@
|
|||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-drag-drop-files": "^2.3.10",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.17.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
|
|
@ -8121,6 +8122,11 @@
|
|||
"url": "https://github.com/sindresorhus/execa?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
|
||||
},
|
||||
"node_modules/exit": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
|
||||
|
|
@ -14838,6 +14844,29 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"node_modules/react-modal": {
|
||||
"version": "3.16.1",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
|
||||
"integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
|
||||
"dependencies": {
|
||||
"exenv": "^1.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
|
||||
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
|
|
@ -17149,6 +17178,14 @@
|
|||
"makeerror": "1.0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-drag-drop-files": "^2.3.10",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-router-dom": "^6.17.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,38 @@
|
|||
import React, {useState} from 'react';
|
||||
import axios from 'axios';
|
||||
import {Link} from 'react-router-dom';
|
||||
import Modal from 'react-modal';
|
||||
|
||||
const customStyles = {
|
||||
content: {
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
right: 'auto',
|
||||
bottom: 'auto',
|
||||
marginRight: '-50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
},
|
||||
};
|
||||
|
||||
function DownloadFile() {
|
||||
const [passcode, setPasscode] = useState('');
|
||||
const [errorMsg, setErrorcode] = useState('');
|
||||
const [fileData, setFileData] = useState(null);
|
||||
let subtitle;
|
||||
const [modalIsOpen, setIsOpen] = React.useState(false);
|
||||
|
||||
function openModal() {
|
||||
setIsOpen(true);
|
||||
}
|
||||
|
||||
function afterOpenModal() {
|
||||
// references are now sync'd and can be accessed.
|
||||
subtitle.style.color = '#f00';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
const handlePasscodeChange = (e) => {
|
||||
setPasscode(e.target.value);
|
||||
|
|
@ -43,6 +71,9 @@ function DownloadFile() {
|
|||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
openModal()
|
||||
// change the error message once error msg add into response
|
||||
setErrorcode("File not found")
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -50,6 +81,22 @@ function DownloadFile() {
|
|||
|
||||
return (
|
||||
<div className="h-screen flex flex-col items-center justify-center bg-gray-100">
|
||||
<div>
|
||||
<Modal
|
||||
isOpen={modalIsOpen}
|
||||
onAfterOpen={afterOpenModal}
|
||||
onRequestClose={closeModal}
|
||||
style={customStyles}
|
||||
contentLabel="Error Modal"
|
||||
ariaHideApp={false}
|
||||
>
|
||||
<h2 ref={(_subtitle) => (subtitle = _subtitle)}>Error</h2>
|
||||
<div className="sm (640px) py-2">
|
||||
{errorMsg}
|
||||
</div>
|
||||
<button className="bg-red-500 hover:bg-blue-600 text-white py-2 px-4 mx-2 rounded-lg w-48" onClick={closeModal}>close</button>
|
||||
</Modal>
|
||||
</div>
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -2,13 +2,41 @@ import React, { useState } from 'react';
|
|||
import { FileUploader } from 'react-drag-drop-files';
|
||||
import axios from 'axios';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Modal from 'react-modal';
|
||||
|
||||
const customStyles = {
|
||||
content: {
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
right: 'auto',
|
||||
bottom: 'auto',
|
||||
marginRight: '-50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
},
|
||||
};
|
||||
|
||||
function ShareFile() {
|
||||
const [file, setFile] = useState(null);
|
||||
const [passcode, setPasscode] = useState('');
|
||||
const [errorMsg, setErrorcode] = useState('');
|
||||
const [ttl, setTtl] = useState('');
|
||||
const [shareableLink, setShareableLink] = useState('');
|
||||
const [notification, setNotification] = useState('');
|
||||
let subtitle;
|
||||
const [modalIsOpen, setIsOpen] = React.useState(false);
|
||||
|
||||
function openModal() {
|
||||
setIsOpen(true);
|
||||
}
|
||||
|
||||
function afterOpenModal() {
|
||||
// references are now sync'd and can be accessed.
|
||||
subtitle.style.color = '#f00';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
const handleFileUpload = (file) => {
|
||||
setFile(file);
|
||||
|
|
@ -43,6 +71,8 @@ function ShareFile() {
|
|||
.catch((error) => {
|
||||
// Handle errors here
|
||||
console.error('File upload failed', error);
|
||||
openModal()
|
||||
setErrorcode(error.response.data.msg)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -58,6 +88,22 @@ function ShareFile() {
|
|||
|
||||
return (
|
||||
<div className="h-screen flex flex-col items-center justify-center bg-gray-100">
|
||||
<div>
|
||||
<Modal
|
||||
isOpen={modalIsOpen}
|
||||
onAfterOpen={afterOpenModal}
|
||||
onRequestClose={closeModal}
|
||||
style={customStyles}
|
||||
contentLabel="Error Modal"
|
||||
ariaHideApp={false}
|
||||
>
|
||||
<h2 ref={(_subtitle) => (subtitle = _subtitle)}>Error</h2>
|
||||
<div className="sm (640px) py-2">
|
||||
{errorMsg}
|
||||
</div>
|
||||
<button className="bg-red-500 hover:bg-blue-600 text-white py-2 px-4 mx-2 rounded-lg w-48" onClick={closeModal}>close</button>
|
||||
</Modal>
|
||||
</div>
|
||||
<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
|
||||
|
|
@ -93,7 +139,7 @@ function ShareFile() {
|
|||
<label className="block text-sm font-medium text-gray-700">
|
||||
Download Here:
|
||||
</label>
|
||||
<a href={shareableLink} className="text-lg font-bold text-blue-600">{shareableLink}</a>
|
||||
<a href={shareableLink} className="px-6 py-3 text-blue-100 no-underline bg-blue-500 rounded hover:bg-blue-600 hover:underline hover:text-blue-200">Download file</a>
|
||||
</div>
|
||||
)}
|
||||
{notification && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue