feat(nav): Add a Nav to news and update www nav links

common/app/Nav/links.json

@@ -7,5 +7,9 @@
     "content": "Forum",
     "link": "https://forum.freecodecamp.org/",
     "target": "_blank"
+  },
+  {
+    "content": "News",
+    "link": "https://www.freecodecamp.org/news"
   }
 ]

news/NewsApp.js

@@ -1,10 +1,20 @@
 import React from 'react';
+import { Grid } from 'react-bootstrap';
+
+import { FullWidthRow } from '../common/app/helperComponents';
+import Nav from './components/Nav';
+import { routes } from './routes';
 
 const propTypes = {};
 
 function NewsApp() {
   return (
-    <h1>This is the news!</h1>
+    <div>
+      <Nav />
+      <Grid fluid={true}>
+        <FullWidthRow>{routes}</FullWidthRow>
+      </Grid>
+    </div>
   );
 }
 

news/client.js

@@ -1,12 +1,19 @@
 import React from 'react';
+import {BrowserRouter} from 'react-router-dom';
 import { render } from 'react-dom';
 
 import NewsApp from './NewsApp';
 
 const newsMountPoint = document.getElementById('news-app-mount');
 
+const App = (
+  <BrowserRouter basename='/news'>
+    <NewsApp />
+  </BrowserRouter>
+);
+
 render(
-  <NewsApp/>,
+  App,
   newsMountPoint,
   () => console.log('react has rendered and is ready to go go go go go go!!')
 );

news/components/Nav/LargeNav.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Media from 'react-media';
+import { Col, Navbar, Row } from 'react-bootstrap';
+import FCCSearchBar from 'react-freecodecamp-search';
+import NavLogo from './components/NavLogo';
+import NavLinks from './components/NavLinks';
+
+import propTypes from './navPropTypes';
+
+function LargeNav({ clickOnLogo }) {
+  return (
+    <Media
+      query='(min-width: 956px)'
+      render={
+        () => (
+          <Row>
+            <Col className='nav-component' sm={ 7 } xs={ 12 }>
+              <Navbar.Header>
+                <NavLogo clickOnLogo={ clickOnLogo } />
+                <FCCSearchBar />
+              </Navbar.Header>
+            </Col>
+            <Col className='nav-component nav-links' sm={ 5 } xs={ 0 }>
+              <Navbar.Collapse>
+                <NavLinks />
+              </Navbar.Collapse>
+          </Col>
+          </Row>
+        )
+      }
+    />
+  );
+}
+
+LargeNav.displayName = 'LargeNav';
+LargeNav.propTypes = propTypes;
+
+export default LargeNav;

news/components/Nav/MediumNav.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Media from 'react-media';
+import { Navbar, Row } from 'react-bootstrap';
+import FCCSearchBar from 'react-freecodecamp-search';
+import NavLogo from './components/NavLogo';
+import NavLinks from './components/NavLinks';
+import propTypes from './navPropTypes';
+
+function MediumNav({ clickOnLogo }) {
+  return (
+    <Media
+      query={{ maxWidth: 955, minWidth: 751 }}
+      >
+      {
+        matches => matches && typeof window !== 'undefined' && (
+          <div>
+          <Row>
+            <Navbar.Header className='medium-nav'>
+              <div className='nav-component header'>
+                  <Navbar.Toggle />
+                  <NavLogo clickOnLogo={ clickOnLogo } />
+                  <FCCSearchBar />
+              </div>
+              <div className='nav-component bins'/>
+            </Navbar.Header>
+          </Row>
+          <Row className='collapse-row'>
+            <Navbar.Collapse>
+                <NavLinks />
+              </Navbar.Collapse>
+          </Row>
+          </div>
+        )
+      }
+    </Media>
+  );
+}
+
+MediumNav.displayName = 'MediumNav';
+MediumNav.propTypes = propTypes;
+
+export default MediumNav;

news/components/Nav/Nav.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Navbar } from 'react-bootstrap';
+
+import LargeNav from './LargeNav';
+import MediumNav from './MediumNav';
+import SmallNav from './SmallNav';
+
+const allNavs = [
+  LargeNav,
+  MediumNav,
+  SmallNav
+];
+
+export default function FCCNav() {
+  const withNavProps = Component => (
+    <Component
+      key={ Component.displayName }
+    />
+  );
+  return (
+    <Navbar
+    className='nav-height'
+    id='navbar'
+    staticTop={ true }
+    >
+    {
+      allNavs.map(withNavProps)
+    }
+  </Navbar>
+  );
+}

