Feat: update old failing packages

- Remove dependency to grommet-udacity - Refactor components to use flow and stateless functions - update failing tests and test suite - Fix eslint issue with component / container imports
vhmartinezm · Feb 6, 2017 · 148b765 · 148b765
1 parent c11bc04
commit 148b765
Show file tree

Hide file tree

Showing 19 changed files with 500 additions and 541 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -16,7 +16,7 @@ suppress_comment=.*\\$FlowFixMe
 suppress_comment=.*\\$FlowInvalidInputTest
 module.name_mapper='\(react-redux\)' -> '<PROJECT_ROOT>/config/flow-typed/GeneralStub.js'
 module.name_mapper='\(redux\)' -> '<PROJECT_ROOT>/config/flow-typed/GeneralStub.js'
-module.name_mapper='.*\(.scss\|.png\)' -> '<PROJECT_ROOT>/config/flow-typed/GeneralStub.js'
+module.name_mapper='.*\(.scss\|.png\|.md\)' -> '<PROJECT_ROOT>/config/flow-typed/GeneralStub.js'
 module.name_mapper='^containers\/\(.*\)$' -> '<PROJECT_ROOT>/app/src/containers/\1'
 module.name_mapper='^containers$' -> '<PROJECT_ROOT>/app/src/containers'
 module.name_mapper='^components\/\(.*\)$' -> '<PROJECT_ROOT>/app/src/components/\1'

diff --git a/app/src/components/About/index.js b/app/src/components/About/index.js
@@ -1,3 +1,4 @@
+// @flow
 import React, { PropTypes } from 'react';
 import Box from 'grommet/components/Box';
 import Paragraph from 'grommet/components/Paragraph';
@@ -11,52 +12,49 @@ import Anchor from 'grommet/components/Anchor';
 import { Divider } from 'components';
 import readme from './_readme.md';
 
-const About = ({
-  links,
-}) => (
-  <Box align="center">
-    <Article align="center" className="panel" pad="large">
-      <Section align="center" justify="center">
-        <Heading>
-          Scalable React Boilerplate
-        </Heading>
-        <Divider />
-      </Section>
-      <Section align="center" justify="center">
-        <Paragraph>
-          This project was created to give the Udacity Alumni development team an
-          incredibly optimized and easy to use React starter project.  Included
-          below is the documentation for the project.
-        </Paragraph>
-        <Heading tag="h4" align="center">
-          Since making this boilerplate, it has been used in dozens of projects.
-        </Heading>
-        <Box align="center" pad="medium">
-          <List>
-            {links.map((link, i) =>
-              <ListItem key={i}>
-                <Anchor href={link.url}>
-                  {link.name}
-                </Anchor>
-              </ListItem>,
-            )}
-          </List>
-        </Box>
-      </Section>
-      {typeof readme === 'string' &&
-        <Markdown content={readme} />
-      }
-    </Article>
-  </Box>
-);
-
-About.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      url: PropTypes.string.isRequired,
-    }),
-  ),
+type AboutLink = {
+  name: string,
+  url: string
 };
 
-export default About;
+export default function About(props: {
+  links: AboutLink[],
+}) {
+  const { links } = props;
+  return (
+    <Box align="center">
+      <Article align="center" className="panel" pad="large">
+        <Section align="center" justify="center">
+          <Heading>
+            Scalable React Boilerplate
+          </Heading>
+          <Divider />
+        </Section>
+        <Section align="center" justify="center">
+          <Paragraph>
+            This project was created to give the Udacity Alumni development team an
+            incredibly optimized and easy to use React starter project.  Included
+            below is the documentation for the project.
+          </Paragraph>
+          <Heading tag="h4" align="center">
+            Since making this boilerplate, it has been used in dozens of projects.
+          </Heading>
+          <Box align="center" pad="medium">
+            <List>
+              {links && links.map((link, i) =>
+                <ListItem key={i}>
+                  <Anchor href={link.url}>
+                    {link.name}
+                  </Anchor>
+                </ListItem>,
+              )}
+            </List>
+          </Box>
+        </Section>
+        {typeof readme === 'string' &&
+          <Markdown content={readme} />
+        }
+      </Article>
+    </Box>
+  );
+};
diff --git a/app/src/components/About/tests/__snapshots__/index.test.js.snap b/app/src/components/About/tests/__snapshots__/index.test.js.snap
@@ -24,7 +24,7 @@ exports[`<About /> should render with default props 1`] = `
         tag="h1">
         Scalable React Boilerplate
       </Heading>
-      <undefined />
+      <Divider />
     </Section>
     <Section
       align="center"
@@ -65,6 +65,7 @@ exports[`<About /> should render with default props 1`] = `
             separator="bottom">
             <Anchor
               href="https://github.com/udacityalumni/alumni-client"
