Refactor toggle button

src/oceans/components/scenes/pond/index.jsx

@@ -38,11 +38,15 @@ let UnwrappedPond = class Pond extends React.Component {
     super(props);
   }
 
-  toggleRecall = e => {
+  getMatchingFishSet = (e, showMatching) => {
     const state = getState();
 
-    // No-op if transition is already in progress.
-    if (state.pondFishTransitionStartTime) {
+    // No-op if transition is already in progress or if already showing the desired fish set.
+    // Note that recallFish are fish that are not matching the word/attribute.
+    // pondFish are fish that are matching the word/attribute.
+    // showMatching true -> want matching (showRecallFish false)
+    // showMatching false -> want recalled fish (showRecallFish true).
+    if (state.pondFishTransitionStartTime || state.showRecallFish === !showMatching) {
       return;
     }
 
@@ -193,12 +197,13 @@ let UnwrappedPond = class Pond extends React.Component {
         <div onClick={this.onPondClick} style={styles.pondSurface} />
         <div style={recallIconsStyle}>
           <button
+            key="toggle-matching"
             type="button"
-            onClick={this.toggleRecall}
+            onClick={e => this.getMatchingFishSet(e, true)}
             aria-label={I18n.t('switchToMatchingItems')}
             style={{
-              ...styles.recallIcon,
-              ...{borderTopLeftRadius: 8, borderBottomLeftRadius: 8},
+              ...styles.toggleIcon,
+              ...styles.matchingIconLeft,
               ...(state.showRecallFish ? {} : styles.bgGreen)
             }}
           >
@@ -208,12 +213,13 @@ let UnwrappedPond = class Pond extends React.Component {
             />
           </button>
           <button
+            key="toggle-non-matching"
             type="button"
-            onClick={this.toggleRecall}
+            onClick={e => this.getMatchingFishSet(e, false)}
             aria-label={I18n.t('switchToNonMatchingItems')}
             style={{
-              ...styles.recallIcon,
-              ...{borderTopRightRadius: 8, borderBottomRightRadius: 8},
+              ...styles.toggleIcon,
+              ...styles.nonMatchingIconRight,
               ...(state.showRecallFish ? styles.bgRed : {})
             }}
           >

src/oceans/styles/index.js

@@ -408,21 +408,34 @@ const styles = {
     position: 'absolute',
     top: '2%',
     right: '7%',
-    backgroundColor: colors.white,
-    color: colors.grey,
     height: '8.5%',
     width: '9.5%',
-    borderRadius: 8,
     display: 'flex',
     alignItems: 'center',
     direction: 'ltr'
   },
-  recallIcon: {
+  toggleIcon: {
     cursor: 'pointer',
     height: '100%',
     border: 'none',
     padding: '10px',
-    margin: 0
+    margin: 0,
+    ':focus': {
+      position: 'relative',
+      zIndex: 1
+    }
+  },
+  matchingIconLeft: {
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  nonMatchingIconRight: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8
   },
   infoIconContainer: {
     position: 'absolute',

test/unit/oceans/ui.test.js

@@ -448,6 +448,10 @@ describe('Predict', () => {
 describe('Pond', () => {
   let playSoundStub;
 
+  beforeAll(() => {
+    I18n.initI18n();
+  });
+
   beforeEach(() => {
     playSoundStub = sinon.stub(soundLibrary, 'playSound');
   });