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 <[email protected]>

.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=

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 || '';

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<void> {
 
 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,
     });

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);
   });
 });
 

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<void> {
       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);

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<void> {
 }
 
 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,

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);
   });
 });
 

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<void> {
       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);