lcms-engine 0.2.0 → 0.3.0

data/app/assets/javascripts/lcms/engine/components/enhance-instruction/GenericResourceCard.js.jsx

@@ -1,20 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-function GenericResourceCard(props) {
-  const item = props.item;
-  const mainClass = 'o-generic-card';
-  const bemClass = _.partial(convertToBEM, mainClass);
-  const cssGeneric = classNames(
-    mainClass,
-    `cs-link-bg--${colorCodeCss(item.subject, item.grade_avg)}`
-  );
-
-  return (
-    // eslint-disable-next-line no-undef
-    <a className={cssGeneric} href={item.path} onClick={heapTrackPd.bind(null, item)}>
-      <div className={bemClass('wrap')}>
-        <div className={bemClass('title')}>{item.title}</div>
-        <div className={bemClass('teaser')}>{item.teaser}</div>
-      </div>
-    </a>
-  );
-}

data/app/assets/javascripts/lcms/engine/components/explore-curriculum/ExploreCurriculumCardItem.js.jsx

@@ -1,152 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-class ExploreCurriculumCardItem extends React.Component {
-  componentDidMount() {
-    if (this._dropdown) {
-      new Foundation.DropdownMenu($(this._dropdown),
-        { 'alignment': 'right',
-          'forceFollow': false,
-          'closingTime': Modernizr.touchevents ? 0 : 5000 });
-    }
-  }
-
-  componentWillUnmount() {
-    if (this._dropdown) {
-      $(this._dropdown).foundation('destroy');
-    }
-  }
-
-  render() {
-    const props = this.props;
-    const resource = props.curriculum.resource;
-    const hasDownloads = resource.downloads && resource.downloads.length > 0;
-    const hasRelated = resource.has_related;
-    const colorCode = props.colorCode;
-
-    const curriculumComponent = {
-      // eslint-disable-next-line no-undef
-      'grade': ExploreCurriculumGradeMap,
-      // eslint-disable-next-line no-undef
-      'module': ExploreCurriculumModuleMap,
-      // eslint-disable-next-line no-undef
-      'unit': ExploreCurriculumUnitMap,
-      // eslint-disable-next-line no-undef
-      'lesson': ExploreCurriculumGradeMap
-    }[props.curriculum.type];
-
-    const curriculumMap = React.createElement(curriculumComponent, {
-      expanded: props.shouldItemExpand,
-      curriculum: props.curriculum,
-      colorCode: colorCode
-    });
-
-    const cssClasses = classNames(
-      'o-cur-card',
-      `o-cur-card-hover--${props.colorCode}`,
-      { [`o-cur-card-active--${props.colorCode}`]: props.isActive},
-      { 'o-cur-card--short': !props.shouldItemExpand },
-      `o-cur-card--${props.curriculum.type}`
-    );
-
-    const cssBodyClasses = classNames(
-      'o-cur-card__body',
-      { 'o-cur-card__body--medium': props.shouldItemExpand },
-      { 'o-cur-card__body--short': !props.shouldItemExpand }
-    );
-
-    const cssActionClasses = classNames(
-      'o-cur-card__actions',
-      {'o-cur-card__actions--short': !props.shouldItemExpand },
-      {'u-hidden': _.includes(['grade', 'module'], props.curriculum.type) || resource.is_assessment}
-    );
-
-    const cssActionDropdownClasses = classNames(
-      'o-cur-card__menu o-cur-card__menu--short o-cur-card--show-short',
-      {'u-hidden': _.includes(['grade', 'module'], props.curriculum.type)}
-    );
-
-    const cssDownloadBtnClasses = classNames(
-      'o-ub-btn', 'o-ub-btn--bordered', 'o-ub-btn--curriculum',
-      {'o-ub-btn--disabled': !hasDownloads }
-    );
-
-    const cssRelatedBtnClasses = classNames(
-      'o-ub-btn', 'o-ub-btn--bordered', 'o-ub-btn--curriculum',
-      {'o-ub-btn--disabled': !hasRelated }
-    );
-
-    const cssDownloadLinkClasses = classNames(
-      {'u-link--disabled': !hasDownloads }
-    );
-
-    const cssHeaderClasses = classNames(
-      `cs-txt--${colorCode}`,
-      {'o-title__type o-title__type--top-align': props.shouldItemExpand},
-      {'o-title__type--short': !props.shouldItemExpand },
-      {'u-hidden': resource.is_assessment}
-    );
-
-    const cssTitleClasses = classNames(
-      {'u-txt--card-title-medium': props.shouldItemExpand && !resource.is_assessment },
-      {'u-txt--card-title-short': !props.shouldItemExpand && !resource.is_assessment },
-      {'u-txt--card-assesment-medium': props.shouldItemExpand && resource.is_assessment },
-      {'u-txt--card-assesment-short': !props.shouldItemExpand && resource.is_assessment }
-    );
-
-    const cssShow = classNames(
-      'u-hidden'
-    );
-
-    const resourceType = resource.type.name === 'grade' ? 'curriculum' : resource.type.name;
-    const downloadBtnLabel = `Download ${_.capitalize(resourceType)}`;
-    const downloadModalId = `downloads-modal-${resource.id}`;
-
-    return (
-      <div id={props.curriculum.id} name={resource.path} onClick={props.onClickElement} className={cssClasses} data-magellanhash-target>
-        {curriculumMap}
-        <div className={cssBodyClasses}>
-          <div className="o-title u-text--uppercase show-for-ipad">
-            <span className={cssHeaderClasses}>{resource.short_title}</span>
-            <span className={`${cssShow} o-title__duration o-cur-card--show-medium`}><TimeToTeach duration={resource.time_to_teach} /></span>
-          </div>
-          <h3 className={cssTitleClasses}>{resource.title}</h3>
-          <div className={`${cssShow} o-title u-text--uppercase hide-for-ipad u-padding-top--xs`}>
-            <span className="o-title__duration u-float-none"><TimeToTeach duration={resource.time_to_teach} /></span>
-          </div>
-          <div className="o-cur-card--show-medium o-cur-card__dsc">{resource.teaser}</div>
-        </div>
-        <div className={cssActionClasses}>
-          <ul className="o-cur-card__menu o-cur-card__menu--medium o-cur-card--show-medium">
-            <li>
-              <a className="o-ub-btn o-ub-btn--yellow o-ub-btn--subtle" href={resource.path}>
-                View Details
-              </a>
-            </li>
-            <li>
-              <a className={cssDownloadBtnClasses} data-open={downloadModalId}>
-                {downloadBtnLabel}
-              </a>
-            </li>
-            <li>
-              <a className={cssRelatedBtnClasses} href={`${resource.path}#related-instruction`}>
-                Related Resources
-              </a>
-            </li>
-          </ul>
-          <div className={`${cssHeaderClasses} u-text--uppercase hide-for-ipad`}>
-            {resource.short_title}
-          </div>
-          <ul className={cssActionDropdownClasses} ref={(ref) => this._dropdown = ref}>
-            <li>
-              <a href="" data-turbolinks="false" className="o-cur-card__ellipsis"><i className="ub-ellipsis fa-3x"></i></a>
-              <ul className="menu">
-                <li><a href={resource.path}>View Details</a></li>
-                <li><a className={cssDownloadLinkClasses} data-open={downloadModalId}>{downloadBtnLabel}</a></li>
-                <li><a className="u-link--disabled">Related Instruction</a></li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-      </div>
-    );
-  }
-}

