Fix merge conflict

plugins/talk-plugin-auth/client/components/ChangeUsername.js

@@ -13,7 +13,7 @@ import {
   invalidForm,
   validForm,
   createUsername
-} from 'coral-framework/actions/auth';
+} from 'coral-embed-stream/src/actions/auth';
 
 class ChangeUsernameContainer extends React.Component {
   constructor(props) {

plugins/talk-plugin-auth/client/components/FakeComment.css

@@ -6,10 +6,6 @@
   position: relative;
 }
 
-.body {
-
-}
-
 .footer {
   display: flex;
   justify-content: space-between;
@@ -35,3 +31,8 @@
   padding: 0 2px 0 5px;
   vertical-align: middle;
 }
+
+.authorName {
+  margin-right: 5px;
+  font-weight: bold;
+}

plugins/talk-plugin-auth/client/components/FakeComment.js

@@ -2,13 +2,14 @@ import React from 'react';
 import t from 'coral-framework/services/i18n';
 import {ReplyButton} from 'talk-plugin-replies';
 import PubDate from 'talk-plugin-pubdate/PubDate';
-import AuthorName from 'talk-plugin-author-name/AuthorName';
 import styles from './FakeComment.css';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
 export const FakeComment = ({username, created_at, body}) => (
   <div className={styles.root}>
-    <AuthorName author={{username}} />
+    <span className={styles.authorName}>
+      {username}
+    </span>
     <PubDate created_at={created_at} />
     <div className={styles.body}>
       {body}

plugins/talk-plugin-auth/client/components/ForgotContent.js

@@ -39,13 +39,13 @@ class ForgotContent extends React.Component {
           </Button>
           {passwordRequestSuccess
             ? <p className={styles.passwordRequestSuccess}>
-                {passwordRequestSuccess}
-              </p>
+              {passwordRequestSuccess}
+            </p>
             : null}
           {passwordRequestFailure
             ? <p className={styles.passwordRequestFailure}>
-                {passwordRequestFailure}
-              </p>
+              {passwordRequestFailure}
+            </p>
             : null}
         </form>
         <div className={styles.footer}>

plugins/talk-plugin-auth/client/components/SignInButton.js

@@ -2,15 +2,15 @@ import React from 'react';
 import {Button} from 'plugin-api/beta/client/components/ui';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {showSignInDialog} from 'coral-framework/actions/auth';
+import {showSignInDialog} from 'coral-embed-stream/src/actions/auth';
 import t from 'coral-framework/services/i18n';
 
 const SignInButton = ({loggedIn, showSignInDialog}) => (
   <div className="talk-stream-auth-sign-in-button">
     {!loggedIn
       ? <Button id="coralSignInButton" onClick={showSignInDialog} full>
-          {t('sign_in.sign_in_to_comment')}
-        </Button>
+        {t('sign_in.sign_in_to_comment')}
+      </Button>
       : null}
   </div>
 );

plugins/talk-plugin-auth/client/components/SignInContainer.js

@@ -18,7 +18,7 @@ import {
   facebookCallback,
   invalidForm,
   validForm,
-} from 'coral-framework/actions/auth';
+} from 'coral-embed-stream/src/actions/auth';
 
 class SignInContainer extends React.Component {
   constructor(props) {
@@ -97,6 +97,9 @@ class SignInContainer extends React.Component {
           // allow success UI to be shown for a second, and then close the modal
           this.props.hideSignInDialog();
         }, 2500);
+      })
+      .catch((err) => {
+        console.error(err);
       });
   };
 

plugins/talk-plugin-auth/client/components/SignInContent.js

