Code cleanup/refactor

app/components/Avatar.js

@@ -1,12 +1,8 @@
 import React from 'react'
 
-export default (props) => {
-  let size = props.size || 200
-  return (
-    <img src={props.url} className="Avatar" style={{
-      width: size,
-      height: size,
-      borderRadius: size / 2
-    }}/>
-  )
-}
+export default ({ url, size = 200 }) => (
+  <img src={url} className="Avatar" style={{
+    width: size,
+    height: size,
+  }}/>
+)

app/components/Button.js

@@ -1,14 +1,10 @@
 import React from 'react'
 
-export default (props) => {
-  return (
-    <a
-      href={props.href}
-      target="_blank"
-      className={'Button' + (props.className ? ' ' + props.className : '')}
-      disabled={props.disabled}
-    >
-      {props.children}
-    </a>
-  )
-}
+export default ({ className = '', ...otherProps }) => (
+  <a
+    target="_blank"
+    rel="noopener noreferrer"
+    className={`Button ${className}`}
+    {...otherProps}
+  />
+)

app/components/Footer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router';
+import {Link} from 'react-router-dom';
 import constants from 'helpers/constants';
 import Button from 'components/Button';
 import Icon from 'components/Icon';

app/components/Header.js

@@ -1,7 +1,6 @@
 import React, {Component, useState} from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
-import {Link} from 'react-router';
+import {Route, NavLink} from 'react-router-dom';
 import moment from 'moment';
 import constants from 'helpers/constants';
 import DateUtils from 'helpers/DateUtils';
