From 278d1209b6e57a3324fe2e815fdf0ae7d5dd18b0 Mon Sep 17 00:00:00 2001 From: Aman-Maheshwari Date: Thu, 28 Oct 2021 22:22:23 +0530 Subject: [PATCH 1/6] fix business hour persisting UI --- .../omnichannel/businessHours/BusinessHoursRouter.js | 2 +- .../omnichannel/businessHours/EditBusinessHoursPage.js | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/client/views/omnichannel/businessHours/BusinessHoursRouter.js b/client/views/omnichannel/businessHours/BusinessHoursRouter.js index f895667994eb..dce2375031e7 100644 --- a/client/views/omnichannel/businessHours/BusinessHoursRouter.js +++ b/client/views/omnichannel/businessHours/BusinessHoursRouter.js @@ -27,7 +27,7 @@ const BusinessHoursRouter = () => { type: 'default', }); } - }, [context, isSingleBH, router, type]); + }, []); if ((context === 'edit' && type) || (isSingleBH && (context !== 'edit' || type !== 'default'))) { return type ? : null; diff --git a/client/views/omnichannel/businessHours/EditBusinessHoursPage.js b/client/views/omnichannel/businessHours/EditBusinessHoursPage.js index f0fbe8b2fa70..58c0d1a9c616 100644 --- a/client/views/omnichannel/businessHours/EditBusinessHoursPage.js +++ b/client/views/omnichannel/businessHours/EditBusinessHoursPage.js @@ -68,7 +68,10 @@ const EditBusinessHoursPage = ({ id, type }) => { await save(payload); dispatchToastMessage({ type: 'success', message: t('Business_hours_updated') }); - router.push({}); + router.push({ + context: 'edit', + type: 'default', + }); } catch (error) { dispatchToastMessage({ type: 'error', message: error }); } @@ -82,7 +85,10 @@ const EditBusinessHoursPage = ({ id, type }) => { try { await deleteBH(id, type); dispatchToastMessage({ type: 'success', message: t('Business_Hour_Removed') }); - router.push({}); + router.push({ + context: 'edit', + type: 'default', + }); } catch (error) { dispatchToastMessage({ type: 'error', message: error }); } From dd71f75ae15630454f0fa541a038c4cbe4a7fed5 Mon Sep 17 00:00:00 2001 From: Aman-Maheshwari Date: Sat, 30 Oct 2021 23:11:16 +0530 Subject: [PATCH 2/6] eslint --- client/views/omnichannel/businessHours/BusinessHoursRouter.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/views/omnichannel/businessHours/BusinessHoursRouter.js b/client/views/omnichannel/businessHours/BusinessHoursRouter.js index dce2375031e7..2411937892c7 100644 --- a/client/views/omnichannel/businessHours/BusinessHoursRouter.js +++ b/client/views/omnichannel/businessHours/BusinessHoursRouter.js @@ -27,6 +27,7 @@ const BusinessHoursRouter = () => { type: 'default', }); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); if ((context === 'edit' && type) || (isSingleBH && (context !== 'edit' || type !== 'default'))) { From 3902152788d8e47c8e004672e822cc1fcc6cce2a Mon Sep 17 00:00:00 2001 From: Aman-Maheshwari Date: Tue, 2 Nov 2021 18:00:04 +0530 Subject: [PATCH 3/6] improvement --- .../businessHours/BusinessHoursRouter.js | 17 ++++++++++++++--- .../businessHours/EditBusinessHoursPage.js | 19 ++++++++++--------- 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/client/views/omnichannel/businessHours/BusinessHoursRouter.js b/client/views/omnichannel/businessHours/BusinessHoursRouter.js index 2411937892c7..2b2f956a3d52 100644 --- a/client/views/omnichannel/businessHours/BusinessHoursRouter.js +++ b/client/views/omnichannel/businessHours/BusinessHoursRouter.js @@ -1,5 +1,5 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { businessHourManager } from '../../../../app/livechat/client/views/app/business-hours/BusinessHours'; import { useRoute, useRouteParameter } from '../../../contexts/RouterContext'; @@ -20,6 +20,9 @@ const BusinessHoursRouter = () => { const router = useRoute('omnichannel-businessHours'); + // this state is used for updating the component, from EditBusinessHoursPage + const [updateComponent, setUpdateComponent] = useState(false); + useEffect(() => { if (isSingleBH && (context !== 'edit' || type !== 'default')) { router.push({ @@ -28,10 +31,18 @@ const BusinessHoursRouter = () => { }); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [isSingleBH, updateComponent]); if ((context === 'edit' && type) || (isSingleBH && (context !== 'edit' || type !== 'default'))) { - return type ? : null; + return type ? ( + { + setUpdateComponent(!updateComponent); + }} + /> + ) : null; } if (context === 'new') { diff --git a/client/views/omnichannel/businessHours/EditBusinessHoursPage.js b/client/views/omnichannel/businessHours/EditBusinessHoursPage.js index 58c0d1a9c616..0769b2653afb 100644 --- a/client/views/omnichannel/businessHours/EditBusinessHoursPage.js +++ b/client/views/omnichannel/businessHours/EditBusinessHoursPage.js @@ -14,7 +14,7 @@ import BusinessHoursFormContainer from './BusinessHoursFormContainer'; import { useIsSingleBusinessHours } from './BusinessHoursRouter'; import { mapBusinessHoursForm } from './mapBusinessHoursForm'; -const EditBusinessHoursPage = ({ id, type }) => { +const EditBusinessHoursPage = ({ id, type, updateFromParent }) => { const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); const isSingleBH = useIsSingleBusinessHours(); @@ -68,13 +68,13 @@ const EditBusinessHoursPage = ({ id, type }) => { await save(payload); dispatchToastMessage({ type: 'success', message: t('Business_hours_updated') }); - router.push({ - context: 'edit', - type: 'default', - }); + router.push({}); } catch (error) { dispatchToastMessage({ type: 'error', message: error }); } + if (isSingleBH) { + updateFromParent(); + } }); const handleDelete = useMutableCallback(async () => { @@ -85,10 +85,10 @@ const EditBusinessHoursPage = ({ id, type }) => { try { await deleteBH(id, type); dispatchToastMessage({ type: 'success', message: t('Business_Hour_Removed') }); - router.push({ - context: 'edit', - type: 'default', - }); + router.push({}); + if (isSingleBH) { + updateFromParent(); + } } catch (error) { dispatchToastMessage({ type: 'error', message: error }); } @@ -125,6 +125,7 @@ const EditBusinessHoursPage = ({ id, type }) => { {t('Delete')} )} + {/* haschanges = false disabled = true */} From 995f957bbc23d13fed5914d4a62dfc4e6824e23c Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Wed, 3 Nov 2021 16:15:10 -0300 Subject: [PATCH 4/6] Update BusinessHoursRouter.js --- .../businessHours/BusinessHoursRouter.js | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/client/views/omnichannel/businessHours/BusinessHoursRouter.js b/client/views/omnichannel/businessHours/BusinessHoursRouter.js index 2b2f956a3d52..d36ae37fb8d0 100644 --- a/client/views/omnichannel/businessHours/BusinessHoursRouter.js +++ b/client/views/omnichannel/businessHours/BusinessHoursRouter.js @@ -20,29 +20,17 @@ const BusinessHoursRouter = () => { const router = useRoute('omnichannel-businessHours'); - // this state is used for updating the component, from EditBusinessHoursPage - const [updateComponent, setUpdateComponent] = useState(false); - useEffect(() => { - if (isSingleBH && (context !== 'edit' || type !== 'default')) { + if (isSingleBH) { router.push({ context: 'edit', type: 'default', }); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isSingleBH, updateComponent]); - - if ((context === 'edit' && type) || (isSingleBH && (context !== 'edit' || type !== 'default'))) { - return type ? ( - { - setUpdateComponent(!updateComponent); - }} - /> - ) : null; + }, [isSingleBH, router]); + + if (context === 'edit' || isSingleBH) { + return type ? : null; } if (context === 'new') { From 20c0750b08ae8ce2ae6ef080e9dda082f98feced Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Wed, 3 Nov 2021 16:16:53 -0300 Subject: [PATCH 5/6] Update EditBusinessHoursPage.js --- .../omnichannel/businessHours/EditBusinessHoursPage.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/client/views/omnichannel/businessHours/EditBusinessHoursPage.js b/client/views/omnichannel/businessHours/EditBusinessHoursPage.js index 0769b2653afb..f0fbe8b2fa70 100644 --- a/client/views/omnichannel/businessHours/EditBusinessHoursPage.js +++ b/client/views/omnichannel/businessHours/EditBusinessHoursPage.js @@ -14,7 +14,7 @@ import BusinessHoursFormContainer from './BusinessHoursFormContainer'; import { useIsSingleBusinessHours } from './BusinessHoursRouter'; import { mapBusinessHoursForm } from './mapBusinessHoursForm'; -const EditBusinessHoursPage = ({ id, type, updateFromParent }) => { +const EditBusinessHoursPage = ({ id, type }) => { const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); const isSingleBH = useIsSingleBusinessHours(); @@ -72,9 +72,6 @@ const EditBusinessHoursPage = ({ id, type, updateFromParent }) => { } catch (error) { dispatchToastMessage({ type: 'error', message: error }); } - if (isSingleBH) { - updateFromParent(); - } }); const handleDelete = useMutableCallback(async () => { @@ -86,9 +83,6 @@ const EditBusinessHoursPage = ({ id, type, updateFromParent }) => { await deleteBH(id, type); dispatchToastMessage({ type: 'success', message: t('Business_Hour_Removed') }); router.push({}); - if (isSingleBH) { - updateFromParent(); - } } catch (error) { dispatchToastMessage({ type: 'error', message: error }); } @@ -125,7 +119,6 @@ const EditBusinessHoursPage = ({ id, type, updateFromParent }) => { {t('Delete')} )} - {/* haschanges = false disabled = true */} From e896ab2cd1fad336123bfd441ba21bb050b6e19a Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Wed, 3 Nov 2021 16:17:45 -0300 Subject: [PATCH 6/6] remove useState --- client/views/omnichannel/businessHours/BusinessHoursRouter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/views/omnichannel/businessHours/BusinessHoursRouter.js b/client/views/omnichannel/businessHours/BusinessHoursRouter.js index d36ae37fb8d0..c1b788ba4b0d 100644 --- a/client/views/omnichannel/businessHours/BusinessHoursRouter.js +++ b/client/views/omnichannel/businessHours/BusinessHoursRouter.js @@ -1,5 +1,5 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import { businessHourManager } from '../../../../app/livechat/client/views/app/business-hours/BusinessHours'; import { useRoute, useRouteParameter } from '../../../contexts/RouterContext';