Merge branch 'master' into pre-responsive-admin-cleanup

client/coral-admin/src/components/FlagBox.js

@@ -61,9 +61,11 @@ class FlagBox extends Component {
                       <ul>
                         {actionList.map((action, j) =>
                           <li key={`${i}_${j}`} className={styles.subDetail}>
-                            <a className={styles.username} onClick={() => viewUserDetail(action.user.id)}>
-                              {action.user.username}
-                            </a>
+                            {action.user &&
+                              <a className={styles.username} onClick={() => viewUserDetail(action.user.id)}>
+                                {action.user.username}
+                              </a>
+                            }
                             {action.message}
                           </li>
                         )}

client/coral-admin/src/components/LoadMore.css

@@ -0,0 +1,21 @@
+.loadMoreContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.loadMore {
+  width: 100%;
+  text-align: center;
+  color: #FFF;
+  max-width: 660px;
+  margin-bottom: 30px;
+  background-color: #2376D8;
+  cursor: pointer;
+}
+
+.loadMore:hover {
+  background-color: #4399FF;
+}
+
+

client/coral-admin/src/components/LoadMore.js

@@ -0,0 +1,22 @@
+import React, {PropTypes} from 'react';
+import {Button} from 'coral-ui';
+import styles from './LoadMore.css';
+import cn from 'classnames';
+
+const LoadMore = ({loadMore, showLoadMore, className, ...rest}) =>
+  <div {...rest} className={cn(className, styles.loadMoreContainer)}>
+    {
+      showLoadMore && <Button
+        className={styles.loadMore}
+        onClick={loadMore}>
+        Load More
+      </Button>
+    }
+  </div>;
+
+LoadMore.propTypes = {
+  loadMore: PropTypes.func.isRequired,
+  showLoadMore: PropTypes.bool.isRequired
+};
+
+export default LoadMore;

client/coral-admin/src/components/UserDetail.css

@@ -79,3 +79,12 @@
     margin-left: -10px;
   }
 }
+
+.loadMore > button {
+  background-color: #696969;
+
+  &:hover {
+    background-color: #404040;
+    color: white;
+  }
+}

client/coral-admin/src/components/UserDetail.js

@@ -6,6 +6,7 @@ import {Slot} from 'coral-framework/components';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import {actionsMap} from '../utils/moderationQueueActionsMap';
 import ClickOutside from 'coral-framework/components/ClickOutside';
+import LoadMore from '../components/LoadMore';
 
 export default class UserDetail extends React.Component {
 
@@ -59,7 +60,7 @@ export default class UserDetail extends React.Component {
         user,
         totalComments,
         rejectedComments,
-        comments: {nodes}
+        comments: {nodes, hasNextPage}
       },
       activeTab,
       selectedCommentIds,
@@ -70,6 +71,7 @@ export default class UserDetail extends React.Component {
       bulkReject,
       hideUserDetail,
       viewUserDetail,
+      loadMore,
     } = this.props;
 
     const localProfile = user.profiles.find((p) => p.provider === 'local');
@@ -167,6 +169,11 @@ export default class UserDetail extends React.Component {
               })
             }
           </div>
+          <LoadMore
+            className={styles.loadMore}
+            loadMore={loadMore}
+            showLoadMore={hasNextPage}
+            />
         </Drawer>
       </ClickOutside>
     );

client/coral-admin/src/components/UserDetailComment.css

@@ -8,6 +8,10 @@
   min-height: 0;
 }
 
+.root:last-child {
+  border: 0;
+}
+
 .rootSelected {
   background-color: #ecf4ff;
 }