Feat: update eslint versions to fix issues with eslint import resolver

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
   "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,

app/src/components/About/index.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { PropTypes } from 'react';
+import React from 'react';
 import Box from 'grommet/components/Box';
 import Paragraph from 'grommet/components/Paragraph';
 import Article from 'grommet/components/Article';
@@ -20,7 +20,6 @@ type AboutLink = {
 export default function About(props: {
   links: AboutLink[],
 }) {
-  const { links } = props;
   return (
     <Box align="center">
       <Article align="center" className="panel" pad="large">
@@ -41,8 +40,8 @@ export default function About(props: {
           </Heading>
           <Box align="center" pad="medium">
             <List>
-              {links && links.map((link, i) =>
-                <ListItem key={i}>
+              {props.links && props.links.map(link =>
+                <ListItem key={link.url}>
                   <Anchor href={link.url}>
                     {link.name}
                   </Anchor>
@@ -57,4 +56,4 @@ export default function About(props: {
       </Article>
     </Box>
   );
-};
+}

app/src/components/Avatar/index.js

@@ -1,11 +1,12 @@
 // @flow
-import React, { PropTypes } from 'react';
+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';
 
 function Avatar(props: {
-  src?: ?string,
+  src: ?string,
 }) {
   const { src } = props;
   const imageSrc = src || defaultAvatarUrl;
@@ -15,7 +16,7 @@ function Avatar(props: {
       src={imageSrc}
       className={styles.avatar}
     />
-  )
-};
+  );
+}
 
 export default cssModules(Avatar, styles);

app/src/components/Contributor/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-import React, { PropTypes } from 'react';
+import React from 'react';
 import { Avatar } from 'components';
 import cssModules from 'react-css-modules';
 import Heading from 'grommet/components/Heading';
@@ -30,7 +30,7 @@ function Contributor(props: {
         {person.name}
       </Heading>
       <Paragraph>
-        {`${person.bio.slice(0, 300)}`}
+        {person.bio.slice(0, 300)}
       </Paragraph>
       <Anchor
         icon={<SocialGithubIcon />}
@@ -40,7 +40,7 @@ function Contributor(props: {
         {person.github}
       </Anchor>
     </Box>
-  )
-};
+  );
+}
 
 export default cssModules(Contributor, styles);

app/src/components/WelcomeModal/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+// @flow
+import React from 'react';
 import Layer from 'grommet/components/Layer';
 import Form from 'grommet/components/Form';
 import FormFields from 'grommet/components/FormFields';
@@ -10,62 +11,56 @@ import Footer from 'grommet/components/Footer';
 import { Divider } from 'components';
 import error from './utils/error';
 
-const WelcomeModal = ({
-  onClose,
-  isVisible,
-  nameInput,
-  onSubmit,
-}) => (
-  <Layer
-    align="center"
-    closer
-    hidden={!isVisible}
-    onClose={onClose}
-  >
-    <Box align="center" justify="center" pad="large">
-      <Heading align="center">
-        What should we call you?
-      </Heading>
-      <Divider />
-      <Form>
-        <FormFields>
-          <FormField
-            help="What should we call you?"
-            error={error(nameInput)}
-            label="Enter your name"
-            htmlFor="nameInput"
-          >
-            <input
-              {...nameInput}
-              required
-              autoFocus
-              placeholder="Ryan Collins"
-              id="nameInput"
-              autoComplete="on"
-              name="name"
-              type="text"
-              aria-invalid={nameInput.error}
-              aria-required
-              className="input"
-            />
-          </FormField>
-        </FormFields>
-      </Form>
-      <Footer align="center" justify="center" pad="large">
-        <Button primary label="Submit" onClick={onSubmit} />
-      </Footer>
-    </Box>
-  </Layer>
-);
-
-WelcomeModal.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  nameInput: PropTypes.shape({
-    error: PropTypes.string,
-    value: PropTypes.string,
-  }),
-  isVisible: PropTypes.bool.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-};
-
-export default WelcomeModal;
+export default function WelcomeModal(props: {
+  onClose: Function,
+  nameInput: {
+    error: ?string,
+    value: ?string,
+  },
+  isVisible: boolean,
+  onSubmit: Function,
+}) {
+  const { onClose, nameInput, isVisible, onSubmit } = props;
+  return (
+    <Layer
+      align="center"
+      closer
+      hidden={!isVisible}
+      onClose={onClose}
+    >
+      <Box align="center" justify="center" pad="large">
+        <Heading align="center">
+          What should we call you?
+        </Heading>
+        <Divider />
+        <Form>
+          <FormFields>
+            <FormField
+              help="What should we call you?"
+              error={error(nameInput)}
+              label="Enter your name"
+              htmlFor="nameInput"
+            >
+              <input
+                {...nameInput}
+                required
+                autoFocus
+                placeholder="Ryan Collins"
+                id="nameInput"
+                autoComplete="on"
+                name="name"
+                type="text"
+                aria-invalid={nameInput.error}
+                aria-required
+                className="input"
+              />
+            </FormField>
+          </FormFields>
+        </Form>
+        <Footer align="center" justify="center" pad="large">
+          <Button primary label="Submit" onClick={onSubmit} />
+        </Footer>
+      </Box>
+    </Layer>
+  );
+}

app/src/containers/LandingContainer/index.js

@@ -124,8 +124,8 @@ class LandingContainer extends Component {
                 justify="center"
                 masonry
               >
-                {contributors.map((person, i) =>
-                  <Contributor key={i} person={person} />,
+                {contributors.map(person =>
+                  <Contributor key={person.name} person={person} />,
                 )}
               </Columns>
             </Section>
@@ -149,15 +149,15 @@ LandingContainer.propTypes = {
   isLoading: PropTypes.bool.isRequired,
   isShowingModal: PropTypes.bool.isRequired,
   fields: PropTypes.object.isRequired, // eslint-disable-line
-  name: PropTypes.string,
+  name: PropTypes.string.isRequired,
   contributors: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,
       github: PropTypes.string.isRequired,
       bio: PropTypes.string.isRequired,
       avatar: PropTypes.string.isRequired,
     }),
-  ),
+  ).isRequired,
 };
 
 // mapStateToProps :: {State} -> {Props}

app/src/reducers.js

@@ -4,14 +4,12 @@ import { reducer as formReducer } from 'redux-form';
 import client from './apolloClient';
 
 /* GENERATOR: Import all of your reducers */
-import test from './containers/Test/reducer';
 import landing from './containers/LandingContainer/reducer';
 import app from './containers/AppContainer/reducer';
 
 const rootReducer = combineReducers({
   app,
   /* GENERATOR: Compile all of your reducers */
-  test,
   landing,
   routing: routerReducer,
   form: formReducer,

app/src/store.js

@@ -6,20 +6,17 @@ import { UserAuthWrapper as userAuthWrapper } from 'redux-auth-wrapper';
 import rootReducer from './reducers';
 import client from './apolloClient';
 /* GENERATOR: Import all of your initial state */
-import { initialState as test } from './containers/Test/reducer';
 import { initialState as landing } from './containers/LandingContainer/reducer';
 import { initialState as app } from './containers/AppContainer/reducer';
 
 const initialState = {
   /* GENERATOR: Compile all of your initial state */
-  test,
   app,
   landing,
 };
 
 /* Commonly used middlewares and enhancers */
 /* See: http://redux.js.org/docs/advanced/Middleware.html*/
-
 const routingMiddleware = routerMiddleware(browserHistory);
 const middlewares = [thunk, routingMiddleware, client.middleware()];
 
@@ -32,9 +29,6 @@ if (isDeveloping && isClient) {
   middlewares.push(loggerMiddleware);
 }
 
-/* Everyone should use redux dev tools */
-/* https://github.com/gaearon/redux-devtools */
-/* https://medium.com/@meagle/understanding-87566abcfb7a */
 const enhancers = [];
 if (isClient && isDeveloping) {
   const devToolsExtension = window.devToolsExtension;
@@ -48,10 +42,6 @@ const composedEnhancers = compose(
   ...enhancers,
 );
 
-/* Hopefully by now you understand what a store is and how redux uses them,
- * But if not, take a look at: https://github.com/reactjs/redux/blob/master/docs/api/createStore.md
- * And https://egghead.io/lessons/javascript-redux-implementing-store-from-scratch
- */
 const store = createStore(
   rootReducer,
   initialState,

app/styles/styles.scss

@@ -11,6 +11,10 @@
 <div className="my-style" />
 */
 
+* {
+  box-sizing: border-box;
+}
+
 html {
   overflow-x: hidden;
 }

package.json

@@ -92,11 +92,12 @@
     "react",
     "webpack",
     "sass",
-    "css modules"
+    "css modules",
+    "grommet"
   ],
   "engines": {
-    "node": "5.2.0",
-    "npm": "3.10.7"
+    "node": "6.9.4",
+    "npm": "3.10.10"
   },
   "author": "Ryan Collins",
   "license": "MIT",
@@ -156,7 +157,7 @@
   "devDependencies": {
     "autoprefixer": "^6.5.1",
     "babel-core": "^6.3.15",
-    "babel-eslint": "^6.0.4",
+    "babel-eslint": "^7.1.1",
     "babel-jest": "^18.0.0",
     "babel-loader": "^6.2.0",
     "babel-plugin-webpack-alias": "^2.1.1",
@@ -173,6 +174,7 @@
     "eslint-loader": "^1.1.1",
     "eslint-plugin-graphql": "^0.4.0",
     "eslint-plugin-import": "^2.2.0",
+    "eslint-import-resolver-webpack": "0.8.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.9.0",
     "expect-jsx": "^2.6.0",
@@ -194,7 +196,6 @@
     "webpack": "2.1.0-beta.19",
     "webpack-dev-server": "2.1.0-beta.3",
     "webpack-hot-middleware": "^2.10.0",
-    "webpack-manifest-plugin": "^1.1.0",
-    "webpack-visualizer-plugin": "^0.1.5"
+    "webpack-manifest-plugin": "^1.1.0"
   }
 }