From 0b21b8d97609875a41fda10bb5ffb88dd97d86fe Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Thu, 27 May 2021 13:32:57 -0700 Subject: [PATCH] IO-1138 Offline detection. --- bodyshop_translations.babel | 42 +++++++++++++++++++ client/src/App/App.container.jsx | 1 + client/src/App/App.jsx | 35 +++++++++++++++- .../redux/application/application.actions.js | 5 +++ .../redux/application/application.reducer.js | 6 +++ .../application/application.selectors.js | 4 ++ .../redux/application/application.types.js | 1 + client/src/translations/en_us/common.json | 2 + client/src/translations/es/common.json | 2 + client/src/translations/fr/common.json | 2 + 10 files changed, 99 insertions(+), 1 deletion(-) diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index 36244a534..1f7b2a5c9 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -12968,6 +12968,48 @@ + + nointernet + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + nointernet_sub + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + none false diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx index c8e619c05..1f5298da2 100644 --- a/client/src/App/App.container.jsx +++ b/client/src/App/App.container.jsx @@ -14,6 +14,7 @@ if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp"); export default function AppContainer() { const { t } = useTranslation(); + return ( 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 ; } + if (!online) + return ( + { + window.location.reload(); + }} + > + {t("general.actions.refresh")} + + } + /> + ); + return ( }> diff --git a/client/src/redux/application/application.actions.js b/client/src/redux/application/application.actions.js index cffcaa4fc..3f3fb4012 100644 --- a/client/src/redux/application/application.actions.js +++ b/client/src/redux/application/application.actions.js @@ -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, +}); diff --git a/client/src/redux/application/application.reducer.js b/client/src/redux/application/application.reducer.js index 40fece7d7..60685e2cc 100644 --- a/client/src/redux/application/application.reducer.js +++ b/client/src/redux/application/application.reducer.js @@ -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, diff --git a/client/src/redux/application/application.selectors.js b/client/src/redux/application/application.selectors.js index 2dba7b8ea..5c48a17d1 100644 --- a/client/src/redux/application/application.selectors.js +++ b/client/src/redux/application/application.selectors.js @@ -40,3 +40,7 @@ export const selectJobReadOnly = createSelector( [selectApplication], (application) => application.jobReadOnly ); +export const selectOnline = createSelector( + [selectApplication], + (application) => application.online +); diff --git a/client/src/redux/application/application.types.js b/client/src/redux/application/application.types.js index 2de24c05d..8714692cb 100644 --- a/client/src/redux/application/application.types.js +++ b/client/src/redux/application/application.types.js @@ -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; diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index b978a4ac3..9dfef4704 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -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", diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index 9ebe3517d..5777c3745 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -821,6 +821,8 @@ "monday": "", "na": "N / A", "no": "", + "nointernet": "", + "nointernet_sub": "", "none": "", "out": "Afuera", "password": "", diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index 05d7f3ccf..1bf35e380 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -821,6 +821,8 @@ "monday": "", "na": "N / A", "no": "", + "nointernet": "", + "nointernet_sub": "", "none": "", "out": "En dehors", "password": "",