From b06e3defe20999dfdf9867a36c79b23a32872b84 Mon Sep 17 00:00:00 2001
From: Justin Foell <630830+jrfoell@users.noreply.github.com>
Date: Fri, 29 Jan 2021 11:48:25 -0600
Subject: [PATCH] Add SOMOverride component

---
 src/blocks/activity/edit.js           | 36 ++++-----------------------
 src/blocks/components/som-override.js | 27 ++++++++++++--------
 2 files changed, 22 insertions(+), 41 deletions(-)

diff --git a/src/blocks/activity/edit.js b/src/blocks/activity/edit.js
index fd3674c..1a34ac9 100644
--- a/src/blocks/activity/edit.js
+++ b/src/blocks/activity/edit.js
@@ -1,11 +1,12 @@
 /* global wp, wpStrava */
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedControls from './embed-controls';
+import SOMOverride from '../components/som-override';
 
 const { __ } = wp.i18n;
 const { Component } = wp.element;
 const { InspectorControls } = wp.editor;
-const { PanelBody, ToggleControl, ServerSideRender, Button, ButtonGroup } = wp.components;
+const { PanelBody, ToggleControl, ServerSideRender } = wp.components;
 const { isEmpty } = lodash;
 
 class Edit extends Component {
@@ -106,36 +107,9 @@ class Edit extends Component {
 							checked={ displayMarkers }
 							onChange={ (checked ) => this.toggleDisplayMarkers( checked ) }
 						/>
-						<div className="wp-block-wp-strava-som-control">
-							<p className="wp-block-wp-strava-som-control-row">
-									{ __( 'System of Measure (override from settings)' ) }
-							</p>
-							<div className="wp-block-wp-strava-som-control-row">
-								<ButtonGroup aria-label={ __( 'System of Measure', 'wp-strava' ) }>
-									<Button
-										key={ 'english' }
-										isSmall
-										isPrimary={ som == 'english' }
-										aria-pressed={ som == 'english' }
-										onClick={ () => this.overrideSOM( 'english' ) }
-									>
-										{ __( 'English', 'wp-strava' ) }
-									</Button>
-									<Button
-										key={ 'metric' }
-										isSmall
-										isPrimary={ som == 'metric' }
-										aria-pressed={ som == 'metric' }
-										onClick={ () => this.overrideSOM( 'metric' ) }
-									>
-										{ __( 'Metric', 'wp-strava' ) }
-									</Button>
-								</ButtonGroup>
-								<Button isSmall onClick={ () => this.overrideSOM() }>
-									{ __( 'Reset', 'wp-strava' ) }
-								</Button>
-							</div>
-						</div>
+						<SOMOverride
+							onChange={ this.overrideSOM }
+						/>
 					</PanelBody>
 				</InspectorControls>
 			</>
diff --git a/src/blocks/components/som-override.js b/src/blocks/components/som-override.js
index 29a000f..7b446fe 100644
--- a/src/blocks/components/som-override.js
+++ b/src/blocks/components/som-override.js
@@ -1,25 +1,32 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	ButtonGroup,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+
+const { __ } = wp.i18n;
+const { Component } = wp.element;
+const { Button, ButtonGroup } = wp.components;
 
 class SOMOverride extends Component {
 
 	constructor() {
 		super( ...arguments );
-		this.onChange   = this.onChange.bind( this );
+		this.onChange = this.onChange.bind( this );
+
+		this.state = {
+			som: '',
+		};
 	}
 
 	onChange( event ) {
-		console.log(event.target);
-		this.props.onChange( event );
+		this.setState( { som: event.target.value } );
+		this.props.onChange( event.target.value );
 	}
 
 	render() {
+		const {
+			som
+		} = this.state;
+
 		return (
 			<div className="wp-block-wp-strava-som-control">
 				<p className="wp-block-wp-strava-som-control-row">
@@ -28,7 +35,6 @@ class SOMOverride extends Component {
 				<div className="wp-block-wp-strava-som-control-row">
 					<ButtonGroup aria-label={ __( 'System of Measure', 'wp-strava' ) }>
 						<Button
-							key={ 'english' }
 							isSmall
 							isPrimary={ som == 'english' }
 							isPressed={ som == 'english' }
@@ -38,7 +44,6 @@ class SOMOverride extends Component {
 							{ __( 'English', 'wp-strava' ) }
 						</Button>
 						<Button
-							key={ 'metric' }
 							isSmall
 							isPrimary={ som == 'metric' }
 							isPressed={ som == 'metric' }
@@ -60,3 +65,5 @@ class SOMOverride extends Component {
 		);
 	}
 }
+
+export default SOMOverride;