+              method="push"
               tag="a">
               Udacity Alumni Web App
             </Anchor>
@@ -82,6 +83,7 @@ exports[`<About /> should render with default props 1`] = `
             separator="bottom">
             <Anchor
               href="https://github.com/RyanCCollins/react-weekly"
+              method="push"
               tag="a">
               React Weekly
             </Anchor>

diff --git a/app/src/components/AppFooter/tests/__snapshots__/index.test.js.snap b/app/src/components/AppFooter/tests/__snapshots__/index.test.js.snap
@@ -1,5 +1,6 @@
 exports[`<AppFooter /> should render with default props 1`] = `
 <Footer
+  align="center"
   colorIndex="light-2"
   direction="row"
   pad="large"
@@ -35,6 +36,7 @@ exports[`<AppFooter /> should render with default props 1`] = `
       <br />
       <Anchor
         href="https://github.com/RyanCCollins/ryancollinsio"
+        method="push"
         tag="a">
         source code.
       </Anchor>

diff --git a/app/src/components/Avatar/index.js b/app/src/components/Avatar/index.js
@@ -1,25 +1,21 @@
+// @flow
 import React, { PropTypes } from 'react';
 import cssModules from 'react-css-modules';
 import styles from './index.module.scss';
-
 const defaultAvatarUrl = 'https://github.com/RyanCCollins/cdn/blob/master/alumni-webapp/no-user.png?raw=true';
 
-const Avatar = ({
-  src,
-}) => (
-  <img
-    alt="Avatar"
-    src={src || defaultAvatarUrl}
-    className={styles.avatar}
-  />
-);
-
-Avatar.propTypes = {
-  src: PropTypes.string.isRequired,
-};
-
-Avatar.defaultProps = {
-  src: defaultAvatarUrl,
+function Avatar(props: {
+  src?: ?string,
+}) {
+  const { src } = props;
+  const imageSrc = src || defaultAvatarUrl;
+  return (
+    <img
+      alt="Avatar"
+      src={imageSrc}
+      className={styles.avatar}
+    />
+  )
 };
 
 export default cssModules(Avatar, styles);
diff --git a/app/src/components/Contributor/index.js b/app/src/components/Contributor/index.js
@@ -1,3 +1,4 @@
+/* @flow */
 import React, { PropTypes } from 'react';
 import { Avatar } from 'components';
 import cssModules from 'react-css-modules';
@@ -8,38 +9,38 @@ import Anchor from 'grommet/components/Anchor';
 import SocialGithubIcon from 'grommet/components/icons/base/SocialGithub';
 import styles from './index.module.scss';
 
-const Contributor = ({
-  person,
-}) => (
-  <Box
-    className={styles.contributor}
-    align="center"
-    justify="center"
-    size="large"
-  >
-    <Avatar src={person.avatar} />
-    <Heading tag="h3" align="center">
-      {person.name}
-    </Heading>
-    <Paragraph>
-      {`${person.bio.slice(0, 300)}`}
-    </Paragraph>
-    <Anchor
-      icon={<SocialGithubIcon />}
-      href={`https://github.com/${person.github}`}
-      primary
+function Contributor(props: {
+  person: {
+    github: string,
+    avatar: string,
+    name: string,
+    bio: string,
+  },
+}) {
+  const { person } = props;
+  return (
+    <Box
+      className={styles.contributor}
+      align="center"
+      justify="center"
+      size="large"
     >
-      {person.github}
-    </Anchor>
-  </Box>
-);
-
-Contributor.propTypes = {
-  person: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    avatar: PropTypes.string.isRequired,
-    bio: PropTypes.string.isRequired,
-  }),
+      <Avatar src={person.avatar} />
+      <Heading tag="h3" align="center">
+        {person.name}
+      </Heading>
+      <Paragraph>
+        {`${person.bio.slice(0, 300)}`}
+      </Paragraph>
+      <Anchor
+        icon={<SocialGithubIcon />}
+        href={`https://github.com/${person.github}`}
+        primary
+      >
+        {person.github}
+      </Anchor>
+    </Box>
+  )
 };
 
 export default cssModules(Contributor, styles);
