From 35bc19fff6ad3e4b76f54ad92ae3a021ed4bf50a Mon Sep 17 00:00:00 2001 From: Nay Oo Lwin <52243229+NayOoLwin5@users.noreply.github.com> Date: Sun, 28 Jan 2024 04:14:54 +0630 Subject: [PATCH] Replace all hard coded localhosts with env constant variables (#1497) * replace all hard coded localhost with env constant variables * Update INSTALLATION.md * removed REACT_ADMIN_FRONTEND_HOST env variable * remove REACT_ADMIN_FRONTEND_HOST from installation.md * fixed failed tests --------- Co-authored-by: Nay Oo Lwin --- .env.example | 2 +- src/Constant/constant.ts | 1 + src/screens/EventDashboard/EventDashboard.test.tsx | 4 +++- src/screens/LoginPage/LoginPage.test.tsx | 5 +++-- src/screens/LoginPage/LoginPage.tsx | 9 ++++++--- src/screens/UserPortal/Home/Home.test.tsx | 3 ++- .../UserPortal/UserLoginPage/UserLoginPage.test.tsx | 5 +++-- src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx | 9 ++++++--- 8 files changed, 25 insertions(+), 13 deletions(-) diff --git a/.env.example b/.env.example index d3fb823251..399d5e6aab 100644 --- a/.env.example +++ b/.env.example @@ -28,4 +28,4 @@ REACT_APP_BACKEND_WEBSOCKET_URL=ws://localhost:4000/graphql # If you want to logs Compiletime and Runtime error , warning and info write YES or if u want to # keep the console clean leave it blank -ALLOW_LOGS= +ALLOW_LOGS= \ No newline at end of file diff --git a/src/Constant/constant.ts b/src/Constant/constant.ts index 6582342ecd..d3b0efe1c1 100644 --- a/src/Constant/constant.ts +++ b/src/Constant/constant.ts @@ -2,5 +2,6 @@ export const AUTH_TOKEN = ''; export const BACKEND_URL = process.env.REACT_APP_TALAWA_URL; export const RECAPTCHA_SITE_KEY = process.env.REACT_APP_RECAPTCHA_SITE_KEY; export const REACT_APP_USE_RECAPTCHA = process.env.REACT_APP_USE_RECAPTCHA; +export const REACT_APP_CUSTOM_PORT = process.env.PORT; export const REACT_APP_BACKEND_WEBSOCKET_URL: string = process.env.REACT_APP_BACKEND_WEBSOCKET_URL || ''; diff --git a/src/screens/EventDashboard/EventDashboard.test.tsx b/src/screens/EventDashboard/EventDashboard.test.tsx index 3678acd093..54e15a22f7 100644 --- a/src/screens/EventDashboard/EventDashboard.test.tsx +++ b/src/screens/EventDashboard/EventDashboard.test.tsx @@ -11,6 +11,7 @@ import { queryMockWithTime, queryMockWithoutTime, } from './EventDashboard.mocks'; +import { REACT_APP_CUSTOM_PORT } from 'Constant/constant'; // We want to disable all forms of caching so that we do not need to define a custom merge function in testing for the network requests const defaultOptions: DefaultOptions = { @@ -44,10 +45,11 @@ async function wait(ms = 500): Promise { describe('Testing Event Dashboard Screen', () => { beforeEach(() => { + const url = `http://localhost:${REACT_APP_CUSTOM_PORT}/event/event123`; global.window = Object.create(window); Object.defineProperty(window, 'location', { value: { - href: `http://localhost:${process.env.PORT}/event/event123`, + href: url, }, writable: true, }); diff --git a/src/screens/LoginPage/LoginPage.test.tsx b/src/screens/LoginPage/LoginPage.test.tsx index 1b99cccf01..b4ccb2c001 100644 --- a/src/screens/LoginPage/LoginPage.test.tsx +++ b/src/screens/LoginPage/LoginPage.test.tsx @@ -16,6 +16,7 @@ import { } from 'GraphQl/Mutations/mutations'; import { store } from 'state/store'; import i18nForTest from 'utils/i18nForTest'; +import { BACKEND_URL } from 'Constant/constant'; const MOCKS = [ { @@ -123,7 +124,7 @@ describe('Talawa-API server fetch check', () => { ); }); - expect(fetch).toHaveBeenCalledWith('http://localhost:4000/graphql/'); + expect(fetch).toHaveBeenCalledWith(BACKEND_URL); }); test('displays warning message when resource loading fails', async () => { @@ -144,7 +145,7 @@ describe('Talawa-API server fetch check', () => { ); }); - expect(fetch).toHaveBeenCalledWith('http://localhost:4000/graphql/'); + expect(fetch).toHaveBeenCalledWith(BACKEND_URL); }); }); diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx index 64bbd7b36a..2390731821 100644 --- a/src/screens/LoginPage/LoginPage.tsx +++ b/src/screens/LoginPage/LoginPage.tsx @@ -21,7 +21,11 @@ import { YoutubeLogo, } from 'assets/svgs/social-icons'; -import { REACT_APP_USE_RECAPTCHA, RECAPTCHA_SITE_KEY } from 'Constant/constant'; +import { + REACT_APP_USE_RECAPTCHA, + RECAPTCHA_SITE_KEY, + BACKEND_URL, +} from 'Constant/constant'; import { LOGIN_MUTATION, RECAPTCHA_MUTATION, @@ -129,8 +133,7 @@ function loginPage(): JSX.Element { useEffect(() => { async function loadResource(): Promise { try { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const response = await fetch('http://localhost:4000/graphql/'); + await fetch(BACKEND_URL as string); } catch (error: any) { /* istanbul ignore next */ errorHandler(t, error); diff --git a/src/screens/UserPortal/Home/Home.test.tsx b/src/screens/UserPortal/Home/Home.test.tsx index d28a15dc5a..6a3324b9d2 100644 --- a/src/screens/UserPortal/Home/Home.test.tsx +++ b/src/screens/UserPortal/Home/Home.test.tsx @@ -18,6 +18,7 @@ import * as getOrganizationId from 'utils/getOrganizationId'; import { CREATE_POST_MUTATION } from 'GraphQl/Mutations/mutations'; import { toast } from 'react-toastify'; import dayjs from 'dayjs'; +import { REACT_APP_CUSTOM_PORT } from 'Constant/constant'; jest.mock('react-toastify', () => ({ toast: { @@ -215,7 +216,7 @@ async function wait(ms = 100): Promise { } beforeEach(() => { - const url = `http://localhost:${process.env.PORT}/user/organization/id=orgId`; + const url = `http://localhost:${REACT_APP_CUSTOM_PORT}/user/organization/id=orgId`; Object.defineProperty(window, 'location', { value: { href: url, diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx index 7b41dad875..4daa344cfd 100644 --- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx +++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.test.tsx @@ -16,6 +16,7 @@ import { } from 'GraphQl/Mutations/mutations'; import { store } from 'state/store'; import i18nForTest from 'utils/i18nForTest'; +import { BACKEND_URL } from 'Constant/constant'; const MOCKS = [ { @@ -123,7 +124,7 @@ describe('Talawa-API server fetch check', () => { ); }); - expect(fetch).toHaveBeenCalledWith('http://localhost:4000/graphql/'); + expect(fetch).toHaveBeenCalledWith(BACKEND_URL); }); test('displays warning message when resource loading fails', async () => { @@ -144,7 +145,7 @@ describe('Talawa-API server fetch check', () => { ); }); - expect(fetch).toHaveBeenCalledWith('http://localhost:4000/graphql/'); + expect(fetch).toHaveBeenCalledWith(BACKEND_URL); }); }); diff --git a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx index 2e16f48bc1..23aa7f21d7 100644 --- a/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx +++ b/src/screens/UserPortal/UserLoginPage/UserLoginPage.tsx @@ -20,7 +20,11 @@ import { YoutubeLogo, } from 'assets/svgs/social-icons'; -import { REACT_APP_USE_RECAPTCHA, RECAPTCHA_SITE_KEY } from 'Constant/constant'; +import { + REACT_APP_USE_RECAPTCHA, + RECAPTCHA_SITE_KEY, + BACKEND_URL, +} from 'Constant/constant'; import { LOGIN_MUTATION, RECAPTCHA_MUTATION, @@ -83,8 +87,7 @@ function loginPage(): JSX.Element { useEffect(() => { async function loadResource(): Promise { try { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const response = await fetch('http://localhost:4000/graphql/'); + await fetch(BACKEND_URL as string); } catch (error: any) { /* istanbul ignore next */ errorHandler(t, error);