Feat rc server rendering

app/src/apolloClient.js

@@ -0,0 +1,15 @@
+import ApolloClient, {
+  createNetworkInterface,
+  addTypeName,
+} from 'apollo-client';
+const baseUrl = typeof process.env.BASE_URL !== 'undefined' ?
+  process.env.BASE_URL : 'https://0.0.0.0:3000/';
+const productionUrl = `${baseUrl}graphql`;
+
+const client = new ApolloClient({
+  networkInterface: createNetworkInterface(productionUrl),
+  initialState: typeof window !== 'undefined' ? window.__APOLLO_STATE__ : null,
+  queryTransformer: addTypeName,
+});
+
+export default client;

app/src/components/AppFooter/README.md

@@ -0,0 +1,10 @@
+## AppFooter Component
+A component that shows up as a footer at the bottom of the page.  It shows information about the project and also social sharing links.
+
+The component is completely presentational and is stateless.  No props are passed in.
+
+### Example
+
+```js
+<AppFooter />
+```

app/src/components/AppFooter/index.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import styles from './index.module.scss';
+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';
+
+const AppFooter = () => (
+  <Footer pad="large" colorIndex="light-2">
+    <Box
+      direction="column"
+      align="center"
+      pad="none"
+      responsive
+      className={styles.flexOne}
+    >
+      <Heading tag="h3">
+        By{' '}
+        <a
+          className={styles.footerAnchor}
+          href="http://www.ryancollins.io"
+        >
+          Ryan Collins
+        </a>
+      </Heading>
+      <Heading tag="h5">
+        This app is licensed under the{' '}
+        <a
+          className={styles.footerAnchor}
+          href="https://github.com/RyanCCollins/ryancollinsio/blob/master/LICENSE"
+        >
+          MIT License.
+        </a>
+        {' '}Take a peak at the{' '}
+        <br />
+        <Anchor
+          className={styles.footerAnchor}
+          href="https://github.com/RyanCCollins/ryancollinsio"
+        >
+          source code.
+        </Anchor>
+      </Heading>
+      <nav
+        aria-hidden
+        className={
+          'grommetux-box grommetux-box--direction-row ' +
+          'grommetux-box--responsive grommetux-box--pad-none ' +
+          'grommetux-menu grommetux-menu--row grommetux-menu--inline'
+        }
+      >
+        <SocialShare
+          a11yTitle="Go to Facebook to Share this website"
+          type="facebook"
+          link="http://www.ryancollins.io"
+          text="RyanCollins.io"
+        />
+        <SocialShare
+          a11yTitle="Go to Twitter to Share this website"
+          type="twitter"
+          link="http://www.ryancollins.io"
+          text="RyanCollins.io"
+        />
+        <SocialShare
+          a11yTitle="Go to Linkedin to Share this website"
+          type="linkedin"
+          link="http://www.ryancollins.io"
+          title="Restaurant Reviewer"
+          text="RyanCollins.io"
+        />
+      </nav>
+    </Box>
+  </Footer>
+);
+
+export default cssModules(AppFooter, styles);

app/src/components/AppFooter/index.module.scss

@@ -0,0 +1,11 @@
+.appFooter {
+  background: #fbfbfb;
+  padding: 50px;
+  title {
+    color: black !important;
+  }
+}
+
+.flexOne {
+  flex: 1;
+}

