[feat] Knowledge Alerts

Signed-off-by: LoriaLawrenceZ <[email protected]>

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 (
         <div className="page">
             <AuthenticationAlerts />
+            <KnowledgeAlerts />
 
             <section
                 className={`login-modal-container ${

src/components/alertMessages/KnowledgeAlerts/KnowledgeAlerts.jsx

@@ -0,0 +1,61 @@
+import "../../../style/alertMessages/KnowledgeAlerts/KnowledgeAlerts.css";
+import useKnowledgeContext from "../../../hook/Knowledge/useKnowledgeContext.jsx";
+import {useEffect} from "react";
+
+function KnowledgeAlerts() {
+
+    const {
+        isFileUploadErrorAlertVisible, setIsFileUploadErrorAlertVisible,
+        fileUploadErrorMessage,
+        isFileUploadSuccessAlertVisible, setIsFileUploadSuccessAlertVisible,
+        fileUploadSuccessMessage
+    } = useKnowledgeContext();
+
+    useEffect(() => {
+        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 (
+        <section className="knowledge-card-alerts">
+            <span className={`knowledge-card-error-alert glass-effect ${isFileUploadErrorAlertVisible && "show-card-alert"}`}>
+                {fileUploadErrorMessage}
+            </span>
+
+            <span className={`knowledge-card-success-alert glass-effect ${isFileUploadSuccessAlertVisible && "show-card-alert"}`}>
+                {fileUploadSuccessMessage}
+            </span>
+
+            {/*<div className={`tester-knowledge-card-error-alert glass-effect ${isTesterAlertVisible && "tester-show-card-alert"}`}>*/}
+            {/*    <span className={`tester-card-title`}><b>AVISO PARA TESTER</b></span>*/}
+            {/*    <span className={`tester-card-email`}><b>Email</b>: tester</span>*/}
+            {/*    <span className={`tester-card-password`}><b>Senha</b>: tester</span>*/}
+            {/*</div>*/}
+        </section>
+    );
+}
+
+export default KnowledgeAlerts;

src/context/Knowledge/KnowledgeContext.jsx

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const KnowledgeContext = createContext(null);
+
+export default KnowledgeContext;

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 (
+        <KnowledgeContext.Provider value={{
+            fileName, setFileName,
+            isFileUploadErrorAlertVisible, setIsFileUploadErrorAlertVisible,
+            fileUploadErrorMessage, setFileUploadErrorMessage,
+            isFileUploadSuccessAlertVisible, setIsFileUploadSuccessAlertVisible,
+            fileUploadSuccessMessage, setFileUploadSuccessMessage
+        }}>
+            {children}
+        </KnowledgeContext.Provider>
+    );
+}
+
+export default KnowledgeProvider;

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;

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(
     <StrictMode>
         <BrowserRouter>
             <AuthenticationProvider>
-                <App />
+                <KnowledgeProvider>
+                    <App />
+                </KnowledgeProvider>
             </AuthenticationProvider>
 
             <Analytics />

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);
             }
         });

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%));
+}