data/app/assets/javascripts/lcms/engine/components/explore-curriculum/ExploreCurriculumGradeMap.js.jsx

@@ -1,44 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-function ExploreCurriculumGradeMap(props) {
-  const mapClass = classNames({
-    'o-cur-card__map': true,
-    'o-cur-card__map--medium': props.expanded,
-    'o-cur-card__map--short': !props.expanded
-  });
-
-  const mainClass = classNames({
-    'o-ch-map': true,
-    'o-ch-map--medium': props.expanded,
-    'o-ch-map--short': !props.expanded
-  });
-
-  const details = props.expanded ?
-    <div className="o-ch-map__details">
-      <span>Show Modules</span>
-    </div> : '';
-
-  const min = Math.min(...props.curriculum.module_sizes),
-    max = Math.max(...props.curriculum.module_sizes);
-
-  // eslint-disable-next-line no-undef
-  const scale = _.curry(scaleNumber)(70, 100, min, max);
-  const bemClass = _.partial(convertToBEM, mainClass);
-
-  const grades = props.curriculum.module_sizes.map((size, i) => {
-    const styles = { width: `${scale(size)}%` };
-    return (
-      <div key={i} className={bemClass('module-wrap')}>
-        <div className={classNames(bemClass('module'), `cs-bg--${props.colorCode}`)} style={styles}></div>
-      </div>
-    );
-  });
-
-  return (
-    <div className={mapClass}>
-      <div className={mainClass}>
-        {grades}
-      </div>
-      {details}
-    </div>
-  );
-}

