Adds menu for Community. Rename community to people. Adds account flagged tabs.

client/coral-admin/src/AppRouter.js

@@ -5,10 +5,13 @@ import Streams from 'containers/Streams/Streams';
 import Configure from 'containers/Configure/Configure';
 import LayoutContainer from 'containers/LayoutContainer';
 import InstallContainer from 'containers/Install/InstallContainer';
+
+import CommunityLayout from 'containers/Community/CommunityLayout';
 import CommunityContainer from 'containers/Community/CommunityContainer';
 
 import ModerationLayout from 'containers/ModerationQueue/ModerationLayout';
 import ModerationContainer from 'containers/ModerationQueue/ModerationContainer';
+
 import Dashboard from 'containers/Dashboard/Dashboard';
 
 const routes = (
@@ -16,11 +19,23 @@ const routes = (
     <Route exact path="/admin/install" component={InstallContainer}/>
     <Route path='/admin' component={LayoutContainer}>
       <IndexRoute component={ModerationContainer} />
-      <Route path='community' component={CommunityContainer} />
+
       <Route path='configure' component={Configure} />
       <Route path='streams' component={Streams} />
       <Route path='dashboard' component={Dashboard} />
 
+      {/* Community Routes */}
+
+      <Route path='community' component={CommunityLayout}>
+        <Route path='flagged' components={CommunityContainer}>
+          <Route path=':id' components={CommunityContainer} />
+        </Route>
+        <Route path='people' components={CommunityContainer}>
+          <Route path=':id' components={CommunityContainer} />
+        </Route>
+        <IndexRedirect to='flagged' />
+      </Route>
+
       {/* Moderation Routes */}
 
       <Route path='moderate' component={ModerationLayout}>

client/coral-admin/src/containers/Community/CommunityContainer.js

@@ -6,7 +6,10 @@ import {
   newPage,
 } from '../../actions/community';
 
-import Community from './Community';
+import CommunityMenu from './components/CommunityMenu';
+
+import People from './People';
+import FlaggedAccounts from './FlaggedAccounts';
 
 class CommunityContainer extends Component {
   constructor(props) {
@@ -60,19 +63,41 @@ class CommunityContainer extends Component {
     this.search({page});
   }
 
-  render() {
-    const {searchValue} = this.state;
+  getTabContent(searchValue) {
     const {community} = this.props;
+    const activeTab = this.props.route.path === ':id' ? 'flagged' : this.props.route.path;
+
+    if (activeTab === 'people') {
+      return (
+        <People
+          searchValue={searchValue}
+          commenters={community.commenters}
+          isFetching={community.isFetching}
+          error={community.error}
+          totalPages={community.totalPages}
+          page={community.page}
+          {...this}
+        />
+      );
+    }
+
     return (
-      <Community
-        searchValue={searchValue}
-        commenters={community.commenters}
-        isFetching={community.isFetching}
-        error={community.error}
-        totalPages={community.totalPages}
-        page={community.page}
-        {...this}
-      />
+      <FlaggedAccounts />
+    );
+  }
+
+  render() {
+    const {searchValue, activeTab} = this.state;
+
+    const tab = this.getTabContent(activeTab, searchValue, this.props);
+
+    return (
+      <div>
+        <CommunityMenu />
+        <div>
+          { tab }
+        </div>
+      </div>
     );
   }
 }

client/coral-admin/src/containers/Community/CommunityLayout.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CommunityLayout = props => (
+  <div>
+    {props.children}
+  </div>
+);
+
+export default CommunityLayout;

client/coral-admin/src/containers/Community/FlaggedAccounts.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+// import I18n from 'coral-framework/modules/i18n/i18n';
+// import translations from 'coral-admin/src/translations.json';
+
+import styles from './Community.css';
+
+// import EmptyCard from '../../components/EmptyCard';
+// const lang = new I18n(translations);
+
+const FlaggedAccounts = () => {
+  return (
+    <div className={styles.container}>
+      Flagged Accounts
+    </div>
+  );
+};
+
+export default FlaggedAccounts;

client/coral-admin/src/containers/Community/People.js

@@ -29,7 +29,7 @@ const tableHeaders = [
   }
 ];
 
-const Community = ({isFetching, commenters, ...props}) => {
+const People = ({isFetching, commenters, ...props}) => {
   const hasResults = !isFetching && !!commenters.length;
   return (
     <div className={styles.container}>
@@ -73,4 +73,4 @@ const Community = ({isFetching, commenters, ...props}) => {
   );
 };
 
-export default Community;
+export default People;

client/coral-admin/src/containers/Community/components/CommunityMenu.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import styles from './styles.css';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations.json';
+
+import {Link} from 'react-router';
+
+const lang = new I18n(translations);
+
+const CommunityMenu = () => {
+  const flaggedPath = '/admin/community/flagged';
+  const peoplePath = '/admin/community/people';
+  return (
+    <div className='mdl-tabs'>
+      <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
+        <div>
+          <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+            {lang.t('community.flaggedaccounts')}
+          </Link>
+          <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+            {lang.t('community.people')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CommunityMenu;

client/coral-admin/src/containers/Community/components/styles.css

@@ -0,0 +1,336 @@
+@custom-media --big-viewport (min-width: 780px);
+
+.listContainer {
+  max-width: 860px;
+  margin: 0 auto;
+}
+
+.tabBar {
+  background-color: rgba(44, 44, 44, 0.89);
+  z-index: 5;
+}
+
+.tab {
+  flex: 1;
+  color: white;
+  text-transform: capitalize;
+  font-weight: 500;
+  font-size: 15px;
+  letter-spacing: 1px;
+  transition: border-bottom 200ms;
+}
+
+.active {
+  color: white;
+  box-sizing: border-box;
+  border-bottom: solid 5px #F36451;
+}
+
+.active > span {
+  color: white;
+}
+
+.active:after {
+  background: transparent !important;
+}
+
+.showShortcuts {
+  position: absolute;
+  right: 130px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+
+span {
+  margin-left: 7px;
+}
+}
+
+@media (--big-viewport) {
+  .tab {
+    flex: none;
+  }
+}
+
+.notFound {
+  position: relative;
+  margin: 20px auto;
+  text-align: center;
+  padding: 68px 45px;
+  vertical-align: middle;
+  min-width: 500px;
+
+  a {
+    color: rgb(244, 126, 107);
+    font-weight: 500;
+
+    &.goToStreams {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+    }
+  }
+}
+
+.header {
+  background-color: #2c2c2c;
+  color: white;
+  margin-bottom: -1px;
+
+  .settingsButton {
+    i {
+      vertical-align: middle;
+      margin-left: 10px;
+      margin-top: -4px;
+    }
+  }
+
+  .moderateAsset {
+    a {
+      -webkit-box-flex: 1;
+      -ms-flex: 1;
+      flex: 1;
+      color: white;
+      text-transform: capitalize;
+      font-weight: 500;
+      font-size: 15px;
+      letter-spacing: 1px;
+      transition: opacity 200ms;
+      opacity: 1;
+
+      &:hover {
+          opacity: .8;
+         cursor: pointer;
+      }
+
+      &:first-child {
+        text-align: left;
+      }
+
+      &:nth-child(2) {
+       text-align: center;
+      }
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+  }
+}
+
+
+@custom-media --big-viewport (min-width: 780px);
+
+.list {
+  padding: 8px 0;
+  list-style: none;
+  display: block;
+
+  &.singleView .listItem {
+    display: none;
+  }
+
+  &.singleView .listItem.activeItem {
+    display: block;
+    height: 100%;
+    font-size: 1.5em;
+    line-height: 1.5em;
+    border: none;
+
+    .actions {
+      position: fixed;
+      bottom: 60px;
+      left: 25%;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-around;
+      width: 50%;
+      margin: 0;
+    }
+
+    .actionButton {
+      transform: scale(1.4);
+    }
+  }
+}
+
+.listItem {
+  border-bottom: 1px solid #e0e0e0;
+  font-size: 16px;
+  width: 100%;
+  max-width: 660px;
+  min-width: 400px;
+  margin: 0 auto;
+  padding: 16px 14px;
+  position: relative;
+  transition: box-shadow 200ms;
+  margin-top: 0;
+
+
+  &:hover {
+     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .context {
+    a {
+      color: #f36451;
+      text-decoration: underline;
+      float: right;
+    }
+  }
+
+   .sideActions {
+     position: absolute;
+     right: 0;
+     height: 100%;
+     top: 0;
+     padding: 40px 18px;
+     box-sizing: border-box;
+   }
+
+  .itemHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .author {
+      min-width: 230px;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .itemBody {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .avatar {
+    margin-right: 16px;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    background-color: #757575;
+    font-size: 40px;
+    color: #fff;
+  }
+
+  .created {
+    color: #666;
+    font-size: 13px;
+    margin-left: 40px;
+  }
+
+  .actionButton {
+    transform: scale(.8);
+    margin: 0;
+  }
+
+  .body {
+    margin-top: 0px;
+    flex: 1;
+    font-size: 0.88em;
+    color: black;
+    max-width: 500px;
+    word-wrap: break-word;
+  }
+
+  .flagged {
+    color: rgba(255, 0, 0, .5);
+    padding-top: 15px;
+    padding-left: 10px;
+  }
+
+  .flagCount{
+    font-size: 12px;
+    color: #d32f2f;
+  }
+
+}
+
+.empty {
+  color: #444;
+  margin-top: 50px;
+  text-align: center;
+}
+
+
+@media (--big-viewport) {
+  .listItem {
+    border: 1px solid #e0e0e0;
+    margin-bottom: 30px;
+
+    &:last-child {
+      border-bottom: 1px solid #e0e0e0;
+    }
+
+    &.activeItem {
+      border: 2px solid #333;
+    }
+  }
+
+}
+
+.hasLinks {
+  color: #f00;
+  text-align: right;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.banned {
+  color: #f00;
+  text-align: left;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 5px;
+  }
+}
+
+.ban {
+  display: block;
+  text-align: center;
+  margin-top: 5px;
+}
+
+.Comment {
+  .moderateArticle {
+    font-size: 12px;
+    a {
+      display: inline-block;
+      color: #679af3;
+      text-decoration: none;
+      font-size: 1em;
+      font-weight: 400;
+      letter-spacing: .5px;
+      font-size: 12px;
+      margin-left: 10px;
+
+      &:hover {
+        text-decoration: underline;
+        opacity: .9;
+        cursor: pointer;
+       }
+    }
+  }
+}
+
+.flagBox {
+  max-width: 480px;
+  border-top: 1px solid rgba(66, 66, 66, 0.12);
+  h3 {
+    font-size: 14px;
+    margin: 0;
+    font-weight: 500;
+  }
+}

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -54,7 +54,6 @@ class ModerationContainer extends Component {
     }
 
     if (data.error) {
-      console.log(data);
       return <div>Error</div>;
     }
 

client/coral-admin/src/translations.json

@@ -13,7 +13,9 @@
       "active": "Active",
       "banned": "Banned",
       "banned-user": "Banned User",
-      "loading": "Loading results"
+      "loading": "Loading results",
+      "flaggedaccounts": "Account Flags",
+      "people": "People"
     },
     "modqueue": {
       "likes": "likes",
@@ -145,7 +147,9 @@
       "active": "Activa",
       "banned": "Suspendido",
       "banned-user": "Usuario Suspendido",
-      "loading": "Cargando resultados"
+      "loading": "Cargando resultados",
+      "flaggedaccounts": "Cuentas Reportadas",
+      "people": "Gente"
     },
     "modqueue": {
       "likes": "gustos",