@@ -44,9 +43,9 @@ const HomeHeader = () => {
           </p>
           <div className="Home__Header__Buttons">
             {isConferenceLive ? (
-              <Link to="/stream" className="Button large">
+              <NavLink to="/stream" className="Button large">
                 Watch Live Stream
-              </Link>
+              </NavLink>
             ) : false ? (
               <Countdown
                 date={new Date(
@@ -85,62 +84,33 @@ const HomeHeader = () => {
   );
 };
 
-const Navigation = ({onMenuClick = () => {}}) => {
+const navItems = [
+  ['Speakers', '/speakers'],
+  ['Schedule', '/schedule'],
+  ['Venue', '/venue'],
+  ['Sponsors', '/sponsors'],
+  ['Conduct', '/conduct'],
+  ['About', '/about'],
+];
+
+const Navigation = ({onMenuClick}) => {
   return (
     <div className="Header__Nav">
       <section className="Header__Nav__Menu">
-        <Link to="/" id="logo" onClick={() => onMenuClick(false)}>
+        <NavLink to="/" id="logo" onClick={() => onMenuClick(false)}>
           <img src="assets/dist/img/ReactLogo.svg" width="44" height="44" />
-        </Link>
+        </NavLink>
         <ul>
-          <li>
-            <Link
-              activeClassName="active"
-              to="/speakers"
-              onClick={() => onMenuClick(false)}>
-              Speakers
-            </Link>
-          </li>
-          <li>
-            <Link
-              activeClassName="active"
-              to="/schedule"
-              onClick={() => onMenuClick(false)}>
-              Schedule
-            </Link>
-          </li>
-          <li>
-            <Link
-              activeClassName="active"
-              to="/venue"
-              onClick={() => onMenuClick(false)}>
-              Venue
-            </Link>
-          </li>
-          <li>
-            <Link
-              activeClassName="active"
-              to="/sponsors"
-              onClick={() => onMenuClick(false)}>
-              Sponsors
-            </Link>
-          </li>
-          <li>
-            <Link
-              activeClassName="active"
-              to="/conduct"
-              onClick={() => onMenuClick(false)}>
-              Conduct
-            </Link>
-          </li>
-          <li>
-            <Link
-              activeClassName="active"
-              to="/about"
-              onClick={() => onMenuClick(false)}>
-              About
-            </Link>
-          </li>
+          {navItems.map(([children, url]) =>
+            <li key={url}>
+              <NavLink
+                activeClassName="active"
+                to={url}
+                onClick={() => onMenuClick(false)}>
+                {children}
+              </NavLink>
+            </li>
+          )}
         </ul>
       </section>
       <section className="Header__Nav__Social">
@@ -159,39 +129,26 @@ const Navigation = ({onMenuClick = () => {}}) => {
   );
 };
 
-export default class Header extends Component {
-  constructor(props) {
-    super(props);
+const Header = ({ isHomeScreen }) => {
+  const [isMenuOpen, setMenuState] = useState(false);
 
-    this.state = {
-      isMenuOpen: false,
-    };
-  }
+  return (
+    <header className={cx('Header', {
+      Header__Home: isHomeScreen,
+      'Header--menuOpen': isMenuOpen,
+    })}>
+      <Navigation onMenuClick={() => setMenuState(s => !s)} />
+      {isHomeScreen && <HomeHeader />}
+    </header>
+  )
+}
 
-  render() {
-    const isHomeScreen = this.context.router.isActive('/', true);
-    const {isMenuOpen} = this.state;
+const HeaderRoute = () => (
+  <Route
+    path="/"
+    render={({ match }) =><Header isHomeScreen={match.isExact}/>}
+  />
+);
 
-    return (
-      <header
-        className={cx('Header', {
-          Header__Home: isHomeScreen,
-          'Header--menuOpen': isMenuOpen,
-        })}>
-        <Navigation
-          onMenuClick={isOpen => {
-            if (typeof isOpen === 'undefined') {
-              isOpen = !isMenuOpen;
-            }
-            this.setState({isMenuOpen: isOpen});
-          }}
-        />
-        {isHomeScreen && <HomeHeader />}
-      </header>
-    );
-  }
-}
 
-Header.contextTypes = {
-  router: PropTypes.object,
-};
+export default HeaderRoute;

app/components/Icon.js

@@ -1,9 +1,7 @@
 import React from 'react'
 
-export default (props) => {
-  return (
-    <a href={props.href} target="_blank" className={`Icon Icon--${props.type}`}>
-      <i className={`fa fa-${props.type}`}/>
-    </a>
-  )
-}
+export default ({ href, type }) => (
+  <a href={href} target="_blank" rel="noopener noreferrer" className={`Icon Icon--${type}`}>
+    <i className={`fa fa-${type}`}/>
+  </a>
+);

app/components/Person.js

@@ -2,21 +2,14 @@ import React from 'react'
 import Avatar from 'components/Avatar'
 import Icon from 'components/Icon'
 
-export default (props) => {
-  return (
-    <div className="Person">
-      <Avatar url={props.avatar} size={200}/>
-      <b>{props.name}</b><br/>
-      <em>{props.title}</em>
-      <div className="Person__Social">
-      {props.twitter && (
-        <Icon href={`https://twitter.com/${props.twitter}`} type="twitter"/>
-      )}
-      {props.github && (
-        <Icon href={`https://github.com/${props.github}`} type="github"/>
-      )}
-      </div>
+export default ({ avatar, name, title, twitter, github }) => (
+  <div className="Person">
+    <Avatar url={avatar} size={200}/>
+    <b>{name}</b><br/>
+    <em>{title}</em>
+    <div className="Person__Social">
+      {twitter && <Icon href={`https://twitter.com/${twitter}`} type="twitter"/>}
+      {github && <Icon href={`https://github.com/${github}`} type="github"/>}
     </div>
-  )
-}
-
+  </div>
+);

app/screens/Home/FeaturedSpeakers.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+import shuffle from 'helpers/shuffle';
+import Person from 'components/Person';
+import speakers from '../../../api/speakers';
+
+const featuredSpeakers = Object.values(speakers).filter(({ featured }) => featured);
+
+const FeaturedSpeakers = () => 
+  featuredSpeakers.length > 0 && (
+    <section>
+      <h2>Featured Speakers</h2>
+      <div className="align-center">
+        {shuffle(featuredSpeakers)
+          .map(speaker => <Person {...speaker} key={speaker.avatar} />)
+        }
+      </div>
+      <Link to="/speakers" className="Link">
+        See All the Speakers &raquo;
+      </Link>
+    </section>
+  );
+
+export default FeaturedSpeakers;

app/screens/Home/TicketCard.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import cx from 'classnames';
+import constants from 'helpers/constants';
+import Button from 'components/Button';
+
+const TicketCard = ({ name, description, price, soldOut }) => {
+  return (
+    <div
+      className={cx('Home__TicketCard', {
+        'Home__TicketCard--disabled': soldOut,
+      })}>
+      <div className="Home__TicketCard__Details">
+        <h3>{name}</h3>
+        <p>{description}</p>
+      </div>
+      <div className="Home__TicketCard__Order">
+        <h2>{isNaN(price) ? '' : '$' + price}</h2>
+        <Button
+          className="primary"
+          href={constants.Links.TICKET_SALES}
+          disabled={soldOut}>
+          {soldOut ? 'Sold Out' : 'Buy Now'}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TicketCard;

app/screens/Home/Tickets.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import TicketCard from './TicketCard';
+import tickets from '../../../api/tickets';
+
+const Tickets = () => (
+  <section>
+    <h2>Tickets</h2>
+    {tickets.map((ticket, i) => <TicketCard key={i} {...ticket} />)}
+  </section>
+);
+
+export default Tickets;

app/screens/Home/UpcomingDate.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import cx from 'classnames';
+import moment from 'moment';
+
+const UpcomingDate = ({ timestamp, description }) => {
+  const date = moment.utc(timestamp);
+  const isAfter = moment.utc().isAfter(date);
+  const iconSource = `assets/dist/img/icons/calendar${
+    isAfter ? '-complete' : ''
+  }.svg`;
+
+  return (
+    <div
+      className={cx({
+        Home__UpcomingDate: true,
+        'Home__UpcomingDate--disabled': isAfter,
+      })}>
+      <img src={iconSource} alt="calendar" />
+      <div>
+        <time>{date.format('MMMM D, YYYY')}</time>
+        <small>{description}</small>
+      </div>
+    </div>
+  );
+};
+
+export default UpcomingDate;

app/screens/Home/UpcomingDates.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import moment from 'moment';
+import UpcomingDate from './UpcomingDate';
+import constants from 'helpers/constants';
+
+const {Dates} = constants;
+
+const dates = [
+  [Dates.CFP_OPEN, 'Call for Proposals opens.'],
+  [Dates.CFP_CLOSE, 'Call for Proposals closes.'],
+  [Dates.TICKET_RELEASE, 'Early Bird Tickets (round one) go on sale.'],
+  [moment.utc(Dates.TICKET_RELEASE).add(7, 'days'), 'Early Bird Tickets (round two) go on sale.'],
+  [moment.utc(Dates.TICKET_RELEASE).add(14, 'days'), 'Standard tickets go on sale.'],
+];
+
+const UpcomingDates = () => (
+  <section>
+  <h2>Upcoming Dates</h2>
+  {dates.map(
+    ([timestamp, description]) => <UpcomingDate timestamp={timestamp} description={description}/>
+  )}
+  </section>
+);
+
+export default UpcomingDates;

app/screens/Home/What.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import About from 'components/About';
+
+const What = () => (
+  <section className="Home__About">
+    <h2>What is React Rally?</h2>
+    <About />
+    <Link to="/about" className="Link">
+      More about React Rally &raquo;
+    </Link>
+  </section>
+);
+
+export default What;