diff --git a/app/src/components/Contributor/tests/__snapshots__/index.test.js.snap b/app/src/components/Contributor/tests/__snapshots__/index.test.js.snap
@@ -9,7 +9,7 @@ exports[`<Contributor /> should render with default props 1`] = `
   responsive={true}
   size="large"
   tag="div">
-  <undefined
+  <Avatar
     src="https://avatars.githubusercontent.com/u/13810084?v=3" />
   <Heading
     align="center"
@@ -23,9 +23,9 @@ exports[`<Contributor /> should render with default props 1`] = `
     href="https://github.com/ryanccollins"
     icon={
       <SocialGithub
-        a11yTitleId="social-github-title"
         responsive={true} />
     }
+    method="push"
     primary={true}
     tag="a">
     ryanccollins

diff --git a/app/src/components/Divider/index.js b/app/src/components/Divider/index.js
@@ -6,5 +6,4 @@ const Divider = () => (
   <span className={styles.divider} />
 );
 
-
 export default cssModules(Divider, styles);
diff --git a/app/src/components/LoadingIndicator/index.js b/app/src/components/LoadingIndicator/index.js
@@ -8,7 +8,7 @@ import styles from './index.module.scss';
 
 function LoadingIndicator(props: {
   isLoading: boolean,
-  message: string
+  message: ?string
 }) {
   const { message, isLoading } = props;
   const title = message || 'Loading';

diff --git a/app/src/components/Navbar/index.js b/app/src/components/Navbar/index.js
@@ -13,7 +13,7 @@ export default function Navbar(props: {
   const { pathname } = props;
   return (
     <div>
-      <Header justify="between">
+      <Header justify="between" colorIndex="neutral">
         <Title>
           {typeof window !== 'undefined' ?
             <StyledLogo src={LogoImage} alt="logo" />

diff --git a/app/src/components/Navbar/tests/__snapshots__/index.test.js.snap b/app/src/components/Navbar/tests/__snapshots__/index.test.js.snap
@@ -2,6 +2,7 @@ exports[`<Navbar /> should render with default props 1`] = `
 <div>
   <Header
     align="center"
+    colorIndex="neutral"
     direction="row"
     justify="between"
     pad={
@@ -13,7 +14,8 @@ exports[`<Navbar /> should render with default props 1`] = `
     }
     responsive={false}>
     <Title
-      responsive={true}>
+      responsive={true}
+      truncate={true}>
       <styled.img
         alt="logo"
         src={Object {}} />
@@ -26,12 +28,14 @@ exports[`<Navbar /> should render with default props 1`] = `
       <Anchor
         className="active"
         href="/"
+        method="push"
         tag="a">
         Home
       </Anchor>
       <Anchor
         className=""
         href="/about"
+        method="push"
         tag="a">
         About
       </Anchor>

diff --git a/app/src/components/WelcomeModal/tests/__snapshots__/index.test.js.snap b/app/src/components/WelcomeModal/tests/__snapshots__/index.test.js.snap
@@ -18,7 +18,7 @@ exports[`<WelcomeModal /> should render with default props 1`] = `
       tag="h1">
       What should we call you?
     </Heading>
-    <undefined />
+    <Divider />
     <Form
       compact={false}
       fill={false}
@@ -64,6 +64,7 @@ exports[`<WelcomeModal /> should render with default props 1`] = `
       responsive={false}>
       <Button
         label="Submit"
+        method="push"
         onClick={[Function]}
         primary={true}
         type="button" />

diff --git a/app/src/containers/LandingContainer/index.js b/app/src/containers/LandingContainer/index.js
@@ -10,14 +10,14 @@ import Footer from 'grommet/components/Footer';
 import Button from 'grommet/components/Button';
 import Heading from 'grommet/components/Heading';
 import Columns from 'grommet/components/Columns';
+import { Maybe } from 'functional-components';
+import { reduxForm } from 'redux-form';
 import {
   LoadingIndicator,
   Divider,
   WelcomeModal,
   Contributor,
 } from 'components';
-import { Maybe } from 'functional-components';
-import { reduxForm } from 'redux-form';
 import * as LandingActionCreators from './actions';
 import styles from './index.module.scss';
 

diff --git a/app/styles/styles.scss b/app/styles/styles.scss
@@ -1,5 +1,5 @@
 // Included if you are using grommet.  Otherwise, just erase this next line.
-@import 'grommet-udacity/scss/udacity/index';
+@import 'grommet/scss/grommet-core/index';
 
 // Add globally used utility styles here.
 // Or import scss libraries that are to be used without CSS modules.

diff --git a/devServer.js b/devServer.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
-var config = require('./webpack.config.babel.js');
+var config = require('./webpack.config.js');
 const path = require('path');
 
 const PORT = process.env.PORT || 1337;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,5 +6,4 @@ const Divider = () => (
		<span className={styles.divider} />
		);


		export default cssModules(Divider, styles);