data/app/assets/javascripts/lcms/engine/components/explore-curriculum/ExploreCurriculumHeader.js.jsx

@@ -1,10 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-function ExploreCurriculumHeader(props) {
-  return (
-    <div className="o-s-header o-page__wrap--row-nest">
-      <div className="o-s-header__item">
-        <p>Showing {props.totalItems} items</p>
-      </div>
-    </div>
-  );
-}

data/app/assets/javascripts/lcms/engine/components/explore-curriculum/ExploreCurriculumItem.js.jsx

@@ -1,77 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-class ExploreCurriculumItem extends React.Component {
-  curriculum() {
-    return this.props.index[this.props.id];
-  }
-
-  downloadModal() {
-    const resource = this.curriculum().resource;
-    return (resource.downloads && resource.downloads.length > 0) ?
-      <DownloadModal resource={resource} /> : '';
-  }
-
-  render() {
-    const props = this.props;
-    const curriculum = this.curriculum();
-    const colorCode = colorCodeCss(curriculum.resource.subject, curriculum.resource.grade);
-
-    // An item should expand if its parent is the last parent in the active branch.
-    // Collapsed Grade -> Collapsed Mod -> Expanded Unit 1, Unit 2, Unit 3
-    const activeParent = props.index[props.active[props.active.length - 2]];
-    const shouldItemExpand = props.active.length === 1 ||
-      _.some(activeParent.children, c => c.id === props.id);
-    const isItemActive = props.active.length > 1 && props.active[props.active.length - 2] === props.id;
-
-    let onClickItem = shouldItemExpand ? props.onClickViewDetails.bind(this, props.parentage) : props.onClickExpand.bind(this, props.parentage);
-    if (curriculum.resource.is_assessment) {
-      onClickItem = function() { location.href = curriculum.resource.path; };
-    }
-
-    const item =
-      <ExploreCurriculumCardItem
-        curriculum={curriculum}
-        onClickElement={onClickItem}
-        shouldItemExpand={shouldItemExpand}
-        isActive={isItemActive}
-        colorCode={colorCode} />;
-
-    // Children should be rendered if the item is a parent in the active branch.
-    const shouldRenderChildren = props.active.length > 1 &&
-      _.includes(props.active, props.id) &&
-      _.last(props.active) !== props.id;
-
-    const cssClasses = classNames( 'c-ec-cards__children',
-      { 'c-ec-cards__children--lessons': curriculum.type === 'unit',
-        'c-ec-cards__children--expanded': shouldRenderChildren });
-
-    const children = _.filter(curriculum.children, x => !x.resource.is_opr);
-
-    const childrenElements = shouldRenderChildren ?
-      children.map(c => (
-        c.type === 'lesson' ?
-          <LessonCard key={c.resource.id} lesson={c.resource} with_breadcrumb={false} colorCode={colorCode} /> :
-          <ExploreCurriculumItem
-            key={c.id}
-            id={c.id}
-            index={props.index}
-            onClickExpand={props.onClickExpand}
-            onClickViewDetails={props.onClickViewDetails}
-            parentage={[...props.parentage, c.id]}
-            active={props.active} />
-      )) : [];
-
-    const shouldRenderOpr = shouldRenderChildren && curriculum.type === 'unit';
-    const opr = shouldRenderOpr ? <ExploreCurriculumOpr colorCode={colorCode} curriculum={curriculum}/> : [];
-
-    return (
-      <div>
-        {item}
-        {opr}
-        <div className={cssClasses}>
-          {childrenElements}
-        </div>
-        {this.downloadModal()}
-      </div>
-    );
-  }
-}

