display list of comments with asset url

client/coral-framework/actions/assets.js

@@ -1,5 +1,5 @@
 import coralApi from '../helpers/response';
-import addItem from './items';
+import {addItem} from './items';
 
 export const FETCH_MULTIPLE_ASSETS = 'FETCH_MULTIPLE_ASSETS';
 export const RECEIVE_MULTIPLE_ASSETS = 'RECEIVE_MULTIPLE_ASSETS';
@@ -9,10 +9,10 @@ export const fetchMulitpleAssets = ids => {
   return dispatch => {
     dispatch({type: FETCH_MULTIPLE_ASSETS});
 
-    coralApi(`/asset/multi?ids=${encodeURIComponent(ids.join(','))}`)
+    coralApi(`/assets/multi?ids=${encodeURIComponent(ids.join(','))}`)
       .then(assets => {
-        dispatch({type: RECEIVE_MULTIPLE_ASSETS, assets});
-        console.log('assets!', assets);
+        assets.forEach(asset => dispatch(addItem(asset, 'assets')));
+        dispatch({type: RECEIVE_MULTIPLE_ASSETS, assets: assets.map(asset => asset.id)});
       })
       .catch(error => dispatch({type: FAILURE_MULTIPLE_ASSSETS, error}));
   };

client/coral-framework/reducers/items.js

@@ -6,6 +6,7 @@ import * as actions from '../actions/items';
 const initialState = fromJS({
   comments: {},
   users: {},
+  assets: {},
   actions: {}
 });
 

client/coral-framework/reducers/user.js

@@ -1,12 +1,14 @@
 import {Map, fromJS} from 'immutable';
 import * as authActions from '../constants/auth';
 import * as actions from '../constants/user';
+import * as assetActions from '../actions/assets';
 
 const initialState = Map({
   displayName: '',
   profiles: [],
   settings: {},
-  myComments: []
+  myComments: [],
+  myAssets: [] // the assets from which myComments (above) originated
 });
 
 const purge = user => {
@@ -33,6 +35,8 @@ export default function user (state = initialState, action) {
       .set('settings', action.settings);
   case actions.RECEIVE_COMMENTS_BY_USER:
     return state.set('myComments', fromJS(action.comments));
+  case assetActions.RECEIVE_MULTIPLE_ASSETS:
+    return state.set('myAssets', fromJS(action.assets));
   default :
     return state;
   }

client/coral-plugin-history/Comment.js

@@ -5,14 +5,19 @@ import styles from './Comment.css';
 const Comment = props => {
   return (
     <div>
-      <p><a className={styles.assetURL} href={props.comment.asset_id}>{props.comment.asset_id}</a></p>
+      <p><a className={styles.assetURL} href={props.asset.url}>{props.asset.url}</a></p>
       <p className={styles.commentBody}>{props.comment.body}</p>
     </div>
   );
 };
 
 Comment.propTypes = {
-  comment: PropTypes.object.isRequired
+  comment: PropTypes.shape({
+    body: PropTypes.string
+  }).isRequired,
+  asset: PropTypes.shape({
+    url: PropTypes.string
+  }).isRequired
 };
 
 export default Comment;

client/coral-plugin-history/CommentHistory.js

@@ -7,15 +7,19 @@ const CommentHistory = props => {
     <div className={styles.header}>
       <h2>All Comments</h2>
       {props.comments.map((comment, i) => {
-        console.log('a comment', comment);
-        return <Comment key={i} comment={comment} />;
+        const asset = props.assets.find(asset => asset.id === comment.asset_id);
+        return <Comment
+          key={i}
+          comment={comment}
+          asset={asset} />;
       })}
     </div>
   );
 };
 
 CommentHistory.propTypes = {
-  comments: PropTypes.arrayOf(PropTypes.object).isRequired
+  comments: PropTypes.arrayOf(PropTypes.object).isRequired,
+  assets: PropTypes.arrayOf(PropTypes.object).isRequired
 };
 
 export default CommentHistory;

client/coral-settings/containers/SettingsContainer.js

@@ -49,7 +49,13 @@ class SignInContainer extends Component {
           <Tab>Profile Settings</Tab>
         </TabBar>
         <TabContent show={activeTab === 0}>
-          <CommentHistory comments={user.myComments.map(id => items.comments[id])} />
+          {
+            user.myComments.length && user.myAssets.length
+            ? <CommentHistory
+              comments={user.myComments.map(id => items.comments[id])}
+              assets={user.myAssets.map(id => items.assets[id])} />
+            : <p>Loading comment history...</p>
+          }
         </TabContent>
         <TabContent show={activeTab === 1}>
           <BioContainer bio={userData.settings.bio} handleSave={this.handleSave} {...this.props} />

routes/api/assets/index.js

@@ -40,6 +40,20 @@ router.get('/', (req, res, next) => {
 
 });
 
+// get multiple assets with a comma-separated list of asset ids
+router.get('/multi', (req, res, next) => {
+  const assetIds = req.query.ids.split(',');
+
+  Asset.findMultipleById(assetIds)
+    .then(assets => {
+      res.json(assets);
+    })
+    .catch(error => {
+      error.status = 500;
+      next(error);
+    });
+});
+
 // Get an asset by id.
 router.get('/:asset_id', (req, res, next) => {
 
@@ -58,20 +72,6 @@ router.get('/:asset_id', (req, res, next) => {
     });
 });
 
-// get multiple assets with a comma-separated list of asset ids
-router.get('/multi', (req, res, next) => {
-  const assetIds = req.query.ids.split(',');
-
-  Asset.findMultipleById(assetIds)
-    .then(assets => {
-      res.json(assets);
-    })
-    .catch(error => {
-      error.status = 500;
-      next(error);
-    });
-});
-
 // Adds the asset id to the queue to be scraped.
 router.post('/:asset_id/scrape', (req, res, next) => {