app/src/components/AppFooter/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,70 @@
+exports[`<AppFooter /> should render with default props 1`] = `
+<Footer
+  colorIndex="light-2"
+  direction="row"
+  pad="large"
+  responsive={false}>
+  <Box
+    align="center"
+    announce={false}
+    className={undefined}
+    direction="column"
+    focusable={true}
+    pad="none"
+    responsive={true}
+    tag="div">
+    <Heading
+      tag="h3">
+      By
+
+      <a
+        className={undefined}
+        href="http://www.ryancollins.io">
+        Ryan Collins
+      </a>
+    </Heading>
+    <Heading
+      tag="h5">
+      This app is licensed under the
+
+      <a
+        className={undefined}
+        href="https://github.com/RyanCCollins/ryancollinsio/blob/master/LICENSE">
+        MIT License.
+      </a>
+
+      Take a peak at the
+
+      <br />
+      <Anchor
+        className={undefined}
+        href="https://github.com/RyanCCollins/ryancollinsio"
+        tag="a">
+        source code.
+      </Anchor>
+    </Heading>
+    <nav
+      aria-hidden={true}
+      className="grommetux-box grommetux-box--direction-row grommetux-box--responsive grommetux-box--pad-none grommetux-menu grommetux-menu--row grommetux-menu--inline">
+      <SocialShare
+        a11yTitle="Go to Facebook to Share this website"
+        link="http://www.ryancollins.io"
+        text="RyanCollins.io"
+        title=""
+        type="facebook" />
+      <SocialShare
+        a11yTitle="Go to Twitter to Share this website"
+        link="http://www.ryancollins.io"
+        text="RyanCollins.io"
+        title=""
+        type="twitter" />
+      <SocialShare
+        a11yTitle="Go to Linkedin to Share this website"
+        link="http://www.ryancollins.io"
+        text="RyanCollins.io"
+        title="Restaurant Reviewer"
+        type="linkedin" />
+    </nav>
+  </Box>
+</Footer>
+`;

app/src/components/Header/tests/index.test.js → app/src/components/AppFooter/tests/index.test.js

@@ -1,14 +1,12 @@
-import Header from '../index';
+import AppFooter from '../index';
 import { shallow } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
 import React from 'react';
 
-describe('<Header />', () => {
+describe('<AppFooter />', () => {
   it('should render with default props', () => {
     const wrapper = shallow(
-      <Header
-        content="Hello World"
-      />
+      <AppFooter />
     );
     expect(shallowToJson(wrapper)).toMatchSnapshot();
   });

app/src/components/Avatar/README.md

@@ -0,0 +1,14 @@
+## Avatar Component
+A reusable avatar component with some styling.
+
+### Example
+
+```js
+<Avatar src={person.url} />
+```
+
+### Props
+
+| Prop          | Type     | Default     | Possible Values
+| ------------- | -------- | ----------- | ---------------------------------------------
+| **src**    | String   |             | Any string value

app/src/components/Avatar/index.js

@@ -0,0 +1,23 @@
+import React, { PropTypes } from 'react';
+import styles from './index.module.scss';
+import cssModules from 'react-css-modules';
+const defaultAvatarUrl = 'https://github.com/RyanCCollins/cdn/blob/master/alumni-webapp/no-user.png?raw=true';
+
+const Avatar = ({
+  src,
+}) => (
+  <img
+    src={src || defaultAvatarUrl}
+    className={styles.avatar}
+  />
+);
+
+Avatar.propTypes = {
+  src: PropTypes.string.isRequired,
+};
+
+Avatar.defaultProps = {
+  src: defaultAvatarUrl,
+};
+
+export default cssModules(Avatar, styles);

app/src/components/Avatar/index.module.scss

@@ -0,0 +1,10 @@
+.avatar {
+  width: 100px;
+  height: 100px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  padding: 4px;
+  line-height: 1.42857143;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 50%;
+}

app/src/components/Avatar/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,5 @@
+exports[`<Avatar /> should render with default props 1`] = `
+<img
+  className={undefined}
+  src="https://github.com/ryanccollins.png" />
+`;

app/src/components/LogoImage/tests/index.test.js → app/src/components/Avatar/tests/index.test.js

@@ -1,14 +1,12 @@
+import Avatar from '../index';
 import { shallow } from 'enzyme';
-import React from 'react';
 import { shallowToJson } from 'enzyme-to-json';
-import LogoImage from '../index';
+import React from 'react';
 
-describe('<Header />', () => {
+describe('<Avatar />', () => {
   it('should render with default props', () => {
     const wrapper = shallow(
-      <LogoImage
-        imageSource="https://github.com/RyanCCollins/cdn/blob/master/alumni-webapp/udacity-alumni-png.png?raw=true"
-      />
+      <Avatar src="https://github.com/ryanccollins.png" />
     );
     expect(shallowToJson(wrapper)).toMatchSnapshot();
   });

app/src/components/Contributor/README.md

@@ -0,0 +1,17 @@
+## Contributor Component
+A component that ...
+
+### Example
+
+```js
+<Contributor />
+```
+
+### Props
+
+| Prop          | Type     | Default     | Possible Values
+| ------------- | -------- | ----------- | ---------------------------------------------
+| **myProp**    | String   |             | Any string value
+
+
+### Other Information