feature/IO-3096-GlobalNotifications - Checkpoint - Clicking the alert notification will also navigate you to the job.
This commit is contained in:
@@ -4,7 +4,7 @@ import LogRocket from "logrocket";
|
||||
import { lazy, Suspense, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { Route, Routes } from "react-router-dom";
|
||||
import { Route, Routes, useNavigate } from "react-router-dom";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import DocumentEditorContainer from "../components/document-editor/document-editor.container";
|
||||
import ErrorBoundary from "../components/error-boundary/error-boundary.component"; // Component Imports
|
||||
@@ -46,6 +46,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
|
||||
const client = useSplitClient().client;
|
||||
const [listenersAdded, setListenersAdded] = useState(false);
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (!navigator.onLine) {
|
||||
@@ -200,7 +201,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
|
||||
path="/manage/*"
|
||||
element={
|
||||
<ErrorBoundary>
|
||||
<SocketProvider bodyshop={bodyshop}>
|
||||
<SocketProvider bodyshop={bodyshop} navigate={navigate}>
|
||||
<PrivateRoute isAuthorized={currentUser.authorized} />
|
||||
</SocketProvider>
|
||||
</ErrorBoundary>
|
||||
@@ -212,7 +213,7 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
|
||||
path="/tech/*"
|
||||
element={
|
||||
<ErrorBoundary>
|
||||
<SocketProvider bodyshop={bodyshop}>
|
||||
<SocketProvider bodyshop={bodyshop} navigate={navigate}>
|
||||
<PrivateRoute isAuthorized={currentUser.authorized} />
|
||||
</SocketProvider>
|
||||
</ErrorBoundary>
|
||||
|
||||
@@ -15,7 +15,7 @@ import { useMutation } from "@apollo/client";
|
||||
|
||||
const SocketContext = createContext(null);
|
||||
|
||||
export const SocketProvider = ({ children, bodyshop }) => {
|
||||
export const SocketProvider = ({ children, bodyshop, navigate }) => {
|
||||
const socketRef = useRef(null);
|
||||
const [clientId, setClientId] = useState(null);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
@@ -279,9 +279,16 @@ export const SocketProvider = ({ children, bodyshop }) => {
|
||||
description: (
|
||||
<ul
|
||||
onClick={() => {
|
||||
markNotificationRead({ variables: { id: notificationId } }).catch((e) =>
|
||||
console.error(`Error marking notification read from info: ${e?.message || ""}`)
|
||||
);
|
||||
markNotificationRead({ variables: { id: notificationId } })
|
||||
.then(() => {
|
||||
if (navigate) {
|
||||
navigate(`/manage/jobs/${jobId}`); // Use react-router-dom navigate
|
||||
} else {
|
||||
console.warn("Navigate function not provided to SocketProvider");
|
||||
window.location.href = `/manage/jobs/${jobId}`; // Fallback
|
||||
}
|
||||
})
|
||||
.catch((e) => console.error(`Error marking notification read from info: ${e?.message || ""}`));
|
||||
}}
|
||||
style={{ cursor: "pointer" }}
|
||||
>
|
||||
@@ -345,7 +352,7 @@ export const SocketProvider = ({ children, bodyshop }) => {
|
||||
setIsConnected(false);
|
||||
}
|
||||
};
|
||||
}, [bodyshop, notification, userAssociationId, markNotificationRead, markAllNotificationsRead]);
|
||||
}, [bodyshop, notification, userAssociationId, markNotificationRead, markAllNotificationsRead, navigate]); // Add navigate to dependencies
|
||||
|
||||
return (
|
||||
<SocketContext.Provider
|
||||
|
||||
Reference in New Issue
Block a user