From 9b5fb721b848b6936c6ecec65bdfdc2b299e072d Mon Sep 17 00:00:00 2001 From: LoriaLawrenceZ Date: Tue, 22 Oct 2024 21:44:32 -0300 Subject: [PATCH] [feat] Knowledge Alerts Signed-off-by: LoriaLawrenceZ --- src/App.jsx | 2 + .../KnowledgeAlerts/KnowledgeAlerts.jsx | 61 ++++++++++++++++ src/context/Knowledge/KnowledgeContext.jsx | 5 ++ src/context/Knowledge/KnowledgeProvider.jsx | 29 ++++++++ src/hook/Knowledge/useKnowledgeContext.jsx | 12 +++ src/main.jsx | 5 +- src/pages/Knowledge/Knowledge.jsx | 20 ++++- .../KnowledgeAlerts/KnowledgeAlerts.css | 73 +++++++++++++++++++ 8 files changed, 204 insertions(+), 3 deletions(-) create mode 100644 src/components/alertMessages/KnowledgeAlerts/KnowledgeAlerts.jsx create mode 100644 src/context/Knowledge/KnowledgeContext.jsx create mode 100644 src/context/Knowledge/KnowledgeProvider.jsx create mode 100644 src/hook/Knowledge/useKnowledgeContext.jsx create mode 100644 src/style/alertMessages/KnowledgeAlerts/KnowledgeAlerts.css diff --git a/src/App.jsx b/src/App.jsx index 5ad9bc7..147794a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -17,6 +17,7 @@ import AuthenticationAlerts from "./components/alertMessages/AuthenticationAlert import Account from "./pages/Account/Account.jsx"; import About from "./pages/About/About.jsx"; import Knowledge from "./pages/Knowledge/Knowledge.jsx"; +import KnowledgeAlerts from "./components/alertMessages/KnowledgeAlerts/KnowledgeAlerts.jsx"; export function App() { const [scrollDirection, setScrollDirection] = useState("up"); @@ -63,6 +64,7 @@ export function App() { return (
+
{ + if (location.pathname === "/knowledge") { + return; + } + + setIsFileUploadErrorAlertVisible(false); + setIsFileUploadSuccessAlertVisible(false); + }, [location.pathname]); + + useEffect(() => { + if (isFileUploadErrorAlertVisible) { + const timer = setTimeout(() => { + setIsFileUploadErrorAlertVisible(false); + }, 2500); + + return () => clearTimeout(timer); + } + + if (isFileUploadSuccessAlertVisible) { + const timer = setTimeout(() => { + setIsFileUploadSuccessAlertVisible(false); + }, 2500); + + return () => clearTimeout(timer); + } + + }, [isFileUploadErrorAlertVisible, isFileUploadSuccessAlertVisible]); + + return ( +
+ + {fileUploadErrorMessage} + + + + {fileUploadSuccessMessage} + + + {/*
*/} + {/* AVISO PARA TESTER*/} + {/* Email: tester*/} + {/* Senha: tester*/} + {/*
*/} +
+ ); +} + +export default KnowledgeAlerts; \ No newline at end of file diff --git a/src/context/Knowledge/KnowledgeContext.jsx b/src/context/Knowledge/KnowledgeContext.jsx new file mode 100644 index 0000000..084f57e --- /dev/null +++ b/src/context/Knowledge/KnowledgeContext.jsx @@ -0,0 +1,5 @@ +import { createContext } from "react"; + +const KnowledgeContext = createContext(null); + +export default KnowledgeContext; diff --git a/src/context/Knowledge/KnowledgeProvider.jsx b/src/context/Knowledge/KnowledgeProvider.jsx new file mode 100644 index 0000000..6235448 --- /dev/null +++ b/src/context/Knowledge/KnowledgeProvider.jsx @@ -0,0 +1,29 @@ +import KnowledgeContext from "./KnowledgeContext.jsx"; +import PropTypes from "prop-types"; +import {useState} from "react"; + +KnowledgeProvider.propTypes = { + children: PropTypes.node.isRequired, +}; + +function KnowledgeProvider({ children }) { + const [fileName, setFileName] = useState(""); + const [isFileUploadErrorAlertVisible, setIsFileUploadErrorAlertVisible] = useState(false); + const [fileUploadErrorMessage, setFileUploadErrorMessage] = useState(""); + const [isFileUploadSuccessAlertVisible, setIsFileUploadSuccessAlertVisible] = useState(false); + const [fileUploadSuccessMessage, setFileUploadSuccessMessage] = useState(""); + + return ( + + {children} + + ); +} + +export default KnowledgeProvider; \ No newline at end of file diff --git a/src/hook/Knowledge/useKnowledgeContext.jsx b/src/hook/Knowledge/useKnowledgeContext.jsx new file mode 100644 index 0000000..c964b87 --- /dev/null +++ b/src/hook/Knowledge/useKnowledgeContext.jsx @@ -0,0 +1,12 @@ +import { useContext } from 'react'; +import KnowledgeContext from '../../context/Knowledge/KnowledgeContext.jsx'; + +const useKnowledgeContext = () => { + const context = useContext(KnowledgeContext); + if (context === undefined) { + throw new Error('useKnowledgeContext must be used within an KnowledgeProvider'); + } + return context; +}; + +export default useKnowledgeContext; \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 37af6b5..2d311d6 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -5,12 +5,15 @@ import { createRoot } from "react-dom/client"; import { App } from "./App.jsx"; import { BrowserRouter } from "react-router-dom"; import AuthenticationProvider from "./context/Authentication/AuthenticationProvider.jsx"; +import KnowledgeProvider from "./context/Knowledge/KnowledgeProvider.jsx"; createRoot(document.getElementById("root")).render( - + + + diff --git a/src/pages/Knowledge/Knowledge.jsx b/src/pages/Knowledge/Knowledge.jsx index 1e7efcc..c54bc02 100644 --- a/src/pages/Knowledge/Knowledge.jsx +++ b/src/pages/Knowledge/Knowledge.jsx @@ -1,8 +1,17 @@ import '../../style/Knowledge/Knowledge.css'; import {useRef, useState} from "react"; +import useKnowledgeContext from "../../hook/Knowledge/useKnowledgeContext.jsx"; function Knowledge() { + const { + fileName, setFileName, + isFileUploadErrorAlertVisible, setIsFileUploadErrorAlertVisible, + fileErrorUploadMessage, setFileUploadErrorMessage, + isFileUploadSuccessAlertVisible, setIsFileUploadSuccessAlertVisible, + fileUploadSuccessMessage, setFileUploadSuccessMessage + } = useKnowledgeContext(); + const [files, setFiles] = useState([]); // State to hold selected valid files const [errors, setErrors] = useState([]); // State to hold validation error messages const [isDragging, setIsDragging] = useState(false); // State for drag status @@ -56,16 +65,23 @@ function Knowledge() { incomingFiles.forEach((file) => { // Validate file type if (!allowedFileTypes.includes(file.type)) { - errorMessages.push(`${file.name} is not a supported file type.`); + setFileName(file.name); + setIsFileUploadErrorAlertVisible(true); + setFileUploadErrorMessage(`${file.name} is not a supported file type.`); } // Validate file size if (file.size > maxFileSize) { - errorMessages.push(`${file.name} exceeds the 5MB size limit.`); + setFileName(file.name); + setIsFileUploadErrorAlertVisible(true); + setFileUploadErrorMessage(`${file.name} exceeds the 5MB size limit.`); } // Add to valid files if it passes validation if (allowedFileTypes.includes(file.type) && file.size <= maxFileSize) { + setFileName(file.name); + setIsFileUploadSuccessAlertVisible(true); + setFileUploadSuccessMessage(`${file.name} is ready for upload.`); validFiles.push(file); } }); diff --git a/src/style/alertMessages/KnowledgeAlerts/KnowledgeAlerts.css b/src/style/alertMessages/KnowledgeAlerts/KnowledgeAlerts.css new file mode 100644 index 0000000..9b5a8ec --- /dev/null +++ b/src/style/alertMessages/KnowledgeAlerts/KnowledgeAlerts.css @@ -0,0 +1,73 @@ +.knowledge-card-alerts { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + width: 100vw; + position: fixed; + color: var(--light-gray); + z-index: 901; + pointer-events: none; +} + +/*-----===| ALERTS |===-----*/ +.knowledge-card-error-alert { + border: solid 1px var(--medium-red); + background-color: rgba(var(--medium-red-rgb), 0.1); +} + +.knowledge-card-success-alert, +.account-card-success-alert { + border: solid 1px var(--medium-green); + background-color: rgba(var(--medium-green-rgb), 0.1); +} + +.knowledge-card-error-alert , +.knowledge-card-success-alert, +.account-card-success-alert { + border-radius: 5px; + padding: 3px 6px; + opacity: 0; + transform: translateY(-100%); + align-self: flex-start; + transition: var(--all-500ms-custom); + position: absolute; + pointer-events: none; +} +.show-card-alert { + opacity: 1; + transform: translateY(calc(8vh + 30px + 100%)); /* Header + ele 1 dele mesmo*/ +} + + +/*-----===| Tester Alert Card |===-----*/ +.tester-knowledge-card-error-alert { + border-radius: 5px; + max-width: 300px; + width: 25%; + min-width: 200px; + padding: 3px 6px; + opacity: 0; + transform: translateY(calc(100vh + 100%)); + align-self: flex-start; + transition: var(--all-500ms-custom); + position: absolute; + pointer-events: none; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + + & :first-child { + align-self: center; + padding: 5px 0; + } +} +.tester-knowledge-card-error-alert { + border: solid 1px var(--medium-red); + background-color: rgba(var(--medium-red-rgb), 0.1); +} +.tester-show-card-alert { + opacity: 1; + transform: translateY(calc(100vh - 150%)); +} \ No newline at end of file