news/components/Nav/SmallNav.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Media from 'react-media';
+import { Navbar, Row } from 'react-bootstrap';
+import FCCSearchBar from 'react-freecodecamp-search';
+import NavLogo from './components/NavLogo';
+import NavLinks from './components/NavLinks';
+
+import propTypes from './navPropTypes';
+
+function SmallNav({ clickOnLogo }) {
+  return (
+    <Media
+      query='(max-width: 750px)'
+      >
+      {
+        matches => matches && typeof window !== 'undefined' && (
+          <div>
+          <Row>
+            <Navbar.Header className='small-nav'>
+              <div className='nav-component header'>
+                  <Navbar.Toggle />
+                  <NavLogo clickOnLogo={ clickOnLogo } />
+              </div>
+              <div className='nav-component bins'/>
+            </Navbar.Header>
+          </Row>
+          <Row className='collapse-row'>
+            <Navbar.Collapse>
+              <NavLinks>
+                <FCCSearchBar />
+              </NavLinks>
+            </Navbar.Collapse>
+          </Row>
+          </div>
+        )
+      }
+    </Media>
+  );
+}
+
+SmallNav.displayName = 'SmallNav';
+SmallNav.propTypes = propTypes;
+
+export default SmallNav;

news/components/Nav/components/NavLinks.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { NavItem, Nav } from 'react-bootstrap';
+import { startCase } from 'lodash';
+
+const urls = {
+  curriculum: 'https://learn.freecodecamp.org',
+  forum: 'https://forum.freecodecamp.org',
+  news: 'https://freecodecamp.org/news'
+};
+
+const Links = Object.keys(urls).map(key => (
+  <NavItem href={urls[key]} key={key} target='_blank'>
+    {startCase(key)}
+  </NavItem>
+));
+const propTypes = {};
+
+function NavLinks() {
+  return (
+    <Nav id='nav-links' navbar={true} pullRight={true}>
+      {Links}
+      <NavItem href='/settings'>Settings</NavItem>
+    </Nav>
+  );
+}
+
+NavLinks.displayName = 'NavLinks';
+NavLinks.propTypes = propTypes;
+
+export default NavLinks;
+
+/*
+<SignUp
+      isInDropDown={ !isInNav }
+      showLoading={ showLoading }
+      showSignUp={ !isSignedIn }
+    />
+    */

news/components/Nav/components/NavLogo.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { NavbarBrand } from 'react-bootstrap';
+import Media from 'react-media';
+
+const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
+const fCCglyph = 'https://s3.amazonaws.com/freecodecamp/FFCFire.png';
+
+const propTypes = {};
+
+function NavLogo() {
+  return (
+    <NavbarBrand>
+      <a
+        href='/'
+        >
+        <Media query='(min-width: 350px)'>
+          {
+            matches => matches ? (
+              <img
+                alt='learn to code javascript at freeCodeCamp logo'
+                className='nav-logo logo'
+                src={ fCClogo }
+              />
+            ) : (
+              <img
+                alt='learn to code javascript at freeCodeCamp logo'
+                className='nav-logo logo'
+                src={ fCCglyph }
+              />
+            )
+          }
+        </Media>
+      </a>
+    </NavbarBrand>
+  );
+}
+
+NavLogo.displayName = 'NavLogo';
+NavLogo.propTypes = propTypes;
+
+export default NavLogo;

news/components/Nav/index.js

@@ -0,0 +1 @@
+export { default } from './Nav';

news/components/Nav/navPropTypes.js

@@ -0,0 +1,3 @@
+// import PropTypes from 'prop-types';
+
+export default {};

server/boot/news.js

@@ -1,15 +1,24 @@
 import React from 'react';
 import { renderToString } from 'react-dom/server';
+import { StaticRouter } from 'react-router-dom';
 
 import NewsApp from '../../news/NewsApp';
 
+function serveNewsApp(req, res) {
+  const context = {};
+  const markup = renderToString(
+    <StaticRouter basename='/news' context={context} location={req.url}>
+      <NewsApp />
+    </StaticRouter>
+  );
+  return res.render('layout-news', { title: 'News | freeCodeCamp', markup });
+}
+
 export default function newsBoot(app) {
   const router = app.loopback.Router();
 
-  router.get('/', (req, res) => {
-    const markup = renderToString(<NewsApp />);
-    return res.render('layout-news', {title: 'Hello News?', markup});
-  });
+  router.get('/news', serveNewsApp);
+  router.get('/news/*', serveNewsApp);
 
-  app.use('/news', router);
+  app.use(router);
 }