Merge branch 'routesAndPanes'

i18n/messages.json

@@ -22,12 +22,12 @@
   {
     "id": "search.collections",
     "defaultMessage": "Collections",
-    "filepath": "src/components/SearchFilter.js"
+    "filepath": "src/components/search/SearchFilter.js"
   },
   {
     "id": "search.schema.all",
     "defaultMessage": "All Results",
-    "filepath": "src/components/SearchFilterSchema.js"
+    "filepath": "src/components/search/SearchFilterSchema.js"
   },
   {
     "id": "login.email",

package.json

@@ -19,8 +19,8 @@
     "react-intl-cra": "^0.2.7",
     "react-intl-po": "^2.0.2",
     "react-redux": "^5.0.4",
-    "react-router": "^4.1.1",
-    "react-router-dom": "^4.1.1",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.0",
     "react-waypoint": "^7.3.1",
     "redux": "^3.6.0",
     "redux-logger": "^3.0.1",

src/App.js

@@ -24,15 +24,13 @@ addLocaleData([...en, ...de, ...es, ...ru]);
 
 
 const App = () => (
-  <div className="App">
-    <Provider store={store}>
-      <IntlProvider locale="de" messages={translations.de}>
-        <BrowserRouter>
-          <Route path="/" component={PageLayout} />
-        </BrowserRouter>
-      </IntlProvider>
-    </Provider>
-  </div>
+  <Provider store={store}>
+    <IntlProvider locale="de" messages={translations.de}>
+      <BrowserRouter>
+        <Route path="/" component={PageLayout} />
+      </BrowserRouter>
+    </IntlProvider>
+  </Provider>
 );
 
 export default App;

src/App.scss

@@ -12,7 +12,14 @@ body {
   padding: 0;
   font-family: sans-serif;
   background: $light-gray5;
+  width: 100%;
   min-height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+#root {
+  flex-grow: 1;
 }
 
 .spinner {

src/actions/index.js

@@ -69,3 +69,18 @@ export const fetchMetadata = () => (dispatch) => {
       metadata: response.data
     }));
 };
+
+export const fetchEntity = id => dispatch => {
+  dispatch({
+    type: 'FETCH_ENTITY_REQUEST',
+    payload: { id },
+  });
+
+  return endpoint.get(`entities/${id}`)
+    .then(response => {
+      dispatch({
+        type: 'FETCH_ENTITY_SUCCESS',
+        payload: { id, data: response.data },
+      });
+    });
+};

src/components/Article.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+
+import './Article.css';
+
+class InfoPane extends Component {
+  render() {
+    const { children } = this.props;
+    return (
+      <aside className="InfoPane">
+        <div className="InfoPane-content-container">
+          <div className="InfoPane-content">
+            {children}
+          </div>
+        </div>
+      </aside>
+    );
+  }
+}
+
+class ContentPane extends Component {
+  render() {
+    const { children } = this.props;
+    return (
+      <main className="ContentPane">
+        {children}
+      </main>
+    );
+  }
+}
+
+class Article extends Component {
+  static InfoPane = InfoPane;
+  static ContentPane = ContentPane;
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <article className="Article">
+        { children }
+      </article>
+    );
+  }
+
+}
+
+export default Article;

src/components/Article.scss

@@ -0,0 +1,38 @@
+.Article {
+  flex-grow: 1;
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.Article > .InfoPane {
+  flex-grow: 0;
+  flex-basis: 300px;
+}
+
+.Article > .ContentPane {
+  flex-basis: 800px;
+  flex-grow: 4;
+}
+
+
+.InfoPane > .InfoPane-content-container {
+  position: sticky;
+  top: 20px;
+}
+
+.InfoPane .InfoPane-content {
+  margin: 20px;
+  padding: 2em 1em;
+  border: 1px solid lightgrey;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 1);
+}
+
+.InfoPane-content > h1 {
+  font-size: 1.2em;
+}
+
+.InfoPane ul {
+  list-style: none;
+  padding-left: 1em;
+}

src/components/Breadcrumbs.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { castArray } from 'lodash';
+import classnames from 'classnames';
+
+import './Breadcrumbs.css';
+
+const Breadcrumbs = ({ children = [], root }) => (
+  <nav className={classnames('Breadcrumbs', {root})}>
+    <ul>
+      {castArray(children).map((child, i) => (
+        <li key={child.key ? `breadcrumb_key_${child.key}` : `breadcrumb_nr_${i}`}>
+          {child}
+        </li>
+      ))}
+    </ul>
+  </nav>
+);
+
+export default Breadcrumbs;

src/components/Breadcrumbs.scss

@@ -0,0 +1,22 @@
+nav.Breadcrumbs {
+  display: block;
+  margin-bottom: 1em;
+
+  ul {
+    display: inline;
+    list-style: none;
+    padding: unset;
+    margin: unset;
+
+    li {
+      display: inline;
+      margin-left: 0.2em;
+    }
+  }
+
+  &:not(.root) ul li::after {
+    color: grey;
+    content: '>';
+    margin-left: 0.2em;
+  }
+}

src/components/SearchFilter.js → src/components/search/SearchFilter.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { mapValues, size, xor } from 'lodash';
 
