interpolate sources using selector

src/components/CardStack.jsx

@@ -89,7 +89,7 @@ class CardStack extends React.Component {
 
 function mapStateToProps(state) {
   return {
-    selected: state.app.selected,
+    selected: selectors.selectSelected(state),
     sourceError: state.app.errors.source,
     language: state.app.language,
     isCardstack: state.app.flags.isCardstack,

src/selectors/index.js

@@ -1,16 +1,19 @@
-import {
-  createSelector
-} from 'reselect'
+import { createSelector} from 'reselect'
 
 // Input selectors
 export const getEvents = state => state.domain.events;
 export const getLocations = state => state.domain.locations;
 export const getCategories = state => state.domain.categories;
 export const getNarratives = state => state.domain.narratives;
+export const getSelected = state => state.app.selected;
 export const getSites = (state) => {
   if (process.env.features.USE_SITES) return state.domain.sites;
   return [];
 }
+export const getSources = state => {
+  if (process.env.features.USE_SOURCES) return state.domain.sources;
+  return [];
+}
 export const getNotifications = state => state.domain.notifications;
 export const getTagTree = state => state.domain.tags;
 export const getTagsFilter = state => state.app.filters.tags;
@@ -152,6 +155,23 @@ export const selectLocations = createSelector(
   }
 );
 
+/**
+ * Of all the sources, select those that are relevant to the selected events.
+ */
+export const selectSelected = createSelector(
+  [getSelected, getSources],
+  (selected, sources) => {
+    if (selected.length === 0) {
+      return []
+    }
+    const sourceIds = selected.map(e => e.source)
+    const srcs = sources.filter(s => s.id.indexOf(sourceIds) > -1)
+    return selected.map((s, idx) => ({
+      ...s,
+      source: srcs[idx]
+    }))
+  }
+)
 
 /*
 * Select categories, return them as a list