Prioritize Override in Boolean Filter

apps/src/dance/DanceVisualizationColumn.jsx

@@ -8,7 +8,8 @@ import PropTypes from 'prop-types';
 import Radium from 'radium';
 import {connect} from 'react-redux';
 import i18n from '@cdo/locale';
-import AgeDialog, {signedOutOver13} from '../templates/AgeDialog';
+import AgeDialog, {signedOutOver13, songFilterOn} from '../templates/AgeDialog';
+import {getFilteredSongKeys} from '@cdo/apps/dance/songs';
 
 const SongSelector = Radium(
   class extends React.Component {
@@ -17,7 +18,7 @@ const SongSelector = Radium(
       setSong: PropTypes.func.isRequired,
       selectedSong: PropTypes.string,
       songData: PropTypes.objectOf(PropTypes.object).isRequired,
-      filterOff: PropTypes.bool.isRequired
+      filterOn: PropTypes.bool.isRequired
     };
 
     changeSong = event => {
@@ -26,6 +27,15 @@ const SongSelector = Radium(
     };
 
     render() {
+      const {
+        selectedSong,
+        songData,
+        enableSongSelection,
+        filterOn
+      } = this.props;
+
+      const songKeys = getFilteredSongKeys(songData, filterOn);
+
       return (
         <div id="song-selector-wrapper">
           <label>
@@ -35,17 +45,14 @@ const SongSelector = Radium(
             id="song_selector"
             style={styles.selectStyle}
             onChange={this.changeSong}
-            value={this.props.selectedSong}
-            disabled={!this.props.enableSongSelection}
+            value={selectedSong}
+            disabled={!enableSongSelection}
           >
-            {Object.keys(this.props.songData).map(
-              (option, i) =>
-                (this.props.filterOff || !this.props.songData[option].pg13) && (
-                  <option key={i} value={option}>
-                    {this.props.songData[option].title}
-                  </option>
-                )
-            )}
+            {songKeys.map((option, i) => (
+              <option key={i} value={option}>
+                {songData[option].title}
+              </option>
+            ))}
           </select>
         </div>
       );
@@ -67,27 +74,38 @@ class DanceVisualizationColumn extends React.Component {
   };
 
   state = {
-    filterOff: this.setFilterStatus()
+    filterOn: this.getFilterStatus()
   };
 
   /*
     Turn the song filter off
   */
   turnFilterOff = () => {
-    this.setState({filterOff: true});
+    this.setState({filterOn: false});
   };
 
   /*
     The filter defaults to on. If the user is over 13 (identified via account or anon dialog), filter turns off.
    */
-  setFilterStatus() {
+  getFilterStatus() {
+    const {userType, under13} = this.props;
+
+    // Check if song filter override is triggered and initialize song filter to true.
+    const songFilter = songFilterOn();
+    if (songFilter) {
+      return true;
+    }
+
     // userType - 'teacher', 'student', 'unknown' - signed out users.
-    // under13 - boolean for signed in user representing age category. Teacher assumed > 13.
-    const signedInOver13 =
-      this.props.userType === 'teacher' ||
-      (this.props.userType === 'student' && !this.props.under13);
-    const signedOutAge = signedOutOver13();
-    return signedInOver13 || signedOutAge;
+    // If user is signed out, query session key to determine age.
+    // Return false (no filter), if user is over 13.
+    if (userType === 'unknown') {
+      return !signedOutOver13();
+    }
+
+    // User is signed in (student or teacher) and the filter is off.
+    // Return true (filterOn) if the user is under 13. Teachers assumed over13.
+    return under13;
   }
 
   render() {
@@ -112,7 +130,7 @@ class DanceVisualizationColumn extends React.Component {
               setSong={this.props.setSong}
               selectedSong={this.props.selectedSong}
               songData={this.props.songData}
-              filterOff={this.state.filterOff}
+              filterOn={this.state.filterOn}
             />
           )}
           <ProtectedVisualizationDiv>

apps/src/dance/songs.js

@@ -106,3 +106,15 @@ export function parseSongOptions(songManifest) {
   });
   return songs;
 }
+
+// Given a songManifest, returns a list of keys that represent the songs to
+// be displayed based on whether the song filter is on.
+export function getFilteredSongKeys(fullSongManifest, filterOn) {
+  const allSongKeys = Object.keys(fullSongManifest);
+  if (filterOn) {
+    // Filter is on, only include songs that are not pg13.
+    return allSongKeys.filter(key => !fullSongManifest[key].pg13);
+  }
+  // Filter is off, all songs may be displayed.
+  return allSongKeys;
+}

apps/src/templates/AgeDialog.jsx

@@ -15,11 +15,16 @@ import queryString from 'query-string';
  * a different session storage key here.
  */
 const AGE_DIALOG_SESSION_KEY = 'ad_anon_over13';
+const SONG_FILTER_SESSION_KEY = 'song_filter_on';
 
 export const signedOutOver13 = () => {
   return sessionStorage.getItem(AGE_DIALOG_SESSION_KEY) === 'true';
 };
 
+export const songFilterOn = () => {
+  return sessionStorage.getItem(SONG_FILTER_SESSION_KEY) === 'true';
+};
+
 class AgeDialog extends Component {
   state = {
     open: true
@@ -35,10 +40,6 @@ class AgeDialog extends Component {
     storage: window.sessionStorage
   };
 
-  setManualFilter = () => {
-    this.setSessionStorage(false);
-  };
-
   setSessionStorage = over13 => {
     this.props.storage.setItem(AGE_DIALOG_SESSION_KEY, over13);
     this.setState({open: false});
@@ -48,7 +49,8 @@ class AgeDialog extends Component {
     // If the song filter override has been turned on, set session storage
     // Dialog won't render
     if (queryString.parse(window.location.search).songfilter === 'on') {
-      this.setManualFilter();
+      this.props.storage.setItem(SONG_FILTER_SESSION_KEY, true);
+      this.setState({open: false});
     }
   }
 

apps/test/unit/dance/songsTest.js

@@ -0,0 +1,31 @@
+import {expect} from '../../util/reconfiguredChai';
+import {getFilteredSongKeys} from '@cdo/apps/dance/songs';
+
+let testSongManifest = {
+  allAgesSong: {
+    text: 'Singer - Song For Everybody',
+    pg13: false,
+    url: 'singer_song'
+  },
+  olderStudentSong: {
+    text: 'Band - Song for Older Students',
+    pg13: true,
+    url: 'band_song'
+  }
+};
+
+describe('Dance Party Songs Utils', function() {
+  describe('Song Filtering', function() {
+    it('when filtering is on, should only return keys of songs that are not pg-13', function() {
+      let filteredSongs = getFilteredSongKeys(testSongManifest, true);
+      expect(filteredSongs.length).to.equal(1);
+      expect(filteredSongs[0]).to.equal('allAgesSong');
+    });
+
+    it('when filtering is off, all song keys are returned', function() {
+      let filteredSongs = getFilteredSongKeys(testSongManifest, false);
+      expect(filteredSongs.length).to.equal(2);
+      expect(filteredSongs[1]).to.equal('olderStudentSong');
+    });
+  });
+});

dashboard/test/ui/features/star_labs/dance/age_filter.feature

@@ -29,6 +29,7 @@ Feature: Dance Lab Age Filter
     And I see option "Synthesize" or "Ed Sheeran - Shape of You" in the dropdown "#song_selector"
 
     Then I am on "http://studio.code.org/s/allthethings/lessons/37/levels/1?noautoplay=true&songfilter=on"
+    And I reload the page
     And I wait for the page to fully load
     And I wait until I don't see selector "#p5_loading"
     And I wait for the song selector to load