Connect Certificate and LargeChevronLink to Redux

apps/src/templates/Certificate.jsx

@@ -1,13 +1,14 @@
 /* global dashboard */
 
 import React, { PropTypes, Component } from 'react';
+import { connect } from 'react-redux';
 import $ from 'jquery';
 import i18n from '@cdo/locale';
 import color from '../util/color';
 import queryString from 'query-string';
 import SocialShare from './SocialShare';
-import Responsive from '../responsive';
 import LargeChevronLink from './LargeChevronLink';
+import { ResponsiveSize } from '@cdo/apps/code-studio/responsiveRedux';
 
 const styles = {
   heading: {
@@ -46,7 +47,7 @@ const blankCertificates = {
   hero: require('@cdo/static/MC_Hour_Of_Code_Certificate_Hero.png'),
 };
 
-export default class Certificate extends Component {
+class Certificate extends Component {
   constructor() {
     super();
     this.state = {
@@ -57,9 +58,8 @@ export default class Certificate extends Component {
   static propTypes = {
     tutorial: PropTypes.string,
     certificateId: PropTypes.string,
-    isRtl: PropTypes.bool.isRequired,
-    responsive: PropTypes.instanceOf(Responsive).isRequired,
     randomDonorTwitter: PropTypes.string,
+    responsiveSize: PropTypes.oneOf(['lg', 'md', 'sm', 'xs']).isRequired,
   };
 
   personalizeCertificate(session) {
@@ -79,13 +79,13 @@ export default class Certificate extends Component {
   }
 
   render() {
-    const {responsive, isRtl, tutorial, certificateId, randomDonorTwitter} = this.props;
+    const {responsiveSize, tutorial, certificateId, randomDonorTwitter} = this.props;
     const certificate = certificateId || 'blank';
     const personalizedCertificate = `${dashboard.CODE_ORG_URL}/api/hour/certificate/${certificate}.jpg`;
     const blankCertificate = blankCertificates[tutorial] || blankCertificates.hourOfCode;
     const imgSrc = this.state.personalized ? personalizedCertificate : blankCertificate;
     const certificateLink = `https:${dashboard.CODE_ORG_URL}/certificates/${certificate}`;
-    const desktop = (responsive.isResponsiveCategoryActive('lg') || responsive.isResponsiveCategoryActive('md'));
+    const desktop = (responsiveSize === ResponsiveSize.lg) || (responsiveSize === ResponsiveSize.md);
     const headingStyle = desktop ? styles.heading : styles.mobileHeading;
     const certificateStyle = desktop ? styles.desktopHalf : styles.mobileFull;
 
@@ -118,7 +118,6 @@ export default class Certificate extends Component {
           <LargeChevronLink
             link={`/s/${tutorial}`}
             linkText={i18n.backToActivity()}
-            isRtl={isRtl}
           />
         )}
         <div style={certificateStyle}>
@@ -161,3 +160,7 @@ export default class Certificate extends Component {
     );
   }
 }
+
+export default connect(state => ({
+  responsiveSize: state.responsive.responsiveSize,
+}))(Certificate);

apps/src/templates/Congrats.jsx

@@ -88,8 +88,6 @@ export default class Congrats extends Component {
           <Certificate
             tutorial={tutorial}
             certificateId={certificateId}
-            isRtl={isRtl}
-            responsive={this.responsive}
             randomDonorTwitter={randomDonorTwitter}
           />
           {userType === "teacher" && isEnglish && (

apps/src/templates/LargeChevronLink.jsx

@@ -1,7 +1,7 @@
 import React, {Component, PropTypes} from 'react';
+import {connect} from 'react-redux';
 import FontAwesome from './FontAwesome';
 import color from "../util/color";
-import Radium from 'radium';
 
 const styles = {
   link: {
@@ -45,12 +45,12 @@ class LargeChevronLink extends Component {
   };
 
   render() {
-    const { link, linkText, isRtl }= this.props;
+    const { link, linkText, isRtl } = this.props;
     const localeStyle = isRtl ? styles.right : styles.left;
     const icon = isRtl ? "chevron-right" : "chevron-left";
 
     return (
-      <div style={[styles.linkBox, localeStyle]}>
+      <div style={{...styles.linkBox, ...localeStyle}}>
         <a href={link} style={styles.link}>
           {!isRtl && (
             <FontAwesome icon={icon} style={styles.chevron}/>
@@ -69,4 +69,6 @@ class LargeChevronLink extends Component {
   }
 }
 
-export default Radium(LargeChevronLink);
+export default connect(state => ({
+  isRtl: state.isRtl,
+}))(LargeChevronLink);

apps/test/unit/templates/CertificateTest.js

@@ -2,42 +2,36 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {expect} from '../../util/configuredChai';
 import Certificate from '@cdo/apps/templates/Certificate';
-import Responsive from '@cdo/apps/responsive';
+import {combineReducers, createStore} from 'redux';
+import responsive from '@cdo/apps/code-studio/responsiveRedux';
 
 describe('Certificate', () => {
+  const store = createStore(combineReducers({responsive}));
+
   it('renders a Minecraft certificate for new Minecraft tutorials', () => {
-    const responsive = new Responsive();
     const wrapper = shallow(
       <Certificate
         tutorial="minecraft"
-        isRtl={false}
-        responsive={responsive}
-      />
-    );
+      />, {context: {store}},
+    ).dive();
     expect(wrapper.find('img').html().includes('MC_Hour_Of_Code_Certificate'));
   });
 
   it('renders a Minecraft certificate for older Minecraft tutorials', () => {
-    const responsive = new Responsive();
     const wrapper = shallow(
       <Certificate
         type="minecraft"
-        isRtl={false}
-        responsive={responsive}
-      />
-    );
+      />, {context: {store}},
+    ).dive();
     expect(wrapper.find('img').html().includes('MC_Hour_Of_Code_Certificate'));
   });
 
   it('renders a default certificate for all other tutorials', () => {
-    const responsive = new Responsive();
     const wrapper = shallow(
       <Certificate
         tutorial="frozen"
-        isRtl={false}
-        responsive={responsive}
-      />
-    );
+      />, {context: {store}},
+    ).dive();
     expect(wrapper.find('img').html().includes('hour_of_code_certificate'));
   });
 });

apps/test/unit/templates/CongratsTest.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {shallow} from 'enzyme';
 import {expect} from '../../util/configuredChai';
 import Congrats from '@cdo/apps/templates/Congrats';
+import Certificate from '@cdo/apps/templates/Certificate';
 
 describe('Congrats', () => {
   it('renders a Certificate component', () => {
@@ -13,7 +14,7 @@ describe('Congrats', () => {
         isEnglish={true}
       />
     );
-    expect(wrapper.find('Certificate').exists()).to.be.true;
+    expect(wrapper.find(Certificate).exists()).to.be.true;
   });
 
   it('renders a StudentsBeyondHoc component, regardless of user type', () => {