@@ -28,63 +28,63 @@ const SignInContent = ({
       {auth.error && <Alert>{auth.error}</Alert>}
       {auth.emailVerificationFailure
         ? <form onSubmit={handleResendVerification}>
-            <p>{t('sign_in.request_new_verify_email')}</p>
+          <p>{t('sign_in.request_new_verify_email')}</p>
+          <TextField
+            id="confirm-email"
+            type="email"
+            label={t('sign_in.email')}
+            value={emailToBeResent}
+            onChange={handleChangeEmail}
+          />
+          <Button id="resendConfirmEmail" type="submit" cStyle="black" full>
+              Send Email
+          </Button>
+          {emailVerificationLoading && <Spinner />}
+          {emailVerificationSuccess && <Success />}
+        </form>
+        : <div>
+          <div className={`${styles.socialConnections} social-connections`}>
+            <Button cStyle="facebook" onClick={fetchSignInFacebook} full>
+              {t('sign_in.facebook_sign_in')}
+            </Button>
+          </div>
+          <div className={styles.separator}>
+            <h1>
+              {t('sign_in.or')}
+            </h1>
+          </div>
+          <form onSubmit={handleSignIn}>
             <TextField
-              id="confirm-email"
+              id="email"
               type="email"
               label={t('sign_in.email')}
-              value={emailToBeResent}
-              onChange={handleChangeEmail}
+              value={formData.email}
+              style={{fontSize: 16}}
+              onChange={handleChange}
             />
-            <Button id="resendConfirmEmail" type="submit" cStyle="black" full>
-              Send Email
-            </Button>
-            {emailVerificationLoading && <Spinner />}
-            {emailVerificationSuccess && <Success />}
+            <TextField
+              id="password"
+              type="password"
+              label={t('sign_in.password')}
+              value={formData.password}
+              style={{fontSize: 16}}
+              onChange={handleChange}
+            />
+            <div className={styles.action}>
+              {!auth.isLoading
+                ? <Button
+                  id="coralLogInButton"
+                  type="submit"
+                  cStyle="black"
+                  className={styles.signInButton}
+                  full
+                >
+                  {t('sign_in.sign_in')}
+                </Button>
+                : <Spinner />}
+            </div>
           </form>
-        : <div>
-            <div className={`${styles.socialConnections} social-connections`}>
-              <Button cStyle="facebook" onClick={fetchSignInFacebook} full>
-                {t('sign_in.facebook_sign_in')}
-              </Button>
-            </div>
-            <div className={styles.separator}>
-              <h1>
-                {t('sign_in.or')}
-              </h1>
-            </div>
-            <form onSubmit={handleSignIn}>
-              <TextField
-                id="email"
-                type="email"
-                label={t('sign_in.email')}
-                value={formData.email}
-                style={{fontSize: 16}}
-                onChange={handleChange}
-              />
-              <TextField
-                id="password"
-                type="password"
-                label={t('sign_in.password')}
-                value={formData.password}
-                style={{fontSize: 16}}
-                onChange={handleChange}
-              />
-              <div className={styles.action}>
-                {!auth.isLoading
-                  ? <Button
-                      id="coralLogInButton"
-                      type="submit"
-                      cStyle="black"
-                      className={styles.signInButton}
-                      full
-                    >
-                      {t('sign_in.sign_in')}
-                    </Button>
-                  : <Spinner />}
-              </div>
-            </form>
-          </div>}
+        </div>}
       <div className={`${styles.footer} footer`}>
         <span>
           <a onClick={() => changeView('FORGOT')}>

plugins/talk-plugin-auth/client/components/UserBox.js

@@ -3,7 +3,7 @@ import styles from './styles.css';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import t from 'coral-framework/services/i18n';
-import {logout} from 'coral-framework/actions/auth';
+import {logout} from 'coral-embed-stream/src/actions/auth';
 
 const UserBox = ({loggedIn, user, logout, onShowProfile}) => (
   <div>

plugins/talk-plugin-featured-comments/client/components/Comment.css

@@ -64,4 +64,4 @@
 
 .actionsContainer {
   text-align: right;
-}
+}

plugins/talk-plugin-featured-comments/client/components/Comment.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Comment.css';
 import {t, timeago} from 'plugin-api/beta/client/services';
-import {Slot} from 'plugin-api/beta/client/components';
+import {Slot, CommentAuthorName} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 import {pluginName} from '../../package.json';
 
@@ -22,9 +22,16 @@ class Comment extends React.Component {
         </blockquote>
 
         <div className={cn(`${pluginName}-comment-username-box`)}>
-          <strong className={cn(styles.username, `${pluginName}-comment-username`)}>
-            {comment.user.username}
-          </strong>
+
+          <Slot
+            className={cn(styles.username, `${pluginName}-comment-username`)}
+            fill="commentAuthorName"
+            defaultComponent={CommentAuthorName}
+            queryData={{comment, asset, root}}
+            data={data}
+            inline
+          />
+
           <span className={cn(styles.timeago, `${pluginName}-comment-timeago`)}>
             ,{' '}{timeago(comment.created_at)}
           </span>

plugins/talk-plugin-featured-comments/client/components/ModTag.js

@@ -44,15 +44,15 @@ export default class ModTag extends React.Component {
 
     return alreadyTagged ? (
       <span className={cn(styles.tag, styles.featured)}
-            onClick={deleteTag}
-            onMouseEnter={this.handleMouseEnter}
-            onMouseLeave={this.handleMouseLeave} >
+        onClick={deleteTag}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave} >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
         {!this.state.on ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.un_feature')}
       </span>
     ) : (
       <span className={cn(styles.tag, {[styles.featured]: alreadyTagged})}
-            onClick={this.postTag} >
+        onClick={this.postTag} >
         <Icon name="star_outline" className={cn(styles.tagIcon)} />
         {alreadyTagged ? t('talk-plugin-featured-comments.featured') : t('talk-plugin-featured-comments.feature')}
       </span>

plugins/talk-plugin-featured-comments/client/components/Tag.js

@@ -33,16 +33,16 @@ export default class Tag extends React.Component {
     const {tooltip} = this.state;
     return(
       <div className={styles.noSelect} onMouseEnter={this.showTooltip}
-          onMouseLeave={this.hideTooltip} onTouchStart={this.showTooltip}
-          onTouchEnd={this.hideTooltip}>
-          {
-            isTagged(this.props.comment.tags, 'FEATURED') ? (
-              <span 
-                className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip})}>
-                {t('talk-plugin-featured-comments.featured')}
-              </span>
-            ) : null
-          }
+        onMouseLeave={this.hideTooltip} onTouchStart={this.showTooltip}
+        onTouchEnd={this.hideTooltip}>
+        {
+          isTagged(this.props.comment.tags, 'FEATURED') ? (
+            <span 
+              className={cn(styles.tag, styles.noSelect, {[styles.on]: tooltip})}>
+              {t('talk-plugin-featured-comments.featured')}
+            </span>
+          ) : null
+        }
         {tooltip && <Tooltip className={styles.tooltip} />}
       </div>
     );

plugins/talk-plugin-featured-comments/client/containers/Comment.js

@@ -5,6 +5,7 @@ import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
 
 const slots = [
   'commentReactions',
+  'commentAuthorName',
 ];
 
 export default withFragments({

plugins/talk-plugin-featured-comments/client/containers/ModSubscription.js

@@ -21,14 +21,14 @@ class ModSubscription extends React.Component {
           assetId: this.props.data.variables.asset_id,
         },
         updateQuery: (prev, {subscriptionData: {data: {commentFeatured: {user, comment}}}}) => {
-          const notify = this.props.user.id === user.id
+          const notifyText = this.props.user.id === user.id
             ? ''
             : t(
               'talk-plugin-featured-comments.notify_featured',
               user.username,
               prepareNotificationText(comment.body),
             );
-          return this.props.handleCommentChange(prev, comment, notify);
+          return this.props.handleCommentChange(prev, comment, notifyText);
         },
       },
       {

plugins/talk-plugin-featured-comments/client/containers/Tab.js

@@ -17,7 +17,7 @@ const enhance = compose(
   withFragments({
     asset: gql`
       fragment TalkFeaturedComments_Tab_asset on Asset {
-          featuredCommentsCount: totalCommentCount(tags: ["FEATURED"], excludeIgnored: $excludeIgnored) @skip(if: $hasComment)
+          featuredCommentsCount: totalCommentCount(tags: ["FEATURED"]) @skip(if: $hasComment)
       }`,
   }),
   excludeIf((props) => props.asset.featuredCommentsCount === 0),

plugins/talk-plugin-featured-comments/client/containers/TabPane.js

@@ -6,7 +6,7 @@ import {withFragments, connect} from 'plugin-api/beta/client/hocs';
 import Comment from '../containers/Comment';
 import {addNotification} from 'plugin-api/beta/client/actions/notification';
 import {viewComment} from 'coral-embed-stream/src/actions/stream';
-import {insertCommentsSorted, getDefinitionName} from 'plugin-api/beta/client/utils';
+import {appendNewNodes, getDefinitionName} from 'plugin-api/beta/client/utils';
 import update from 'immutability-helper';
 
 class TabPaneContainer extends React.Component {
@@ -18,7 +18,8 @@ class TabPaneContainer extends React.Component {
         limit: 5,
         cursor: this.props.asset.featuredComments.endCursor,
         asset_id: this.props.asset.id,
-        sort: 'REVERSE_CHRONOLOGICAL',
+        sortOrder: this.props.data.variables.sortOrder,
+        sortBy: this.props.data.variables.sortBy,
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
       updateQuery: (previous, {fetchMoreResult:{comments}}) => {
@@ -26,7 +27,7 @@ class TabPaneContainer extends React.Component {
           asset: {
             featuredComments: {
               nodes: {
-                $apply: (nodes) => insertCommentsSorted(nodes, comments.nodes, 'REVERSE_CHRONOLOGICAL'),
+                $apply: (nodes) => appendNewNodes(nodes, comments.nodes),
               },
               hasNextPage: {$set: comments.hasNextPage},
               endCursor: {$set: comments.endCursor},
@@ -47,8 +48,25 @@ class TabPaneContainer extends React.Component {
 }
 
 const LOAD_MORE_QUERY = gql`
-  query TalkFeaturedComments_LoadMoreComments($limit: Int = 5, $cursor: Date, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) {
-    comments(query: {limit: $limit, cursor: $cursor, tags: ["FEATURED"], asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) {
+  query TalkFeaturedComments_LoadMoreComments(
+    $limit: Int = 5
+    $cursor: Cursor
+    $asset_id: ID
+    $sortOrder: SORT_ORDER
+    $sortBy: SORT_COMMENTS_BY
+    $excludeIgnored: Boolean
+  ) {
+    comments(
+      query: {
+        limit: $limit
+        cursor: $cursor
+        tags: ["FEATURED"]
+        asset_id: $asset_id,
+        sortOrder: $sortOrder
+        sortBy: $sortBy
+        excludeIgnored: $excludeIgnored
+      }
+    ) {
       nodes {
         ...${getDefinitionName(Comment.fragments.comment)}
       }
@@ -79,7 +97,14 @@ const enhance = compose(
     asset: gql`
       fragment TalkFeaturedComments_TabPane_asset on Asset {
         id
-        featuredComments: comments(tags: ["FEATURED"], excludeIgnored: $excludeIgnored, deep: true) @skip(if: $hasComment) {
+        featuredComments: comments(
+          query: {
+            tags: ["FEATURED"]
+            sortOrder: $sortOrder
+            sortBy: $sortBy
+          }
+          deep: true
+        ) @skip(if: $hasComment) {
           nodes {
             ...${getDefinitionName(Comment.fragments.comment)}
           }

plugins/talk-plugin-featured-comments/client/index.js

@@ -9,7 +9,7 @@ import ModTag from './containers/ModTag';
 import ModSubscription from './containers/ModSubscription';
 
 import {findCommentInEmbedQuery} from 'coral-embed-stream/src/graphql/utils';
-import {insertCommentsSorted} from 'plugin-api/beta/client/utils';
+import {prependNewNodes} from 'plugin-api/beta/client/utils';
 
 export default {
   reducer,
@@ -60,7 +60,7 @@ export default {
             asset: {
               featuredComments: {
                 nodes: {
-                  $apply: (nodes) => insertCommentsSorted(nodes, comment, 'REVERSE_CHRONOLOGICAL')
+                  $apply: (nodes) => prependNewNodes(nodes, [comment]),
                 }
               },
               featuredCommentsCount: {

plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.css

@@ -0,0 +1,8 @@
+.offTopic {
+  height: 100%;
+}
+
+.offTopicLabel {
+  padding: 10px 20px;
+  display: block;
+}

plugins/talk-plugin-offtopic/client/components/OffTopicCheckbox.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicCheckbox.css';
 
 import {t} from 'plugin-api/beta/client/services';
 

plugins/talk-plugin-offtopic/client/components/OffTopicFilter.css

@@ -0,0 +1,20 @@
+.label {
+  display: block;
+  cursor: pointer;
+  width: 100%;
+  padding: 6px 16px 6px 10px;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+}
+
+.input {
+  cursor: pointer;
+  margin-right: 6px;
+}
+
+:global(.talk-plugin-off-topic-comment) {
+  display: none;
+}

plugins/talk-plugin-offtopic/client/components/OffTopicFilter.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicFilter.css';
 
 export default class OffTopicFilter extends React.Component {
 
@@ -20,12 +20,15 @@ export default class OffTopicFilter extends React.Component {
 
   render() {
     return (
-      <div className={styles.viewingOption}>
-        <label>
-          <input type="checkbox" onChange={this.handleChange} checked={this.props.checked} />
-          Hide Off-Topic Comments
-        </label>
-      </div>
+      <label className={styles.label}>
+        <input
+          type="checkbox"
+          onChange={this.handleChange}
+          checked={this.props.checked}
+          className={styles.input}
+        />
+        Hide Off-Topic Comments
+      </label>
     );
   }
 }

plugins/talk-plugin-offtopic/client/components/OffTopicTag.css

@@ -0,0 +1,10 @@
+.tag {
+  background: #D2D7D3;
+  font-size: 12px;
+  font-weight: bold;
+  color: #4A4A4A;
+  display: inline-block;
+  margin: 0px 5px;
+  padding: 5px 5px;
+  border-radius: 2px;
+}

plugins/talk-plugin-offtopic/client/components/OffTopicTag.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles.css';
+import styles from './OffTopicTag.css';
 import {t} from 'plugin-api/beta/client/services';
 import {isTagged} from 'plugin-api/beta/client/utils';
 

plugins/talk-plugin-offtopic/client/components/styles.css

@@ -1,27 +0,0 @@
-.offTopic {
-  height: 100%;
-}
-
-.offTopicLabel {
-  padding: 10px 20px;
-  display: block;
-}
-
-.tag {
-  background: #D2D7D3;
-  font-size: 12px;
-  font-weight: bold;
-  color: #4A4A4A;
-  display: inline-block;
-  margin: 0px 5px;
-  padding: 5px 5px;
-  border-radius: 2px;
-}
-
-.viewingOption {
-  padding: 5px 0;
-}
-
-:global(.talk-plugin-off-topic-comment) {
-  display: none;
-}

plugins/talk-plugin-offtopic/client/index.js

@@ -6,7 +6,7 @@ import reducer from './reducer';
 
 /**
  * talk-plugin-offtopic depends on talk-plugin-viewing-options
- * in other to display filter and use the streamViewingOptions slot
+ * in other to display filter.
  */
 
 export default {
@@ -15,6 +15,6 @@ export default {
   slots: {
     commentInputDetailArea: [OffTopicCheckbox],
     commentInfoBar: [OffTopicTag],
-    viewingOptions: [OffTopicFilter]
+    viewingOptionsFilter: [OffTopicFilter]
   }
 };

plugins/talk-plugin-permalink/client/components/PermalinkButton.js

@@ -73,7 +73,7 @@ export default class PermalinkButton extends React.Component {
             ref={(ref) => this.linkButton = ref}
             onClick={this.toggle}
             className={cn(`${name}-button`, styles.button)}>
-              {t('permalink')}
+            {t('permalink')}
             <Icon name="link" className={styles.icon}/>
           </button>
 

plugins/talk-plugin-sort-most-liked/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-sort-most-liked/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-sort-most-liked/client/index.js

@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-liked.label'),
+  {sortBy: 'LIKES', sortOrder: 'DESC'},
+);
+
+/**
+ * This plugin depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};

plugins/talk-plugin-sort-most-liked/client/translations.yml

@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-most-liked:
+    label: Most liked first
+es:
+  talk-plugin-sort-most-liked:

plugins/talk-plugin-sort-most-liked/index.js

@@ -0,0 +1,2 @@
+module.exports = {
+};

plugins/talk-plugin-sort-most-loved/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-sort-most-loved/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-sort-most-loved/client/index.js

@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-loved.label'),
+  {sortBy: 'LOVES', sortOrder: 'DESC'},
+);
+
+/**
+ * This plugin depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};

plugins/talk-plugin-sort-most-loved/client/translations.yml

@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-most-loved:
+    label: Most loved first
+es:
+  talk-plugin-sort-most-loved:

plugins/talk-plugin-sort-most-loved/index.js

@@ -0,0 +1,2 @@
+module.exports = {
+};

plugins/talk-plugin-sort-most-replied/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-sort-most-replied/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-sort-most-replied/client/index.js

@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-replied.label'),
+  {sortBy: 'REPLIES', sortOrder: 'DESC'},
+);
+
+/**
+ * This plugin depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};

plugins/talk-plugin-sort-most-replied/client/translations.yml

@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-most-replied:
+    label: Most replied first
+es:
+  talk-plugin-sort-most-replied:

plugins/talk-plugin-sort-most-replied/index.js

@@ -0,0 +1,2 @@
+module.exports = {
+};

plugins/talk-plugin-sort-most-respected/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-sort-most-respected/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-sort-most-respected/client/index.js

@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-most-respected.label'),
+  {sortBy: 'RESPECTS', sortOrder: 'DESC'},
+);
+
+/**
+ * This plugin depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};

plugins/talk-plugin-sort-most-respected/client/translations.yml

@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-most-respected:
+    label: Most respected first
+es:
+  talk-plugin-sort-most-respected:

plugins/talk-plugin-sort-most-respected/index.js

@@ -0,0 +1,2 @@
+module.exports = {
+};

plugins/talk-plugin-sort-newest/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-sort-newest/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-sort-newest/client/index.js

@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-newest.label'),
+  {sortBy: 'CREATED_AT', sortOrder: 'DESC'},
+);
+
+/**
+ * This plugin depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};

plugins/talk-plugin-sort-newest/client/translations.yml

@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-newest:
+    label: Newest first
+es:
+  talk-plugin-sort-newest:

plugins/talk-plugin-sort-newest/index.js

@@ -0,0 +1,2 @@
+module.exports = {
+};

plugins/talk-plugin-sort-oldest/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/talk-plugin-sort-oldest/client/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}

plugins/talk-plugin-sort-oldest/client/index.js

@@ -0,0 +1,19 @@
+import translations from './translations.yml';
+import {createSortOption} from 'plugin-api/beta/client/factories';
+import {t} from 'plugin-api/beta/client/services';
+
+const SortOption = createSortOption(
+  () => t('talk-plugin-sort-oldest.label'),
+  {sortBy: 'CREATED_AT', sortOrder: 'ASC'},
+);
+
+/**
+ * This plugin depends on talk-plugin-viewing-options.
+ */
+
+export default {
+  translations,
+  slots: {
+    viewingOptionsSort: [SortOption]
+  }
+};

plugins/talk-plugin-sort-oldest/client/translations.yml

@@ -0,0 +1,5 @@
+en:
+  talk-plugin-sort-oldest:
+    label: Oldest first
+es:
+  talk-plugin-sort-oldest:

plugins/talk-plugin-sort-oldest/index.js

@@ -0,0 +1,2 @@
+module.exports = {
+};

plugins/talk-plugin-viewing-options/client/components/Category.css

@@ -0,0 +1,22 @@
+.root {
+  padding-bottom: 12px;
+
+  &:not(:first-child) {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+  }
+}
+
+.title {
+  font-weight: bold;
+  padding: 12px 8px 4px 8px;
+}
+
+.list {
+  padding: 0;
+  margin: 0;
+}
+
+.listItem {
+  list-style: none;
+  white-space: nowrap;
+}

plugins/talk-plugin-viewing-options/client/components/Category.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './Category.css';
+import {Slot, IfSlotIsNotEmpty} from 'plugin-api/beta/client/components';
+
+const childFactory = (child) => <li className={styles.listItem} key={child.key}>{child}</li>;
+
+const ViewingOptions = ({slot, title, data, asset, root}) => {
+  return (
+    <IfSlotIsNotEmpty slot={slot} className={styles.root}>
+      <div className={styles.title}>{title}</div>
+      <Slot
+        fill={slot}
+        childFactory={childFactory}
+        className={styles.list}
+        component={'ul'}
+        data={data}
+        queryData={{asset, root}}
+      />
+    </IfSlotIsNotEmpty>
+  );
+};
+
+export default ViewingOptions;

plugins/talk-plugin-viewing-options/client/components/Menu.css

@@ -0,0 +1,11 @@
+.menu {
+  background: white;
+  position: absolute;
+  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
+  right: 0px;
+  top: 20px;
+  z-index: 10;
+  min-height: 32px;
+  min-width: 64px;
+}
+

plugins/talk-plugin-viewing-options/client/components/Menu.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './Menu.css';
+import {capitalize} from 'plugin-api/beta/client/utils';
+import Category from './Category';
+import {t} from 'plugin-api/beta/client/services';
+
+class Menu extends React.Component {
+  categories = {
+    sort: t('talk-plugin-viewing-options.sort'),
+    filter: t('talk-plugin-viewing-options.filter'),
+  };
+
+  render() {
+    return (
+      <div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
+        {
+          Object.keys(this.categories).map((category) =>
+            <Category
+              key={category}
+              slot={`viewingOptions${capitalize(category)}`}
+              title={this.categories[category]}
+            />
+          )
+        }
+      </div>
+    );
+  }
+}
+
+export default Menu;

plugins/talk-plugin-viewing-options/client/components/ViewingOptions.css

@@ -9,27 +9,7 @@
   cursor: pointer;
 }
 
-.list {
-  background: white;
-  position: absolute;
-  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
-  right: 0px;
-  top: 20px;
-  z-index: 10;
-}
-
-.list > ul, .list > ul > li {
-  padding: 0;
-  margin: 0;
-}
-
-.list > ul > li {
-  padding: 10px;
-  list-style: none;
-  white-space: nowrap;
-}
-
-.icon {
+.arrowIcon {
   font-size: 14px;
   vertical-align: middle;
 }
@@ -37,20 +17,20 @@
 
 @custom-media --small-viewport (max-width: 425px);
 
-.filterText {
+.label {
   display: inline-block;
 }
 
-.filterIcon {
+.icon {
   vertical-align: middle;
   display: none;
 }
 
 @media (--small-viewport) {
-  .filterText {
+  .label {
     display: none;
   }
-  .filterIcon {
+  .icon {
     display: inline-block;
   }
 }

plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js

@@ -3,51 +3,47 @@ import cn from 'classnames';
 import styles from './ViewingOptions.css';
 import {t} from 'plugin-api/beta/client/services';
 import {Icon} from 'plugin-api/beta/client/components/ui';
-import {Slot, ClickOutside} from 'plugin-api/beta/client/components';
+import {ClickOutside} from 'plugin-api/beta/client/components';
+import Menu from './Menu';
 
-const ViewingOptions = (props) => {
-  const toggleOpen = () => {
-    if (!props.open) {
-      props.openMenu();
+class ViewingOptions extends React.Component {
+
+  toggleOpen = () => {
+    const {open, openMenu, closeMenu} = this.props;
+    if (!open) {
+      openMenu();
     } else {
-      props.closeMenu();
+      closeMenu();
     }
   };
 
-  const handleClickOutside = () => {
-    if (props.open) {
-      props.closeMenu();
+  handleClickOutside = () => {
+    const {open, closeMenu} = this.props;
+    if (open) {
+      closeMenu();
     }
   };
 
-  return (
-    <ClickOutside onClickOutside={handleClickOutside}>
-      <div className={cn([styles.root, 'talk-plugin-viewing-options'])}>
-        <div>
-          <button className={styles.button} onClick={toggleOpen}>
-            <Icon className={styles.filterIcon} name="filter_list" />
-            <span className={styles.filterText}>{t('talk-plugin-viewing-options.viewing_options')}</span> 
-            {props.open ? <Icon name="arrow_drop_up" className={styles.icon}/> : <Icon name="arrow_drop_down" className={styles.icon}/>}
-          </button>
+  render() {
+    const {open, data, root, asset} = this.props;
+    return (
+      <ClickOutside onClickOutside={this.handleClickOutside}>
+        <div className={cn([styles.root, 'talk-plugin-viewing-options'])}>
+          <div>
+            <button className={styles.button} onClick={this.toggleOpen}>
+              <Icon className={styles.icon} name="filter_list" />
+              <span className={styles.label}>{t('talk-plugin-viewing-options.viewing_options')}</span>
+              {open
+                ? <Icon name="arrow_drop_up" className={styles.arrowIcon}/>
+                : <Icon name="arrow_drop_down" className={styles.arrowIcon}/>
+              }
+            </button>
+          </div>
+          {open && <Menu data={data} root={root} asset={asset} />}
         </div>
-        {
-          props.open ? (
-            <div className={cn([styles.list, 'talk-plugin-viewing-options-list'])}>
-              <ul>
-                {
-                  React.Children.map(<Slot fill="viewingOptions" />, (component) => {
-                    return React.createElement('li', {
-                      className: 'talk-plugin-viewing-options-item'
-                    }, component);
-                  })
-                }
-              </ul>
-            </div>
-          ) : null
-        }
-      </div>
-    </ClickOutside>
-  );
-};
+      </ClickOutside>
+    );
+  }
+}
 
 export default ViewingOptions;

plugins/talk-plugin-viewing-options/client/containers/ViewingOptions.js

@@ -1,7 +1,14 @@
-import {connect} from 'plugin-api/beta/client/hocs';
+import {connect, withFragments} from 'plugin-api/beta/client/hocs';
 import {bindActionCreators} from 'redux';
 import ViewingOptions from '../components/ViewingOptions';
 import {openMenu, closeMenu} from '../actions';
+import {compose, gql} from 'react-apollo';
+import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
+
+const slots = [
+  'viewingOptionsSort',
+  'viewingOptionsFilter',
+];
 
 const mapStateToProps = ({talkPluginViewingOptions: state}) => ({
   open: state.open
@@ -10,4 +17,22 @@ const mapStateToProps = ({talkPluginViewingOptions: state}) => ({
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({openMenu, closeMenu}, dispatch);
 
-export default connect(mapStateToProps, mapDispatchToProps)(ViewingOptions);
+const withViewingOptionsFragments = withFragments({
+  root: gql`
+    fragment TalkViewingOptions_ViewingOptions_root on RootQuery {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }`,
+  asset: gql`
+    fragment TalkViewingOptions_ViewingOptions_asset on Asset {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'asset')}
+    }`,
+});
+
+const enhance = compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withViewingOptionsFragments,
+);
+
+export default enhance(ViewingOptions);

plugins/talk-plugin-viewing-options/client/translations.yml

@@ -1,6 +1,8 @@
 en:
   talk-plugin-viewing-options:
     viewing_options: "Viewing Options"
+    sort: Sorting
+    filter: Filtering
 es:
   talk-plugin-viewing-options:
     viewing_options: "Opciones de visualización"