Added variant for My Reactions page

packages/example-reactions/lib/components/Layout.jsx

@@ -35,6 +35,7 @@ const Layout = ({children, currentUser}) =>
       <ul>
         <li><Link to="/">All Movies</Link></li>
         <li><Link to="/my-reactions">My Reactions</Link></li>
+        <li><Link to="/my-reactions2">My Reactions (variant)</Link></li>
       </ul>
 
     </div>

packages/example-reactions/lib/components/movies/MyReactions.jsx

@@ -2,6 +2,11 @@
 
 My Reactions
 
+Use Datatable together with userReactedMovies view
+
+Pros: can use Datatable, pagination, withList, etc.
+Cons: setting up view can be complex
+
 */
 
 import React from 'react';

packages/example-reactions/lib/components/movies/MyReactions2.jsx

@@ -0,0 +1,43 @@
+/* 
+
+My Reactions2
+
+Variant: query for user.reactedMovies field directly
+
+Pros: only requires setting up `reactedMovies` virtual field
+Cons: cannot use Datatable/pagination/etc.
+
+*/
+
+import React from 'react';
+import { Components, withCurrentUser, registerComponent, withDocument } from 'meteor/vulcan:core';
+import Users from 'meteor/vulcan:users';
+import mapProps from 'recompose/mapProps';
+
+import Movies from '../../modules/movies/index.js';
+
+const MyReactions2 = ({document, currentUser, loading, loadMore}) => 
+  
+  <div>
+
+      {loading ? 
+
+        <Components.Loading /> :
+
+        <div className="movies">
+
+          {document.reactedMovies.map(movie => <Components.Card key={movie._id} document={movie} collection={Movies} currentUser={currentUser} />)}
+          
+        </div>
+      }
+
+  </div>
+
+const options = {
+  collection: Users,
+  fragmentName: 'UserReactedMovies',
+};
+
+const mapPropsFunction = props => ({...props, documentId: props.currentUser && props.currentUser._id});
+
+registerComponent('MyReactions2', MyReactions2, withCurrentUser, mapProps(mapPropsFunction), [withDocument, options]);

packages/example-reactions/lib/modules/components.js

@@ -2,3 +2,4 @@ import '../components/Layout.jsx';
 import '../components/movies/Reaction.jsx';
 import '../components/movies/MoviesList.jsx';
 import '../components/movies/MyReactions.jsx';
+import '../components/movies/MyReactions2.jsx';

packages/example-reactions/lib/modules/custom_fields.js

@@ -0,0 +1,50 @@
+/*
+
+Custom `reactedMovies` GraphQL virtual field on Users collection.
+Used for MyReactions2 example. 
+
+*/
+import Users from 'meteor/vulcan:users';
+import { Votes } from 'meteor/vulcan:voting';
+import Movies from './movies/index.js';
+
+Users.addField([
+  /**
+    An array containing votes
+  */
+  {
+    fieldName: 'reactedMovies',
+    fieldSchema: {
+      type: Array,
+      optional: true,
+      viewableBy: Users.owns,
+      resolveAs: {
+        type: '[Movie]',
+        resolver: async (user, args, { currentUser }) => {
+          const votes = Votes.find({userId: currentUser._id, collectionName: 'Movies'}).fetch();
+          const votedMoviesIds = _.unique(_.pluck(votes, 'documentId'));
+          const movies = Movies.find(
+            {
+              _id: {$in: votedMoviesIds}, 
+              userId: {$ne: currentUser._id}
+            }, 
+            {
+              limit: 5, 
+              sort: {postedAt: -1}
+            }
+          ).fetch();
+          return movies;
+        }
+      },
+    }
+  },
+  {
+    fieldName: 'reactedMovies.$',
+    fieldSchema: {
+      type: Object,
+      optional: true
+    }
+  },
+]);
+
+``

packages/example-reactions/lib/modules/fragments.js

@@ -20,6 +20,11 @@ registerFragment(`
   }
 `);
 
+/*
+
+Used for MyReactions
+
+*/
 registerFragment(`
   fragment UserMoviesVotes on User {
     _id
@@ -31,4 +36,28 @@ registerFragment(`
       documentId
     }
   }
+`);
+
+/*
+
+Used for MyReactions2
+
+*/
+registerFragment(`
+  fragment UserReactedMovies on User {
+    _id
+    reactedMovies{
+      _id
+      createdAt
+      name
+      year
+      review
+      currentUserVotes{
+        _id
+        voteType
+        power
+      }
+      baseScore
+    }
+  }
 `);

packages/example-reactions/lib/modules/index.js

@@ -7,3 +7,4 @@ import './fragments.js';
 import './components.js';
 import './routes.js';
 import './permissions.js';
+import './custom_fields.js';

packages/example-reactions/lib/modules/routes.js

@@ -3,3 +3,5 @@ import { addRoute, Components } from 'meteor/vulcan:core';
 addRoute({ name: 'movies', path: '/', componentName: 'MoviesList' });
 
 addRoute({ name: 'myReactions', path: '/my-reactions', componentName: 'MyReactions' });
+
+addRoute({ name: 'myReactions2', path: '/my-reactions2', componentName: 'MyReactions2' });