From 89665130bbe7e31022411792712757566a79b5aa Mon Sep 17 00:00:00 2001
From: SachaG <info@sachagreif.com>
Date: Thu, 5 Oct 2017 10:35:34 +0900
Subject: [PATCH] Added variant for My Reactions page

---
 .../lib/components/Layout.jsx                 |  1 +
 .../lib/components/movies/MyReactions.jsx     |  5 ++
 .../lib/components/movies/MyReactions2.jsx    | 43 ++++++++++++++++
 .../lib/modules/components.js                 |  1 +
 .../lib/modules/custom_fields.js              | 50 +++++++++++++++++++
 .../lib/modules/fragments.js                  | 29 +++++++++++
 .../example-reactions/lib/modules/index.js    |  1 +
 .../example-reactions/lib/modules/routes.js   |  2 +
 8 files changed, 132 insertions(+)
 create mode 100644 packages/example-reactions/lib/components/movies/MyReactions2.jsx
 create mode 100644 packages/example-reactions/lib/modules/custom_fields.js

diff --git a/packages/example-reactions/lib/components/Layout.jsx b/packages/example-reactions/lib/components/Layout.jsx
index fcc849d74..e803dae20 100644
--- a/packages/example-reactions/lib/components/Layout.jsx
+++ b/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>
diff --git a/packages/example-reactions/lib/components/movies/MyReactions.jsx b/packages/example-reactions/lib/components/movies/MyReactions.jsx
index 98baafaee..faf259740 100644
--- a/packages/example-reactions/lib/components/movies/MyReactions.jsx
+++ b/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';
diff --git a/packages/example-reactions/lib/components/movies/MyReactions2.jsx b/packages/example-reactions/lib/components/movies/MyReactions2.jsx
new file mode 100644
index 000000000..8e2d6f30f
--- /dev/null
+++ b/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]);
diff --git a/packages/example-reactions/lib/modules/components.js b/packages/example-reactions/lib/modules/components.js
index 1fe9db62a..8bef86b36 100644
--- a/packages/example-reactions/lib/modules/components.js
+++ b/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';
diff --git a/packages/example-reactions/lib/modules/custom_fields.js b/packages/example-reactions/lib/modules/custom_fields.js
new file mode 100644
index 000000000..287217611
--- /dev/null
+++ b/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
+    }
+  },
+]);
+
+``
diff --git a/packages/example-reactions/lib/modules/fragments.js b/packages/example-reactions/lib/modules/fragments.js
index 21d3ee0b2..0800ef7b8 100644
--- a/packages/example-reactions/lib/modules/fragments.js
+++ b/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
+    }
+  }
 `);
\ No newline at end of file
diff --git a/packages/example-reactions/lib/modules/index.js b/packages/example-reactions/lib/modules/index.js
index 69311b228..b982a0a57 100644
--- a/packages/example-reactions/lib/modules/index.js
+++ b/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';
diff --git a/packages/example-reactions/lib/modules/routes.js b/packages/example-reactions/lib/modules/routes.js
index b45a20b82..1bb2752e8 100644
--- a/packages/example-reactions/lib/modules/routes.js
+++ b/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' });