0.0.14 (#39)

* infer ws url for combined
* closes #38

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micahg/ntt",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "files": [
     "build"
   ],

public/env.json

@@ -1,3 +1,4 @@
 {
-  "API_URL": "http://localhost:3000"
+  "API_URL": "http://localhost:3000",
+  "WS_URL": "ws://localhost:3000/"
 }

public/env.template.json

@@ -1,3 +1,4 @@
 {
-  "API_URL": "${API_URL}"
+  "API_URL": "${API_URL}",
+  "WS_URL": "${WS_URL}"
 }

src/components/RemoteDisplayComponent/RemoteDisplayComponent.tsx

@@ -10,6 +10,7 @@ const RemoteDisplayComponent = () => {
   const contentCanvasRef = createRef<HTMLCanvasElement>();
   const overlayCanvasRef = createRef<HTMLCanvasElement>();
   const apiUrl: string | undefined = useSelector((state: AppReducerState) => state.environment.api);
+  const wsUrl: string | undefined = useSelector((state: AppReducerState) => state.environment.ws);
   const [contentCtx, setContentCtx] = useState<CanvasRenderingContext2D|null>(null);
   const [overlayCtx, setOverlayCtx] = useState<CanvasRenderingContext2D|null>(null);
 
@@ -26,10 +27,12 @@ const RemoteDisplayComponent = () => {
   useEffect(() => {
     if (!overlayCtx) return;
     if (!contentCtx) return;
+    if (!wsUrl) {
+      console.error('THE OTHER IMPOSSIBLE HAS HAPPENED -- WS MESSAGE WITH NO WS URL WHAT');
+      return;
+    }
 
-    // TODO FIX THIS FIRST YIKES
-    let url = `ws://localhost:3000/`;
-    let ws = new WebSocket(url);
+    let ws = new WebSocket(wsUrl);
     ws.onopen = (event: Event) => {
       console.log(`Got open event ${JSON.stringify(event)}`);
     };
@@ -131,7 +134,7 @@ const RemoteDisplayComponent = () => {
         }
       }).catch(err => console.error(`Error loading background image: ${JSON.stringify(err)}`))
     }
-  }, [apiUrl, contentCtx, overlayCtx]);
+  }, [apiUrl, wsUrl, contentCtx, overlayCtx]);
 
   return (
     <div className={styles.map}>

src/middleware/EnvironmentMiddleware.ts

@@ -12,10 +12,17 @@ export const EnvironmentMiddleware: Middleware = storeAPI => next => action => {
       // k8s config map. Otherwise, if we're running on some non-localhost
       // value with our API_URL configured to localhost, just use combined
       // protocol/host/port as the base (for the combined docker image)
-      const inferredUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;
+      const infApiUrl = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;
       if (action.payload.data.API_URL === "http://localhost:3000" && window.location.hostname !== 'localhost') {
-        action.payload.data.API_URL = inferredUrl;
+        action.payload.data.API_URL = infApiUrl;
       }
+
+      // same goes for webservices - as above so below
+      const infWSUrl = `ws://${window.location.hostname}:${window.location.port}`
+      if (action.payload.data.WS_URL === "ws://localhost:3000/" && window.location.hostname !== 'localhost') {
+        action.payload.data.WS_URL = infWSUrl;
+      }
+
       return next(action);
     }).catch(reason => {
       // TODO trigger an error

src/reducers/EnvironmentReducer.ts

@@ -1,20 +1,24 @@
 import { PayloadAction } from "@reduxjs/toolkit";
 
 export type EnvironmentReducerState = {
-	readonly api: string |undefined;
+  readonly api: string | undefined;
+  readonly ws: string | undefined;
 };
 
 const initialState: EnvironmentReducerState = {
-	api: undefined,
+  api: undefined,
+  ws: undefined,
 }
 
 export const EnvironmentReducer = (state = initialState, action: PayloadAction) => {
 	switch(action.type) {
 		case 'environment/config': {
 			if (action.payload != null && ('data' in action.payload)) {
-				if ('API_URL' in action.payload['data']) {
-					return {...state, api: action.payload['data']['API_URL']}
-				}
+				if ('API_URL' in action.payload['data'] && 'WS_URL' in action.payload['data']) {
+					return {...state, api: action.payload['data']['API_URL'], ws: action.payload['data']['WS_URL']}
+				} else {
+          console.error(`environment/config payload missing API_URL or WS_URL`);
+        }
 			}
 			return state;
 		}