data/app/assets/javascripts/lcms/engine/components/explore-curriculum/ExploreCurriculumModuleMap.js.jsx

@@ -1,59 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-function ExploreCurriculumModuleMap(props) {
-  const mapClass = classNames({
-    'o-cur-card__map': true,
-    'o-cur-card__map--medium': props.expanded,
-    'o-cur-card__map--short': !props.expanded
-  });
-
-  const mainClass = classNames({
-    'o-ch-map': true,
-    'o-ch-map--medium': props.expanded,
-    'o-ch-map--short': !props.expanded
-  });
-
-  const bemClass = _.partial(convertToBEM, mainClass);
-  const colorCodeClass = `cs-bg--${props.colorCode}`;
-
-  const details = props.expanded ?
-    <div className="o-ch-map__details">
-      <span>Show Units</span>
-    </div> : '';
-
-  const units = props.curriculum.unit_sizes.map((size, i) => {
-    const lessons = [];
-    const unit = props.curriculum.children[i];
-
-    for (let j = 0; j < size; j++) {
-      const child = unit ? unit.children[j] : null;
-      if (child && child.resource.is_opr) continue;
-      const prereqClass = child && child.resource.is_prerequisite ? 'o-ch-unit-map__prerequisite' : '';
-      const assessmentClass =  unit && unit.resource.is_assessment ? `o-ch-unit-map__assessment--${props.colorCode}` : '';
-      lessons.push((
-        <div key={j} className={classNames(bemClass('lesson'), colorCodeClass, assessmentClass, prereqClass)}></div>
-      ));
-    }
-
-    return (
-      <div key={i} className={bemClass('unit')}>
-        {lessons}
-      </div>
-    );
-  });
-
-  return (
-    <div className={mapClass}>
-      <div className={mainClass}>
-        <div className={bemClass('module-wrap')}>
-          <div className={classNames(bemClass('module'), colorCodeClass)}></div>
-        </div>
-        <div className={bemClass('units-wrap')}>
-          <div className={bemClass('units')}>
-            {units}
-          </div>
-        </div>
-      </div>
-      {details}
-    </div>
-  );
-}

data/app/assets/javascripts/lcms/engine/components/explore-curriculum/ExploreCurriculumOpr.js.jsx

@@ -1,62 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-class ExploreCurriculumOpr extends React.Component {
-  constructor(props) {
-    super(props);
-    this.children = _
-      .filter(this.props.curriculum.children, x => x.resource.is_opr)
-      .sort((a, b) => parseInt(a.resource.short_title.split(' ')[1]) - parseInt(b.resource.short_title.split(' ')[1]));
-    this.state = { renderChildren: false };
-    this.oprDescription = this.props.curriculum.resource.opr_description;
-
-    // Amount of OPR lessons to show in the expanded version of the block
-    this.numLessonsToTake = 5;
-  }
-
-  onClick() {
-    this.setState({renderChildren: !this.state.renderChildren});
-  }
-
-  render() {
-    if (this.children.length === 0) return (null);
-
-    const operationLabel = this.state.renderChildren ? 'Hide' : 'View';
-
-    const containerClasses = 'c-ec-cards__children c-ec-cards__children--expanded c-ec-cards-opr';
-    const titleClasses = 'c-ec-cards-opr__title';
-    const wrapperClasses = 'c-ec-cards-opr__wrapper';
-
-    const childrenComponents = () => {
-      const childrenElements = _.take(this.children, this.numLessonsToTake).map(c => {
-        return <LessonCard key={c.resource.id} lesson={c.resource} with_breadcrumb={false}
-          colorCode={this.props.colorCode}/>;
-      });
-
-      const lessonClasses = 'c-ec-cards__children--lessons';
-
-      const oprDescElement = (this.oprDescription && this.oprDescription.length) ?
-        <div className="c-ec-cards__children c-ec-cards-opr">{this.props.curriculum.resource.opr_description}</div>
-        : null;
-
-      return (
-        <div>
-          {oprDescElement}
-          <div className={lessonClasses}>
-            {childrenElements}
-          </div>
-        </div>
-      );
-    };
-
-    return (
-      <div className={wrapperClasses}>
-        <div className={containerClasses}>
-          <div className={titleClasses}>Need additional Prerequisite Lessons to help students access core learning?</div>
-          <div>
-            <button className="button" type="button" onClick={this.onClick.bind(this)}>{operationLabel} Recommendations</button>
-          </div>
-        </div>
-        {this.state.renderChildren ? childrenComponents() : null}
-      </div>
-    );
-  }
-}

