NavBar for admin pages (fixes #807) (#932)

Author: mstriemer

src/core/components/NavBar/index.js

@@ -0,0 +1,23 @@
+import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
+
+import 'core/components/NavBar/styles.scss';
+
+export const NavBarItem = ({ children }) => <span className="NavBarItem">{children}</span>;
+NavBarItem.propTypes = {
+  children: PropTypes.node,
+};
+
+export const NavBarLink = ({ children, ...props }) => (
+  <NavBarItem>
+    <Link {...props} className="NavBarLink">{children}</Link>
+  </NavBarItem>
+);
+NavBarLink.propTypes = {
+  children: PropTypes.node,
+};
+
+export const NavBar = ({ children }) => <div className="NavBar">{children}</div>;
+NavBar.propTypes = {
+  children: PropTypes.node,
+};

src/core/components/NavBar/styles.scss

@@ -0,0 +1,29 @@
+.NavBar {
+  align-items: center;
+  justify-content: space-between;
+  background: #444;
+  display: flex;
+  height: 50px;
+  padding: 0 10px;
+  width: 100%;
+}
+
+.NavBarLink {
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  min-width: 50px;
+  padding: 0 10px;
+  text-decoration: none;
+  transition: 200ms;
+
+  &:hover {
+    background-color: #fff;
+    color: #444;
+    cursor: pointer;
+  }
+}

src/search/components/NavBar/index.js

@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+
+import {
+  NavBar,
+  NavBarLink,
+} from 'core/components/NavBar';
+
+const SearchNavBar = () => (
+  <NavBar>
+    <NavBarLink to="/search">Search</NavBarLink>
+  </NavBar>
+);
+SearchNavBar.propTypes = {
+  logout: PropTypes.func.isRequired,
+};
+
+export default SearchNavBar;

src/search/containers/App.js

@@ -1,9 +1,10 @@
 import React, { PropTypes } from 'react';
 import Helmet from 'react-helmet';
 
-import 'search/css/App.scss';
 import { gettext as _ } from 'core/utils';
+import NavBar from 'search/components/NavBar';
 
+import 'search/css/App.scss';
 
 export default class App extends React.Component {
   static propTypes = {
@@ -17,7 +18,10 @@ export default class App extends React.Component {
         <Helmet
           defaultTitle={_('Add-ons Search')}
         />
-        {children}
+        <NavBar />
+        <div className="App">
+          {children}
+        </div>
       </div>
     );
   }

src/search/containers/CurrentSearchPage.js

@@ -5,8 +5,12 @@ import { search } from 'core/api';
 import SearchPage from 'search/components/SearchPage';
 import { searchStart, searchLoad, searchFail } from 'search/actions';
 
-export function mapStateToProps(state) {
-  return state.search;
+export function mapStateToProps(state, ownProps) {
+  const { location } = ownProps;
+  if (location.query.q === state.search.query) {
+    return state.search;
+  }
+  return {};
 }
 
 function performSearch({ dispatch, page, query, api }) {

src/search/css/App.scss

@@ -4,10 +4,13 @@
 
 body {
   background: $body-color;
-  margin: 20px;
   color: $text-color-default;
 }
 
+.App {
+  margin: 20px;
+}
+
 * {
   box-sizing: border-box;
 }

tests/client/core/components/TestNavBar.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+import { shallowRender } from 'tests/client/helpers';
+import { NavBar, NavBarItem, NavBarLink } from 'core/components/NavBar';
+
+describe('<NavBarItem />', () => {
+  it('wraps its children in a span', () => {
+    const root = shallowRender(<NavBarItem>Foo</NavBarItem>);
+    assert.equal(root.props.className, 'NavBarItem');
+    assert.equal(root.type, 'span');
+    assert.equal(root.props.children, 'Foo');
+  });
+});
+
+describe('<NavBarLink />', () => {
+  it('wraps its children in a span', () => {
+    const root = shallowRender(<NavBarLink to="/bar">Baileys Taproom</NavBarLink>);
+    assert.equal(root.type, NavBarItem);
+    assert.equal(root.props.children.type, Link);
+    assert.equal(root.props.children.props.to, '/bar');
+    assert.equal(root.props.children.props.children, 'Baileys Taproom');
+  });
+});
+
+describe('<NavBar />', () => {
+  it('wraps its children in a div', () => {
+    const root = shallowRender(<NavBar>Navigate places!</NavBar>);
+    assert.equal(root.type, 'div');
+    assert.equal(root.props.className, 'NavBar');
+    assert.equal(root.props.children, 'Navigate places!');
+  });
+});

tests/client/search/components/TestNavBar.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { NavBar, NavBarLink } from 'core/components/NavBar';
+import SearchNavBar from 'search/components/NavBar';
+import { shallowRender } from 'tests/client/helpers';
+
+describe('<SearchNavBar />', () => {
+  it('renders a link to Search', () => {
+    const root = shallowRender(<SearchNavBar />);
+    assert.equal(root.type, NavBar);
+    const link = root.props.children;
+    assert.equal(link.type, NavBarLink);
+    assert.equal(link.props.to, '/search');
+    assert.equal(link.props.children, 'Search');
+  });
+});

tests/client/search/containers/TestApp.js

@@ -13,6 +13,10 @@ describe('App', () => {
     const root = shallowRender(<App><MyComponent /></App>);
     assert.equal(root.type, 'div');
     // First child is <Helmet />.
-    assert.equal(root.props.children[1].type, MyComponent);
+    // Second child is <NavBar />.
+    // Third child is the <div className="App"> wrapper.
+    const wrapper = root.props.children[2];
+    assert.equal(wrapper.props.className, 'App');
+    assert.equal(wrapper.props.children.type, MyComponent);
   });
 });

tests/client/search/containers/TestCurrentSearchPage.js

@@ -13,11 +13,16 @@ describe('CurrentSearchPage.mapStateToProps()', () => {
              cd: { slug: 'cd', name: 'cd-block' } },
     search: { query: 'ad-block', loading: false, results: [{ slug: 'ab', name: 'ad-block' }] },
   };
-  const props = mapStateToProps(state);
 
-  it('passes the search state', () => {
+  it('passes the search state if the URL and state query matches', () => {
+    const props = mapStateToProps(state, { location: { query: { q: 'ad-block' } } });
     assert.strictEqual(props, state.search);
   });
+
+  it('does not pass search state if the URL and state query do not match', () => {
+    const props = mapStateToProps(state, { location: { query: { q: 'more-ads' } } });
+    assert.deepEqual(props, {});
+  });
 });
 
 describe('CurrentSearchPage.isLoaded()', () => {