From 2dee2550a482c01ece5d52d2689f20c9734d924b Mon Sep 17 00:00:00 2001
From: Justin Foell <630830+jrfoell@users.noreply.github.com>
Date: Thu, 24 Dec 2020 09:54:32 -0600
Subject: [PATCH 1/3] Moved som to components folder

---
 src/blocks/{activity => components}/som-override.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/blocks/{activity => components}/som-override.js (100%)

diff --git a/src/blocks/activity/som-override.js b/src/blocks/components/som-override.js
similarity index 100%
rename from src/blocks/activity/som-override.js
rename to src/blocks/components/som-override.js

From 388398fb09e42e3e7e3c7dbd5b887533c1011c8e Mon Sep 17 00:00:00 2001
From: Justin Foell <630830+jrfoell@users.noreply.github.com>
Date: Fri, 29 Jan 2021 11:11:00 -0600
Subject: [PATCH 2/3] SOMOverride as a class component

---
 src/blocks/components/som-override.js | 37 ++++++++++++++++-----------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/blocks/components/som-override.js b/src/blocks/components/som-override.js
index b64c434..29a000f 100644
--- a/src/blocks/components/som-override.js
+++ b/src/blocks/components/som-override.js
@@ -7,19 +7,20 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function SOMOverride( {
-	som,
-	onChange,
-} ) {
+class SOMOverride extends Component {
 
-	function updateSOM( som ) {
-		return () => {
-			onChange( som );
-		};
+	constructor() {
+		super( ...arguments );
+		this.onChange   = this.onChange.bind( this );
 	}
 
-	return (
-		<>
+	onChange( event ) {
+		console.log(event.target);
+		this.props.onChange( event );
+	}
+
+	render() {
+		return (
 			<div className="wp-block-wp-strava-som-control">
 				<p className="wp-block-wp-strava-som-control-row">
 						{ __( 'System of Measure (override from settings)' ) }
@@ -31,7 +32,8 @@ export default function SOMOverride( {
 							isSmall
 							isPrimary={ som == 'english' }
 							isPressed={ som == 'english' }
-							onClick={ updateSOM( 'english' ) }
+							value='english'
+							onClick={ this.onChange }
 						>
 							{ __( 'English', 'wp-strava' ) }
 						</Button>
@@ -40,16 +42,21 @@ export default function SOMOverride( {
 							isSmall
 							isPrimary={ som == 'metric' }
 							isPressed={ som == 'metric' }
-							onClick={ updateSOM( 'metric' ) }
+							value='metric'
+							onClick={ this.onChange }
 						>
 							{ __( 'Metric', 'wp-strava' ) }
 						</Button>
 					</ButtonGroup>
-					<Button isSmall onClick={ updateSOM() }>
+					<Button
+						isSmall
+						value=''
+						onClick={ this.onChange }
+					>
 						{ __( 'Reset', 'wp-strava' ) }
 					</Button>
 				</div>
 			</div>
-		</>
-	);
+		);
+	}
 }

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 3/3] 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;