migrate app setting to setting json

.env.development

@@ -1,3 +0,0 @@
-REACT_APP_API_URL=http://localhost:5000
-REACT_APP_RECAPTCHA_SITEKEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
-REACT_APP_SHOW_RQ_TOOLS=true

src/getAppSetting.js

@@ -5,7 +5,6 @@ export function getAppSetting(key) {
   if (window._env_ && window?._env_[key]) {
     return window._env_[key];
   }
-  // get the setting from the local settingJSON file
-  console.log('SETTING', { [key]: settingsJson[key] });
+  // get the setting from the local settingJSON filew
   return settingsJson[key];
 }

src/index.tsx

@@ -9,9 +9,10 @@ import { QuestionsProvider } from './contexts/questions';
 import { ResponsesProvider } from './contexts/responses';
 import { SessionProvider } from './contexts/session';
 import AuthProvider from './contexts/auth';
+import { getAppSetting } from './getAppSetting';
 
 // .env.development Allows you to hide devtools
-const showRQTools = process.env.REACT_APP_SHOW_RQ_TOOLS === 'true';
+const showRQTools = getAppSetting('REACT_APP_SHOW_RQ_TOOLS');
 
 ReactDOM.render(
   <React.StrictMode>

src/pages/Login.tsx

@@ -13,6 +13,7 @@ import TextInput from '../components/TextInput';
 import Wrapper from '../components/Wrapper';
 import { loginSchema } from '../helpers/validationSchemas';
 import { useAuth } from '../hooks/auth/useAuth';
+import { getAppSetting } from '../getAppSetting';
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -31,7 +32,9 @@ const useStyles = makeStyles(() =>
 // LoginPage Component
 const LoginPage: React.FC = () => {
   const classes = useStyles();
-  const TEST_RECAPTCHA_KEY = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'; // Will fall back to test key in CI when .env is
+  const REACT_APP_RECAPTCHA_SITEKEY = getAppSetting(
+    'REACT_APP_RECAPTCHA_SITEKEY'
+  ); // Will fall back to test key in CI when not present on the window
 
   const [isVerified, setIsVerified] = useState<boolean>(false);
 
@@ -110,11 +113,7 @@ const LoginPage: React.FC = () => {
 
               <Box py={2} className={classes.recaptchaContainer}>
                 <ReCAPTCHA
-                  sitekey={`${
-                    process.env.REACT_APP_RECAPTCHA_SITEKEY
-                      ? process.env.REACT_APP_RECAPTCHA_SITEKEY
-                      : TEST_RECAPTCHA_KEY
-                  }`}
+                  sitekey={REACT_APP_RECAPTCHA_SITEKEY}
                   onChange={onChange}
                 />
               </Box>

src/settings.json

@@ -1,4 +1,5 @@
 {
-  "TEST_SETTING": "Hello",
-  "REACT_APP_API_URL": "http://localhost:5000"
+  "REACT_APP_API_URL": "http://localhost:5000",
+  "REACT_APP_RECAPTCHA_SITEKEY": "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
+  "REACT_APP_SHOW_RQ_TOOLS": true
 }