Example options

js/src/get-started-page/index.js

@@ -2,18 +2,66 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './index.scss';
 
-const GetStartedPage = ( { query } ) => {
+const GetStartedPage = ( { query, optionView, updateOptions } ) => {
+
+	const updateTest = () => {
+
+		let temp = optionView;
+
+		if (temp == 'yes') {
+			temp = 'no';
+		} else {
+			temp = 'yes';
+		}
+
+		console.log(temp);
+
+		updateOptions( {
+			gla_started: temp,
+		} );
+	};
+
 	return (
 		<div>
 			Hello World!
+			<div>
+				<Button
+					label={ __( 'Test Option Update', 'gla' ) }
+					onClick={ updateTest }
+				>
+					Click me
+				</Button>
+			</div>
 		</div>
 	);
 };
 
-export default GetStartedPage;
+export { GetStartedPage };
+
+// default export
+export default compose(
+	withSelect( ( select ) => {
+		const { getOption, isOptionsUpdating } = select( OPTIONS_STORE_NAME );
+		const isUpdateRequesting = isOptionsUpdating();
+
+		return {
+			optionView: getOption( 'gla_started' ),
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { updateOptions } = dispatch( OPTIONS_STORE_NAME );
+		return {
+			updateOptions,
+		};
+	} )
+)( GetStartedPage );

package.json

@@ -39,6 +39,9 @@
 		"stylelint-config-wordpress": "^17.0.0"
 	},
 	"dependencies": {
+		"@woocommerce/data": "^1.1.1",
+		"@woocommerce/date": "^2.1.0",
+		"@woocommerce/navigation": "^5.2.0",
 		"@woocommerce/tracks": "^1.0.0",
 		"@wordpress/components": "^11.1.1",
 		"@wordpress/icons": "^2.8.0"