IO-1138 Offline detection.

This commit is contained in:
Patrick Fic
2021-05-27 13:32:57 -07:00
parent 842cb54867
commit 0b21b8d976
10 changed files with 99 additions and 1 deletions

View File

@@ -12968,6 +12968,48 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>nointernet</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>nointernet_sub</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>none</name>
<definition_loaded>false</definition_loaded>

View File

@@ -14,6 +14,7 @@ if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
export default function AppContainer() {
const { t } = useTranslation();
return (
<ApolloProvider client={client}>
<ConfigProvider

View File

@@ -1,3 +1,4 @@
import { Button, Result } from "antd";
import React, { lazy, Suspense, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
@@ -8,6 +9,8 @@ import ErrorBoundary from "../components/error-boundary/error-boundary.component
import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
import AboutPage from "../pages/about/about.page";
import TechPageContainer from "../pages/tech/tech.page.container";
import { setOnline } from "../redux/application/application.actions";
import { selectOnline } from "../redux/application/application.selectors";
import { checkUserSession } from "../redux/user/user.actions";
import { selectCurrentUser } from "../redux/user/user.selectors";
import PrivateRoute from "../utils/private-route";
@@ -27,12 +30,14 @@ const MobilePaymentContainer = lazy(() =>
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
online: selectOnline,
});
const mapDispatchToProps = (dispatch) => ({
checkUserSession: () => dispatch(checkUserSession()),
setOnline: (isOnline) => dispatch(setOnline(isOnline)),
});
export function App({ checkUserSession, currentUser }) {
export function App({ checkUserSession, currentUser, online, setOnline }) {
useEffect(() => {
checkUserSession();
}, [checkUserSession]);
@@ -42,10 +47,38 @@ export function App({ checkUserSession, currentUser }) {
const { t } = useTranslation();
window.addEventListener("offline", function (e) {
console.log("Internet connection lost.");
setOnline(false);
});
window.addEventListener("online", function (e) {
setOnline(true);
});
if (currentUser.authorized === null) {
return <LoadingSpinner message={t("general.labels.loggingin")} />;
}
if (!online)
return (
<Result
status="warning"
title={t("general.labels.nointernet")}
subTitle={t("general.labels.nointernet_sub")}
extra={
<Button
type="primary"
onClick={() => {
window.location.reload();
}}
>
{t("general.actions.refresh")}
</Button>
}
/>
);
return (
<Switch>
<Suspense fallback={<LoadingSpinner message="ImEX Online" />}>

View File

@@ -48,3 +48,8 @@ export const setPartnerVersion = (version) => ({
type: ApplicationActionTypes.SET_PARTNER_VERSION,
payload: version,
});
export const setOnline = (isOnline) => ({
type: ApplicationActionTypes.SET_ONLINE_STATUS,
payload: isOnline,
});

View File

@@ -2,6 +2,7 @@ import ApplicationActionTypes from "./application.types";
const INITIAL_STATE = {
loading: false,
online: true,
breadcrumbs: [],
recentItems: [],
selectedHeader: "home",
@@ -21,6 +22,11 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
...state,
selectedHeader: action.payload,
};
case ApplicationActionTypes.SET_ONLINE_STATUS:
return {
...state,
online: action.payload,
};
case ApplicationActionTypes.ADD_RECENT_ITEM:
return {
...state,

View File

@@ -40,3 +40,7 @@ export const selectJobReadOnly = createSelector(
[selectApplication],
(application) => application.jobReadOnly
);
export const selectOnline = createSelector(
[selectApplication],
(application) => application.online
);

View File

@@ -9,5 +9,6 @@ const ApplicationActionTypes = {
SET_SELECTED_HEADER: "SET_SELECTED_HEADER",
SET_JOB_READONLY: "SET_JOB_READONLY",
SET_PARTNER_VERSION: "SET_PARTNER_VERSION",
SET_ONLINE_STATUS: "SET_ONLINE_STATUS",
};
export default ApplicationActionTypes;

View File

@@ -821,6 +821,8 @@
"monday": "Monday",
"na": "N/A",
"no": "No",
"nointernet": "It looks like you're not connected to the internet.",
"nointernet_sub": "Please check your connection and try again. ",
"none": "None",
"out": "Out",
"password": "Password",

View File

@@ -821,6 +821,8 @@
"monday": "",
"na": "N / A",
"no": "",
"nointernet": "",
"nointernet_sub": "",
"none": "",
"out": "Afuera",
"password": "",

View File

@@ -821,6 +821,8 @@
"monday": "",
"na": "N / A",
"no": "",
"nointernet": "",
"nointernet_sub": "",
"none": "",
"out": "En dehors",
"password": "",