BB2-3563: Allow loading of default data (#66)

* Add button to load default data

* Missing piece of last commit

* Control button for default data by client setting

* Adjust based on linting errors

* Updates to readme for hardcoded default data

* Edits from self-review

Author: jimmyfagan

README-bb2-dev.md

@@ -29,6 +29,21 @@ Note: --abort-on-container-exit will abort client and server containers when sel
 
 Note: You may need to clean up already existing Docker containers, if you are having issues or have changed your configuration file.
 
+## Use default data sets
+
+Instead of using the BB2 API to retrieve data from a BB2 server every time you run the
+sample client, you can alternatively pre-populate json content to be loaded. To do so,
+replace the json files in `server/default_datasets/Dataset 1` with your desired default
+data, and then in `client/src/components/patientData.tsx`, update the 
+`useDefaultDataButton` const to `true`. 
+
+Then on the landing page of the sample client, in addition to the normal button
+`Authorize` which can be used to query a BB2 server, there will also be a
+`Load default data` button which can be used to load the data from the json files.
+
+This is useful when developing front-end content since it shortens the amount of time
+it takes to load sample data.
+
 ## Visual trouble shoot
 
 Install VNC viewer and point browser to http://localhost:5900 to monitor web UI interactions

client/src/components/patientData.tsx

@@ -1,25 +1,18 @@
 import { Button } from '@cmsgov/design-system';
 import axios from 'axios';
 import chart from '../images/who-charted.png'
-//import { SettingsType } from '../types/settings';
+import { SettingsType } from '../types/settings';
 import React, { useState } from 'react';
 import * as process from 'process'; 
 
 export default function PatientData() {
     const [header] = useState('Add your Medicare Prescription Drug data');
-    // comment out below because the end point /api/authorize/authurl of 
-    // the server component (on port 3001), does not take parameter such as pkce, version, env
-    // they are generated by the server component.
-    //
-    // const [settingsState] = useState<SettingsType>({
-    //     pkce: true,
-    //     version: 'v2',
-    //     env: 'sandbox'
-    // });
+    const [settingsState] = useState<SettingsType>({
+        useDefaultDataButton: false, // Set to true to use hard coded data
+    });
     async function goAuthorize() {
-        // comment out '{ params: settingsState }' since /api/authorize/authurl does not take params
         const test_url = process.env.TEST_APP_API_URL ? process.env.TEST_APP_API_URL : ''
-        const authUrlResponseData = await axios.get(`${test_url}/api/authorize/authurl`/*, { params: settingsState } */)
+        const authUrlResponseData = await axios.get(`${test_url}/api/authorize/authurl`)
         .then(response => {
             return response.data;
         })
@@ -30,7 +23,11 @@ export default function PatientData() {
             window.location.href = "/";
         });
         console.log(authUrlResponseData);
-    }    
+    }
+    async function goLoadDefaults() {
+        const loadDefaultsResponse = await axios.get(`/api/bluebutton/loadDefaults`);
+        window.location.href = loadDefaultsResponse.data || '/';
+    }
 
     /* DEVELOPER NOTES:
     * Here we are hard coding the users information for the sake of saving time
@@ -50,7 +47,16 @@ export default function PatientData() {
                 <div>
                     <h4>{ header }</h4>
                 </div>
-                <Button id="auth_btn" variation="solid" onClick={goAuthorize}>Authorize</Button>
+                <div className='ds-u-margin-top--2'>
+                    <Button id="auth_btn" variation="solid" onClick={goAuthorize}>Authorize</Button>
+                </div>
+                {
+                    settingsState.useDefaultDataButton ?
+                    <div className='ds-u-margin-top--2'>
+                        <Button id="load_defaults_btn" variation="solid" onClick={goLoadDefaults}>Load default data</Button>
+                    </div> :
+                        null
+                }
             </div>
         </div>
     );

client/src/types/settings.ts

@@ -1,5 +1,3 @@
 export type SettingsType = {
-    env: 'sandbox' | 'local' | 'production',
-    version: 'v1' | 'v2',
-    pkce: boolean,
+    useDefaultDataButton: boolean,
 }