Hubert / Fixing endpoint staging

src/features/Endpoint/Endpoint.tsx

@@ -11,7 +11,7 @@ interface IEndpointFormValues {
 }
 const EndPoint = () => {
   const default_endpoint = {
-    app_id: getAppId(false),
+    app_id: getAppId(),
     server_url: OAUTH_URL,
   };
 
@@ -27,19 +27,20 @@ const EndPoint = () => {
     },
   });
 
+  const refreshWhenSubmitted = () => window.location.reload();
+
   const onSubmit = (data: IEndpointFormValues) => {
     localStorage.setItem('config.app_id', data.app_id);
     localStorage.setItem('config.server_url', data.server_url);
+    refreshWhenSubmitted();
   };
 
   const onResetClicked = () => {
     localStorage.removeItem('config.app_id');
     localStorage.removeItem('config.server_url');
-    window.location.reload();
+    refreshWhenSubmitted();
   };
 
-  const refreshWhenSubmitted = () => window.location.reload();
-
   const server_url = localStorage.getItem('config.server_url') ?? default_endpoint.server_url;
   const app_id = localStorage.getItem('config.app_id') ?? default_endpoint.app_id;
   const current_url = `wss://${server_url}/websockets/v3?app_id=${app_id}&l=EN&brand=deriv`;
@@ -107,12 +108,7 @@ const EndPoint = () => {
               <div className={styles.urlLink}>{current_url}</div>
             </div>
             <div className={styles.buttons}>
-              <Button
-                type='submit'
-                color='primary'
-                onClick={refreshWhenSubmitted}
-                disabled={Object.keys(errors).length > 0}
-              >
+              <Button type='submit' color='primary' disabled={Object.keys(errors).length > 0}>
                 Submit
               </Button>
               <span style={{ marginLeft: '1.6rem' }} />

src/features/Endpoint/__tests__/Endpoint.test.tsx

@@ -25,7 +25,7 @@ describe('Endpoint', () => {
     const app_id = screen.getByPlaceholderText('e.g. 9999');
     expect(server).toHaveValue('oauth.deriv.com');
 
-    expect(app_id).toHaveValue('35073');
+    expect(app_id).toHaveValue('35074');
   });
 
   it('validate user inputs, and provides error messages for app id field', async () => {

src/utils/__tests__/utils.test.ts

@@ -1,10 +1,5 @@
 import * as utils from '@site/src/utils';
-import {
-  LOCALHOST_APP_ID,
-  VERCEL_DEPLOYMENT_APP_ID,
-  OAUTH_URL,
-  DEFAULT_WS_SERVER,
-} from '../constants';
+import { LOCALHOST_APP_ID, DEFAULT_WS_SERVER, VERCEL_DEPLOYMENT_APP_ID } from '../constants';
 const {
   getAccountsFromSearchParams,
   getAppId,
@@ -33,23 +28,29 @@ describe('Get an object with currency data', () => {
 });
 
 describe('Get App ID', () => {
+  it('By default it should return vercel staging ap id if hostname is not listed', () => {
+    window.location.hostname = 'asdfasdf';
+    const appId = getAppId();
+    expect(appId).toBe('35073');
+  });
   it("Should return 35074 when it's called in localhost environment", () => {
-    const appId = getAppId(true);
+    window.location.hostname = 'localhost';
+    const appId = getAppId();
     expect(appId).toBe('35074');
   });
   it("Should return 35073 when it's called in vercel environment", () => {
     window.location.hostname = 'deriv-api-docs.binary.sx';
-    const appId = getAppId(false);
+    const appId = getAppId();
     expect(appId).toBe('35073');
   });
   it("Should return 36545 when it's called in staging environment", () => {
     window.location.hostname = 'staging-api.deriv.com';
-    const appId = getAppId(false);
+    const appId = getAppId();
     expect(appId).toBe('36545');
   });
   it("Should return 36544 when it's called in production environment", () => {
     window.location.hostname = 'api.deriv.com';
-    const appId = getAppId(false);
+    const appId = getAppId();
     expect(appId).toBe('36544');
   });
 });
@@ -158,17 +159,17 @@ describe('Get Server Config', () => {
   });
 
   describe('Given we are in SSR ( no browser object ) ', () => {
-    it('Should return default ws server url and vercel deployment appId', () => {
+    it('Should return default ws server url and appId while SSR', () => {
       jest.spyOn(utils, 'getIsBrowser').mockReturnValueOnce(false);
       const serverConfig = getServerConfig();
-      expect(serverConfig.appId).toEqual(VERCEL_DEPLOYMENT_APP_ID);
+      expect(serverConfig.appId).toEqual(LOCALHOST_APP_ID);
       expect(serverConfig.serverUrl).toEqual(DEFAULT_WS_SERVER);
     });
   });
+
   describe('Given we are in Browser', () => {
     jest.spyOn(utils, 'getIsBrowser').mockReturnValue(true);
-
-    it('Should return default ws server url and vercel deployment appId in LOCALHOST ', () => {
+    it('Should return default ws server url and localhost appId', () => {
       const serverConfig = getServerConfig();
       expect(serverConfig.appId).toEqual(LOCALHOST_APP_ID);
       expect(serverConfig.serverUrl).toEqual(DEFAULT_WS_SERVER);

src/utils/index.ts

@@ -56,13 +56,10 @@ export const isHost = (hostname: string) => {
 
 /**
  * @description based on the environment which the project is running we must use different appIds, to get the proper redirect url
- * @param isLocalHost {boolean} pass `true` if the project is running on localhost
  * @returns {string} proper appId for the project
  */
-export const getAppId = (isLocalHost: boolean) => {
-  if (isLocalHost) return LOCALHOST_APP_ID;
-
-  // if not localhost, then one of the following:
+export const getAppId = () => {
+  if (isHost('localhost')) return LOCALHOST_APP_ID;
   if (isHost('staging-api.deriv.com')) return STAGING_APP_ID;
   if (isHost('deriv-api-docs.binary.sx')) return VERCEL_DEPLOYMENT_APP_ID;
   if (isHost('api.deriv.com')) return PRODUCTION_APP_ID;
@@ -127,31 +124,23 @@ export const getServerConfig = () => {
   if (isBrowser) {
     const config_server_url = localStorage.getItem('config.server_url');
     const config_app_id = localStorage.getItem('config.app_id');
-    if (config_app_id && config_server_url) {
-      return {
-        serverUrl: config_server_url,
-        appId: config_app_id,
-        oauth: config_server_url,
-      };
-    } else {
-      const isLocalHost = isHost('localhost');
-      return {
-        serverUrl: DEFAULT_WS_SERVER,
-        appId: getAppId(isLocalHost),
-        oauth: OAUTH_URL,
-      };
-    }
+
+    return {
+      serverUrl: config_server_url ?? DEFAULT_WS_SERVER,
+      appId: config_app_id ?? getAppId(),
+      oauth: config_server_url ?? OAUTH_URL,
+    };
   } else {
     return {
       serverUrl: DEFAULT_WS_SERVER,
-      appId: getAppId(false),
+      appId: getAppId(),
       oauth: OAUTH_URL,
     };
   }
 };
 
-export const generateLoginUrl = (language: string, serverUrl: string, appId: string) => {
-  return `https://${serverUrl}/oauth2/authorize?app_id=${appId}&l=${language}`;
+export const generateLoginUrl = (language: string, oauthUrl: string, appId: string) => {
+  return `https://${oauthUrl}/oauth2/authorize?app_id=${appId}&l=${language}`;
 };
 
 interface IScopesLike {