Fix websockets (#12)

* Update codebase with gridstudy
* Fix request case
* Fix `setupProxy` bad configuration
* Add debug option for requests
* review

Author: Tristan-WorkGH

.env

@@ -1,4 +1,5 @@
 EXTEND_ESLINT=true
+REACT_APP_DEBUG_REQUESTS=false
 
 REACT_APP_API_GATEWAY=/api/gateway
 REACT_APP_WS_GATEWAY=/ws/gateway

package-lock.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
-        "@gridsuite/commons-ui": "^0.44.0",
+        "@gridsuite/commons-ui": "^0.46.0",
         "@hookform/resolvers": "^3.3.1",
         "@mui/icons-material": "^5.5.1",
         "@mui/lab": "^5.0.0-alpha.75",

package.json

@@ -37,12 +37,12 @@ import {
 import { AppState } from '../redux/reducer';
 import {
     ConfigSrv,
+    ConfigNotif,
     ConfigParameter,
     ConfigParameters,
     UserAdminSrv,
     AppsMetadataSrv,
 } from '../services';
-import { connectNotificationsWsUpdateConfig } from '../utils/rest-api';
 import { UserManager } from 'oidc-client';
 import {
     APP_NAME,
@@ -104,7 +104,7 @@ const App: FunctionComponent = () => {
 
     const connectNotificationsUpdateConfig: () => ReconnectingWebSocket =
         useCallback(() => {
-            const ws = connectNotificationsWsUpdateConfig();
+            const ws = ConfigNotif.connectNotificationsWsUpdateConfig();
             ws.onmessage = function (event) {
                 let eventData = JSON.parse(event.data);
                 if (eventData?.headers?.parameterName) {
@@ -174,7 +174,7 @@ const App: FunctionComponent = () => {
                     })
                 );
 
-            ConfigSrv.fetchConfigParameters(APP_NAME)
+            ConfigSrv.fetchConfigParameters(APP_NAME.toLowerCase())
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({

src/components/app.tsx

@@ -1,4 +1,4 @@
-import { ReqResponse } from '../utils/rest-api';
+import { ReqResponse } from '../utils/api-rest';
 
 export type EnvJson = typeof import('../../public/env.json');
 

src/services/apps-metadata.ts

@@ -0,0 +1,20 @@
+import ReconnectingWebSocket, { Event } from 'reconnecting-websocket';
+import { APP_NAME } from '../utils/config-params';
+import { getUrlWithToken, getWsBase } from '../utils/api-ws';
+
+const PREFIX_CONFIG_NOTIFICATION_WS = `${process.env.REACT_APP_WS_GATEWAY}/config-notification`;
+
+export function connectNotificationsWsUpdateConfig(): ReconnectingWebSocket {
+    const webSocketUrl = `${getWsBase()}${PREFIX_CONFIG_NOTIFICATION_WS}/notify?appName=${APP_NAME.toLowerCase()}`;
+    const reconnectingWebSocket = new ReconnectingWebSocket(
+        () => getUrlWithToken(webSocketUrl),
+        undefined,
+        { debug: process.env.REACT_APP_DEBUG_REQUESTS === 'true' }
+    );
+    reconnectingWebSocket.onopen = function (event: Event) {
+        console.info(
+            `Connected Websocket update config ui ${webSocketUrl} ...`
+        );
+    };
+    return reconnectingWebSocket;
+}

src/services/config-notification.ts

@@ -1,5 +1,5 @@
 import { getAppName } from '../utils/config-params';
-import { backendFetch, backendFetchJson } from '../utils/rest-api';
+import { backendFetch, backendFetchJson } from '../utils/api-rest';
 
 const PREFIX_CONFIG_QUERIES = `${process.env.REACT_APP_API_GATEWAY}/config`;
 

src/services/config.ts

@@ -1,10 +1,12 @@
 import * as Config from './config';
+import * as ConfigNotif from './config-notification';
 import * as AppsMetadata from './apps-metadata';
 import * as Study from './study';
 import * as UserAdmin from './user-admin';
 
 const _ = {
     ...Config,
+    ...ConfigNotif,
     ...AppsMetadata,
     ...Study,
     ...UserAdmin,
@@ -14,6 +16,9 @@ export default _;
 export * as ConfigSrv from './config';
 export type * from './config';
 
+export * as ConfigNotif from './config-notification';
+export type * from './config-notification';
+
 export * as AppsMetadataSrv from './apps-metadata';
 export type * from './apps-metadata';
 

src/services/index.ts

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { backendFetchJson, Token } from '../utils/rest-api';
+import { backendFetchJson, Token } from '../utils/api-rest';
 
 const STUDY_URL = `${process.env.REACT_APP_API_GATEWAY}/study/v1`;
 

src/services/study.ts

@@ -1,4 +1,4 @@
-import { backendFetch, ReqResponse } from '../utils/rest-api';
+import { backendFetch, ReqResponse } from '../utils/api-rest';
 
 const USER_ADMIN_URL = `${process.env.REACT_APP_API_GATEWAY}/user-admin`;