ref: alert context

ISSResearch · Mar 22, 2024 · 055cfd9 · 055cfd9
1 parent b7b8126
commit 055cfd9
Show file tree

Hide file tree

Showing 19 changed files with 190 additions and 90 deletions.
diff --git a/frontend-app/src/components/AlertManager/index.jsx b/frontend-app/src/components/AlertManager/index.jsx
@@ -17,7 +17,7 @@ const COLOR_MAP = {
  */
 export default function AlertManager({ maxOnScreen }) {
   const dispatch = useDispatch();
-  const alerts = useSelector(state => state.activeAlerts);
+  const alerts = useSelector((state) => state.activeAlerts);
 
   return (
     <aside className="alertManager">

diff --git a/frontend-app/src/components/AppRouter/index.jsx b/frontend-app/src/components/AppRouter/index.jsx
@@ -1,14 +1,14 @@
 import { Outlet, Navigate, useLocation } from "react-router-dom";
-import { ReactElement, useContext, useEffect, useState } from "react";
-import { UserContext } from "../../context/User";
+import { ReactElement, useEffect, useState } from "react";
+import { useSelector } from "react-redux";
 
 /** @type {string[]} */
 const SAFE_ROUTES = ["/login", "/registration"];
 
 /** @returns {ReactElement} */
 export default function AppRouter() {
   const [redirect, setRedirect] = useState(false);
-  const { user } = useContext(UserContext);
+  const user = useSelector((state) => state.user);
   const location = useLocation();
 
   useEffect(() => {

diff --git a/frontend-app/src/components/FilesDownload/index.jsx b/frontend-app/src/components/FilesDownload/index.jsx
@@ -1,8 +1,9 @@
-import { useState, useContext, ReactElement } from "react";
+import { useState, ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 import { api, fileApi } from "../../config/api";
 import { useFiles } from "../../hooks";
-import { AlertContext } from "../../context/Alert";
+import { useDispatch } from "react-redux";
+import { addAlert } from "../../slices/alerts";
 import Load from "../ui/Load";
 import FileDownloadSelector from "../forms/FileDownloadSelector";
 import Arrow from "../ui/Arrow";
@@ -29,7 +30,7 @@ export default function FilesDownload({ pathID }) {
   const [manual, setManual] = useState(false);
   const [isNew, setIsNew] = useState(false);
   const [task, setTask] = useState("");
-  const { addAlert } = useContext(AlertContext);
+  const dispatch = useDispatch();
   const fileManager = useFiles();
   const navigate = useNavigate();
 
@@ -91,7 +92,10 @@ export default function FilesDownload({ pathID }) {
       );
 
       if (data?.task_id) {
-        addAlert(`Download task ${data.task_id} created`, "success");
+        dispatch(addAlert({
+          message: `Download task ${data.task_id} created`,
+          type: "success"
+        }));
         setTask(data.task_id);
       }
     }
@@ -100,7 +104,11 @@ export default function FilesDownload({ pathID }) {
         response.status === 401 || response.status === 403
       );
 
-      addAlert("Getting files data error:" + message, "error", authFailed);
+      dispatch(addAlert({
+        message: "Getting files data error:" + message,
+        type: "error",
+        noSession: authFailed
+      }));
 
       if (authFailed) navigate("/login");
     }

diff --git a/frontend-app/src/components/FilesValidate/index.jsx b/frontend-app/src/components/FilesValidate/index.jsx
@@ -1,8 +1,9 @@
-import { useEffect, useContext, useState, ReactElement } from 'react';
+import { useEffect, useState, ReactElement } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useSwiper, useFiles } from '../../hooks';
 import { api } from '../../config/api';
-import { AlertContext } from "../../context/Alert";
+import { addAlert } from '../../slices/alerts';
+import { useDispatch } from "react-redux";
 import ValidationFilterGroup from '../forms/ValidationFilterGroup';
 import FileSelector from '../common/FileSelector';
 import FileSwiper from '../common/FileSwiper';
@@ -33,7 +34,7 @@ export default function FilesValidation({ pathID, attributes, canValidate }) {
   const [loading, setLoading] = useState(true);
   const [pageQuery, setPageQuery] = useSearchParams();
   const [filterData, setFilterData] = useState({});
-  const { addAlert } = useContext(AlertContext);
+  const dispatch = useDispatch();
   const fileManager = useFiles();
   const sliderManager = useSwiper();
   const navigate = useNavigate();
@@ -153,7 +154,11 @@ export default function FilesValidation({ pathID, attributes, canValidate }) {
       .catch(({ message, response }) => {
         var authFailed = response && (response.status === 401 || response.status === 403);
 
-        addAlert("Getting project files error: " + message, "error", authFailed);
+        dispatch(addAlert({
+          message: "Getting project files error: " + message,
+          type: "error",
+          noSession: authFailed
+        }));
 
         if (authFailed) navigate("/login");
       });

diff --git a/frontend-app/src/components/Header/index.jsx b/frontend-app/src/components/Header/index.jsx
@@ -15,7 +15,7 @@ const LINK_SET = [
 
 /** @returns {ReactElement} */
 export default function Header() {
-  const user = useSelector(state => state.user);
+  const user = useSelector((state) => state.user);
   const dispatch = useDispatch();
   const navigate = useNavigate();
 

diff --git a/frontend-app/src/components/ProjectCreate/index.jsx b/frontend-app/src/components/ProjectCreate/index.jsx
@@ -1,8 +1,9 @@
-import { useState, useContext, ReactElement } from 'react';
+import { useState, ReactElement } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { api } from '../../config/api';
 import { useAttributeManager } from '../../hooks';
-import { AlertContext } from "../../context/Alert";
+import { addAlert } from '../../slices/alerts';
+import { useDispatch } from "react-redux";
 import AttributeCreatorForm from '../forms/AttributeCreatorForm';
 import Load from '../ui/Load';
 import './styles.css';
@@ -11,7 +12,7 @@ import './styles.css';
 export default function ProjectCreate() {
   const [loading, setLoading] = useState(false);
   const [preview, setPreview] = useState('');
-  const { addAlert } = useContext(AlertContext);
+  const dispatch = useDispatch();
   const attributeManager = useAttributeManager();
   const navigate = useNavigate();
 
@@ -45,13 +46,17 @@ export default function ProjectCreate() {
           }
         }
       );
-      addAlert("Project created", "success");
+      dispatch(addAlert({ message: "Project created", type: "success" }));
       navigate("/projects/");
     }
     catch({ message, response }) {
       var authFailed = response && (response.status === 401 || response.status === 403);
 
-      addAlert("Creating preoject error:" + message, "error", authFailed);
+      dispatch(addAlert({
+        message: "Creating preoject error:" + message,
+        type: "error",
+        noSession: authFailed
+      }));
 
       if (authFailed) navigate("/login");
 

diff --git a/frontend-app/src/components/ProjectEdit/index.jsx b/frontend-app/src/components/ProjectEdit/index.jsx
@@ -1,8 +1,9 @@
-import { useState, useContext, useRef, ReactElement } from 'react';
+import { useState, useRef, ReactElement } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAttributeManager } from '../../hooks';
 import { api } from '../../config/api';
-import { AlertContext } from "../../context/Alert";
+import { addAlert } from '../../slices/alerts';
+import { useDispatch } from "react-redux";
 import Load from '../ui/Load';
 import AttributeCreatorForm from '../forms/AttributeCreatorForm';
 import './styles.css';
@@ -24,9 +25,9 @@ export default function ProjectEdit({
   const [loading, setLoading] = useState(false);
   const [deleteAccept, setDeleteAccept] = useState(false);
   const [preview, setPreview] = useState(projectDescription);
-  const { addAlert } = useContext(AlertContext);
   const attributeManager = useAttributeManager();
   const attributeManagerNew = useAttributeManager();
+  const dispatch = useDispatch();
   const navigate = useNavigate();
   const deleteInput = useRef(null);
 
@@ -71,7 +72,8 @@ export default function ProjectEdit({
     event.preventDefault();
     if (loading) return;
 
-    if (!validateNewAttributes()) return addAlert('Some attribute forms are missed.', "error");
+    if (!validateNewAttributes())
+      return dispatch(addAlert({ message: 'Some attribute forms are missed.', type: "error" }));
 
     setLoading(true);
 
@@ -94,14 +96,18 @@ export default function ProjectEdit({
         }
       );
 
-      addAlert(`Project ${projectName} changed`, "success");
+      dispatch(addAlert({ message: `Project ${projectName} changed`, type: "success" }));
 
       window.location.reload();
     }
     catch ({ message, response }) {
       var authFailed = response.status === 401 || response.status === 403;
 
-      addAlert("Updating project error: " + message, "error", authFailed);
+      dispatch(addAlert({
+        message: "Updating project error: " + message,
+        type: "error",
+        noSession: authFailed
+      }));
 
       if (authFailed) navigate("/login");
 
@@ -111,7 +117,10 @@ export default function ProjectEdit({
 
   async function deleteProject() {
       if (deleteInput.current.value !== projectName) {
-      addAlert("Entered name differs from the actual Project name.", "error");
+      dispatch(addAlert({
+        message: "Entered name differs from the actual Project name.",
+        type: "error"
+      }));
       setDeleteAccept(false);
       return;
     }
@@ -127,13 +136,20 @@ export default function ProjectEdit({
           }
         }
       );
-      addAlert(`Project ${projectName} deleted`, "success");
+      dispatch(addAlert({
+        message: `Project ${projectName} deleted`,
+        type: "success"
+      }));
       navigate('/');
     }
     catch({ message, response }) {
       var authFailed = response.status === 401 || response.status === 403;
 
-      addAlert("Deleting project error: " + message, "error", authFailed);
+      dispatch(addAlert({
+        message: "Deleting project error: " + message,
+        type: "error",
+        noSession: authFailed
+      }));
 
       if (authFailed) navigate("/login");
 

diff --git a/frontend-app/src/components/ProjectVisibility/index.jsx b/frontend-app/src/components/ProjectVisibility/index.jsx
@@ -1,9 +1,10 @@
-import { useEffect, useContext, useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from 'react-router-dom';
 import { Fragment, ReactElement } from "react";
 import { useCollectors } from '../../hooks';
 import { api } from "../../config/api";
-import { AlertContext } from "../../context/Alert";
+import { addAlert } from "../../slices/alerts";
+import { useDispatch } from "react-redux";
 import Load from "../ui/Load";
 import './styles.css';
 
@@ -26,7 +27,7 @@ const PERMISSIONS = [
 export default function ProjectVisibility({ pathID }) {
   const [loading, setLoading] = useState({ page: true, submit: false });
   const { collectors, changeCollector, initData, gatherData } = useCollectors();
-  const { addAlert } = useContext(AlertContext);
+  const dispatch = useDispatch();
   const navigate = useNavigate();
 
   async function sendForm(event) {
@@ -47,13 +48,17 @@ export default function ProjectVisibility({ pathID }) {
       });
 
       initData(data);
-      addAlert("Visibility for project changed", "success");
+      dispatch(addAlert({ message: "Visibility for project changed", type: "success" }));
       setLoading({ ...loading, submit: false });
     }
     catch({ message, response }) {
       var authFailed = response?.status === 401 || response?.status === 403;
 
-      addAlert("Updating collectors error" + message, "error", authFailed);
+      dispatch(addAlert({
+        message: "Updating collectors error" + message,
+        type: "error",
+        noSession: authFailed
+      }));
 
       if (authFailed) navigate("/login");
     }
@@ -70,7 +75,11 @@ export default function ProjectVisibility({ pathID }) {
       .catch(({ message, response }) => {
         var authFailed = response.status === 401 || response.status === 403;
 
-        addAlert("Getting collectors error: " + message, "error", authFailed);
+        dispatch(addAlert({
+          message: "Getting collectors error: " + message,
+          type: "error",
+          noSession: authFailed
+        }));
 
         if (authFailed) navigate("/login");
       });

diff --git a/frontend-app/src/components/common/DownloadView/index.jsx b/frontend-app/src/components/common/DownloadView/index.jsx
@@ -1,8 +1,9 @@
-import { useEffect, useContext, useRef, useState, ReactElement } from "react";
+import { useEffect, useRef, useState, ReactElement } from "react";
 import { useBlocker } from "react-router-dom";
 import { fileApi } from "../../../config/api";
 import { getOriginDomain } from "../../../utils";
-import { AlertContext } from "../../../context/Alert";
+import { useDispatch } from "react-redux";
+import { addAlert } from "../../../slices/alerts";
 import "./styles.css";
 
 /**
@@ -15,7 +16,7 @@ export default function DownloadView({ taskID }) {
   const [message, setMessage] = useState("");
   const [download, setDownload] = useState(false);
   const [pageBlock] = useState(true);
-  const { addAlert } = useContext(AlertContext);
+  const dispatch = useDispatch();
   const componentRef = useRef(null);
 
   // TODO: couldnt clear interval the normal way.
@@ -45,7 +46,7 @@ export default function DownloadView({ taskID }) {
       clipboardTip.innerHTML = "cant copy";
       clipboardTip.classList.add("clipboardTip--error");
 
-      addAlert("Clipboard error: " + message, "error");
+      dispatch(addAlert({ message: "Clipboard error: " + message, type: "error" }));
     }
 
     componentRef.current.appendChild(clipboardTip);
@@ -55,12 +56,12 @@ export default function DownloadView({ taskID }) {
 
   const statusHandlers = {
     SUCCESS: (archiveID) => {
-      addAlert("Got dataset", "success");
+      dispatch(addAlert({ message: "Got dataset", type: "success" }));
       setMessage("DataSet is ready. Downloading...");
       getDataset(archiveID);
     },
     FAILURE: () => {
-      addAlert("Preparing dataset error", "error");
+      dispatch(addAlert({ message: "Preparing dataset error", type: "error" }));
       setMessage(
         "Error occured while gathering the DataSet. Please request a new one.",
       );
@@ -94,7 +95,11 @@ export default function DownloadView({ taskID }) {
         response.status === 401 || response.status === 403
       );
 
-      addAlert("Process request error: " + message, "error", authFailed);
+      dispatch(addAlert({
+        message: "Process request error: " + message,
+        type: "error",
+        noSession: authFailed
+      }));
     }
   }
 
@@ -116,7 +121,11 @@ export default function DownloadView({ taskID }) {
         response.status === 401 || response.status === 403
       );
 
-      addAlert("Proccess status respons error: " + message, "error", authFailed);
+      dispatch(addAlert({
+        message: "Proccess status respons error: " + message,
+        type: "error",
+        noSession: authFailed
+      }));
     }
   }