Merge pull request #22 from sharetribe/location-descriptors-to-namedlink

Location descriptors to namedlink

src/components/NamedLink/NamedLink.js

@@ -1,20 +1,31 @@
+/**
+ * This component wraps React-Router's Link by providing name-based routing.
+ * This is also special component that gets routes from context.
+ * (Helps to narrow down the scope of possible format changes to routes.)
+ */
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
 import { pathByRouteName } from '../../routesConfiguration';
 
 const NamedLink = (props, context) => {
-  const { name, params, ...rest } = props;
-  const path = pathByRouteName(name, context.routes, params);
-
-  return <Link to={path} {...rest} />;
+  const { name, params, query, hash, state, ...rest } = props;
+  const pathname = pathByRouteName(name, context.routes, params);
+  const locationDescriptor = { pathname, query, hash, state };
+  return <Link to={locationDescriptor} {...rest} />;
 };
 
 const { array, object, string } = PropTypes;
 
 NamedLink.contextTypes = { routes: array };
 
-NamedLink.defaultProps = { params: {} };
+NamedLink.defaultProps = { hash: '', params: {}, query: {}, state: {} };
 
-NamedLink.propTypes = { name: string.isRequired, params: object };
+NamedLink.propTypes = {
+  hash: string,
+  name: string.isRequired,
+  params: object,
+  query: object,
+  state: object,
+};
 
 export default NamedLink;

src/containers/LandingPage/LandingPage.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Link } from 'react-router';
-import { PageLayout } from '../../components';
+import { NamedLink, PageLayout } from '../../components';
 
 export default () => (
   <PageLayout title="Landing page">
-    <Link to="/s?location=helsinki">
+    <NamedLink name="SearchPage" query={{ location: 'helsinki' }}>
       <FormattedMessage
         id="landingpage.examplelink"
         defaultMessage="Show nice studios! (default)"
       />
-    </Link>
+    </NamedLink>
   </PageLayout>
 )

src/containers/LandingPage/LandingPage.test.js

@@ -2,13 +2,17 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import { TestProvider } from '../../util/test-helpers';
 import LandingPage from './LandingPage';
+import { RoutesProvider } from '../../components';
+import routesConfiguration from '../../routesConfiguration';
 
 describe('LandingPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
       (
         <TestProvider>
-          <LandingPage />
+          <RoutesProvider routes={routesConfiguration}>
+            <LandingPage />
+          </RoutesProvider>
         </TestProvider>
       ),
     );