Feat rc update deps

.env.example

@@ -0,0 +1,3 @@
+BASE_URL='http://localhost:1337/'
+API_URL='http://localhost:3000/'
+DEBUG=false

.eslintignore

@@ -1,3 +1,5 @@
 app/build/
 app/dist/
 webpack.config.*.js
+webpack.config.js
+config/

.eslintrc.js

@@ -11,13 +11,14 @@ module.exports = {
   "settings": {
     "import/resolver": {
       "webpack": {
-        "config": "webpack.config.babel.js"
+        "config": "webpack.config.js"
       }
     }
   },
   "rules": {
     "func-names": 0,
     "eol-last": 0,
+    "react/no-unused-prop-types": 0,
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react/jsx-no-bind": [ 2, {
       "ignoreRefs": false,
@@ -30,6 +31,7 @@ module.exports = {
     }]
   },
   "plugins": [
+    "import",
     "react",
     "graphql",
     "jsx-a11y"

.flowconfig

@@ -1,5 +1,6 @@
 [ignore]
 .*/node_modules/.*
+config/
 
 [include]
 ./app/src/
@@ -15,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'

.gitignore

@@ -40,3 +40,9 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+.env
+.vscode
+/server/public/**/*.js
+/server/public/**/*.css
+/server/public/**/*.map
+/server/public/**/*.json

app/src/apolloClient.js

@@ -2,9 +2,9 @@ import ApolloClient, {
   createNetworkInterface,
   addTypeName,
 } from 'apollo-client';
-import { BASE_URL } from 'config'; // eslint-disable-line
 
-const url = `${BASE_URL}graphql`;
+const baseUrl = process.env.API_URL || 'http://localhost:3000';
+const url = `${baseUrl}graphql`;
 
 const client = new ApolloClient({
   networkInterface: createNetworkInterface({

app/src/components/About/index.js

@@ -1,62 +1,59 @@
-import React, { PropTypes } from 'react';
-import Box from 'grommet-udacity/components/Box';
-import Paragraph from 'grommet-udacity/components/Paragraph';
-import Article from 'grommet-udacity/components/Article';
-import Heading from 'grommet-udacity/components/Heading';
-import Markdown from 'grommet-udacity/components/Markdown';
-import Section from 'grommet-udacity/components/Section';
-import List from 'grommet-udacity/components/List';
-import ListItem from 'grommet-udacity/components/ListItem';
-import Anchor from 'grommet-udacity/components/Anchor';
+// @flow
+import React from 'react';
+import Box from 'grommet/components/Box';
+import Paragraph from 'grommet/components/Paragraph';
+import Article from 'grommet/components/Article';
+import Heading from 'grommet/components/Heading';
+import Markdown from 'grommet/components/Markdown';
+import Section from 'grommet/components/Section';
+import List from 'grommet/components/List';
+import ListItem from 'grommet/components/ListItem';
+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[],
+}) {
+  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>
+              {props.links && props.links.map(link =>
+                <ListItem key={link.url}>
+                  <Anchor href={link.url}>
+                    {link.name}
+                  </Anchor>
+                </ListItem>,
+              )}
+            </List>
+          </Box>
+        </Section>
+        {typeof readme === 'string' &&
+          <Markdown content={readme} />
+        }
+      </Article>
+    </Box>
+  );
+}

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>

app/src/components/AppFooter/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import cssModules from 'react-css-modules';
-import Footer from 'grommet-udacity/components/Footer';
-import Box from 'grommet-udacity/components/Box';
-import Heading from 'grommet-udacity/components/Heading';
-import SocialShare from 'grommet-udacity/components/SocialShare';
-import Anchor from 'grommet-udacity/components/Anchor';
+import Footer from 'grommet/components/Footer';
+import Box from 'grommet/components/Box';
+import Heading from 'grommet/components/Heading';
+import SocialShare from 'grommet/components/SocialShare';
+import Anchor from 'grommet/components/Anchor';
 import styles from './index.module.scss';
 
 const AppFooter = () => (

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>

app/src/components/Avatar/index.js

@@ -1,25 +1,22 @@
-import React, { PropTypes } from 'react';
+// @flow
+import React 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);

app/src/components/Contributor/index.js

@@ -1,45 +1,46 @@
-import React, { PropTypes } from 'react';
+/* @flow */
+import React from 'react';
 import { Avatar } from 'components';
 import cssModules from 'react-css-modules';
-import Heading from 'grommet-udacity/components/Heading';
-import Box from 'grommet-udacity/components/Box';
-import Paragraph from 'grommet-udacity/components/Paragraph';
-import Anchor from 'grommet-udacity/components/Anchor';
-import SocialGithubIcon from 'grommet-udacity/components/icons/base/SocialGithub';
+import Heading from 'grommet/components/Heading';
+import Box from 'grommet/components/Box';
+import Paragraph from 'grommet/components/Paragraph';
+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);

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

app/src/components/Divider/index.js

@@ -6,5 +6,4 @@ const Divider = () => (
   <span className={styles.divider} />
 );
 
-
 export default cssModules(Divider, styles);