Environment variables and store monitoring in dev

client/.env

@@ -0,0 +1,2 @@
+REACT_APP_API_BASE=https://hiram.services/terrassumptions/api
+REACT_APP_MONITOR_STORE=false

client/.env.development

@@ -0,0 +1,2 @@
+# REACT_APP_API_BASE=http://localhost:5000 # this can be uncommented to point to local server/app.py
+REACT_APP_MONITOR_STORE=true

client/src/domain/apiMethods.js

@@ -1,4 +1,4 @@
-const API_BASE = "https://hiram.services/terrassumptions/api";
+const API_BASE = process.env.REACT_APP_API_BASE;
 
 export const getStatus = async () => {
     try {

client/src/domain/gameStore.js

@@ -1,5 +1,5 @@
 import { PRE_GAME, PRE_ROUND, IN_ROUND, POST_ROUND, POST_GAME } from "./GameState";
-import { createStore } from "../store";
+import { createStore, consoleMonitor } from "../store";
 import { joinGame, sendGuess, getCurrentRound } from "./apiMethods";
 import {
   saveGameInfoToLocalStorage,
@@ -121,4 +121,4 @@ export const [
     set({ roundSeconds });
     saveTimerToLocalStorage(roundSeconds);
   },
-});
+}, process.env.REACT_APP_MONITOR_STORE ? consoleMonitor : null);

client/src/store.js

@@ -2,7 +2,15 @@ import { useState, useEffect } from "react";
 
 const shallowEq = (x, y) => x === y;
 
-export const createStore = (initial, actions = {}) => {
+export const consoleMonitor = (key, original) => {
+  let val = original;
+  console.log(`Initializing ${key} with ${JSON.stringify(original)}`);
+  return newVal => {
+    console.log(`Updating ${key} from ${JSON.stringify(val)} to ${JSON.stringify(newVal)}`);
+  }
+}
+
+export const createStore = (initial, actions = {}, monitor = null) => {
   const get = {};
   const update = {};
   const hooks = {};
@@ -13,7 +21,7 @@ export const createStore = (initial, actions = {}) => {
       setter(value);
     } else {
       let _val = value;
-      let _listeners = [];
+      let _listeners = monitor === null ? [] : [{ callback: monitor(key, value), equality: shallowEq }];
 
       get[key] = () => _val;