-import { endpoint } from '../api';
-import filters from '../filters';
+import { endpoint } from '../../api';
+import filters from '../../filters';
 
 import SearchFilterCountries from './SearchFilterCountries';
 import SearchFilterCollections from './SearchFilterCollections';
@@ -85,7 +85,7 @@ class SearchFilter extends Component {
   }
 
   render() {
-    const { result, collections, countries } = this.props;
+    const { result, collections, countries, browsingContext } = this.props;
     const { query, queryCountries, queryCollectionIds } = this.state;
 
     // Standardised props passed to filters
@@ -105,9 +105,14 @@ class SearchFilter extends Component {
         .map(id => ({ id, filter, label: labels[id] }))
         .sort((a, b) => a.label < b.label ? -1 : 1)
 
+    // Hide the implicit collection filter when browsing that one collection.
+    const activeCollectionFilterTags =
+      activeFilterTagsFn(filters.COLLECTIONS, collections)
+        .filter(tag => tag.id !== browsingContext.collectionId);
+
     const activeFilterTags = [
       ...activeFilterTagsFn(filters.COUNTRIES, countries),
-      ...activeFilterTagsFn(filters.COLLECTIONS, collections)
+      ...activeCollectionFilterTags,
     ];
 
     return (
@@ -120,10 +125,12 @@ class SearchFilter extends Component {
             <SearchFilterCountries onOpen={this.onCountriesOpen} countries={queryCountries}
               {...multiFilterProps(filters.COUNTRIES)} />
           </div>
-          <div className="pt-large">
-            <SearchFilterCollections onOpen={this.onCollectionsOpen} collectionIds={queryCollectionIds}
-              {...multiFilterProps(filters.COLLECTIONS)} />
-          </div>
+          {browsingContext.collectionId === undefined && (
+            <div className="pt-large">
+              <SearchFilterCollections onOpen={this.onCollectionsOpen} collectionIds={queryCollectionIds}
+                {...multiFilterProps(filters.COLLECTIONS)} />
+            </div>
+          )}
           {activeFilterTags.length > 0 &&
             <div className="search-query__filters">
               Filtering for

src/components/SearchFilterCollections.js → src/components/search/SearchFilterCollections.js

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { Button, Checkbox, Dialog, NonIdealState, Spinner } from '@blueprintjs/core';
 import { debounce, fromPairs, xor } from 'lodash';
 
-import { endpoint } from '../api';
+import { endpoint } from '../../api';
 
 import SearchFilterList from './SearchFilterList';
 import SearchFilterText from './SearchFilterText';

src/components/SearchFilterSchema.js → src/components/search/SearchFilterSchema.js

@@ -3,7 +3,7 @@ import { FormattedMessage, FormattedNumber } from 'react-intl';
 import c from 'classnames';
 import sumBy from 'lodash/sumBy';
 
-import SchemaIcon from './SchemaIcon';
+import SchemaIcon from '../SchemaIcon';
 
 import './SearchFilterSchema.css';
 

src/components/SearchResultList.js → src/components/search/SearchResultList.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { NonIdealState, Spinner } from '@blueprintjs/core';
 import Waypoint from 'react-waypoint';
 
-import { fetchNextSearchResults } from '../actions';
+import { fetchNextSearchResults } from '../../actions';
 
 import SearchResultListItem from './SearchResultListItem';
 

src/components/SearchResultListItem.js → src/components/search/SearchResultListItem.js

@@ -1,15 +1,22 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 
-import SchemaIcon from './SchemaIcon';
+import SchemaIcon from '../SchemaIcon';
 
-const ListItem = ({ name, schema, properties, collection }) => (
+function getPath(url) {
+  return new URL(url).pathname;
+}
+
+const ListItem = ({ name, schema, properties, collection, ui }) => (
   <tr className={`result result--${schema}`}>
     <td className="result__name">
-      <span className="result__icon">
-        <SchemaIcon schemaId={schema} />
-      </span>
-      <span title={name}>{ name }</span>
+      <Link to={getPath(ui)}>
+        <span className="result__icon">
+          <SchemaIcon schemaId={schema} />
+        </span>
+        <span title={name}>{ name }</span>
+      </Link>
     </td>
     <td className="result__collection">
       {collection ?

src/reducers/collections.js

@@ -1,7 +1,7 @@
 import keyBy from 'lodash/keyBy';
 
 const initialState = {
-  results: []
+  results: {},
 };
 
 const collections = (state = initialState, action) => {

src/reducers/entityCache.js

@@ -0,0 +1,16 @@
+const initialState = {};
+
+const entityCache = (state = initialState, action) => {
+  if (!action.type.startsWith('FETCH_ENTITY_')) return state;
+  const { id, data } = action.payload;
+  switch (action.type) {
+    case 'FETCH_ENTITY_REQUEST':
+      return { ...state, [id]: { _isFetching: true } };
+    case 'FETCH_ENTITY_SUCCESS':
+      return { ...state, [id]: data };
+    default:
+      return state;
+  }
+};
+
+export default entityCache;

src/reducers/index.js

@@ -4,12 +4,14 @@ import collections from './collections'
 import searchResults from './search'
 import metadata from './metadata'
 import session from './session'
+import entityCache from './entityCache';
 
 const rootReducer = combineReducers({
   collections,
   searchResults,
   metadata,
-  session
+  session,
+  entityCache,
 })
 
 export default rootReducer;