data/app/assets/javascripts/lcms/engine/components/explore-curriculum/ExploreCurriculumPage.js.jsx

@@ -1,258 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-class ExploreCurriculumPage extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = this.buildStateFromProps(props);
-    this.ANIMATION_DURATION = 400;
-    this._curriculumList = null;
-  }
-
-  updateUrl($active) {
-    if (!$active && !/p=/.test(location.search)) return;
-    if ($active && !$active.length) return;
-
-    let query = { p: null, e: null };
-    if ($active) {
-      query['p'] = $active[0].getAttribute('name');
-      if ( this.state.active[this.state.active.length - 2] === $active[0].id ) {
-        query['e'] = '1';
-      }
-    }
-
-    urlHistory.update(query, { replace: true });
-  }
-
-  componentDidMount() {
-    this._curriculumList = $('#curriculumList');
-    new Foundation.MaggelanHash(this._curriculumList,
-      { deepLinking: true,
-        updateUrl: this.updateUrl.bind(this),
-        threshold: 20,
-        animationDuration: this.ANIMATION_DURATION,
-        onScrollFinished: this.onScrollFinished.bind(this)
-      });
-    let elm;
-    if (this.scrollImmediately === 'item') {
-      elm = document.getElementById(this.state.active[this.state.active.length-1]);
-      if (!elm) {
-        elm = document.getElementById(this.state.active[this.state.active.length-2]);
-      }
-      this.scrollToActive(elm);
-    } else if (this.scrollImmediately === 'expanded') {
-      elm = document.getElementById(this.state.active[this.state.active.length-2]);
-      this.scrollToActive(elm);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this._curriculumList) {
-      this._curriculumList.foundation('destroy');
-    }
-  }
-
-  componentWillUpdate(_nextProps, _nextState) {
-    if (this._curriculumList) {
-      this._curriculumList.foundation('mutexScrollLock');
-    }
-  }
-
-  componentDidUpdate(_prevProps, _prevState) {
-    if (this._curriculumList) {
-      this._curriculumList.foundation('mutexScrollUnlock');
-    }
-  }
-
-  onScrollFinished(el) {
-    _.delay(() => { if (el && $(el).length) {
-      const yOffset = $(el).offset().top;
-      // fix animation sync, will get inside in very rare cases
-      if (Math.abs($(document).scrollTop() - yOffset) > 25) {
-        $('html, body').scrollTop(yOffset);
-      }
-    }
-    this._curriculumList.foundation('mutexScrollUnlock');
-    this._curriculumList.foundation('reflow');
-    }, this.ANIMATION_DURATION / 4);
-  }
-
-  scrollToActive(el) {
-    if (el && $(el).length) {
-      this._curriculumList.foundation('mutexScrollLock');
-      this._curriculumList.foundation('scrollToLoc', el);
-    }
-    else {
-      this.updateUrl(null);
-    }
-  }
-
-  reflow() {
-    this._curriculumList.foundation('reflow');
-  }
-
-  buildStateFromProps(props) {
-    let active;
-
-    if (props.active) {
-      active = props.active;
-
-      if (props.expanded) {
-        this.scrollImmediately = 'expanded';
-      } else {
-        this.scrollImmediately = 'item';
-      }
-    } else {
-      active = props.results.length ? [props.results[0].id] : null;
-    }
-
-    return {
-      curriculums: props.results,
-      curriculumsIndex: this.buildIndex(props.results),
-      filterbar: props.filterbar,
-      active: active
-    };
-  }
-
-  buildIndex(curriculums, zip = {}) {
-    _.forEach(curriculums, curriculum => {
-      zip[curriculum.id] = curriculum;
-
-      if (curriculum.children.length) {
-        this.buildIndex(curriculum.children, zip);
-      }
-    });
-
-    return zip;
-  }
-
-  createQuery(state) {
-    return {
-      format: 'json',
-      ...state.filterbar
-    };
-  }
-
-  fetch(state) {
-    const query = this.createQuery(state);
-    const url = Routes.lcms_engine_explore_curriculum_index_path(query);
-    return $.getJSON(url);
-  }
-
-  fetchOne(id) {
-    const url = Routes.lcms_engine_explore_curriculum_path(id);
-    return $.getJSON(url);
-  }
-
-  getActive(parentage, cur) {
-    return cur.children.length > 0 ?
-      [...parentage, cur.children[0].id] :
-      [...parentage];
-  }
-
-  setActive(parentage, cur, el) {
-    this.setState({
-      ...this.state,
-      active: this.getActive(parentage, cur)
-    }, this.scrollToActive.bind(this, el));
-  }
-
-  handleClickExpand(parentage, e) {
-    if (e.target.nodeName === 'A') return;
-    e.preventDefault();
-    const currentTarget = `#${e.currentTarget.id}`;
-    if (parentage[parentage.length-1] === this.state.active[parentage.length-1]) {
-      this.setState({
-        ...this.state,
-        active: parentage
-      }, this.scrollToActive.bind(this, currentTarget));
-    } else {
-      this.handleClickViewDetails(parentage, e);
-    }
-  }
-
-  handleClickViewDetails(parentage, e) {
-    if ((e.target.nodeName === 'A') || (e.target.nodeName === 'I'))  return;
-    e.preventDefault();
-    const currentTarget = `#${e.currentTarget.id}`;
-    const id = _.last(parentage);
-    const cur = this.state.curriculumsIndex[id];
-    const hasCached = cur &&
-      (cur.requested ||
-        (cur.children.length &&
-          this.state.curriculumsIndex[cur.children[0].id]));
-
-    if (hasCached) {
-      this.setActive(parentage, cur, currentTarget);
-    } else {
-      this.fetchOne(id).then(response => {
-        response.requested = true;
-        const newIndex = { ...this.state.curriculumsIndex };
-        this.buildIndex([response], newIndex);
-        this.setState({
-          ...this.state,
-          curriculumsIndex: newIndex,
-          active: this.getActive(parentage, response)
-        }, this.scrollToActive.bind(this, currentTarget));
-      });
-    }
-  }
-
-  handleFilterbarUpdate(filterbar) {
-    const newFilterbar = _.omit(filterbar, 'search_term');
-    const oldFilterbar = _.omit(this.state.filterbar, 'search_term');
-    const onlyChangedSearchTerm = $.param(newFilterbar) === $.param(oldFilterbar);
-
-    const newState = _.assign({}, this.state, { filterbar: filterbar });
-
-    if (onlyChangedSearchTerm) {
-      this.setState(newState);
-    } else {
-      this.fetch(newState).then(response => {
-        this.setState(this.buildStateFromProps(response),
-          this.reflow.bind(this));
-      });
-    }
-  }
-
-  render() {
-    const curriculums = this.state.curriculums.map(
-      c => <ExploreCurriculumItem
-        key={c.id}
-        id={c.id}
-        index={this.state.curriculumsIndex}
-        onClickExpand={this.handleClickExpand.bind(this)}
-        onClickViewDetails={this.handleClickViewDetails.bind(this)}
-        parentage={[c.id]}
-        active={this.state.active} />
-    );
-
-    return (
-      <div>
-        <div className="u-bg--base-gradient">
-          <div className="o-page">
-            <div className="o-page__module">
-              <div className="o-filterbar-title">
-                <h2>Explore Curriculum</h2>
-                <div className="o-filterbar-title__subheader">
-                  Explore ELA and Math lessons for the grades below. Review, adapt, download, and share.
-                </div>
-              </div>
-              <FilterbarResponsive
-                onUpdate={this.handleFilterbarUpdate.bind(this)}
-                searchLabel='What do you want to teach?'
-                withSearch={true}
-                withDropdown={true}
-                {...this.state.filterbar} />
-            </div>
-          </div>
-        </div>
-        <div className="o-page o-page--margin-bottom">
-          <div className="o-page__module">
-            <ExploreCurriculumHeader totalItems={this.state.curriculums.length} />
-            {curriculums}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}