feature: message handling implemented

Author: b-angelov

src/assets/css/common/messages.css

@@ -3,6 +3,7 @@
 .message-container{
     transform: matrix(125);
     transition: all ease-in-out 1s 1s !important;
+    border-radius: 60%/8.5em;
     width: 5em;
     height: 2em;
     position: relative;
@@ -19,14 +20,15 @@
 
 }
 
-.message-container.hides{
+.message-container.hides, .message-container.appears{
     width: 0.3em;
     height: 0.3em;
     font-size: 0.1em;
     visibility: hidden;
 }
 
 .message-container > div{
+    border-radius: 60%/50%;
     background: rgb(132,11,11,0.5);
     width: 50%;
     margin-left: 25%;

src/components/accounts/Login.jsx

@@ -3,6 +3,8 @@ import {useForm} from "../../hooks/useForm.js";
 import useAuth from "../../hooks/useAuth.js";
 import {useNavigate} from "react-router";
 import routes from "../../routes/routes.js";
+import {useContext} from "react";
+import MainContext from "../../contexts/MainContext.js";
 
 const formValues = {
     username:"",
@@ -12,11 +14,12 @@ const formValues = {
 export default function Login() {
     const {addStyle} = useOrderedStyles();
     const {login} = useAuth();
+    const {setMessage} = useContext(MainContext)
     const navigate = useNavigate();
 
     const loginSubmitHandler = ({username, password}) =>{
         (async ()=> {
-            const logged = await login(username, password)
+            const logged = await login(username, password, setMessage)
             if (logged?.status === 200){
                 navigate(routes["home"])
             }else{

src/components/accounts/Logout.jsx

@@ -3,20 +3,22 @@ import {Navigate} from "react-router-dom";
 import routes from "../../routes/routes.js";
 import useApi from "../../hooks/useAPI.js";
 import useReload from "../../hooks/useReload.js";
-import {useEffect} from "react";
+import {useContext, useEffect} from "react";
 import {useNavigate} from "react-router-dom";
+import MainContext from "../../contexts/MainContext.js";
 
 export default function Logout() {
 
     const {logout} = useAuth()
+    const {setMessage} = useContext(MainContext)
     const {loadNavFiles} = useApi()
     const {reloadPage} = useReload()
     const navigate = useNavigate()
     const {apiLoaded} = useApi()
 
     useEffect(()=> {
         (async () => {
-            await logout()
+            await logout(setMessage)
         })();
     },[])
 

src/components/common/Base.jsx

@@ -6,36 +6,49 @@ import useOrderedStyles from "../../hooks/useOrderedStyles.js";
 import Nav from "../navigation/Nav.jsx";
 import {Outlet} from "react-router-dom";
 import useAuth from "../../hooks/useAuth.js";
-import {useEffect, useState} from "react";
+import {useContext, useEffect, useState} from "react";
 import useReload from "../../hooks/useReload.js";
 import routes from "../../routes/routes.js";
 import useAPI from "../../hooks/useAPI.js";
 import {Link} from "react-router";
+import MainContext from "../../contexts/MainContext.js";
 
 
 export default function Base(){
 
     const {reload,setReload} = useState(false)
     const {setReloadPage} = useReload()
+    const [message, setMessage_] = useState(null)
+    const [styleHides, setStyleHides] = useState(false)
+    const [styleAppears, setStyleAppears] = useState(true)
     const {addStyle,addExternalStyle} = useOrderedStyles();
     addStyle(`/main.css`,'main')
     addExternalStyle(`${import.meta.env.VITE_API_ADDRESS}dstyles/marble/css/`)
     const {context, login, user} = useAuth()
     const reloadCallback = ()=> setReload(!reload)
+    const hideDuration = 6000
 
-
+    const setMessage = (message, duration=hideDuration) => {
+        setMessage_((<div>{message}</div>))
+        setTimeout(() => {setMessage_(null); setStyleHides(false); setStyleAppears(true)}, duration)
+    }
 
     useEffect(() => {
         (async () =>{
-            await login()
+            await login(null,null,setMessage)
     })();
         setReloadPage("home", reloadCallback)
     }, []);
 
+    useEffect(() => {
+        message && setTimeout(()=>{setStyleHides(true)},hideDuration - 2000)
+        message && setTimeout(()=>{setStyleAppears(false)},2)
+    },[message])
+
 
 
     return (
-        <>
+        <MainContext.Provider value={{setMessage}}>
             {/*<ExternalStyle url={`${import.meta.env.VITE_API_ADDRESS}dstyles/marble/css/`}/>*/}
             {/*!--{# here you can add planet image container if you'd like#}--*/}
             <div id="container">
@@ -181,15 +194,16 @@ export default function Base(){
                                 </div>
 
                                 <div id="component" className="no-component-background" >
-                                    <div className="message-container" >
+                                    {message && (<div className={"message-container" + (styleHides ? " hides" : "") + (styleAppears ? " appears" : "")}>
+                                        {message}
                                         {/*<!--{% block message_content %}
                                         {% for message in messages %}
                                             <div>
                                         {{message}}
                                     </div>
                                     {% endfor %}
                                     {% endblock %}-->*/}
-                                    </div>
+                                    </div>)}
 
                                     <div className={`component-wrapper`} >
                                         <Outlet/>
@@ -232,6 +246,6 @@ export default function Base(){
 
             {/*<!--</tag|class=div|containerplanetimage>-->*/}
 
-        </>
+        </MainContext.Provider>
     );
 }

src/contexts/MainContext.js

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

src/hooks/useAPI.js

@@ -12,7 +12,7 @@ function useAPI(){
     const apiAddress = import.meta.env.VITE_API_ADDRESS;
 
     async function loadApiFiles(){
-        import(`${apiAddress}orth_calendar/apijs/?v=${Date.now()}`).
+        import(`${apiAddress}orth_calendar/apijs/?v=${Date.now()}` /* @vite-ignore */).
         then(response=>{
             setApiMethods(response)
             setApiLoaded(true)

src/hooks/useAuth.js

@@ -2,12 +2,17 @@ import {useContext, useEffect} from "react";
 import AuthContext from "../contexts/AuthContext.js";
 import axios, {AxiosHeaders} from "axios";
 import {jwtDecode} from "jwt-decode";
+import MainContext from "../contexts/MainContext.js";
 
 export default function useAuth()  {
     const context = useContext(AuthContext);
     const {token, setToken, api, setUser, user} = context;
 
-    const login = (username, password)=>{
+    const toggleSuccess = (success,onSuccess="",onFail="",fn=()=>{}) => {
+        success ? fn(onSuccess) : fn(onFail);
+    }
+
+    const login = (username, password, messageCallback=()=>{})=>{
         let response;
 
         console.log(token)
@@ -39,8 +44,10 @@ export default function useAuth()  {
                 setToken(response.data.access);
                 console.log(jwtDecode(response.data.access))
                 setUser(jwtDecode(response.data.access))
+                toggleSuccess(response.status === 200, "Влизането e успешно!", "Влизането e неуспешно!", messageCallback)
                 return {status: 200, data: response};
             }).catch((error) => {
+                messageCallback("Влизането сe провали!")
                 console.error("Error logging in:", error);
                 return {status: 500, error}
             })
@@ -80,8 +87,13 @@ export default function useAuth()  {
         return response;
     }
 
-    const logout = async () => {
-        await api.post(`/api/token/logout/`, {});
+    const logout = async (messageCallback=()=>{}) => {
+        await api.post(`/api/token/logout/`, {}).
+        then(response=>toggleSuccess(response.status === 200, "Излязохте успешено!", "Излизането сe провали!", messageCallback)).
+        catch((error) => {
+            console.error("Error logging out:", error);
+            messageCallback("Излизането сe провали!")
+        });
         await setToken(null);
         await setUser({});
     }