From 961bf2b449c2409b9fe032db64be82001d9cff66 Mon Sep 17 00:00:00 2001 From: Vaibhav Rathore Date: Mon, 26 Oct 2020 14:39:39 +0530 Subject: [PATCH 1/4] title will change according to the automation --- src/components/floweditor/FlowEditor.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx index f7096475b..1284e70d9 100644 --- a/src/components/floweditor/FlowEditor.tsx +++ b/src/components/floweditor/FlowEditor.tsx @@ -155,6 +155,15 @@ export const FlowEditor = (props: FlowEditorProps) => { }, }); + useEffect(() => { + if (automationName) { + document.title = 'Glific: ' + automationName.flows[0].name; + } + return () => { + document.title = 'Glific: Two way communication platform'; + }; + }, [automationName]); + useEffect(() => { const files = loadfiles(); return () => { From f1884b15e920c477b5af30090a1bd5e0c2d3360f Mon Sep 17 00:00:00 2001 From: Vaibhav Rathore Date: Tue, 27 Oct 2020 18:58:40 +0530 Subject: [PATCH 2/4] added constants in config --- .env.example | 2 ++ src/App.tsx | 2 ++ src/components/floweditor/FlowEditor.tsx | 6 +++--- src/config/index.ts | 6 ++++++ 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/.env.example b/.env.example index 3f4ef2c4b..940e84328 100644 --- a/.env.example +++ b/.env.example @@ -1,3 +1,5 @@ REACT_APP_API_PREFIX="" SENTRY_DSN="" REACT_APP_GLIFIC_API_PORT=4000 +REACT_APP_APPLICATION_NAME="" +REACT_APP_PAGE_TITLE="" \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 0ee6be426..84e6fee3f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,12 +7,14 @@ import { ErrorHandler } from './containers/ErrorHandler/ErrorHandler'; import { checkAuthStatusService } from './services/AuthService'; import { UnauthenticatedRoute } from './route/UnauthenticatedRoute/UnauthenticatedRoute'; import { AuthenticatedRoute } from './route/AuthenticatedRoute/AuthenticatedRoute'; +import { PAGE_TITLE } from './config'; const App = () => { const [authenticated, setAuthenticated] = useState(true); useEffect(() => { setAuthenticated(checkAuthStatusService()); + document.title = PAGE_TITLE; }, []); const values = { diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx index 1284e70d9..356f42623 100644 --- a/src/components/floweditor/FlowEditor.tsx +++ b/src/components/floweditor/FlowEditor.tsx @@ -6,7 +6,7 @@ import styles from './FlowEditor.module.css'; import { ReactComponent as HelpIcon } from '../../assets/images/icons/Help.svg'; import { Button } from '../UI/Form/Button/Button'; import { PUBLISH_AUTOMATION } from '../../graphql/mutations/Automation'; -import { FLOW_EDITOR_CONFIGURE_LINK } from '../../config/index'; +import { APP_NAME, FLOW_EDITOR_CONFIGURE_LINK, PAGE_TITLE } from '../../config/index'; import { FLOW_EDITOR_API } from '../../config/index'; import * as Manifest from '@nyaruka/flow-editor/build/asset-manifest.json'; import { GET_AUTOMATION_NAME } from '../../graphql/queries/Automation'; @@ -157,10 +157,10 @@ export const FlowEditor = (props: FlowEditorProps) => { useEffect(() => { if (automationName) { - document.title = 'Glific: ' + automationName.flows[0].name; + document.title = `${APP_NAME}: ` + automationName.flows[0].name; } return () => { - document.title = 'Glific: Two way communication platform'; + document.title = PAGE_TITLE; }; }, [automationName]); diff --git a/src/config/index.ts b/src/config/index.ts index acdf6faa6..b74b8fdd1 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -1,5 +1,8 @@ const envVariables = process.env; +let appName = envVariables.REACT_APP_APPLICATION_NAME; +let pageTitle = envVariables.REACT_APP_PAGE_TITLE; + const API_PORT = envVariables.REACT_APP_GLIFIC_API_PORT; const PROTOCOL = window.location.protocol; const API_PREFIX = envVariables.REACT_APP_API_PREFIX; @@ -26,3 +29,6 @@ export const RESET_PASSWORD = GLIFIC_API_URL + '/v1/registration/reset-password' export const RENEW_TOKEN = USER_SESSION + '/renew'; export const FLOW_EDITOR_CONFIGURE_LINK = `${PROTOCOL}//${window.location.host}/automation/configure`; export const GUPSHUP_CALLBACK_URL = GLIFIC_BACKEND_URL + '/gupshup'; +export const APP_NAME = appName ? appName : 'Glific'; +export const PAGE_TITLE = pageTitle ? pageTitle : `${APP_NAME}: Two way communication platform`; + From 1bb5ef27619c58ff20f73ebe92e5c61e11bc1f78 Mon Sep 17 00:00:00 2001 From: Vaibhav Rathore Date: Tue, 27 Oct 2020 19:51:07 +0530 Subject: [PATCH 3/4] minor fix --- public/index.html | 2 +- src/App.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index 5d94f0510..60377e599 100644 --- a/public/index.html +++ b/public/index.html @@ -29,7 +29,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Glific: Two way communication platform + %REACT_APP_PAGE_TITLE% diff --git a/src/App.tsx b/src/App.tsx index 84e6fee3f..0ee6be426 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,14 +7,12 @@ import { ErrorHandler } from './containers/ErrorHandler/ErrorHandler'; import { checkAuthStatusService } from './services/AuthService'; import { UnauthenticatedRoute } from './route/UnauthenticatedRoute/UnauthenticatedRoute'; import { AuthenticatedRoute } from './route/AuthenticatedRoute/AuthenticatedRoute'; -import { PAGE_TITLE } from './config'; const App = () => { const [authenticated, setAuthenticated] = useState(true); useEffect(() => { setAuthenticated(checkAuthStatusService()); - document.title = PAGE_TITLE; }, []); const values = { From b93e4f848c9e52bba0bf84e48688c211e1f04e40 Mon Sep 17 00:00:00 2001 From: Vaibhav Rathore Date: Thu, 29 Oct 2020 19:57:16 +0530 Subject: [PATCH 4/4] minor fix --- .env.example | 3 +-- public/index.html | 2 +- src/components/floweditor/FlowEditor.tsx | 6 +++--- src/config/index.ts | 5 ++--- 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/.env.example b/.env.example index 940e84328..9cf987687 100644 --- a/.env.example +++ b/.env.example @@ -1,5 +1,4 @@ REACT_APP_API_PREFIX="" SENTRY_DSN="" REACT_APP_GLIFIC_API_PORT=4000 -REACT_APP_APPLICATION_NAME="" -REACT_APP_PAGE_TITLE="" \ No newline at end of file +REACT_APP_APPLICATION_NAME="Glific: Two way communication platform" diff --git a/public/index.html b/public/index.html index 60377e599..cb0601fb0 100644 --- a/public/index.html +++ b/public/index.html @@ -29,7 +29,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - %REACT_APP_PAGE_TITLE% + %REACT_APP_APPLICATION_NAME% diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx index 356f42623..854deff1e 100644 --- a/src/components/floweditor/FlowEditor.tsx +++ b/src/components/floweditor/FlowEditor.tsx @@ -6,7 +6,7 @@ import styles from './FlowEditor.module.css'; import { ReactComponent as HelpIcon } from '../../assets/images/icons/Help.svg'; import { Button } from '../UI/Form/Button/Button'; import { PUBLISH_AUTOMATION } from '../../graphql/mutations/Automation'; -import { APP_NAME, FLOW_EDITOR_CONFIGURE_LINK, PAGE_TITLE } from '../../config/index'; +import { APP_NAME, FLOW_EDITOR_CONFIGURE_LINK } from '../../config/index'; import { FLOW_EDITOR_API } from '../../config/index'; import * as Manifest from '@nyaruka/flow-editor/build/asset-manifest.json'; import { GET_AUTOMATION_NAME } from '../../graphql/queries/Automation'; @@ -157,10 +157,10 @@ export const FlowEditor = (props: FlowEditorProps) => { useEffect(() => { if (automationName) { - document.title = `${APP_NAME}: ` + automationName.flows[0].name; + document.title = automationName.flows[0].name; } return () => { - document.title = PAGE_TITLE; + document.title = APP_NAME; }; }, [automationName]); diff --git a/src/config/index.ts b/src/config/index.ts index b74b8fdd1..61e096d4d 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -1,7 +1,6 @@ const envVariables = process.env; let appName = envVariables.REACT_APP_APPLICATION_NAME; -let pageTitle = envVariables.REACT_APP_PAGE_TITLE; const API_PORT = envVariables.REACT_APP_GLIFIC_API_PORT; const PROTOCOL = window.location.protocol; @@ -29,6 +28,6 @@ export const RESET_PASSWORD = GLIFIC_API_URL + '/v1/registration/reset-password' export const RENEW_TOKEN = USER_SESSION + '/renew'; export const FLOW_EDITOR_CONFIGURE_LINK = `${PROTOCOL}//${window.location.host}/automation/configure`; export const GUPSHUP_CALLBACK_URL = GLIFIC_BACKEND_URL + '/gupshup'; -export const APP_NAME = appName ? appName : 'Glific'; -export const PAGE_TITLE = pageTitle ? pageTitle : `${APP_NAME}: Two way communication platform`; +export const APP_NAME = appName ? appName : 'Glific: Two way communication platform'; +