code-dot-org · jmkulwik · Jan 11, 2021 · Jan 11, 2021
diff --git a/apps/src/code-studio/components/BubbleChoice.jsx b/apps/src/code-studio/components/BubbleChoice.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import i18n from '@cdo/locale';
 import color from '@cdo/apps/util/color';
 import {navigateToHref} from '@cdo/apps/utils';
 import SafeMarkdown from '@cdo/apps/templates/SafeMarkdown';
 import SublevelCard from './SublevelCard';
-import {levelTypeWithoutStatus} from '@cdo/apps/templates/progress/progressTypes';
 
 const MARGIN = 10;
 
@@ -29,9 +29,27 @@ const styles = {
 };
 
 export default class BubbleChoice extends React.Component {
-  // The bubble choice component doesn't need the status. It's
-  // only rendering the sublevel cards.
-  static propTypes = {level: levelTypeWithoutStatus};
+  static propTypes = {
+    level: PropTypes.shape({
+      display_name: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      previous_level_url: PropTypes.string,
+      redirect_url: PropTypes.string,
+      script_url: PropTypes.string,
+      sublevels: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.number.isRequired,
+          display_name: PropTypes.string.isRequired,
+          description: PropTypes.string,
+          thumbnail_url: PropTypes.string,
+          url: PropTypes.string.isRequired,
+          position: PropTypes.number,
+          letter: PropTypes.string,
+          perfect: PropTypes.bool
+        })
+      )
+    })
+  };
 
   goToUrl = url => {
     navigateToHref(url + location.search);

diff --git a/apps/src/code-studio/components/SublevelCard.jsx b/apps/src/code-studio/components/SublevelCard.jsx
@@ -7,7 +7,6 @@ import FontAwesome from '@cdo/apps/templates/FontAwesome';
 import LessonExtrasFlagIcon from '@cdo/apps/templates/progress/LessonExtrasFlagIcon';
 import MazeThumbnail from '@cdo/apps/code-studio/components/lessonExtras/MazeThumbnail';
 import queryString from 'query-string';
-import {levelTypeWithoutStatus} from '@cdo/apps/templates/progress/progressTypes';
 
 const THUMBNAIL_IMAGE_SIZE = 200;
 const MARGIN = 10;
@@ -85,8 +84,18 @@ const styles = {
 export default class SublevelCard extends React.Component {
   static propTypes = {
     isLessonExtra: PropTypes.bool,
-    // sublevels generally use "perfect" instead of status
-    sublevel: levelTypeWithoutStatus,
+    sublevel: PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      display_name: PropTypes.string.isRequired,
+      description: PropTypes.string,
+      thumbnail_url: PropTypes.string,
+      url: PropTypes.string.isRequired,
+      position: PropTypes.number,
+      letter: PropTypes.string,
+      perfect: PropTypes.bool,
+      type: PropTypes.string,
+      maze_summary: PropTypes.object
+    }),
     sectionId: PropTypes.number,
     userId: PropTypes.number
   };

diff --git a/apps/src/code-studio/components/header/HeaderMiddle.jsx b/apps/src/code-studio/components/header/HeaderMiddle.jsx
@@ -6,6 +6,7 @@ import ScriptName from './ScriptName';
 import LessonProgress from '../progress/LessonProgress';
 import HeaderPopup from './HeaderPopup';
 import HeaderFinish from './HeaderFinish';
+import {lessonExtrasUrl} from '@cdo/apps/code-studio/progressRedux';
 import _ from 'lodash';
 import $ from 'jquery';
 
@@ -32,8 +33,9 @@ class HeaderMiddle extends React.Component {
     appLoaded: PropTypes.bool,
     scriptNameData: PropTypes.object,
     lessonData: PropTypes.object,
+    lessonExtrasUrl: PropTypes.string,
     scriptData: PropTypes.object,
-    currentLevelId: PropTypes.number,
+    currentLevelId: PropTypes.string,
     linesOfCodeText: PropTypes.string,
     isRtl: PropTypes.bool
   };
@@ -337,5 +339,9 @@ class HeaderMiddle extends React.Component {
 export default connect(state => ({
   isRtl: state.isRtl,
   appLoadStarted: state.header.appLoadStarted,
-  appLoaded: state.header.appLoaded
+  appLoaded: state.header.appLoaded,
+  lessonExtrasUrl: lessonExtrasUrl(
+    state.progress,
+    state.progress.currentStageId
+  )
 }))(HeaderMiddle);
diff --git a/apps/src/code-studio/components/header/HeaderPopup.jsx b/apps/src/code-studio/components/header/HeaderPopup.jsx
@@ -26,7 +26,7 @@ export default class HeaderPopup extends Component {
   static propTypes = {
     scriptName: PropTypes.string,
     scriptData: PropTypes.object,
-    currentLevelId: PropTypes.number,
+    currentLevelId: PropTypes.string,
     linesOfCodeText: PropTypes.string,
     minimal: PropTypes.bool,
     windowHeight: PropTypes.number

diff --git a/apps/src/code-studio/components/progress/LessonProgress.jsx b/apps/src/code-studio/components/progress/LessonProgress.jsx
@@ -11,7 +11,6 @@ import {
 } from '@cdo/apps/code-studio/progressRedux';
 import ProgressBubble from '@cdo/apps/templates/progress/ProgressBubble';
 import {levelType} from '@cdo/apps/templates/progress/progressTypes';
-import {LevelKind} from '@cdo/apps/util/sharedConstants';
 import $ from 'jquery';
 
 const styles = {
@@ -79,11 +78,10 @@ class LessonProgress extends Component {
   static propTypes = {
     levels: PropTypes.arrayOf(levelType).isRequired,
     lessonExtrasUrl: PropTypes.string,
-    isLessonExtras: PropTypes.bool,
+    onLessonExtras: PropTypes.bool,
     lessonTrophyEnabled: PropTypes.bool,
     width: PropTypes.number,
-    setDesiredWidth: PropTypes.func,
-    currentPageNumber: PropTypes.number
+    setDesiredWidth: PropTypes.func
   };
 
   getFullWidth() {
@@ -162,12 +160,7 @@ class LessonProgress extends Component {
   }
 
   render() {
-    const {
-      currentPageNumber,
-      lessonExtrasUrl,
-      isLessonExtras,
-      lessonTrophyEnabled
-    } = this.props;
+    const {lessonExtrasUrl, onLessonExtras, lessonTrophyEnabled} = this.props;
     let levels = this.props.levels;
 
     // Only puzzle levels (non-concept levels) should count towards mastery.
@@ -201,33 +194,29 @@ class LessonProgress extends Component {
             style={styles.inner}
           >
             {lessonTrophyEnabled && <div style={styles.spacer} />}
-            {levels.map((level, index) => {
-              let isCurrent = level.isCurrentLevel;
-              if (isCurrent && level.kind === LevelKind.assessment) {
-                isCurrent = currentPageNumber === level.pageNumber;
-              }
-              return (
-                <div
-                  key={index}
-                  ref={isCurrent ? 'currentLevel' : null}
-                  style={{
-                    ...(level.isUnplugged && isCurrent && styles.pillContainer)
-                  }}
-                >
-                  <ProgressBubble
-                    level={level}
-                    disabled={false}
-                    smallBubble={!isCurrent}
-                    lessonTrophyEnabled={lessonTrophyEnabled}
-                  />
-                </div>
-              );
-            })}
+            {levels.map((level, index) => (
+              <div
+                key={index}
+                ref={level.isCurrentLevel ? 'currentLevel' : null}
+                style={{
+                  ...(level.isUnplugged &&
+                    level.isCurrentLevel &&
+                    styles.pillContainer)
+                }}
+              >
+                <ProgressBubble
+                  level={level}
+                  disabled={false}
+                  smallBubble={!level.isCurrentLevel}
+                  lessonTrophyEnabled={lessonTrophyEnabled}
+                />
+              </div>
+            ))}
             {lessonExtrasUrl && !lessonTrophyEnabled && (
-              <div ref={isLessonExtras ? 'currentLevel' : null}>
+              <div ref={onLessonExtras ? 'currentLevel' : null}>
                 <LessonExtrasProgressBubble
                   lessonExtrasUrl={lessonExtrasUrl}
-                  perfect={isLessonExtras}
+                  perfect={onLessonExtras}
                 />
               </div>
             )}
@@ -252,6 +241,5 @@ export default connect(state => ({
     state.progress,
     state.progress.currentStageId
   ),
-  isLessonExtras: state.progress.isLessonExtras,
-  currentPageNumber: state.progress.currentPageNumber
+  onLessonExtras: state.progress.currentLevelId === 'stage_extras'
 }))(LessonProgress);
diff --git a/apps/src/code-studio/components/progress/SelectedStudentInfo.jsx b/apps/src/code-studio/components/progress/SelectedStudentInfo.jsx
@@ -3,7 +3,6 @@ import React from 'react';
 import i18n from '@cdo/locale';
 import {TeacherPanelProgressBubble} from '@cdo/apps/code-studio/components/progress/TeacherPanelProgressBubble';
 import Button from '@cdo/apps/templates/Button';
-import {levelType} from '@cdo/apps/templates/progress/progressTypes';
 import {LevelStatus} from '@cdo/apps/util/sharedConstants';
 import Radium from 'radium';
 import FontAwesome from '@cdo/apps/templates/FontAwesome';
@@ -48,7 +47,7 @@ export class SelectedStudentInfo extends React.Component {
   static propTypes = {
     students: PropTypes.arrayOf(studentShape).isRequired,
     selectedStudent: PropTypes.object,
-    level: levelType,
+    level: PropTypes.object,
     onSelectUser: PropTypes.func.isRequired,
     getSelectedUserId: PropTypes.func.isRequired
   };

diff --git a/apps/src/code-studio/components/progress/StudentTable.jsx b/apps/src/code-studio/components/progress/StudentTable.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import Radium from 'radium';
 import color from '@cdo/apps/util/color';
 import i18n from '@cdo/locale';
-import {levelType} from '@cdo/apps/templates/progress/progressTypes';
 import {TeacherPanelProgressBubble} from '@cdo/apps/code-studio/components/progress/TeacherPanelProgressBubble';
 import FontAwesome from '@cdo/apps/templates/FontAwesome';
 
@@ -63,7 +62,7 @@ class StudentTable extends React.Component {
     students: PropTypes.arrayOf(studentShape).isRequired,
     onSelectUser: PropTypes.func.isRequired,
     getSelectedUserId: PropTypes.func.isRequired,
-    levels: PropTypes.arrayOf(levelType),
+    levels: PropTypes.array,
     sectionId: PropTypes.number,
     scriptName: PropTypes.string
   };

diff --git a/apps/src/code-studio/components/progress/TeacherPanelProgressBubble.jsx b/apps/src/code-studio/components/progress/TeacherPanelProgressBubble.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import color from '@cdo/apps/util/color';
 import FontAwesome from '@cdo/apps/templates/FontAwesome';
 import {
@@ -7,7 +8,6 @@ import {
   levelProgressStyle
 } from '@cdo/apps/templates/progress/progressStyles';
 import {LevelStatus} from '@cdo/apps/util/sharedConstants';
-import {levelType} from '@cdo/apps/templates/progress/progressTypes';
 
 /**
  * A TeacherPanelProgressBubble represents progress for a specific level in the TeacherPanel. It can be a circle
@@ -53,7 +53,7 @@ const styles = {
 
 export class TeacherPanelProgressBubble extends React.Component {
   static propTypes = {
-    level: levelType.isRequired
+    level: PropTypes.object.isRequired
   };
 
   render() {

diff --git a/apps/src/code-studio/header.js b/apps/src/code-studio/header.js
@@ -56,27 +56,23 @@ const PUZZLE_PAGE_NONE = -1;
  *   }>
  * }}
  * @param {object} progressData
- * @param {number} currentLevelId
- * @param {number} currentPageNumber The page we are on if this is a multi-
- *   page level
+ * @param {string} currentLevelId
+ * @param {number} puzzlePage
  * @param {boolean} signedIn True/false if we know the sign in state of the
  *   user, null otherwise
  * @param {boolean} stageExtrasEnabled Whether this user is in a section with
  *   stageExtras enabled for this script
- * @param {boolean} isLessonExtras Boolean indicating we are not on a script
- *   level and therefore are on lesson extras
  */
 header.build = function(
   scriptData,
   lessonGroupData,
   lessonData,
   progressData,
   currentLevelId,
-  currentPageNumber,
+  puzzlePage,
   signedIn,
   stageExtrasEnabled,
   scriptNameData,
-  isLessonExtras,
   hasAppOptions
 ) {
   const store = getStore();
@@ -90,7 +86,8 @@ header.build = function(
   progressData = progressData || {};
 
   const linesOfCodeText = progressData.linesOfCodeText;
-  let saveAnswersBeforeNavigation = currentPageNumber !== PUZZLE_PAGE_NONE;
+
+  let saveAnswersBeforeNavigation = puzzlePage !== PUZZLE_PAGE_NONE;
 
   // Set up the store immediately.
   progress.generateStageProgress(
@@ -101,9 +98,7 @@ header.build = function(
     currentLevelId,
     saveAnswersBeforeNavigation,
     signedIn,
-    stageExtrasEnabled,
-    isLessonExtras,
-    currentPageNumber
+    stageExtrasEnabled
   );
 
   // Hold off on rendering HeaderMiddle.  This will allow the "app load"

diff --git a/apps/src/code-studio/progress.js b/apps/src/code-studio/progress.js
@@ -78,10 +78,6 @@ progress.showDisabledBubblesAlert = function() {
  *   user, null otherwise
  * @param {boolean} stageExtrasEnabled Whether this user is in a section with
  *   stageExtras enabled for this script
- * @param {boolean} isLessonExtras Boolean indicating we are not on a script
- *   level and therefore are on lesson extras
- * @param {number} currentPageNumber The page we are on if this is a multi-
- *   page level
  */
 progress.generateStageProgress = function(
   scriptData,
@@ -91,9 +87,7 @@ progress.generateStageProgress = function(
   currentLevelId,
   saveAnswersBeforeNavigation,
   signedIn,
-  stageExtrasEnabled,
-  isLessonExtras,
-  currentPageNumber
+  stageExtrasEnabled
 ) {
   const store = getStore();
 
@@ -113,9 +107,7 @@ progress.generateStageProgress = function(
     },
     currentLevelId,
     false,
-    saveAnswersBeforeNavigation,
-    isLessonExtras,
-    currentPageNumber
+    saveAnswersBeforeNavigation
   );
 
   store.dispatch(
@@ -269,19 +261,13 @@ function queryUserProgress(store, scriptData, currentLevelId) {
  * @param {boolean} isFullProgress - True if this contains progress for the entire
  *   script vs. a single stage.
  * @param {boolean} [saveAnswersBeforeNavigation]
- * @param {boolean} [isLessonExtras] Optional boolean indicating we are not on
- *   a script level and therefore are on lesson extras
- * @param {number} [currentPageNumber] Optional. The page we are on if this is
- *   a multi-page level
  */
 function initializeStoreWithProgress(
   store,
   scriptData,
   currentLevelId,
   isFullProgress,
-  saveAnswersBeforeNavigation = false,
-  isLessonExtras = false,
-  currentPageNumber
+  saveAnswersBeforeNavigation = false
 ) {
   store.dispatch(
     initProgress({
@@ -298,9 +284,7 @@ function initializeStoreWithProgress(
       scriptStudentDescription: scriptData.studentDescription,
       betaTitle: scriptData.beta_title,
       courseId: scriptData.course_id,
-      isFullProgress: isFullProgress,
-      isLessonExtras: isLessonExtras,
-      currentPageNumber: currentPageNumber
+      isFullProgress: isFullProgress
     })
   );