Update CircleCI node version

.babelrc

@@ -1,21 +0,0 @@
-{
-  "presets": [
-    ["es2015", {modules: false}]
-  ],
-  "plugins": [
-    "transform-class-properties",
-    "transform-decorators-legacy",
-    "transform-object-assign",
-    "transform-object-rest-spread",
-    "transform-async-to-generator",
-    "transform-react-jsx",
-    "syntax-dynamic-import"
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        ["transform-es2015-modules-commonjs", "dynamic-import-node"]
-      ]
-    }
-  }
-}

.dockerignore

@@ -1,12 +1,11 @@
 # excluded because we'll likely need to rebuild this.
 node_modules
 
-# most scripts are used during development and testing, not
+# scripts are used during development and testing, not
 # production.
 scripts
-!scripts/generateIntrospectionResult.js
 
-# documentation should not be visible in production.
+# documentation should not be visable in production.
 docs
 
 # static assets are rebuild in the docker container.
@@ -14,7 +13,6 @@ dist
 
 # tests are not run in the docker container.
 test
-__tests__
 
 # we won't use the .git folder in production.
 .git

.eslintignore

@@ -1,32 +1,17 @@
 dist
 docs
+client/lib
 **/*.html
 plugins/*
-!plugins/talk-plugin-facebook-auth
-!plugins/talk-plugin-auth
-!plugins/talk-plugin-respect
-!plugins/talk-plugin-offtopic
-!plugins/talk-plugin-like
-!plugins/talk-plugin-mod
-!plugins/talk-plugin-love
-!plugins/talk-plugin-viewing-options
-!plugins/talk-plugin-comment-content
+!plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-auth
+!plugins/coral-plugin-respect
+!plugins/coral-plugin-offtopic
+!plugins/coral-plugin-like
+!plugins/coral-plugin-mod
+!plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
+!plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
-!plugins/talk-plugin-featured-comments
-!plugins/talk-plugin-sort-newest
-!plugins/talk-plugin-sort-oldest
-!plugins/talk-plugin-sort-most-replied
-!plugins/talk-plugin-sort-most-liked
-!plugins/talk-plugin-sort-most-loved
-!plugins/talk-plugin-sort-most-respected
-!plugins/talk-plugin-author-menu
-!plugins/talk-plugin-member-since
-!plugins/talk-plugin-ignore-user
-!plugins/talk-plugin-moderation-actions
-!plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-remember-sort
-!plugins/talk-plugin-deep-reply-count
-!plugins/talk-plugin-subscriber
-!plugins/talk-plugin-flag-details
-
+!plugins/talk-plugin-featured
 node_modules

.eslintrc.json

@@ -1,3 +1,66 @@
 {
-  "extends": "@coralproject/eslint-config-talk"
+    "env": {
+        "es6": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 2017
+    },
+    "rules": {
+        "indent": ["error",
+            2
+        ],
+        "no-console": [
+            0
+        ],
+        "linebreak-style": ["error", "unix"],
+        "quotes": ["error", "single"],
+        "semi": ["error", "always"],
+        "no-template-curly-in-string": [1],
+        "no-unsafe-negation": [1],
+        "array-callback-return": [1],
+        "arrow-parens": ["warn", "always"],
+        "template-curly-spacing": "warn",
+        "eqeqeq": [2, "smart"],
+        "no-eval": [2],
+        "no-global-assign": [2],
+        "no-implied-eval": [2],
+        "lines-around-comment": ["warn", {"beforeLineComment": true}],
+        "spaced-comment": ["warn", "always", { "line": { "exceptions": ["-", "="] } }],
+        "no-script-url": [2],
+        "no-throw-literal": [2],
+        "yoda": [1],
+        "no-path-concat": [2],
+        "eol-last": [1],
+        "no-nested-ternary": [1],
+        "no-tabs": [2],
+        "no-unneeded-ternary": [1],
+        "object-curly-spacing": [1],
+        "space-infix-ops": ["error"],
+        "space-in-parens": ["error", "never"],
+        "space-unary-ops": ["error", {
+          "words": true,
+          "nonwords": false
+        }],
+        "no-const-assign": [2],
+        "no-duplicate-imports": [2],
+        "prefer-template": [1],
+        "comma-spacing": ["error", {
+            "after": true
+        }],
+        "no-var": [2],
+        "no-lonely-if": [2],
+        "curly": [2],
+        "no-unused-vars": ["error", {
+            "argsIgnorePattern": "^_|next",
+            "varsIgnorePattern": "^_"
+        }],
+        "no-multiple-empty-lines": ["error", {
+            "max": 1
+        }],
+        "newline-per-chained-call": ["error", {
+            "ignoreChainWithDepth": 2
+        }]
+    }
 }

.gitignore

@@ -5,50 +5,27 @@ dist
 npm-debug.log*
 dump.rdb
 
-client/coral-framework/graphql/introspection.json
-
 .env
 *.cfg
 
 .idea/
 *.swp
-*.DS_STORE
 
+test/e2e/reports
 coverage/
-test/e2e/reports/
-test/e2e/bslocal.log
-test/e2e/selenium-debug.log
-browserstack.err
 
 plugins.json
 plugins/*
-!plugins/talk-plugin-facebook-auth
-!plugins/talk-plugin-auth
-!plugins/talk-plugin-respect
-!plugins/talk-plugin-offtopic
-!plugins/talk-plugin-like
-!plugins/talk-plugin-mod
-!plugins/talk-plugin-love
-!plugins/talk-plugin-viewing-options
-!plugins/talk-plugin-comment-content
+!plugins/coral-plugin-facebook-auth
+!plugins/coral-plugin-auth
+!plugins/coral-plugin-respect
+!plugins/coral-plugin-offtopic
+!plugins/coral-plugin-like
+!plugins/coral-plugin-mod
+!plugins/coral-plugin-love
+!plugins/coral-plugin-viewing-options
+!plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
-!plugins/talk-plugin-featured-comments
-!plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-sort-newest
-!plugins/talk-plugin-sort-oldest
-!plugins/talk-plugin-sort-most-replied
-!plugins/talk-plugin-sort-most-liked
-!plugins/talk-plugin-sort-most-loved
-!plugins/talk-plugin-sort-most-respected
-!plugins/talk-plugin-author-menu
-!plugins/talk-plugin-member-since
-!plugins/talk-plugin-ignore-user
-!plugins/talk-plugin-moderation-actions
-!plugins/talk-plugin-toxic-comments
-!plugins/talk-plugin-remember-sort
-!plugins/talk-plugin-deep-reply-count
-!plugins/talk-plugin-subscriber
-!plugins/talk-plugin-flag-details
-!plugins/talk-plugin-slack-notifications
+!plugins/talk-plugin-featured
 
 **/node_modules/*

.nsprc

@@ -1,6 +0,0 @@
-{
-  "exceptions": [
-    "https://nodesecurity.io/advisories/531",
-    "https://nodesecurity.io/advisories/532"
-  ]
-}

CODE_OF_CONDUCT.md

@@ -1,78 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We expect everyone contributing to The Coral Project to follow this code of conduct. That means the team, contractors we employ, contributors, as well as anyone posting to our public or internal-facing channels.
-We created it not because we anticipate any unacceptable behavior, but because we believe that articulating our values and obligations to one another reinforces the already exceptional level of respect among the team, and because having a code provides us with clear avenues to correct our culture should it ever stray from that course.
-
-We commit to enforce and evolve this code over the duration of the project.
-
-## Expected behavior
-
-* Be supportive of each other.
-* Be collaborative. Involve others in brainstorms, sketching sessions, code reviews, planning documents, and the like. It’s not only okay to ask for help or feedback often, it’s unacceptable not to do so.
-* Be generous and kind in both giving and accepting critique. Critique is a natural and important part of our culture. Good critiques are kind, respectful, clear, and constructive, focused on goals and requirements rather than personal preferences. You are expected to give and receive criticism with grace.
-* Be humane. Be polite and friendly in all forms of communication, especially remote communication, where opportunities for misunderstanding are greater. Use sarcasm carefully. Tone is hard to decipher online; make judicious use of emoji to aid in communication.
-* Be considerate.
-* Be tolerant.
-* Respect people’s boundaries.
-* Do not make it personal.
-* Use welcoming and inclusive language.
-* Offer to help if you see someone struggling or otherwise in need of assistance (taking care not to be patronizing or disrespectful).
-* If someone approaches you looking for help, be generous with your time; if you’re under a deadline, direct them to someone else who may be of assistance.
-* Go out of your way to include people in jokes or memes, recognizing that we want to build an environment free of cliques.
-* Show empathy towards other community members
-
-
-## Unacceptable behavior
-
-We are committed to providing a welcoming and safe environment for people of all races, gender identities, gender expressions, sexual orientations, physical abilities, physical appearances, socioeconomic backgrounds, nationalities, ages, religions, and beliefs.
-We expect that you will refrain from demeaning, discriminatory, or harassing behavior and speech.
-
-Harassment includes, but is not limited to: deliberate intimidation; stalking; unwanted photography or recording; sustained or willful disruption of talks or other events; inappropriate physical contact; use of sexual or discriminatory imagery, comments, or jokes; and unwelcome sexual attention.
-Furthermore, any behavior or language which is unwelcoming—whether or not it rises to the level of harassment—is also strongly discouraged. Much exclusionary behavior takes the form of microaggressions—subtle put-downs which may be unconsciously delivered. Regardless of intent, microaggressions can have a significant negative impact on victims and have no place on our team.
-
-Other inappropriate behavior:
-
-*	Threats
-*	Slurs
-*	Pornography
-*	Spam
-*	Bullying
-*	Copyright infringement
-*	Impersonation of someone else
-*	Violating someone’s privacy
-
-If you feel that someone has harassed you or otherwise treated you or someone else inappropriately, please alert the project lead at [andrewl@mozillafoundation.org](mailto:andrewl@mozillafoundation.org).
-
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-
-## Enforcement
-
-These guidelines are ambitious, and we’re not always going to succeed in meeting them. When something goes wrong—whether it’s a microaggression or an instance of harassment — there are a number of things you can do to address the situation. Depending on your comfort level and the severity of the situation, here are some suggestions:
-
-* Address it directly. If you’re comfortable bringing up the incident with the person who instigated it, pull them aside to discuss how it affected you. Be sure to approach these conversations in a forgiving spirit: an angry or tense conversation will not do either of you any good. If you’re unsure how to go about that, try discussing with your manager or with the people and culture team first—they might have some advice about how to make this conversation happen.
-
-If you’re too frustrated to have a direct conversation, there are a number of alternate routes you can take.
-
-* Talk to a peer or mentor. Your colleagues are likely to have personal and professional experience on which to draw that could be of use to you. If you have someone you’re comfortable approaching, reach out and discuss the situation with them. They may be able to advise on how they would handle it, or direct you to someone who can. The flip side of this, of course, is that you should also be available when your colleagues reach out to you.
-
-* Contact the project lead, Andrew Losowsky, [andrewl@mozillafoundation.org](mailto:andrewl@mozillafoundation.org), or the technical lead. We will work with you to help you figure out how to ensure that any conflict doesn’t interfere with your work, in confidence if you would prefer.
-
-* Talk to Chris Lawrence. Chris oversees the project. He can be contacted at [clawrence@mozillafoundation.org](mailto:clawrence@mozillafoundation.org).
-
-If you feel you have been unfairly accused of violating this code of conduct, you should contact Chris with a concise description of your grievance.
-
-## Conclusion
-
-We welcome your feedback on this and every other aspect of what we do as The Coral Project, and we thank you for working with us to make it a safe, enjoyable, and friendly experience for everyone involved in the project and what we do.
-Above text is licensed CC BY-SA 4.0, adapted from the SRCCON code of conduct, FreeBSD’s code of conduct, Vox Media’s product team code of conduct, Medium’s code of conduct, as well as adapted from the Contributor Covenant.

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Welcome! We are very excited that you are interested in contributing to Talk.
 
 This document is a companion to help you approach contributing. If it does not do so, please [let us know how we can improve it](https://github.com/coralproject/talk/issues)!
 
-By contributing to this project you agree to the [Code of Conduct](CODE_OF_CONDUCT.md).
+By contributing to this project you agree to the [Code of Conduct](https://coralproject.net/code-of-conduct.html).
 
 ## What should I Contribute?
 
@@ -30,9 +30,9 @@ Please file issues if:
 
 ### What should I include?
 
-Coral has adopted an iterative, agile development philosophy. All contributions that make it into the Talk repository should start with a story or this form:
+Coral has adopted an iterative, agile development philosophy. All contributions that make it into the Talk repo should start with a story or this form:
 
-> As a [type of person] I'd like to be able to [do something] so that I can [get some result].
+`As a [type of person] I'd like to be able to [do something] so that I can [get some result].`
 
 This exercise does two things:
 
@@ -53,24 +53,15 @@ We are looking for _documentarians_ to:
 * create new / missing sections, and
 * take the lead in making sections, or the over all structure better.
 
-Our documentation is stored in markdown files in the [docs](docs) directory. We
-use Jekyll to provide our docs. To preview:
-
-```shell
-cd docs
-bundle install
-bundle exec jekyll serve
-```
-
-Then visit http://127.0.0.1:4000/talk/.
+Information about how to update docs can be found in our [FAQ](faq.html#how-do-i-contribute-to-these-docs).
 
 If you'd like to discuss a contribution, please [file an issue](https://github.com/coralproject/talk/issues) describing the changes you would like to see.
 
 ## Contributing Translations
 
-Talk's translations are stored in `.yml` files [here](https://github.com/coralproject/talk/tree/master/locales).
+Talk's tranlations are stored in `.yml` files [here](https://github.com/coralproject/talk/tree/master/locales).
 
-Translations can be submitted via pull request. If you do not use github, you can use 'en.yml' as a template and [email](https://coralproject.net/contact) the translations to us. We can import it into the repository.
+Translations can be submitted via pull request. If you do not use github, you can use 'en.yml' as a template and [email](https://coralproject.net/contact.html) the translations to us. We can import it into the repo.  
 
 ## I want to contribute but I'm not sure what to do!
 
@@ -82,7 +73,7 @@ Please visit our product roadmap here: https://www.pivotaltracker.com/n/projects
 
 ### Discussion Forum
 
-If you'd like to discuss what we're up to, please visit or [community](https://community.coralproject.net/) or [contact us](https://coralproject.net/contact).
+If you'd like to discuss what we're up to, please visit or [community](https://community.coralproject.net/) or [contact us](https://coralproject.net/contact.html).
 
 ### Integrations
 
@@ -90,4 +81,6 @@ Have a favorite analytics engine? Data science service? CMS? Auth platform? Depl
 
 ### Favorite Features?
 
-Do you have a favorite feature of an existing platform that's not yet been done in Talk? Sounds like Talk needs that feature.
+Do you have a favorite feature of an existing platform that's not yet been done in Talk? Sounds like Talk needs that feature.
+
+## Thanks!

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8-alpine
+FROM node:7.10.1
 
 # Create app directory
 RUN mkdir -p /usr/src/app
@@ -12,14 +12,15 @@ EXPOSE 5000
 # Bundle app source
 COPY . /usr/src/app
 
-# Ensure the runtime of the container is in production mode.
-ENV NODE_ENV production
-
 # Install app dependencies and build static assets.
 RUN yarn global add node-gyp && \
     yarn install --frozen-lockfile && \
     cli plugins reconcile && \
     yarn build && \
+    yarn install --production && \
     yarn cache clean
 
+# Ensure the runtime of the container is in production mode.
+ENV NODE_ENV production
+
 CMD ["yarn", "start"]

Dockerfile.onbuild

@@ -1,18 +1,14 @@
 FROM coralproject/talk:latest
 
-# Setup the build arguments
-ONBUILD ARG TALK_THREADING_LEVEL=3
-ONBUILD ARG TALK_DEFAULT_STREAM_TAB=all
-ONBUILD ARG TALK_DEFAULT_LANG=en
-ONBUILD ARG TALK_PLUGINS_JSON
-
 # Bundle app source
 ONBUILD COPY . /usr/src/app
 
-# At this stage, we need to install the development dependencies again because
-# we need to have webpack available. We then build the new dependencies and
-# clear out the development dependencies again. After this we of course need to
+# At this stage, we need to install the development dependancies again because
+# we need to have webpack available. We then build the new dependancies and
+# clear out the development dependancies again. After this we of course need to
 # clear out the yarn cache, this saves quite a lot of size.
-ONBUILD RUN cli plugins reconcile && \
-            yarn build && \
+ONBUILD RUN NODE_ENV=development yarn install --frozen-lockfile && \
+            NODE_ENV=production  cli plugins reconcile && \
+            NODE_ENV=production  yarn build && \
+            NODE_ENV=production  yarn install --production --force && \
             yarn cache clean

INSTALL.md

@@ -0,0 +1,275 @@
+## Contents
+
+- [Installation](#installation) - install the application on a machine
+	- [Via Docker](#installation-from-docker)
+	- [Via Source](#installation-from-source)
+- [Setup](#setup) - setup the application for first use
+- [Usage](#usage) - connect the application to a website
+
+# Installation
+
+## Requirements
+
+- Any flavour of Linux, OSX or Windows
+- 1GB memory (minimum)
+- 5GB storage (minimum)
+- [MongoDB](https://www.mongodb.com/) v3.4 or later
+- [Redis](https://redis.io/) v3.2 or later
+- SSL Certificate
+  - This application assumes that you will be serving this application in a
+    production environment, and therefore requires that you serve it behind a
+    webserver with a valid SSL certificate. This is chosen in order to secure
+    user's sessions.
+
+## Installation From Docker
+
+We currently support packaging the Talk application via Docker, which automates
+the dependency install and asset build process. This is the recommended way to
+deploy the application when used in production.
+
+Available as [coralproject/talk](https://hub.docker.com/r/coralproject/talk/) on Docker Hub.
+
+Images are tagged using the following notation:
+
+- `x` (where `x` is the major version number): any minor or patch updates will be included in this. If you're ok getting
+  new features occasionally and all the bug fixes, this is the tag for you.
+- `x.y` (where `y` is the minor version number): any patch updates will be
+  included with this tag. If you like getting fixes and having features change
+  only when you want, this is the tag for you. **(recommended)**
+- `x.y.z` (where `z` is the patch version): this tag never gets updated, and
+  essentially freezes your version, this should only be used when you are either
+  extending Talk or are sure of a specific version you want to freeze.
+
+We provide tags with `*-onbuild` that can be used for easy plugin integration and
+acts as a customization endpoint. Instructions are provided in the `PLUGINS.md`
+document as to how to use it.
+
+### Requirements
+
+There are some runtime requirements for running Talk for Docker:
+
+- [Docker](https://www.docker.com/) v1.13.0 or later
+- [Docker Compose](https://docs.docker.com/compose/) v1.10.0 or later
+
+_Please be sure to check the versions of these requirements. Incorrect versions
+of these may lead to unexpected errors!_
+
+### Installing
+
+An example docker-compose.yml:
+
+```yaml
+version: '2'
+services:
+  talk:
+    image: coralproject/talk:1.5
+    restart: always
+    ports:
+      - "5000:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - TALK_MONGO_URL=mongodb://mongo/talk
+      - TALK_REDIS_URL=redis://redis
+  mongo:
+    image: mongo:3.2
+    restart: always
+    volumes:
+      - mongo:/data/db
+  redis:
+    image: redis:3.2
+    restart: always
+    volumes:
+      - redis:/data
+volumes:
+  mongo:
+    external: false
+  redis:
+    external: false
+```
+
+At this stage, you should refer to the `README.md` for configuration variables
+that are specific to your installation. Some pre-defined fields have been filled
+in the above example which are consistent with Docker Compose naming conventions
+for [Docker Links](https://docs.docker.com/compose/networking/#links).
+
+### Scaling
+
+If you are interested in splitting apart services, you can simply adjust the
+command being executed in the container to optimize for your use case. An
+example would be if you wanted to run the API server and the job processor
+on different machines. You can achieve this easily with docker compose:
+
+```yaml
+version: '2'
+services:
+  talk-api:
+    image: coralproject/talk:1.5
+    command: cli serve
+    restart: always
+    ports:
+      - "5000:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - TALK_MONGO_URL=mongodb://mongo/talk
+      - TALK_REDIS_URL=redis://redis
+  talk-jobs:
+    image: coralproject/talk:1.5
+    command: cli jobs process
+    restart: always
+    ports:
+      - "5001:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - TALK_MONGO_URL=mongodb://mongo/talk
+      - TALK_REDIS_URL=redis://redis
+  mongo:
+    image: mongo:3.2
+    restart: always
+    volumes:
+      - mongo:/data/db
+  redis:
+    image: redis:3.2
+    restart: always
+    volumes:
+      - redis:/data
+volumes:
+  mongo:
+    external: false
+  redis:
+    external: false
+```
+
+Note that the only difference is in the `command` key. From this, you are able
+to discretely control which modules are running in order to have the maximum
+flexibility when managing your application.
+
+### Running
+
+If you're using docker compose:
+
+```bash
+# Start the services using compose
+docker-compose up -d
+```
+
+If you're using plain docker:
+
+```bash
+docker run -d -P coralproject/talk:latest
+```
+
+## Installation From Source
+
+This provides information on how to setup the application from source. Note that
+this is not recommended for production deploys, but will work for development
+and testing purposes.
+
+### Requirements
+
+There are some runtime requirements for running Talk from source:
+
+- [Node](https://nodejs.org/) ~7.8
+- [Yarn](https://yarnpkg.com/) ^0.22.0
+
+_Please be sure to check the versions of these requirements. Incorrect versions
+of these may lead to unexpected errors!_
+
+### Installing
+
+#### Download
+
+It is highly recommended that you download a released version as the code
+available in `master` may not be stable. You can download the latest release
+from the [releases page](https://github.com/coralproject/talk/releases).
+
+You can also clone the git repository via:
+
+```bash
+git clone https://github.com/coralproject/talk.git
+```
+
+#### Building
+
+We now have to install the dependencies and build the static assets.
+
+```bash
+# Install package dependancies
+yarn
+
+# Build static files
+yarn build
+```
+
+After you create/modify the `plugins.json` (refer to `PLUGINS.md` for plugin
+docs) file, you can re-run the following to install their dependencies:
+
+```bash
+# Reconcile plugins
+./bin/cli plugins reconcile
+
+# Build static files
+yarn build
+```
+
+### Running
+
+Refer to the `README.md` file for required configuration variables to add to the
+environment.
+
+You can start the server after configuring the server using the command:
+
+```bash
+yarn start
+```
+
+This will setup the server to serve everything on a single node.js process and
+is designed to be used in production.
+
+You can see other scripts we've made available by consulting the `package.json`
+file under the `scripts` key including:
+
+- `yarn test` run unit tests
+- `yarn e2e` run end to end tests
+- `yarn build-watch` watch for changes to client files and build static assets
+- `yarn dev-start` watch for changes to server files and reload the server while
+  also sourcing a `.env` file in your local directory for configuration
+
+# Setup
+
+Once you've installed Talk (either via Docker or source), you still need to
+setup the application. If you are unfamiliar with any terminology used in the
+setup process, refer to the `TERMINOLOGY.md` document.
+
+## Via Web
+
+If you want to perform your setup via the web, you can navigate to your
+installation of Talk at the path `/admin/install`. There you will be asked a
+series of questions for your installation.
+
+## Via CLI
+
+If you want to perform your setup through the terminal, you can simply run:
+
+```bash
+cli setup
+```
+
+And follow the instructions to perform initial setup and create your first user
+account.
+
+
+# Usage
+
+After setup is complete, you can then refer to the `/admin/configure` path to
+get the embed code that you can copy/paste onto your blog or website in order to
+start using Talk.
+
+_In order for the embed to work correctly, you will need to whitelist the domain
+that is allowed to embed your site on the `/admin/configure` page, failure to do
+so will result in the comment stream not loading._

LICENSE

@@ -4,12 +4,8 @@ Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 
-http://www.apache.org/licenses/LICENSE-2.0
+    http://www.apache.org/licenses/LICENSE-2.0
 
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
-either express or implied.
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 
-See the License for the specific language governing permissions
-and limitations under the License.
+See the License for the specific language governing permissions and limitations under the License.

PLUGINS.md

@@ -0,0 +1,3 @@
+# Talk Plugins
+
+Our documentation for Talk has moved! Utilize [this hyperlink](https://coralproject.github.io/talk/plugins.html) via click or tap to navigate your browser to the new location!

README.md

@@ -1,37 +1,120 @@
-# Talk · [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) · [![NSP Status](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8/badge)](https://nodesecurity.io/orgs/coralproject/projects/07ce2e4c-99fb-48f8-b50b-69d2d2c081b8) · [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
+# Talk [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk)
 
-Online comments are broken. Our open-source commenting platform, Talk, rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/products/talk.html).
+Online comments are broken. Our open-source Talk tool rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here.](https://coralproject.net/products/talk.html)
 
-Built with <3 by The Coral Project & Mozilla.
+Third party licenses are available via the `/client/3rdpartylicenses.txt`
+endpoint when the server is running with built assets.
 
-## Try Talk!
+## Contributing to Talk
 
-You're just one click away from trying Talk - all you need is a Heroku account and a few minutes of your time.
+See our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md).
 
-[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://dashboard.heroku.com/new?template=https%3A%2F%2Fgithub.com%2Fcoralproject%2Ftalk&env[TALK_FACEBOOK_APP_ID]=ignore&env[TALK_FACEBOOK_APP_SECRET]=ignore)
+## Documentation
 
-## Technical Documentation
+### General
 
-From getting up and running, to advanced configuration, to how to scale Talk, our [Talk Technical Docs](https://coralproject.github.io/talk/) have everything you need to know.
+See our [Talk Documentation & Guides](https://coralproject.github.io/talk/index.html).
 
-## Product Guide
+### Plugins
 
-Learn more about Talk, including a deep dive into features for commenters and moderators, and FAQs in our [Talk Product Guide](https://coralproject.github.io/talk/how-talk-works).
+See our guide to using and building [Talk Plugins](https://github.com/coralproject/talk/blob/master/PLUGINS.md).
 
-## Relevant Links
+### Recipes
 
-- [Our Blog](https://blog.coralproject.net/)
-- [Community Forums](https://community.coralproject.net/)
-- [Community Guides for Journalism](https://guides.coralproject.net/)
-- [More About Us](https://coralproject.net/)
-- [Talk Roadmap](https://www.pivotaltracker.com/n/projects/1863625)
+Recipes are plugin templates provided by the Coral Core team. Developers can use these recipes to build their own plugins. You can find all the Talk recipes here: https://github.com/coralproject/talk-recipes/
 
-## End-to-End Testing
+## Usage
 
-Talk uses [Nightwatch](https://nightwatchjs.org/) as our e2e testing framework. The testing infrastructure that allows us to run our tests in real browsers is provided with love by our friends at [Browserstack](https://browserstack.com).
+### Installation
 
-[![Browserstack](/public/img/browserstack_logo.png)](https://browserstack.com)
+To set up a development environment or build from source, see [INSTALL.md](https://github.com/coralproject/talk/blob/master/INSTALL.md).
+
+To launch a Talk server of your own from your browser without any need to muck about in a terminal or think about engineering concepts, stay tuned. We will launch [our installer](https://github.com/coralproject/talk-install) shortly!
+
+### Configuration
+
+The Talk application looks for the following configuration values either as environment variables:
+
+- `TALK_MONGO_URL` (*required*) - the database connection string for the MongoDB database.
+- `TALK_REDIS_URL` (*required*) - the database connection string for the Redis database.
+- `TALK_ROOT_URL` (*required*) - root url of the installed application externally
+available in the format: `<scheme>://<host>` without the path.
+- `TALK_JWT_SECRET` (*required*) - a long and cryptographical secure random string which will be used to
+sign and verify tokens via a `HS256` algorithm.
+- `TALK_JWT_EXPIRY` (_optional_) - the expiry duration (`exp`) for the tokens issued for logged in sessions (Default `1 day`)
+- `TALK_JWT_ISSUER` (_optional_) - the issuer (`iss`) claim for login JWT tokens (Default `process.env.TALK_ROOT_URL`)
+- `TALK_JWT_AUDIENCE` (_optional_) - the audience (`aud`) claim for login JWT tokens (Default `talk`)
+- `TALK_SMTP_EMAIL` (*required for email*) - the address to send emails from using the
+  SMTP provider.
+- `TALK_SMTP_USERNAME` (*required for email*) - username of the SMTP provider you are using.
+- `TALK_SMTP_PASSWORD` (*required for email*) - password for the SMTP provider you are using.
+- `TALK_SMTP_HOST` (*required for email*) - SMTP host url with format `smtp.domain.com`.
+- `TALK_SMTP_PORT` (*required for email*) - SMTP port.
+- `TALK_INSTALL_LOCK` (_optional for dynamic setup_) - Defaults to `FALSE`. When `TRUE`, disables the dynamic setup endpoint.
+- `TALK_RECAPTCHA_SECRET` (*required for reCAPTCHA support*) - server secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
+- `TALK_RECAPTCHA_PUBLIC` (*required for reCAPTCHA support*) - client secret used for enabling reCAPTCHA powered logins. If not provided it will instead default to providing only a time based lockout.
+- `TALK_PLUGINS_JSON` (_optional_) - used to specify the plugin config via the environment
+- `TALK_KEEP_ALIVE` (_optional_) - The keepalive timeout that should be used to send keep alive messages through the websocket to keep the socket alive. (Default `30s`)
+
+Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
+alternative methods of loading configuration during development.
+
+### Running Migrations
+
+We have a migration tool that can be run using `bin/cli migration run`. This will detect new migrations available and prompt you to backup your database before proceeding with the migration. Migrations are required with major version releases.
+
+### Using Trust
+
+Talk ships with core components we call "Trust". This allows Talk to automate certain actions based on previous user behavior.
+
+Our first feature is the notion of Karma. Talk will automatically pre-moderate comments of users who have a negative karma score. You can [see more how karma works here](/services/karma.js).
+
+## Supported Browsers
+
+### Web
+
+- Chrome: latest 2 versions
+- Firefox: latest 2 versions, and most recent extended support version, if any
+- Safari: latest 2 versions
+- Internet Explorer: IE Edge, 11
+
+### iOS Devices
+
+- iPad
+- iPad Pro
+- iPhone 7 Plus
+- iPhone 7
+- iPhone 6 Plus
+- iPhone 6
+- iPhone 5
+
+### iOS Browsers
+
+- Chrome for iOS: latest version
+- Firefox for iOS: latest version
+- Safari for iOS: latest version
+
+### Android Devices
+
+- Galaxy S5
+- Nexus 5X
+- Nexus 6P
+
+### Android Browsers
+
+- Chrome for Android: latest version
+- Firefox for Android: latest version
 
 ## License
 
-Talk is released under the [Apache License, v2.0](/LICENSE).
+    Copyright 2017 Mozilla Foundation
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+
+    See the License for the specific language governing permissions and limitations under the License.

TERMINOLOGY.md

@@ -0,0 +1,73 @@
+# Product's Terminology
+
+This is a guide to have a common language to talk about "Talk".
+
+## Definitions
+
+* Site - a top level site, aka nytimes.com
+* Section - the section of a site, aka, Politics.
+* Subsection - the section of a site, aka, Politics.
+* Asset - An article/video/etc identified by URL.
+
+* Embed - Things we put on a asset: comment box, ToS, Stream, etc…
+* Stream - All the activity on a certain asset. Container for Comments, actions, user
+* Thread - defined by a parent and everything below. All replies to a comment and their replies, etc…
+* Comment - a kind of user-generated content submitted by a comment author
+  * A parent comment has replies to it
+  * A child comments is a reply to another comment
+  * A comment can be both a parent comment and a child of another comment
+  * A top-level comment is a comment that is not a reply to any other comment
+  * A nth-level comment refers to the number of replies away from the top-level comment
+
+* User - an item to represent a person using Talk. It could be a moderator, reader, etc.
+* User Roles:
+  * Active: some who takes action (logged in or not)
+  * Passive: some who just reads, no actions performed
+  * Comment Author: The user who wrote the comment
+  * Staff Member: someone who works for an organization (tagged for leverage in trust)
+  * Moderator: someone with the ability to access the moderation queue and perform moderation actions
+  * Administrator: has the ability to change the setup of their coral space
+* Public Profile: information about users shown in public
+* Private Profile: information about users shown only to user about themselves
+* Protected Profile: information about users that only moderators and admins can see
+
+* Queue - Group of items based on a query, aka - moderation queue
+* Target - The item/s on which an action is performed
+
+##  Actions
+
+Actions are performed by users on items. Actions themselves are items. This requires two relationships: action on item, and user performs action.
+
+### Flag
+* A Flagger(user) performs a Flag
+* A Flag is performed on a Comment or a username or profile content
+
+
+## Moderation Actions and Status
+
+Comments contain a field `status`. As moderation actions are peformed, the status changes.
+
+* Initial status is empty.
+* When a moderator Approves, the status is set to 'approved'.
+* When a moderator Rejects, the status is set to 'reject'.
+
+### Pre and post moderation
+
+Comments can be set to be premoderated or postmoderated. 
+
+Premoderation means that moderation has to occur _before_ a comment is shown on the site:
+
+* New comments are shown in the moderator queues immediately. 
+* The are not shown to users until (aka in streams) until they are approved by a moderator.
+
+Postmoderation means that comments appear on the site _before_ any moderation action is taken.
+
+* New comments appear in comment streams immediately.
+* New comments do not appear in moderation queues unless they are flagged by other users.
+
+### Word lists
+
+* Banned words - words that the site never allows in a comment
+* Suspect words - words whose usage needs to be approved by a moderator before being shown in the stream
+* Approved words - words that are usually Banned or Suspect sitewide, but approved for use in a specific article stream
+

app.js

@@ -1,37 +1,70 @@
 const express = require('express');
+const bodyParser = require('body-parser');
 const morgan = require('morgan');
 const path = require('path');
-const merge = require('lodash/merge');
 const helmet = require('helmet');
+const authentication = require('./middleware/authentication');
+const {passport} = require('./services/passport');
+const plugins = require('./services/plugins');
+const i18n = require('./services/i18n');
+const enabled = require('debug').enabled;
+const errors = require('./errors');
+const {createGraphOptions} = require('./graph');
+const apollo = require('graphql-server-express');
+const accepts = require('accepts');
 const compression = require('compression');
-const {HELMET_CONFIGURATION} = require('./config');
-const {MOUNT_PATH} = require('./url');
-const routes = require('./routes');
-const debug = require('debug')('talk:app');
+const cookieParser = require('cookie-parser');
 
 const app = express();
 
-//==============================================================================
-// APPLICATION WIDE MIDDLEWARE
-//==============================================================================
+// Middleware declarations.
 
 // Add the logging middleware only if we aren't testing.
-if (process.env.NODE_ENV !== 'test') {
+if (app.get('env') !== 'test') {
   app.use(morgan('dev'));
 }
 
-// Trust the first proxy in front of us, this will enable us to trust the fact
-// that SSL was terminated correctly.
+//==============================================================================
+// APP MIDDLEWARE
+//==============================================================================
+
 app.set('trust proxy', 1);
 
-// Enable a suite of security good practices through helmet. We disable
-// frameguard to allow crossdomain injection of the embed.
-app.use(helmet(merge(HELMET_CONFIGURATION, {
-  frameguard: false,
-})));
-
-// Compress the responses if appropriate.
+// We disable frameward on helmet to allow crossdomain injection of the embed
+app.use(helmet({
+  frameguard: false
+}));
 app.use(compression());
+app.use(cookieParser());
+app.use(bodyParser.json());
+
+//==============================================================================
+// STATIC FILES
+//==============================================================================
+
+// If the application is in production mode, then add gzip rewriting for the
+// content.
+if (process.env.NODE_ENV === 'production') {
+  app.get('*.js', (req, res, next) => {
+    const accept = accepts(req);
+    if (accept.encoding(['gzip']) === 'gzip') {
+
+      // Adjsut the headers on the request by adding a content type header
+      // because express won't be able to detect the mime-type with the .gz
+      // extension and we need to decalre support for the gzip encoding.
+      res.set('Content-Type', 'application/javascript');
+      res.set('Content-Encoding', 'gzip');
+
+      // Rewrite the url so that the gzip version will be served instead.
+      req.url = `${req.url}.gz`;
+    }
+
+    next();
+  });
+}
+
+app.use('/client', express.static(path.join(__dirname, 'dist')));
+app.use('/public', express.static(path.join(__dirname, 'public')));
 
 //==============================================================================
 // VIEW CONFIGURATION
@@ -40,13 +73,105 @@ app.use(compression());
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
+//==============================================================================
+// PASSPORT MIDDLEWARE
+//==============================================================================
+
+const passportDebug = require('debug')('talk:passport');
+
+// Install the passport plugins.
+plugins.get('server', 'passport').forEach((plugin) => {
+  passportDebug(`added plugin '${plugin.plugin.name}'`);
+
+  // Pass the passport.js instance to the plugin to allow it to inject it's
+  // functionality.
+  plugin.passport(passport);
+});
+
+// Setup the PassportJS Middleware.
+app.use(passport.initialize());
+
+// Attach the authentication middleware, this will be responsible for decoding
+// (if present) the JWT on the request.
+app.use('/api', authentication);
+
+//==============================================================================
+// GraphQL Router
+//==============================================================================
+
+// GraphQL endpoint.
+app.use('/api/v1/graph/ql', apollo.graphqlExpress(createGraphOptions));
+
+// Only include the graphiql tool if we aren't in production mode.
+if (app.get('env') !== 'production') {
+
+  // Interactive graphiql interface.
+  app.use('/api/v1/graph/iql', (req, res) => {
+    res.render('graphiql', {
+      endpointURL: '/api/v1/graph/ql'
+    });
+  });
+
+  // GraphQL documention.
+  app.get('/admin/docs', (req, res) => {
+    res.render('admin/docs');
+  });
+
+}
+
 //==============================================================================
 // ROUTES
 //==============================================================================
 
-debug(`mounting routes on the ${MOUNT_PATH} path`);
+app.use('/', require('./routes'));
 
-// Actually apply the routes.
-app.use(MOUNT_PATH, routes);
+//==============================================================================
+// ERROR HANDLING
+//==============================================================================
+
+// Catch 404 and forward to error handler.
+app.use((req, res, next) => {
+  next(errors.ErrNotFound);
+});
+
+// General error handler. Respond with the message and error if we have it while
+// returning a status code that makes sense.
+app.use('/api', (err, req, res, next) => {
+  if (err !== errors.ErrNotFound) {
+    if (app.get('env') !== 'test' || enabled('talk:errors')) {
+      console.error(err);
+    }
+  }
+
+  if (err instanceof errors.APIError) {
+    res.status(err.status).json({
+      message: err.message,
+      error: err
+    });
+  } else {
+    res.status(500).json({});
+  }
+});
+
+app.use('/', (err, req, res, next) => {
+  if (err !== errors.ErrNotFound) {
+    console.error(err);
+  }
+
+  i18n.init(req);
+  
+  if (err instanceof errors.APIError) {
+    res.status(err.status);
+    res.render('error', {
+      message: err.message,
+      error: app.get('env') === 'development' ? err : {}
+    });
+  } else {
+    res.render('error', {
+      message: err.message,
+      error: app.get('env') === 'development' ? err : {}
+    });
+  }
+});
 
 module.exports = app;

app.json

@@ -1,15 +1,10 @@
 {
     "name": "The Coral Project: Talk",
     "env": {
-        "TALK_JWT_SECRET": {
+        "TALK_SESSION_SECRET": {
             "description": "The session secret",
             "generator": "secret"
         },
-        "TALK_ROOT_URL": {
-            "description": "Please copy the App Name you choose above. If you did not choose one, please do so now and copy it here. Talk on Heroku will not work without this setting.",
-            "value":"https://<COPY APP NAME HERE>.herokuapp.com",
-            "required": true
-        },
         "TALK_FACEBOOK_APP_ID": {
             "value": "",
             "required": true
@@ -19,7 +14,8 @@
             "required": true
         },
         "NODE_ENV": "production",
-        "REWRITE_ENV": "TALK_MONGO_URL:MONGO_URI,TALK_REDIS_URL:REDIS_URL,TALK_SMTP_HOST:MAILGUN_SMTP_SERVER,TALK_SMTP_PORT:MAILGUN_SMTP_PORT,TALK_SMTP_USERNAME:MAILGUN_SMTP_LOGIN,TALK_SMTP_PASSWORD:MAILGUN_SMTP_PASSWORD",
+        "TALK_SMTP_PORT": "2525",
+        "REWRITE_ENV": "TALK_PORT:PORT,TALK_MONGO_URL:MONGO_URI,TALK_REDIS_URL:REDIS_URL,TALK_SMTP_HOST:POSTMARK_SMTP_SERVER,TALK_SMTP_USERNAME:POSTMARK_API_TOKEN,TALK_SMTP_PASSWORD:POSTMARK_API_TOKEN",
         "NPM_CONFIG_PRODUCTION": "false"
     },
     "addons": [{
@@ -29,8 +25,8 @@
         "plan": "rediscloud:30",
         "as": "REDIS"
     }, {
-        "plan": "mailgun:starter",
-        "as": "MAILGUN"
+        "plan": "postmark:10k",
+        "as": "POSTMARK"
     }],
     "image": "heroku/nodejs",
     "success_url": "/admin/install"

bin/cli

@@ -4,9 +4,8 @@
  * Module dependencies.
  */
 
+// const util = require('./util');
 const program = require('./commander');
-const {head, map} = require('lodash');
-const Matcher = require('did-you-mean');
 
 program
   .command('serve', 'serve the application')
@@ -17,28 +16,12 @@ program
   .command('token', 'work with the access tokens')
   .command('users', 'work with the application auth')
   .command('migration', 'provides utilities for migrating the database')
-  .command('verify', 'provides utilities for performing data verification')
   .command(
     'plugins',
     'provides utilities for interacting with the plugin system'
   )
   .parse(process.argv);
 
-// If the command wasn't found, output help.
-const cmds = map(program.commands, '_name');
-const cmd = head(program.args);
-if (!cmds.includes(cmd)) {
-  const m = new Matcher(cmds);
-  const similarCMDs = m.list(cmd);
-
-  console.error(`cli '${cmd}' is not a talk cli command. See 'cli --help'.`);
-  if (similarCMDs.length > 0) {
-    const sc = similarCMDs.map(({value}) => `\t${value}\n`).join('');
-    console.error(`\nThe most similar commands are\n${sc}`);
-  }
-  process.exit(1);
-}
-
 /**
  * When this provess exists, check to see if we have a running command, if we do
  * check to see if it is still running. If it is, then kill it with a SIGINT
@@ -47,8 +30,6 @@ if (!cmds.includes(cmd)) {
  */
 process.once('exit', () => {
   if (
-
-    // program.runningCommand &&
     program.runningCommand.killed === false &&
     program.runningCommand.exitCode === null
   ) {

bin/cli-jobs

@@ -12,7 +12,7 @@ const mongoose = require('../services/mongoose');
 const kue = require('../services/kue');
 
 util.onshutdown([
-  () => mongoose.disconnect(),
+  () => mongoose.disconnect()
 ]);
 
 /**
@@ -20,17 +20,17 @@ util.onshutdown([
  */
 function processJobs() {
 
-  // The scraper only needs to shutdown when the scraper has actually been
-  // started.
-  util.onshutdown([
-    () => kue.Task.shutdown()
-  ]);
-
   // Start the scraper processor.
   scraper.process();
 
   // Start the mail processor.
   mailer.process();
+
+  // The scraper only needs to shutdown when the scraper has actually been
+  // started.
+  util.onshutdown([
+    () => kue.Task.shutdown()
+  ]);
 }
 
 /**
@@ -48,13 +48,22 @@ function removeJob(job) {
   }));
 }
 
+/**
+ * Removes the jobs passed in and returns a promise.
+ * @param  {Array} jobs array of jobs
+ * @return {Promise}
+ */
+function removeJobs(jobs) {
+  return Promise.all(jobs.map(removeJob));
+}
+
 /**
  * Get the top n jobs with a specific state.
  * @param  {String} [state='complete'] state to list jobs by
  * @param  {Number} limit              limit of jobs to load
  * @return {Promise}
  */
-function rangeJobsByState(state, limit) {
+function rangeJobsByState(state = 'complete', limit) {
   return new Promise((resolve, reject) => {
     kue.Job.rangeByState(state, 0, limit, 'asc', (err, jobs) => {
       if (err) {
@@ -66,56 +75,21 @@ function rangeJobsByState(state, limit) {
   });
 }
 
-async function getJobBatch(n, includeStuck) {
-  let jobs = [];
-
-  jobs = await rangeJobsByState('complete', n);
-
-  if (includeStuck) {
-    jobs = jobs.concat(await rangeJobsByState('failed', n));
-  }
-
-  return jobs;
-}
-
 /**
  * Cleans up the jobs that are in the queue.
  */
-async function cleanupJobs(options) {
-
-  // The scraper only needs to shutdown when the scraper has actually been
-  // started.
-  util.onshutdown([
-    () => kue.Task.shutdown()
-  ]);
-
+function cleanupJobs(options) {
   const n = 100;
 
-  try {
-
-    // Connect to redis by establishing a queue.
-    kue.Task.connect();
-
-    let jobCount = 0;
-    let jobs = await getJobBatch(n, options.stuck);
-
-    while (jobs.length > 0) {
-
-      // Remove all the jobs.
-      await Promise.all(jobs.map((job) => removeJob(job)));
-
-      jobCount += jobs.length;
-
-      // Get the next batch of jobs.
-      jobs = await getJobBatch(n, options.stuck);
-    }
-
+  Promise.all([
+    rangeJobsByState('complete', n),
+    options.stuck ? rangeJobsByState('failed', n) : false
+  ])
+  .then((joblists) => joblists.filter((jobs) => jobs).map(removeJobs))
+  .then(() => {
     util.shutdown();
-    console.log(`Removed ${jobCount} jobs`);
-  } catch (err) {
-    console.error(err);
-    util.shutdown(1);
-  }
+    console.log('Removed old jobs');
+  });
 }
 
 //==============================================================================

bin/cli-plugins

@@ -53,7 +53,7 @@ function versionMatch(name, version) {
   }
 }
 
-const EXTERNAL = /^\w[a-z\-0-9.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
+const EXTERNAL = /^\w[a-z\-0-9\.]+$/; // Match "react", "path", "fs", "lodash.random", etc.
 
 function reconcilePackages({quiet = false, upgradeRemote = false}) {
   const fetchable = [];
@@ -274,7 +274,7 @@ async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote
 }
 
 async function createSeedPlugin() {
-  const pluginsDir = path.resolve(__dirname, '..', 'plugins');
+  const pluginsDir = path.join(__dirname, 'plugins');
 
   function pluginNameExists(pluginName) {
     const pluginNames = fs.readdirSync(pluginsDir);
@@ -321,7 +321,7 @@ async function createSeedPlugin() {
   // Creating plugin seed
   //==============================================================================
 
-  const seedPlugin = path.join(__dirname, 'templates/plugin');
+  const seedPlugin = path.join(__dirname, 'bin/templates/plugin');
   const newPluginPath = path.join(pluginsDir, answers.pluginName);
 
   if (fs.existsSync(seedPlugin)) {
@@ -355,7 +355,7 @@ async function createSeedPlugin() {
 
     // Let's add this to the plugins.json
     if (answers.addPluginsJson) {
-      const pluginsJson = path.resolve(__dirname, '..', 'plugins.json');
+      const pluginsJson = path.join(dir, 'plugins.json');
 
       fs.readJson(pluginsJson)
         .then((j) => {

bin/cli-serve

@@ -1,8 +1,153 @@
 #!/usr/bin/env node
 
 const program = require('./commander');
+const app = require('../app');
+const debug = require('debug')('talk:cli:serve');
+const errors = require('../errors');
+const {createServer} = require('http');
+const scraper = require('../services/scraper');
+const mailer = require('../services/mailer');
+const MigrationService = require('../services/migration');
+const SetupService = require('../services/setup');
+const kue = require('../services/kue');
+const mongoose = require('../services/mongoose');
 const util = require('./util');
-const serve = require('../serve');
+const {createSubscriptionManager} = require('../graph/subscriptions');
+const {
+  PORT
+} = require('../config');
+
+/**
+* Get port from environment and store in Express.
+*/
+
+const port = normalizePort(PORT);
+app.set('port', port);
+
+/**
+* Create HTTP server.
+*/
+const server = createServer(app);
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  let bind = typeof port === 'string'
+    ? `Pipe ${port}`
+    : `Port ${port}`;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+  case 'EACCES':
+    console.error(`${bind} requires elevated privileges`);
+    break;
+  case 'EADDRINUSE':
+    console.error(`${bind} is already in use`);
+    break;
+  }
+
+  throw error;
+}
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  let port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  let addr = server.address();
+  let bind = typeof addr === 'string'
+    ? `pipe ${addr}`
+    : `port ${addr.port}`;
+  console.log(`API Server Listening on ${bind}`);
+}
+
+/**
+ * Start the app.
+ */
+async function startApp(program) {
+
+  try {
+
+    // Check to see if the application is installed. If the application
+    // has been installed, then it will throw errors.ErrSettingsNotInit, this
+    // just means we don't have to check that the migrations have run.
+    await SetupService.isAvailable();
+
+    debug('setup is currently available, migrations not being checked');
+
+  } catch (e) {
+
+    // Check the error.
+    switch (e) {
+    case errors.ErrInstallLock, errors.ErrSettingsInit:
+
+      debug('setup is not currently available, migrations now being checked');
+
+      // The error was expected, just continue.
+      break;
+    default:
+
+      // The error was not expected, throw the error!
+      throw e;
+    }
+
+    // Now try and check the migration status.
+    try {
+
+      // Verify that the minimum migration version is met.
+      await MigrationService.verify();
+
+    } catch (e) {
+      console.error(e);
+      process.exit(1);
+    }
+
+    debug('migrations do not have to be run');
+  }
+
+  /**
+  * Listen on provided port, on all network interfaces.
+  */
+  server.listen(port, () => {
+
+    // Mount the websocket server if requested.
+    if (program.websockets) {
+      console.log(`Websocket Server Listening on ${port}`);
+
+      // Mount the subscriptions server on the application server.
+      createSubscriptionManager(server);
+    }
+  });
+  server.on('error', onError);
+  server.on('listening', onListening);
+}
 
 //==============================================================================
 // Setting up the program command line arguments.
@@ -13,9 +158,24 @@ program
   .option('-w, --websockets', 'enable the websocket (subscriptions) handler on this thread')
   .parse(process.argv);
 
-// Start serving.
-serve({jobs: program.jobs, websockets: program.websockets}).catch((err) => {
-  console.error(err);
-  util.shutdown(1);
-});
+// Start the application serving.
+startApp(program);
 
+// Enable job processing on the thread if enabled.
+if (program.jobs) {
+
+  // Start the scraper processor.
+  scraper.process();
+
+  // Start the mail processor.
+  mailer.process();
+}
+
+// Define a safe shutdown function to call in the event we need to shutdown
+// because the node hooks are below which will interrupt the shutdown process.
+// Shutdown the mongoose connection, the app server, and the scraper.
+util.onshutdown([
+  () => program.jobs ? kue.Task.shutdown() : null,
+  () => mongoose.disconnect(),
+  () => server.close()
+]);

bin/cli-setup

@@ -94,7 +94,7 @@ const performSetup = async () => {
       name: 'requireEmailConfirmation',
       default: settings.requireEmailConfirmation,
       message: 'Should emails always be confirmed'
-    },
+    }
   ]);
 
   // Update the settings that were changed.
@@ -104,32 +104,6 @@ const performSetup = async () => {
     }
   });
 
-  answers = await inquirer.prompt([
-    {
-      type: 'confirm',
-      name: 'inputWhitelistedDomains',
-      default: true,
-      message: 'Would you like to specify a whitelisted domain'
-    },
-    {
-      type: 'input',
-      name: 'whitelistedDomain',
-      message: 'Whitelisted Domain',
-      when: ({inputWhitelistedDomains}) => inputWhitelistedDomains,
-      validate: (input) => {
-        if (input && input.length > 0) {
-          return true;
-        }
-
-        return 'Whitelisted Domain cannot be empty.';
-      }
-    }
-  ]);
-
-  if (answers.inputWhitelistedDomains) {
-    settings.domains.whitelist = [answers.whitelistedDomain];
-  }
-
   console.log('\nWe\'ll ask you some questions about your first admin user.\n');
 
   let user = await inquirer.prompt([
@@ -173,11 +147,7 @@ const performSetup = async () => {
       name: 'confirmPassword',
       message: 'Confirm Password',
       type: 'password',
-      filter: (confirmPassword, {password}) => {
-        if (password !== confirmPassword) {
-          return Promise.reject(new Error('Passwords do not match'));
-        }
-
+      filter: (confirmPassword) => {
         return UsersService
           .isValidPassword(confirmPassword)
           .catch((err) => {
@@ -187,6 +157,10 @@ const performSetup = async () => {
     },
   ]);
 
+  if (user.password !== user.confirmPassword) {
+    return Promise.reject(new Error('Passwords do not match'));
+  }
+
   let {user: newUser} = await SetupService.setup({
     settings: settings.toObject(),
     user: {
@@ -195,7 +169,7 @@ const performSetup = async () => {
       password: user.password
     }
   });
-
+    
   console.log('Settings created.');
   console.log(`User ${newUser.id} created.`);
   console.log('\nTalk is now installed!');

bin/cli-users

@@ -8,13 +8,10 @@ const program = require('./commander');
 const inquirer = require('inquirer');
 const UsersService = require('../services/users');
 const UserModel = require('../models/user');
-const CommentModel = require('../models/comment');
-const ActionModel = require('../models/action');
 const USER_ROLES = require('../models/enum/user_roles');
 const mongoose = require('../services/mongoose');
 const util = require('./util');
 const Table = require('cli-table');
-const databaseVerifications = require('./verifications/database');
 
 const validateRequired = (msg = 'Field is required', len = 1) => (input) => {
   if (input && input.length >= len) {
@@ -101,72 +98,57 @@ function getUserCreateAnswers(options) {
 /**
  * Prompts for input and registers a user based on those.
  */
-async function createUser(options) {
-  try {
-    const answers = await getUserCreateAnswers(options);
-    if (answers.password !== answers.confirmPassword) {
-      throw new Error('Passwords do not match');
-    }
+function createUser(options) {
+  getUserCreateAnswers(options)
+    .then((answers) => {
+      if (answers.password !== answers.confirmPassword) {
+        return Promise.reject(new Error('Passwords do not match'));
+      }
 
-    const user = await UsersService.createLocalUser(answers.email.trim(), answers.password.trim(), answers.username.trim());
-    console.log(`Created user ${user.id}.`);
+      return answers;
+    })
+    .then((answers) => {
+      return UsersService
+        .createLocalUser(answers.email.trim(), answers.password.trim(), answers.username.trim())
+        .then((user) => {
+          console.log(`Created user ${user.id}.`);
 
-    if (answers.roles.length > 0) {
-      return Promise.all(answers.roles.map((role) => {
-        return UsersService
-          .addRoleToUser(user.id, role)
-          .then(() => {
-            console.log(`Added the role ${role} to User ${user.id}.`);
-          });
-      }));
-    }
-
-    util.shutdown();
-
-  } catch (err) {
-    console.error(err);
-    util.shutdown(1);
-  }
+          if (answers.roles.length > 0) {
+            return Promise.all(answers.roles.map((role) => {
+              return UsersService
+                .addRoleToUser(user.id, role)
+                .then(() => {
+                  console.log(`Added the role ${role} to User ${user.id}.`);
+                });
+            }));
+          }
+        });
+    })
+    .then(() => {
+      util.shutdown();
+    })
+    .catch((err) => {
+      console.error(err);
+      util.shutdown();
+    });
 }
 
 /**
  * Deletes a user.
  */
-async function deleteUser(userID) {
-
-  try {
-
-    // Find the user we're removing.
-    const user = await UserModel.findOne({id: userID});
-    if (!user) {
-      throw new Error(`user with id ${userID} not found`);
-    }
-
-    // Remove all the user's actions.
-    await ActionModel
-      .where({user_id: user.id})
-      .setOptions({multi: true})
-      .remove();
-
-    // Remove all the user's comments.
-    await CommentModel
-      .where({author_id: user.id})
-      .setOptions({multi: true})
-      .remove();
-
-    // Update the counts that might have changed.
-    for (const verification of databaseVerifications) {
-      await verification({fix: true, limit: Infinity, batch: 1000});
-    }
-
-    // Remove the user.
-    await user.remove();
-
-    util.shutdown();
-  } catch (err) {
-    console.error(err);
-    util.shutdown(1);
-  }
+function deleteUser(userID) {
+  UserModel
+    .findOneAndRemove({
+      id: userID
+    })
+    .then(() => {
+      console.log('Deleted user');
+      util.shutdown();
+    })
+    .catch((err) => {
+      console.error(err);
+      util.shutdown();
+    });
 }
 
 /**
@@ -187,21 +169,21 @@ function passwd(userID) {
       validate: validateRequired('Confirm Password is required')
     }
   ])
-    .then((answers) => {
-      if (answers.password !== answers.confirmPassword) {
-        throw new Error('Password mismatch');
-      }
+  .then((answers) => {
+    if (answers.password !== answers.confirmPassword) {
+      return Promise.reject(new Error('Password mismatch'));
+    }
 
-      return UsersService.changePassword(userID, answers.password);
-    })
-    .then(() => {
-      console.log('Password changed.');
-      util.shutdown();
-    })
-    .catch((err) => {
-      console.error(err);
-      util.shutdown(1);
-    });
+    return UsersService.changePassword(userID, answers.password);
+  })
+  .then(() => {
+    console.log('Password changed.');
+    util.shutdown();
+  })
+  .catch((err) => {
+    console.error(err);
+    util.shutdown(1);
+  });
 }
 
 /**
@@ -266,21 +248,13 @@ function listUsers() {
       });
 
       users.forEach((user) => {
-        let state = user.disabled ? 'Disabled' : 'Enabled';
-        const profile = user.profiles.find(({provider}) => provider === 'local');
-        if (profile && profile.metadata && profile.metadata.confirmed_at) {
-          state += ', Verified';
-        } else {
-          state += ', Unverified';
-        }
-
         table.push([
           user.id,
           user.username,
           user.profiles.map((p) => p.provider).join(', '),
           user.roles.join(', '),
           user.status,
-          state
+          user.disabled ? 'Disabled' : 'Enabled'
         ]);
       });
 
@@ -429,23 +403,6 @@ function enableUser(userID) {
     });
 }
 
-/**
- * Verifies an email address for a user.
- *
- * @param userID the user's id
- * @param email  the user's email address to be verified
- */
-async function verify(userID, email) {
-  try {
-    await UsersService.confirmEmail(userID, email);
-    console.log(`User ${userID} had their email ${email} verified.`);
-    util.shutdown();
-  } catch (err) {
-    console.error(err);
-    util.shutdown(1);
-  }
-}
-
 //==============================================================================
 // Setting up the program command line arguments.
 //==============================================================================
@@ -517,11 +474,6 @@ program
   .description('enable a given user from logging in')
   .action(enableUser);
 
-program
-  .command('verify <userID> <email>')
-  .description('verifies the given user\'s email address')
-  .action(verify);
-
 program.parse(process.argv);
 
 // If there is no command listed, output help.

bin/cli-verify

@@ -1,49 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Module dependencies.
- */
-
-const program = require('./commander');
-const mongoose = require('../services/mongoose');
-const util = require('./util');
-const databaseVerifications = require('./verifications/database');
-
-// Register the shutdown criteria.
-util.onshutdown([
-  () => mongoose.disconnect()
-]);
-
-async function database({fix = false, limit = Infinity, batch = 1000}) {
-  try {
-    for (const verification of databaseVerifications) {
-      await verification({fix, limit, batch});
-    }
-  } catch (err) {
-    console.error(`Failed to process all the ${databaseVerifications.length} verifications`, err);
-    util.shutdown(1);
-    return;
-  }
-
-  util.shutdown();
-}
-
-//==============================================================================
-// Setting up the program command line arguments.
-//==============================================================================
-
-program
-  .command('db')
-  .description('verifies the database integrity')
-  .option('-f, --fix', 'fix the problems found with database inconsistencies')
-  .option('-l, --limit [size]', 'limit the amount of documents to process in a single pass, this will ensure only a maximum number of batch operations are issued [default: inf]', parseInt)
-  .option('-b, --batch [size]', 'batch size to process verifications and repairs of documents [default: 1000]', parseInt)
-  .action(database);
-
-program.parse(process.argv);
-
-// If there is no command listed, output help.
-if (!process.argv.slice(2).length) {
-  program.outputHelp();
-  util.shutdown();
-}

bin/templates/plugin/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"
+  ]
+}

bin/templates/plugin/client/translations.yml

@@ -4,11 +4,11 @@
 #
 #  ```
 #   en:
-#    talk-plugin-respect:
+#    coral-plugin-respect:
 #     respect: Respect
 #     respected: Respected
 #   es:
-#    talk-plugin-respect:
+#    coral-plugin-respect:
 #     respect: Respetar
 #     respected: Respetado
 #  ```

bin/verifications/database/comments.js

@@ -1,193 +0,0 @@
-const CommentModel = require('../../../models/comment');
-const ActionsService = require('../../../services/actions');
-const {arrayJoinBy, singleJoinBy} = require('../../../graph/loaders/util');
-const sc = require('snake-case');
-const debug = require('debug')('talk:cli:verify');
-
-const getBatch = async (limit, offset) => CommentModel
-  .find({})
-  .select({'id': 1, 'action_counts': 1, 'reply_count': 1})
-  .limit(limit)
-  .skip(offset)
-  .sort('created_at');
-
-module.exports = async ({fix, limit, batch}) => {
-  let operations = [];
-
-  // Count how many comments there are to process.
-  const totalCount = await CommentModel.count();
-
-  let offset = 0;
-  let comments = [];
-  let commentIDs = [];
-
-  console.log(`Processing ${totalCount} comments in batches of ${limit}...`);
-
-  // Keep processing documents until there are is none left.
-  while (offset < totalCount) {
-
-    // Get a batch of comments.
-    comments = await getBatch(batch, offset);
-    commentIDs = comments.map(({id}) => id);
-
-    // Get their reply counts.
-    let allReplyCounts = await CommentModel
-      .aggregate([
-        {
-          $match: {
-            parent_id: {
-              $in: commentIDs,
-            },
-            status: {
-              $in: ['NONE', 'ACCEPTED']
-            }
-          }
-        },
-        {
-          $group: {
-            _id: '$parent_id',
-            count: {
-              $sum: 1
-            }
-          }
-        }
-      ])
-      .then(singleJoinBy(commentIDs, '_id'))
-      .then((results) => results.map((result) => result ? result.count : 0));
-
-    // Get their action summaries.
-    let allActionSummaries = await ActionsService
-      .getActionSummaries(commentIDs)
-      .then(arrayJoinBy(commentIDs, 'item_id'));
-
-    // Loop over the comments, with their action summaries.
-    for (let i = 0; i < comments.length; i++) {
-      let comment = comments[i];
-      let actionSummaries = allActionSummaries[i];
-      let replyCount = allReplyCounts[i];
-
-      // And check to see if the action summaries we just computed match what is
-      // currently set for the comments.
-      let commentOperations = [];
-
-      // If the reply count needs to be updated, then update it!
-      if (comment.reply_count !== replyCount) {
-        commentOperations.push({
-          reply_count: replyCount,
-        });
-      }
-
-      // First we process all the group id's.
-      for (let actionSummary of actionSummaries) {
-        if (actionSummary.group_id === null) {
-          continue;
-        }
-
-        // And we generate the group id.
-        const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
-        const GROUP_ID = sc(actionSummary.group_id.toLowerCase());
-
-        if (GROUP_ID.length <= 0) {
-          continue;
-        }
-
-        // And we add a new batch operation if the action summary is associated
-        // with a group.
-        const ACTION_COUNT_FIELD = `${ACTION_TYPE}_${GROUP_ID}`;
-
-        // Check that the action summaries match the cached counts.
-        if (!comment.action_counts || !(ACTION_COUNT_FIELD in comment.action_counts) || comment.action_counts[ACTION_COUNT_FIELD] !== actionSummary.count) {
-
-          // Batch updates for those changes.
-          commentOperations.push({
-            [`action_counts.${ACTION_COUNT_FIELD}`]: actionSummary.count,
-          });
-        }
-      }
-
-      // Group all the action summaries together from all the different group
-      // ids.
-      let groupedActionSummaries = actionSummaries.reduce((acc, actionSummary) => {
-        const ACTION_TYPE = sc(actionSummary.action_type.toLowerCase());
-
-        if (!(ACTION_TYPE in acc)) {
-          acc[ACTION_TYPE] = 0;
-        }
-
-        acc[ACTION_TYPE] += actionSummary.count;
-
-        return acc;
-      }, {});
-
-      for (const ACTION_COUNT_FIELD of Object.keys(groupedActionSummaries)) {
-        const count = groupedActionSummaries[ACTION_COUNT_FIELD];
-
-        // Check that the action summaries match the cached counts.
-        if (!comment.action_counts || !(ACTION_COUNT_FIELD in comment.action_counts) || comment.action_counts[ACTION_COUNT_FIELD] !== count) {
-
-          // Batch updates for those changes.
-          commentOperations.push({
-            [`action_counts.${ACTION_COUNT_FIELD}`]: count,
-          });
-        }
-      }
-
-      // If this comment has action summaries that should be updated, then
-      // perform an update!
-      if (commentOperations.length > 0) {
-        operations.push({
-          updateOne: {
-            filter: {
-              id: comment.id
-            },
-            update: {
-              $set: Object.assign({}, ...commentOperations),
-            },
-          },
-        });
-      }
-    }
-
-    debug(`Processed batch of ${comments.length} comments.`);
-
-    if (operations.length >= limit) {
-      debug(`Queued operations are ${operations.length}, reached limit of ${limit}, not processing any more.`);
-
-      if (operations.length > limit) {
-        debug(`${operations.length - limit} operations have been truncated to enforce the limit`);
-      }
-
-      break;
-    }
-
-    offset += batch;
-  }
-
-  const OPERATIONS_LENGTH = operations.length;
-
-  if (limit < Infinity && offset + comments.length < totalCount) {
-    console.log(`Processed ${offset + comments.length}/${totalCount} comments because we reached the update limit of ${limit}.`);
-  } else {
-    console.log(`Processed all ${totalCount} comments.`);
-  }
-
-  console.log(`${OPERATIONS_LENGTH} documents need fixing.`);
-
-  // If fix was enabled, execute the batch writes.
-  if (OPERATIONS_LENGTH > 0) {
-    if (fix) {
-      debug(`Fixing ${OPERATIONS_LENGTH} documents...`);
-
-      while (operations.length) {
-        let batchOperations = operations.splice(0, batch);
-        let result = await CommentModel.collection.bulkWrite(batchOperations);
-
-        debug(`Fixed batch of ${result.modifiedCount} documents.`);
-      }
-
-      console.log(`Applied all ${OPERATIONS_LENGTH} fixes.`);
-    } else {
-      console.warn('Skipping fixing, --fix was not enabled, pass --fix to fix these errors');
-    }
-  }
-};

bin/verifications/database/index.js

@@ -1,12 +0,0 @@
-// This will import all the verifications that should be run by the:
-//
-//   cli verify database
-//
-// command. They exist in the form:
-//
-//   async ({fix = false, batch = 1000}) => {}
-//
-// where their options are derrived.
-module.exports = [
-  require('./comments'),
-];

circle.yml

@@ -1,13 +1,15 @@
 machine:
   node:
-    version: 8
+    version: 7.10.1
   services:
     - docker
     - redis
   environment:
     PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
     NODE_ENV: "test"
-  pre:
+
+dependencies:
+  override:
     # TODO: use the following to add in support for MongoDB 3.4.
     # # Upgrade the database version to 3.4.
     # - sudo apt-get purge mongodb-org*
@@ -17,20 +19,11 @@ machine:
     # - sudo apt-get install -y mongodb-org
     # - sudo service mongod restart
 
-    # Install chromium for e2e and remove old google-chrome
-    - sudo rm -rf /opt/google/chrome
-    - sudo rm -f /usr/bin/google-chrome*
-    - sudo apt-get update
-    - sudo apt-get install chromium-browser
-
-dependencies:
-  override:
-
     # Install node dependencies.
     - yarn --version
-    - yarn global add node-gyp nsp --force
     - yarn
-
+  cache_directories:
+    - ~/.cache/yarn
   post:
     # Build the static assets.
     - yarn build
@@ -48,9 +41,8 @@ test:
   override:
     # Run the tests using the junit reporter.
     - MOCHA_FILE=$CIRCLE_TEST_REPORTS/junit/test-results.xml MOCHA_REPORTER=mocha-junit-reporter yarn test
-    # Check dependancies using nsp.
-    - nsp check
-    - yarn e2e-ci
+    # Run the e2e test suite.
+    # - E2E_REPORT_PATH=$CIRCLE_TEST_REPORTS/e2e yarn e2e
 
 deployment:
   release:

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"
+  ]
+}

client/.eslintrc.json

@@ -1,3 +1,23 @@
 {
-  "extends": "@coralproject/eslint-config-talk/client"
+    "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"] }]
+    }
 }

client/coral-admin/src/AppRouter.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import {Router, Route, IndexRedirect, IndexRoute} from 'react-router';
+import {Router, Route, IndexRedirect, browserHistory, Redirect} from 'react-router';
 
 import Configure from 'routes/Configure';
+import Dashboard from 'routes/Dashboard';
 import Install from 'routes/Install';
 import Stories from 'routes/Stories';
-import Community from 'routes/Community/containers/Community';
+import {CommunityLayout, Community} from 'routes/Community';
 import {ModerationLayout, Moderation} from 'routes/Moderation';
 
 import Layout from 'containers/Layout';
@@ -14,13 +14,14 @@ const routes = (
   <div>
     <Route exact path="/admin/install" component={Install}/>
     <Route path='/admin' component={Layout}>
-      <IndexRedirect to='/admin/moderate' />
+      <IndexRedirect to='/admin/moderate/all' />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />
+      <Route path='dashboard' component={Dashboard} />
 
       {/* Community Routes */}
 
-      <Route path='community'>
+      <Route path='community' component={CommunityLayout}>
         <Route path='flagged' components={Community}>
           <Route path=':id' components={Community} />
         </Route>
@@ -33,26 +34,28 @@ const routes = (
       {/* Moderation Routes */}
 
       <Route path='moderate' component={ModerationLayout}>
-        <IndexRoute components={Moderation} />
-
-        <Route path=':tabOrId' components={Moderation} />
-
-        <Route path=':tab' components={Moderation}>
+        <Route path='all' components={Moderation}>
           <Route path=':id' components={Moderation} />
         </Route>
+        <Route path='accepted' components={Moderation}>
+          <Route path=':id' components={Moderation} />
+        </Route>
+        <Route path='premod' components={Moderation}>
+          <Route path=':id' components={Moderation} />
+        </Route>
+        <Route path='rejected' components={Moderation}>
+          <Route path=':id' components={Moderation} />
+        </Route>
+        <Route path='flagged' components={Moderation}>
+          <Route path=':id' components={Moderation} />
+        </Route>
+        <Redirect from=':id' to='all/:id' />
+        <IndexRedirect to='all' />
       </Route>
     </Route>
   </div>
 );
 
-class AppRouter extends React.Component {
-  static contextTypes = {
-    history: PropTypes.object,
-  };
-
-  render() {
-    return <Router history={this.context.history} routes={routes} />;
-  }
-}
+const AppRouter = () => <Router history={browserHistory} routes={routes} />;
 
 export default AppRouter;

client/coral-admin/src/actions/assets.js

@@ -1,18 +1,14 @@
-import queryString from 'query-string';
-
 import {
   FETCH_ASSETS_REQUEST,
   FETCH_ASSETS_SUCCESS,
   FETCH_ASSETS_FAILURE,
-  SET_PAGE,
-  SET_SEARCH_VALUE,
-  SET_CRITERIA,
   UPDATE_ASSET_STATE_REQUEST,
   UPDATE_ASSET_STATE_SUCCESS,
   UPDATE_ASSET_STATE_FAILURE,
   UPDATE_ASSETS
-} from '../constants/stories';
+} from '../constants/assets';
 
+import coralApi from '../../../coral-framework/helpers/request';
 import t from 'coral-framework/services/i18n';
 
 /**
@@ -21,16 +17,13 @@ import t from 'coral-framework/services/i18n';
 
 // Fetch a page of assets
 // Get comments to fill each of the three lists on the mod queue
-export const fetchAssets = (query = {}) => (dispatch, _, {rest}) => {
+export const fetchAssets = (skip = '', limit = '', search = '', sort = '', filter = '') => (dispatch) => {
   dispatch({type: FETCH_ASSETS_REQUEST});
-  return rest(`/assets?${queryString.stringify(query)}`)
-    .then(({result, page, count, limit, totalPages}) =>
+  return coralApi(`/assets?skip=${skip}&limit=${limit}&sort=${sort}&search=${search}&filter=${filter}`)
+    .then(({result, count}) =>
       dispatch({type: FETCH_ASSETS_SUCCESS,
         assets: result,
-        page,
-        count,
-        limit,
-        totalPages,
+        count
       }))
     .catch((error) => {
       console.error(error);
@@ -41,9 +34,9 @@ export const fetchAssets = (query = {}) => (dispatch, _, {rest}) => {
 
 // Update an asset state
 // Get comments to fill each of the three lists on the mod queue
-export const updateAssetState = (id, closedAt) => (dispatch, _, {rest}) => {
-  dispatch({type: UPDATE_ASSET_STATE_REQUEST, id, closedAt});
-  return rest(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
+export const updateAssetState = (id, closedAt) => (dispatch) => {
+  dispatch({type: UPDATE_ASSET_STATE_REQUEST});
+  return coralApi(`/assets/${id}/status`, {method: 'PUT', body: {closedAt}})
     .then(() => dispatch({type: UPDATE_ASSET_STATE_SUCCESS}))
     .catch((error) => {
       console.error(error);
@@ -55,19 +48,3 @@ export const updateAssetState = (id, closedAt) => (dispatch, _, {rest}) => {
 export const updateAssets = (assets) => (dispatch) => {
   dispatch({type: UPDATE_ASSETS, assets});
 };
-
-export const setPage = (page) => ({
-  type: SET_PAGE,
-  page,
-});
-
-export const setSearchValue = (value) => ({
-  type: SET_SEARCH_VALUE,
-  value,
-});
-
-export const setCriteria = (criteria) => ({
-  type: SET_CRITERIA,
-  criteria,
-});
-

client/coral-admin/src/actions/auth.js

@@ -1,13 +1,16 @@
 import bowser from 'bowser';
 import * as actions from '../constants/auth';
+import coralApi from 'coral-framework/helpers/request';
+import * as Storage from 'coral-framework/helpers/storage';
+import {handleAuthToken} from 'coral-framework/actions/auth';
+import {resetWebsocket} from 'coral-framework/services/client';
 import t from 'coral-framework/services/i18n';
-import jwtDecode from 'jwt-decode';
 
 //==============================================================================
 // SIGN IN
 //==============================================================================
 
-export const handleLogin = (email, password, recaptchaResponse) => (dispatch, _, {rest, client, storage}) => {
+export const handleLogin = (email, password, recaptchaResponse) => (dispatch) => {
   dispatch({type: actions.LOGIN_REQUEST});
 
   const params = {
@@ -24,18 +27,18 @@ export const handleLogin = (email, password, recaptchaResponse) => (dispatch, _,
     };
   }
 
-  return rest('/auth/local', params)
+  return coralApi('/auth/local', params)
     .then(({user, token}) => {
 
       if (!user) {
-        if (!bowser.safari && !bowser.ios && storage) {
-          storage.removeItem('token');
+        if (!bowser.safari && !bowser.ios) {
+          Storage.removeItem('token');
         }
         return dispatch(checkLoginFailure('not logged in'));
       }
 
       dispatch(handleAuthToken(token));
-      client.resetWebsocket();
+      resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
     .catch((error) => {
@@ -81,11 +84,11 @@ const forgotPasswordFailure = (error) => ({
   error,
 });
 
-export const requestPasswordReset = (email) => (dispatch, _, {rest}) => {
+export const requestPasswordReset = (email) => (dispatch) => {
   dispatch(forgotPasswordRequest(email));
   const redirectUri = location.href;
 
-  return rest('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
+  return coralApi('/account/password/reset', {method: 'POST', body: {email,  loc: redirectUri}})
     .then(() => dispatch(forgotPasswordSuccess()))
     .catch((error) => {
       console.error(error);
@@ -113,18 +116,18 @@ const checkLoginFailure = (error) => ({
   error
 });
 
-export const checkLogin = () => (dispatch, _, {rest, client, storage}) => {
+export const checkLogin = () => (dispatch) => {
   dispatch(checkLoginRequest());
-  return rest('/auth')
+  return coralApi('/auth')
     .then(({user}) => {
       if (!user) {
-        if (!bowser.safari && !bowser.ios && storage) {
-          storage.removeItem('token');
+        if (!bowser.safari && !bowser.ios) {
+          Storage.removeItem('token');
         }
         return dispatch(checkLoginFailure('not logged in'));
       }
 
-      client.resetWebsocket();
+      resetWebsocket();
       dispatch(checkLoginSuccess(user));
     })
     .catch((error) => {
@@ -133,33 +136,3 @@ export const checkLogin = () => (dispatch, _, {rest, client, storage}) => {
       dispatch(checkLoginFailure(errorMessage));
     });
 };
-
-//==============================================================================
-// LOGOUT
-//==============================================================================
-
-export const logout = () => (dispatch, _, {rest, client, storage}) => {
-  return rest('/auth', {method: 'DELETE'}).then(() => {
-    if (storage) {
-      storage.removeItem('token');
-    }
-
-    // Reset the websocket.
-    client.resetWebsocket();
-
-    dispatch({type: actions.LOGOUT});
-  });
-};
-
-//==============================================================================
-// AUTH TOKEN
-//==============================================================================
-
-export const handleAuthToken = (token) => (dispatch, _, {storage}) => {
-  if (storage) {
-    storage.setItem('exp', jwtDecode(token).exp);
-    storage.setItem('token', token);
-  }
-  dispatch({type: 'HANDLE_AUTH_TOKEN'});
-};
-

client/coral-admin/src/actions/community.js

@@ -1,12 +1,11 @@
-import queryString from 'query-string';
+import qs from 'qs';
 
 import {
-  FETCH_USERS_REQUEST,
-  FETCH_USERS_SUCCESS,
-  FETCH_USERS_FAILURE,
+  FETCH_COMMENTERS_REQUEST,
+  FETCH_COMMENTERS_SUCCESS,
+  FETCH_COMMENTERS_FAILURE,
   SORT_UPDATE,
-  SET_PAGE,
-  SET_SEARCH_VALUE,
+  COMMENTERS_NEW_PAGE,
   SET_ROLE,
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
@@ -15,15 +14,17 @@ import {
   HIDE_REJECT_USERNAME_DIALOG
 } from '../constants/community';
 
+import coralApi from '../../../coral-framework/helpers/request';
 import t from 'coral-framework/services/i18n';
 
-export const fetchUsers = (query = {}) => (dispatch, _, {rest}) => {
-  dispatch(requestFetchUsers());
-  rest(`/users?${queryString.stringify(query)}`)
+export const fetchAccounts = (query = {}) => (dispatch) => {
+
+  dispatch(requestFetchAccounts());
+  coralApi(`/users?${qs.stringify(query)}`)
     .then(({result, page, count, limit, totalPages}) =>{
       dispatch({
-        type: FETCH_USERS_SUCCESS,
-        users: result,
+        type: FETCH_COMMENTERS_SUCCESS,
+        accounts: result,
         page,
         count,
         limit,
@@ -33,12 +34,12 @@ export const fetchUsers = (query = {}) => (dispatch, _, {rest}) => {
     .catch((error) => {
       console.error(error);
       const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-      dispatch({type: FETCH_USERS_FAILURE, error: errorMessage});
+      dispatch({type: FETCH_COMMENTERS_FAILURE, error: errorMessage});
     });
 };
 
-const requestFetchUsers = () => ({
-  type: FETCH_USERS_REQUEST
+const requestFetchAccounts = () => ({
+  type: FETCH_COMMENTERS_REQUEST
 });
 
 export const updateSorting = (sort) => ({
@@ -46,28 +47,22 @@ export const updateSorting = (sort) => ({
   sort
 });
 
-export const setPage = (page) => ({
-  type: SET_PAGE,
-  page,
+export const newPage = () => ({
+  type: COMMENTERS_NEW_PAGE
 });
 
-export const setSearchValue = (value) => ({
-  type: SET_SEARCH_VALUE,
-  value,
-});
-
-export const setRole = (id, role) => (dispatch, _, {rest}) => {
-  return rest(`/users/${id}/role`, {method: 'POST', body: {role}})
-    .then(() => {
-      return dispatch({type: SET_ROLE, id, role});
-    });
+export const setRole = (id, role) => (dispatch) => {
+  return coralApi(`/users/${id}/role`, {method: 'POST', body: {role}})
+  .then(() => {
+    return dispatch({type: SET_ROLE, id, role});
+  });
 };
 
-export const setCommenterStatus = (id, status) => (dispatch, _, {rest}) => {
-  return rest(`/users/${id}/status`, {method: 'POST', body: {status}})
-    .then(() => {
-      return dispatch({type: SET_COMMENTER_STATUS, id, status});
-    });
+export const setCommenterStatus = (id, status) => (dispatch) => {
+  return coralApi(`/users/${id}/status`, {method: 'POST', body: {status}})
+  .then(() => {
+    return dispatch({type: SET_COMMENTER_STATUS, id, status});
+  });
 };
 
 // Ban User Dialog

client/coral-admin/src/actions/configure.js

@@ -1,13 +0,0 @@
-import * as actions from 'constants/configure';
-
-export const updatePending = ({updater, errorUpdater}) => {
-  return {type: actions.UPDATE_PENDING, updater, errorUpdater};
-};
-
-export const clearPending = () => {
-  return {type: actions.CLEAR_PENDING};
-};
-
-export const setActiveSection = (section) => {
-  return {type: actions.SET_ACTIVE_SECTION, section};
-};

client/coral-admin/src/actions/install.js

@@ -1,3 +1,4 @@
+import coralApi from 'coral-framework/helpers/request';
 import * as actions from '../constants/install';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
@@ -26,19 +27,19 @@ const validation = (formData, dispatch, next) => {
 
   // Required Validation
   const empty = validKeys
-    .filter((name) => {
-      const cond = !formData[name].length;
+  .filter((name) => {
+    const cond = !formData[name].length;
 
-      if (cond) {
+    if (cond) {
 
-        // Adding Error
-        dispatch(addError(name, 'This field is required.'));
-      } else {
-        dispatch(addError(name, ''));
-      }
+    // Adding Error
+      dispatch(addError(name, 'This field is required.'));
+    } else {
+      dispatch(addError(name, ''));
+    }
 
-      return cond;
-    });
+    return cond;
+  });
 
   if (empty.length) {
     dispatch(hasError());
@@ -92,23 +93,23 @@ const validation = (formData, dispatch, next) => {
 };
 
 export const submitSettings = () => (dispatch, getState) => {
-  const settingsFormData = getState().install.data.settings;
+  const settingsFormData = getState().install.toJS().data.settings;
   validation(settingsFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
 export const submitUser = () => (dispatch, getState) => {
-  const userFormData = getState().install.data.user;
+  const userFormData = getState().install.toJS().data.user;
   validation(userFormData, dispatch, function() {
     dispatch(nextStep());
   });
 };
 
-export const finishInstall = () => (dispatch, getState, {rest}) => {
-  const data = getState().install.data;
+export const finishInstall = () => (dispatch, getState) => {
+  const data = getState().install.toJS().data;
   dispatch(installRequest());
-  return rest('/setup', {method: 'POST', body: data})
+  return coralApi('/setup', {method: 'POST', body: data})
     .then(() => {
       dispatch(installSuccess());
       dispatch(nextStep());
@@ -128,18 +129,18 @@ const checkInstallRequest = () => ({type: actions.CHECK_INSTALL_REQUEST});
 const checkInstallSuccess = (installed) => ({type: actions.CHECK_INSTALL_SUCCESS, installed});
 const checkInstallFailure = (error) => ({type: actions.CHECK_INSTALL_FAILURE, error});
 
-export const checkInstall = (next) => async (dispatch, _, {rest}) => {
+export const checkInstall = (next) => (dispatch) => {
   dispatch(checkInstallRequest());
-
-  try {
-    const {installed} = await rest('/setup');
-    dispatch(checkInstallSuccess(installed));
-    if (installed) {
-      next();
-    }
-  } catch (error) {
-    console.error(error);
-    const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
-    dispatch(checkInstallFailure(errorMessage));
-  }
+  coralApi('/setup')
+    .then(({installed}) => {
+      dispatch(checkInstallSuccess(installed));
+      if (installed) {
+        next();
+      }
+    })
+    .catch((error) => {
+      console.error(error);
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch(checkInstallFailure(errorMessage));
+    });
 };

client/coral-admin/src/actions/moderation.js

@@ -4,24 +4,44 @@ export const toggleModal = (open) => ({type: actions.TOGGLE_MODAL, open});
 export const singleView = () => ({type: actions.SINGLE_VIEW});
 
 // hide shortcuts note
-export const hideShortcutsNote = () => (dispatch, _, {storage}) => {
+export const hideShortcutsNote = () => {
   try {
-    if (storage) {
-      storage.setItem('coral:shortcutsNote', 'hide');
-    }
+    window.localStorage.setItem('coral:shortcutsNote', 'hide');
   } catch (e) {
 
     // above will fail in Safari private mode
   }
 
-  dispatch({type: actions.HIDE_SHORTCUTS_NOTE});
+  return {type: actions.HIDE_SHORTCUTS_NOTE};
 };
 
+export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
+export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
+
 export const setSortOrder = (order) => ({
   type: actions.SET_SORT_ORDER,
   order
 });
 
+export const changeUserDetailStatuses = (tab) => {
+  let statuses;
+  if (tab === 'all') {
+    statuses = ['NONE', 'ACCEPTED', 'REJECTED', 'PREMOD'];
+  } else if (tab === 'rejected') {
+    statuses = ['REJECTED'];
+  }
+  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
+};
+
+export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
+
+export const toggleSelectCommentInUserDetail = (id, active) => {
+  return {
+    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
+    id
+  };
+};
+
 export const toggleStorySearch = (active) => ({
   type: active ? actions.SHOW_STORY_SEARCH : actions.HIDE_STORY_SEARCH
 });

client/coral-admin/src/actions/settings.js

@@ -0,0 +1,59 @@
+import coralApi from '../../../coral-framework/helpers/request';
+import t from 'coral-framework/services/i18n';
+
+export const SETTINGS_LOADING = 'SETTINGS_LOADING';
+export const SETTINGS_RECEIVED = 'SETTINGS_RECEIVED';
+export const SETTINGS_FETCH_ERROR = 'SETTINGS_FETCH_ERROR';
+
+export const SETTINGS_UPDATED = 'SETTINGS_UPDATED';
+
+export const SAVE_SETTINGS_LOADING = 'SAVE_SETTINGS_LOADING';
+export const SAVE_SETTINGS_SUCCESS = 'SAVE_SETTINGS_SUCCESS';
+export const SAVE_SETTINGS_FAILED = 'SAVE_SETTINGS_FAILED';
+
+export const WORDLIST_UPDATED = 'WORDLIST_UPDATED';
+export const DOMAINLIST_UPDATED = 'DOMAINLIST_UPDATED';
+
+export const fetchSettings = () => (dispatch) => {
+  dispatch({type: SETTINGS_LOADING});
+  coralApi('/settings')
+    .then((settings) => {
+      dispatch({type: SETTINGS_RECEIVED, settings});
+    })
+    .catch((error) => {
+      console.error(error);
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch({type: SETTINGS_FETCH_ERROR, error: errorMessage});
+    });
+};
+
+// for updating top-level settings
+export const updateSettings = (settings) => {
+  return {type: SETTINGS_UPDATED, settings};
+};
+
+// this is a nested property, so it needs a special action.
+export const updateWordlist = (listName, list) => {
+  return {type: WORDLIST_UPDATED, listName, list};
+};
+
+export const updateDomainlist = (listName, list) => {
+  return {type: DOMAINLIST_UPDATED, listName, list};
+};
+
+export const saveSettingsToServer = () => (dispatch, getState) => {
+  let settings = getState().settings.toJS();
+  if (settings.charCount) {
+    settings.charCount = parseInt(settings.charCount);
+  }
+  dispatch({type: SAVE_SETTINGS_LOADING});
+  coralApi('/settings', {method: 'PUT', body: settings})
+    .then(() => {
+      dispatch({type: SAVE_SETTINGS_SUCCESS, settings});
+    })
+    .catch((error) => {
+      console.error(error);
+      const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
+      dispatch({type: SAVE_SETTINGS_FAILED, error: errorMessage});
+    });
+};

client/coral-admin/src/actions/userDetail.js

@@ -1,28 +0,0 @@
-import * as actions from 'constants/userDetail';
-
-export const viewUserDetail = (userId) => ({type: actions.VIEW_USER_DETAIL, userId});
-export const hideUserDetail = () => ({type: actions.HIDE_USER_DETAIL});
-
-export const changeUserDetailStatuses = (tab) => {
-  let statuses = null;
-  if (tab === 'rejected') {
-    statuses = ['REJECTED'];
-  }
-  return {type: actions.CHANGE_USER_DETAIL_STATUSES, tab, statuses};
-};
-
-export const clearUserDetailSelections = () => ({type: actions.CLEAR_USER_DETAIL_SELECTIONS});
-
-export const toggleSelectCommentInUserDetail = (id, active) => {
-  return {
-    type: active ? actions.SELECT_USER_DETAIL_COMMENT : actions.UNSELECT_USER_DETAIL_COMMENT,
-    id
-  };
-};
-
-export const toggleSelectAllCommentInUserDetail = (ids, active) => {
-  return {
-    type: active ? actions.SELECT_ALL_USER_DETAIL_COMMENT : actions.CLEAR_USER_DETAIL_SELECTIONS,
-    ids
-  };
-};

client/coral-admin/src/actions/users.js

@@ -1,3 +1,4 @@
+import coralApi from '../../../coral-framework/helpers/request';
 import * as userTypes from '../constants/users';
 import t from 'coral-framework/services/i18n';
 
@@ -6,9 +7,9 @@ import t from 'coral-framework/services/i18n';
  */
 // change status of a user
 export const userStatusUpdate = (status, userId, commentId) => {
-  return (dispatch, _, {rest}) => {
+  return (dispatch) => {
     dispatch({type: userTypes.UPDATE_STATUS_REQUEST});
-    return rest(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
+    return coralApi(`/users/${userId}/status`, {method: 'POST', body: {status: status, comment_id: commentId}})
       .then((res) => dispatch({type: userTypes.UPDATE_STATUS_SUCCESS, res}))
       .catch((error) => {
         console.error(error);
@@ -20,8 +21,8 @@ export const userStatusUpdate = (status, userId, commentId) => {
 
 // change status of a user
 export const sendNotificationEmail = (userId, subject, body) => {
-  return (dispatch, _, {rest}) => {
-    return rest(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
+  return (dispatch) => {
+    return coralApi(`/users/${userId}/email`, {method: 'POST', body: {subject, body}})
       .catch((error) => {
         console.error(error);
         const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();
@@ -32,8 +33,8 @@ export const sendNotificationEmail = (userId, subject, body) => {
 
 // let a user edit their username
 export const enableUsernameEdit = (userId) => {
-  return (dispatch, _, {rest}) => {
-    return rest(`/users/${userId}/username-enable`, {method: 'POST'})
+  return (dispatch) => {
+    return coralApi(`/users/${userId}/username-enable`, {method: 'POST'})
       .catch((error) => {
         console.error(error);
         const errorMessage = error.translation_key ? t(`error.${error.translation_key}`) : error.toString();

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

@@ -0,0 +1,32 @@
+import React, {PropTypes} from 'react';
+import styles from './ModerationList.css';
+import {Button} from 'coral-ui';
+import {menuActionsMap} from '../routes/Moderation/helpers/moderationQueueActionsMap';
+
+import t from 'coral-framework/services/i18n';
+
+const ActionButton = ({type = '', active, ...props}) => {
+  const typeName = type.toLowerCase();
+  let text = menuActionsMap[type].text;
+
+  if (text === 'approve' && active) {
+    text = 'approved';
+  } else if (text === 'reject' && active) {
+    text = 'rejected';
+  }
+
+  return (
+    <Button
+      className={`${typeName} ${styles.actionButton} ${props.minimal ? styles.minimal : ''} ${active ? styles[`${typeName}__active`] : ''}`}
+      cStyle={typeName}
+      icon={menuActionsMap[type].icon}
+      onClick={type === 'APPROVE' ? props.acceptComment : props.rejectComment}
+    >{props.minimal ? '' : t(`modqueue.${text}`)}</Button>
+  );
+};
+
+ActionButton.propTypes = {
+  active: PropTypes.bool
+};
+
+export default ActionButton;

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {PropTypes} from 'react';
 import {Button, Icon} from 'coral-ui';
 import {Menu} from 'react-mdl';
 import cn from 'classnames';
@@ -32,9 +31,8 @@ class ActionsMenu extends React.Component {
   };
 
   render() {
-    const {className = ''} = this.props;
     return (
-      <div className={cn(styles.root, className)} onBlur={this.syncOpenState} >
+      <div className={styles.root} onBlur={this.syncOpenState} >
         <Button
           cStyle='actions'
           className={cn(styles.button, {[styles.buttonOpen]: this.state.open})}
@@ -59,8 +57,6 @@ class ActionsMenu extends React.Component {
 
 ActionsMenu.propTypes = {
   icon: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
 };
 
 export default ActionsMenu;

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

@@ -1,16 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 import {MenuItem} from 'react-mdl';
-import PropTypes from 'prop-types';
 import styles from './ActionsMenu.css';
-import camelCase from 'lodash/camelCase';
 
 const ActionsMenuItem = (props) =>
-  <MenuItem className={cn(styles.menuItem, props.className, 'action-menu-item')} {...props} id={camelCase(props.children)}/>;
-  
-ActionsMenuItem.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.string,
-};
+  <MenuItem className={cn(styles.menuItem, props.className)} {...props} />;
 
 export default ActionsMenuItem;

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

@@ -1,10 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {PropTypes} from 'react';
 import Layout from 'coral-admin/src/components/ui/Layout';
 import styles from './NotFound.css';
 import {Button, TextField, Alert, Success} from 'coral-ui';
 import Recaptcha from 'react-recaptcha';
-import cn from 'classnames';
 
 class AdminLogin extends React.Component {
 
@@ -35,22 +33,19 @@ class AdminLogin extends React.Component {
   render () {
     const {errorMessage, loginMaxExceeded, recaptchaPublic} = this.props;
     const signInForm = (
-      <form className="talk-admin-login-sign-in" onSubmit={this.handleSignIn}>
+      <form onSubmit={this.handleSignIn}>
         {errorMessage && <Alert>{errorMessage}</Alert>}
         <TextField
-          id="email"
           label='Email Address'
           value={this.state.email}
           onChange={(e) => this.setState({email: e.target.value})} />
         <TextField
-          id="password"
           label='Password'
           value={this.state.password}
           onChange={(e) => this.setState({password: e.target.value})}
           type='password' />
         <div style={{height: 10}}></div>
         <Button
-          className="talk-admin-login-sign-in-button"
           type='submit'
           cStyle='black'
           full
@@ -74,27 +69,27 @@ class AdminLogin extends React.Component {
     );
     const requestPasswordForm = (
       this.props.passwordRequestSuccess
-        ? <p className={styles.passwordRequestSuccess} onClick={() => {
-          location.href = location.href;
-        }}>
+      ? <p className={styles.passwordRequestSuccess} onClick={() => {
+        location.href = location.href;
+      }}>
           {this.props.passwordRequestSuccess} <a className={styles.signInLink} href="#">Sign in</a>
           <Success />
         </p>
-        : <form onSubmit={this.handleRequestPassword}>
-          <TextField
-            label='Email Address'
-            value={this.state.email}
-            onChange={(e) => this.setState({email: e.target.value})} />
-          <Button
-            type='submit'
-            cStyle='black'
-            full
-            onClick={this.handleRequestPassword}>Reset Password</Button>
-        </form>
+      : <form onSubmit={this.handleRequestPassword}>
+        <TextField
+          label='Email Address'
+          value={this.state.email}
+          onChange={(e) => this.setState({email: e.target.value})} />
+        <Button
+          type='submit'
+          cStyle='black'
+          full
+          onClick={this.handleRequestPassword}>Reset Password</Button>
+      </form>
     );
     return (
       <Layout fixedDrawer restricted={true}>
-        <div className={cn(styles.loginLayout, 'talk-admin-login')}>
+        <div className={styles.loginLayout}>
           <h1 className={styles.loginHeader}>Team sign in</h1>
           <p className={styles.loginCTA}>Sign in to interact with your community.</p>
           { this.state.requestPassword ? requestPasswordForm : signInForm }
@@ -109,9 +104,7 @@ AdminLogin.propTypes = {
   handleLogin: PropTypes.func.isRequired,
   passwordRequestSuccess: PropTypes.string,
   loginError: PropTypes.string,
-  recaptchaPublic: PropTypes.string,
-  requestPasswordReset: PropTypes.func,
-  errorMessage: PropTypes.string,
+  recaptchaPublic: PropTypes.string
 };
 
 export default AdminLogin;

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

@@ -1,44 +0,0 @@
-.root {
-  display: block;
-  color: #519954;
-  border: solid 2px rgba(81, 153, 84, 0.75);
-  background: white;
-  padding: 10px 12px;
-  box-sizing: border-box;
-  vertical-align: middle;
-  line-height: 24px;
-  font-size: 17px;
-  height: 47px;
-  border-radius: 3px;
-  text-transform: capitalize;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
-  width: 129px;
-  transform: scale(.8);
-  margin: 0;
-
-  &:hover {
-   box-shadow: none;
-   color: white;
-   background-color: #519954;
-   cursor: pointer;
-  }
-}
-
-.active {
-  box-shadow: none;
-  color: white;
-  background-color: #519954;
-
-  &:hover {
-    cursor: not-allowed;
-  }
-}
-
-.minimal {
-  width: 45px;
-  min-width: 0;
-}
-
-.icon {
-  margin-right: 5px;
-}

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import cn from 'classnames';
-import styles from './ApproveButton.css';
-import {Icon} from 'coral-ui';
-
-import t from 'coral-framework/services/i18n';
-
-const ApproveButton = ({active, minimal, onClick, className}) => {
-  const text = active ? t('modqueue.approved') : t('modqueue.approve');
-  return (
-    <button
-      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active}, className)}
-      onClick={onClick}
-    >
-      <Icon name={'done'} className={styles.icon} />
-      {!minimal && text}
-    </button>
-  );
-};
-
-ApproveButton.propTypes = {
-  className: PropTypes.string,
-  active: PropTypes.bool,
-  minimal: PropTypes.bool,
-  onClick: PropTypes.func,
-};
-
-export default ApproveButton;
-

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

@@ -1,6 +1,4 @@
-import React from 'react';
-import cn from 'classnames';
-import PropTypes from 'prop-types';
+import React, {PropTypes} from 'react';
 import {Dialog} from 'coral-ui';
 import styles from './BanUserDialog.css';
 
@@ -9,34 +7,28 @@ import t from 'coral-framework/services/i18n';
 
 const BanUserDialog = ({open, onCancel, onPerform, username, info}) => (
   <Dialog
-    className={cn(styles.dialog, 'talk-ban-user-dialog')}
+    className={styles.dialog}
     id="banUserDialog"
     open={open}
     onCancel={onCancel}
     title={t('bandialog.ban_user')}>
     <span className={styles.close} onClick={onCancel}>×</span>
-    <div className={styles.header}>
-      <h2>{t('bandialog.ban_user')}</h2>
-    </div>
-    <div className={styles.separator}>
-      <h3>{t('bandialog.are_you_sure', username)}</h3>
-      <i>{info}</i>
-    </div>
-    <div className={styles.buttons}>
-      <Button
-        className={cn(styles.cancel, 'talk-ban-user-dialog-button-cancel')}
-        cStyle="cancel"
-        onClick={onCancel}
-        raised >
-        {t('bandialog.cancel')}
-      </Button>
-      <Button 
-        className={cn(styles.ban, 'talk-ban-user-dialog-button-confirm')}
-        cStyle="black"
-        onClick={onPerform}
-        raised >
-        {t('bandialog.yes_ban_user')}
-      </Button>
+    <div>
+      <div className={styles.header}>
+        <h2>{t('bandialog.ban_user')}</h2>
+      </div>
+      <div className={styles.separator}>
+        <h3>{t('bandialog.are_you_sure', username)}</h3>
+        <i>{info}</i>
+      </div>
+      <div className={styles.buttons}>
+        <Button cStyle="cancel" className={styles.cancel} onClick={onCancel} raised>
+          {t('bandialog.cancel')}
+        </Button>
+        <Button cStyle="black" className={styles.ban} onClick={onPerform} raised>
+          {t('bandialog.yes_ban_user')}
+        </Button>
+      </div>
     </div>
   </Dialog>
 );

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

@@ -1,28 +0,0 @@
-.root {
-  position: relative;
-}
-
-.bodyLeave {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  background-color: white;
-  opacity: 1.0;
-  transition: background 400ms, opacity 800ms 1600ms;
-  pointer-events: none;
-}
-
-.bodyLeaveActive {
-  opacity: 0;
-  background-color: rgba(255,255,0, 0.2);
-}
-
-.bodyEnter {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.bodyEnterActive {
-  opacity: 1.0;
-  transition: opacity 800ms 2400ms;
-}

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import {murmur3} from 'murmurhash-js';
-import {CSSTransitionGroup} from 'react-transition-group';
-import styles from './CommentAnimatedEdit.css';
-import PropTypes from 'prop-types';
-
-const CommentBodyHighlighter = ({children, body}) => {
-  return (
-    <CSSTransitionGroup
-      component={'div'}
-      className={styles.root}
-      transitionName={{
-        enter: styles.bodyEnter,
-        enterActive: styles.bodyEnterActive,
-        leave: styles.bodyLeave,
-        leaveActive: styles.bodyLeaveActive,
-      }}
-      transitionEnter={true}
-      transitionLeave={true}
-      transitionEnterTimeout={3600}
-      transitionLeaveTimeout={2800}
-    >
-      {React.cloneElement(React.Children.only(children), {key: murmur3(body)})}
-    </CSSTransitionGroup>
-  );
-};
-
-CommentBodyHighlighter.propTypes = {
-  children: PropTypes.node,
-  body: PropTypes.string,
-};
-
-export default CommentBodyHighlighter;

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

@@ -1,86 +0,0 @@
-import React from 'react';
-import {matchLinks} from '../utils';
-import memoize from 'lodash/memoize';
-
-function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-}
-
-// generate a regulare expression that catches the `phrases`.
-function generateRegExp(phrases) {
-  const inner = phrases
-    .map((phrase) =>
-      phrase.split(/\s+/)
-        .map((word) => escapeRegExp(word))
-        .join('[\\s"?!.]+')
-    ).join('|');
-
-  const pattern = `(^|[^\\w])(${inner})(?=[^\\w]|$)`;
-  try {
-    return new RegExp(pattern, 'iu');
-  }
-  catch (_err) {
-
-    // IE does not support unicode support, so we'll create one without.
-    return new RegExp(pattern, 'i');
-  }
-}
-
-// Generate a regular expression detecting `suspectWords` and `bannedWords` phrases.
-function getPhrasesRegexp(suspectWords, bannedWords) {
-  return generateRegExp([...suspectWords, ...bannedWords]);
-}
-
-// Memoized version as arguments rarely change.
-const getPhrasesRegexpMemoized = memoize(getPhrasesRegexp);
-
-// markPhrases looks for `supsectWords` and `bannedWords` inside `body` and highlights them by returning
-// an array of React Elements.
-function markPhrases(body, suspectWords, bannedWords, keyPrefix) {
-  const regexp = getPhrasesRegexpMemoized(suspectWords, bannedWords);
-  const tokens = body.split(regexp);
-  return tokens.map((token, i) =>
-    i % 3 === 2
-      ? <mark key={`${keyPrefix}_${i}`}>{token}</mark>
-      : token
-  );
-}
-
-// markLinks looks for links inside `body` and highlights them by returning
-// an array of React Elements.
-function markLinks(body) {
-  const matches = matchLinks(body);
-  const content = [];
-  let index = 0;
-  if (matches) {
-    matches
-      .forEach((match, i) => {
-        content.push(body.substring(index, match.index));
-        content.push(<mark key={i}>{match.text}</mark>);
-        index = match.lastIndex;
-      });
-  }
-  content.push(body.substring(index));
-  return content;
-}
-
-export default ({suspectWords, bannedWords, body, ...rest}) => {
-
-  // First highlight links.
-  const content = markLinks(body)
-    .map((element, index) => {
-
-      // Keep highlighted links.
-      if (typeof element !== 'string') {
-        return element;
-      }
-
-      // Highlight suspect and banned phrase inside this part of text.
-      return markPhrases(element, suspectWords, bannedWords, index);
-    });
-  return (
-    <div {...rest}>
-      {content}
-    </div>
-  );
-};

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

@@ -0,0 +1,4 @@
+
+.textareaContainer {
+  width: 100%;
+}

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

@@ -0,0 +1,35 @@
+
+import React from 'react';
+import styles from './CommentBox.css';
+import {Button} from 'react-mdl';
+
+// Renders a comment box for creating a new comment
+export default class CommentBox extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {name: '', body: ''};
+    this.onSubmit = this.onSubmit.bind(this);
+  }
+
+  onSubmit () {
+    const {name, body} = this.state;
+    this.props.onSubmit({name, body});
+    this.setState({body: '', name: ''});
+  }
+
+  render (props, {name, body}) {
+    return (
+      <div>
+        <div class={`${styles.textareaContainer} mdl-textfield mdl-js-textfield`}>
+          <input type='text' value={name} onInput={this.linkState('name')} class='mdl-textfield__input' id='name' />
+          <label class='mdl-textfield__label' for='name'>Your name</label>
+        </div>
+        <div class={`${styles.textareaContainer} mdl-textfield mdl-js-textfield`}>
+          <textarea value={body} onInput={this.linkState('body')} class='mdl-textfield__input' type='text' rows='5' id='comment' />
+          <label class='mdl-textfield__label' for='comment'>Write your comment</label>
+        </div>
+        <Button onClick={this.onSubmit} raised>Post</Button>
+      </div>
+    );
+  }
+}

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

@@ -1,18 +0,0 @@
-.root {
-  min-height: 25px;
-  padding: 0 16px;
-}
-
-.moreDetail {
-  position: absolute;
-  font-size: 12px;
-  font-weight: 500;
-  color: black;
-  right: 16px;
-
-  &:hover {
-    opacity: 0.9;
-    cursor: pointer;
-  }
-}
-

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

@@ -1,66 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import styles from './CommentDetails.css';
-import t from 'coral-framework/services/i18n';
-import Slot from 'coral-framework/components/Slot';
-import IfSlotIsNotEmpty from 'coral-framework/components/IfSlotIsNotEmpty';
-
-class CommentDetails extends Component {
-  state = {
-    showDetail: false
-  };
-
-  constructor () {
-    super();
-    this.state = {
-      showDetail: false
-    };
-  }
-
-  toggleDetail = () => {
-    this.setState((state) => ({
-      showDetail: !state.showDetail
-    }));
-  }
-
-  render() {
-    const {data, root, comment} = this.props;
-    const {showDetail} = this.state;
-    const queryData = {
-      root,
-      comment,
-    };
-
-    return (
-      <div className={styles.root}>
-        <IfSlotIsNotEmpty
-          queryData={queryData}
-          slot={['adminCommentMoreDetails', 'adminCommentMoreFlagDetails']}
-        >
-          <a onClick={this.toggleDetail} className={styles.moreDetail}>
-            {showDetail ? t('modqueue.less_detail') : t('modqueue.more_detail')}
-          </a>
-        </IfSlotIsNotEmpty>
-        <Slot
-          fill="adminCommentDetailArea"
-          data={data}
-          queryData={queryData}
-          more={showDetail}
-        />
-        {showDetail && <Slot
-          fill="adminCommentMoreDetails"
-          data={data}
-          queryData={queryData}
-        />}
-      </div>
-    );
-  }
-}
-
-CommentDetails.propTypes = {
-  data: PropTypes.object.isRequired,
-  root: PropTypes.object.isRequired,
-  comment: PropTypes.object.isRequired,
-};
-
-export default CommentDetails;

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

@@ -1,27 +0,0 @@
-.root {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.coreLabels {
-  > *:not(:last-child) {
-    margin-right: 3px;
-  }
-}
-
-.slot {
-  &:not(:empty) {
-    padding-left: 3px;
-  }
-  > *:not(:last-child) {
-    margin-right: 3px;
-  }
-}
-
-.replyLabel {
-  background-color: #3D73D5;
-}
-
-.premodLabel {
-  background-color: #063B9A;
-}

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Label from 'coral-ui/components/Label';
-import Slot from 'coral-framework/components/Slot';
-import FlagLabel from 'coral-ui/components/FlagLabel';
-import cn from 'classnames';
-import styles from './CommentLabels.css';
-
-const staffRoles = ['ADMIN', 'STAFF', 'MODERATOR'];
-
-function isUserFlagged(actions) {
-  return actions.some((action) => action.__typename === 'FlagAction' && action.user);
-}
-
-function getUserFlaggedType(actions) {
-  return actions
-    .some((action) =>
-      action.__typename === 'FlagAction' &&
-      action.user &&
-      action.user.roles.some((role) => staffRoles.includes(role))
-    ) ? 'Staff' : 'User';
-}
-
-function hasSuspectedWords(actions) {
-  return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'Matched suspect word filter');
-}
-
-function hasHistoryFlag(actions) {
-  return actions.some((action) => action.__typename === 'FlagAction' && action.reason === 'TRUST');
-}
-
-const CommentLabels = ({comment, comment: {className, status, actions, hasParent}}) => {
-  return (
-    <div className={cn(className, styles.root)}>
-      <div className={styles.coreLabels}>
-        {hasParent && <Label iconName="reply" className={styles.replyLabel}>reply</Label>}
-        {status === 'PREMOD' && <Label iconName="query_builder" className={styles.premodLabel}>Pre-Mod</Label>}
-        {isUserFlagged(actions) && <FlagLabel iconName="person">{getUserFlaggedType(actions)}</FlagLabel>}
-        {hasSuspectedWords(actions) && <FlagLabel iconName="sms_failed">Suspect</FlagLabel>}
-        {hasHistoryFlag(actions) && <FlagLabel iconName="sentiment_very_dissatisfied">History</FlagLabel>}
-      </div>
-      <Slot className={styles.slot} fill="adminCommentLabels" queryData={{comment}} />
-    </div>
-  );
-};
-
-CommentLabels.propTypes = {
-  comment: PropTypes.shape({
-    className: PropTypes.string,
-    status: PropTypes.string,
-    actions: PropTypes.array,
-    hasParent: PropTypes.bool,
-  }),
-};
-
-export default CommentLabels;

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

@@ -1,13 +0,0 @@
-@custom-media --table-viewport (max-width: 1024px);
-
-:global {
-  .mdl-layout__drawer-button {
-    visibility: hidden;
-  }
-
-  @media (--table-viewport) {
-    .mdl-layout__drawer-button {
-      visibility: visible;
-    }
-  }
-}

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {PropTypes} from 'react';
 import {Card} from 'coral-ui';
 
 const EmptyCard = (props) => (

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import {matchLinks} from '../utils';
-
-export default ({text, children}) => {
-  const hasLinks = !!matchLinks(text);
-
-  if (!hasLinks) {
-    return null;
-  }
-
-  return React.Children.only(children);
-};

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

@@ -1,21 +0,0 @@
-.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/MarkdownEditor.css

@@ -467,6 +467,7 @@ $fullscreenZIndex: 10;
       text-align: center;
       text-decoration: none!important;
       color: #2c3e50!important;
+      width: 30px;
       height: 30px;
       margin: 0;
       border: 1px solid transparent;
@@ -474,8 +475,6 @@ $fullscreenZIndex: 10;
       cursor: pointer;
       outline: 0;
       margin-right: 2px;
-      font-size: 1.5em;
-      width: 25px;
       &.active {
         background: #fcfcfc;
         border-color: #95a5a6;

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

@@ -1,5 +1,4 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
+import React, {Component, PropTypes} from 'react';
 import SimpleMDE from 'simplemde';
 import cn from 'classnames';
 import noop from 'lodash/noop';
@@ -107,11 +106,6 @@ export default class MarkdownEditor extends Component  {
       ...config,
       element: this.textarea,
     });
-
-    // Don't trap the key, to stay accessible.
-    this.editor.codemirror.options.extraKeys['Tab'] = false;
-    this.editor.codemirror.options.extraKeys['Shift-Tab'] = false;
-
     this.editor.codemirror.on('change', this.onChange);
   }
 

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

@@ -21,6 +21,7 @@
 
 .callToAction {
   position: fixed;
+  left: 10px;
   bottom: 10px;
   width: 280px;
   height: 200px;
@@ -28,7 +29,6 @@
   padding: 15px;
   box-sizing: border-box;
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
-  z-index: 10;
 
   .ctaHeader {
     font-size: 16px;

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

@@ -1,41 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {PropTypes} from 'react';
 import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
 import t from 'coral-framework/services/i18n';
 
+const shortcuts = [
+  {
+    title: 'modqueue.navigation',
+    shortcuts: {
+      'j': 'modqueue.next_comment',
+      'k': 'modqueue.prev_comment',
+      's': 'modqueue.singleview',
+      '?': 'modqueue.thismenu'
+    }
+  },
+  {
+    title: 'modqueue.actions',
+    shortcuts: {
+      'd': 'modqueue.approve',
+      'f': 'modqueue.reject'
+    }
+  }
+];
+
 export default class ModerationKeysModal extends React.Component {
 
   static propTypes = {
     open: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
     hideShortcutsNote: PropTypes.func.isRequired,
-    shortcutsNoteVisible: PropTypes.string.isRequired,
-    queueCount: PropTypes.number.isRequired
-  }
-
-  buildShortcuts = () => {
-    return [
-      {
-        title: 'modqueue.navigation',
-        shortcuts: {
-          'j': 'modqueue.next_comment',
-          'k': 'modqueue.prev_comment',
-          'ctrl+f': 'modqueue.toggle_search',
-          't': 'modqueue.next_queue',
-          [`1...${this.props.queueCount}`]: 'modqueue.jump_to_queue',
-          's': 'modqueue.singleview',
-          '?': 'modqueue.thismenu'
-        }
-      },
-      {
-        title: 'modqueue.actions',
-        shortcuts: {
-          'd': 'modqueue.approve',
-          'f': 'modqueue.reject'
-        }
-      }
-    ];
+    shortcutsNoteVisible: PropTypes.string.isRequired
   }
 
   render () {
@@ -55,7 +48,7 @@ export default class ModerationKeysModal extends React.Component {
         <Modal open={open} onClose={onClose}>
           <h3>{t('modqueue.shortcuts')}</h3>
           <div className={styles.container}>
-            {this.buildShortcuts().map((shortcut, i) => (
+            {shortcuts.map((shortcut, i) => (
               <table className={styles.table} key={i}>
                 <thead>
                   <tr>

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

@@ -0,0 +1,210 @@
+
+@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;
+
+
+  &: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;
+  }
+
+   .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;
+  }
+
+  .body {
+    margin-top: 20px;
+    flex: 1;
+    font-size: 0.88em;
+    color: black;
+  }
+
+  .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;
+}
+
+.banButton {
+  width: 114px;
+  letter-spacing: 1px;
+
+  i {
+    vertical-align: middle;
+    margin-right: 10px;
+    font-size: 14px;
+  }
+}
+
+.selected {
+  border-radius: 10px;
+}
+
+
+.actionButton {
+  transform: scale(.8);
+  margin: 0;
+  width: 140px;
+}
+
+.minimal {
+  width: 45px;
+  min-width: 0;
+  float: left;
+}
+
+.approve__active {
+  box-shadow: none;
+  color: white;
+  background-color: #519954;
+  cursor: not-allowed;
+}
+
+.reject__active, .rejected__active {
+  color: white;
+  background-color: #D03235;
+  box-shadow: none;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,227 @@
+import React, {PropTypes} from 'react';
+import styles from './ModerationList.css';
+import key from 'keymaster';
+import Hammer from 'hammerjs';
+import Comment from './Comment';
+import User from './User';
+import SuspendUserModal from './SuspendUserModal';
+
+// Each action has different meaning and configuration
+const menuOptionsMap = {
+  'reject': {status: 'REJECTED', icon: 'close', key: 'f'},
+  'approve': {status: 'ACCEPTED', icon: 'done', key: 'd'},
+  'flag': {status: 'FLAGGED', icon: 'flag', filter: 'Untouched'},
+  'ban': {status: 'BANNED', icon: 'not interested'}
+};
+
+// Renders a comment list and allow performing actions
+export default class ModerationList extends React.Component {
+  static propTypes = {
+    isActive: PropTypes.bool,
+    singleView: PropTypes.bool,
+    commentIds: PropTypes.arrayOf(PropTypes.string),
+    actionIds: PropTypes.arrayOf(PropTypes.string),
+    comments: PropTypes.object,
+    users: PropTypes.object.isRequired,
+    actions: PropTypes.object,
+    userStatusUpdate: PropTypes.func.isRequired,
+    suspendUser: PropTypes.func.isRequired,
+
+    // list of actions (flags, etc) associated with the comments
+    modActions: PropTypes.arrayOf(PropTypes.string).isRequired,
+    loading: PropTypes.bool,
+
+    suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired
+  }
+
+  state = {active: null, suspendUserModal: null, email: null};
+
+  // remove key handlers before leaving
+  componentWillUnmount () {
+    this.unbindKeyHandlers();
+  }
+
+  // add key handlers and gestures
+  componentDidMount () {
+    this.bindKeyHandlers();
+
+    // this.bindGestures() // need to check whether we're on a mobile device or this throws an Error
+  }
+
+  // If entering to singleview and no active, active is the first eleement
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.singleView && !this.state.active) {
+      this.setState({active: nextProps.commentIds[0]});
+    }
+  }
+
+  // Add swipe to approve or reject
+  bindGestures () {
+    const {modActions} = this.props;
+    this._hammer = new Hammer(this.base);
+    this._hammer.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
+
+    if (modActions.indexOf('reject') !== -1) {
+      this._hammer.on('swipeleft', () => this.props.singleView && this.actionKeyHandler('Rejected'));
+    }
+    if (modActions.indexOf('approve') !== -1) {
+      this._hammer.on('swiperight', () => this.props.singleView && this.actionKeyHandler('Approved'));
+    }
+  }
+
+  // Add key handlers. Each action has one and added j/k for moving around
+  bindKeyHandlers () {
+    const {modActions, isActive} = this.props;
+    modActions.filter((action) => menuOptionsMap[action].key).forEach((action) => {
+      key(menuOptionsMap[action].key, 'moderationList', () => isActive && this.actionKeyHandler(menuOptionsMap[action].status));
+    });
+    key('j', 'moderationList', () => isActive && this.moveKeyHandler('down'));
+    key('k', 'moderationList', () => isActive && this.moveKeyHandler('up'));
+    key.setScope('moderationList');
+  }
+
+  // Perform an action using the keys only if the comment is active
+  actionKeyHandler (action) {
+    if (this.props.isActive && this.state.active) {
+      this.onClickAction(action, this.state.active);
+    }
+  }
+
+  // move around with j/k
+  moveKeyHandler (direction) {
+    if (!this.props.isActive) {
+      return;
+    }
+
+    const {commentIds} = this.props;
+    const {active} = this.state;
+
+    // check boundaries
+    if (active === null || !commentIds.length) {
+      this.setState({active: commentIds[0]});
+    } else if (direction === 'up' && active !== commentIds[0]) {
+      this.setState({active: commentIds[commentIds.indexOf(active) - 1]});
+    } else if (direction === 'down' && active !== commentIds[commentIds.length - 1]) {
+      this.setState({active: commentIds[commentIds.indexOf(active) + 1]});
+    }
+
+    // scroll to the position
+    const index = Math.max(commentIds.indexOf(this.state.active), 0);
+    this.base.childNodes[index] && this.base.childNodes[index].focus();
+  }
+
+  unbindKeyHandlers () {
+    key.deleteScope('moderationList');
+  }
+
+  // If we are performing an action over a comment (aka removing from the list) we need to select a new active.
+  // TODO: In the future this can be improved and look at the actual state to
+  // resolve since the content of the list could change externally. For now it works as expected
+  onClickAction = (menuOption, id, action) => {
+
+    // activate the next comment
+    if (id === this.state.active) {
+      const moderationIds = this.getModerationIds();
+      if (moderationIds[moderationIds.length - 1] === this.state.active) {
+        this.setState({active: moderationIds[moderationIds.length - 2]});
+      } else {
+        this.setState({active: moderationIds[Math.min(moderationIds.indexOf(this.state.active) + 1, moderationIds.length - 1)]});
+      }
+    }
+
+    // Update the status right away if this is a comment
+    if (action.item_type === 'COMMENTS') {
+      this.props.updateCommentStatus(menuOption, id);
+    } else if (action.item_type === 'USERS') {
+
+      // If a user bio or name is rejected, bring up a dialog before suspending them.
+      if (menuOption === 'REJECTED') {
+        this.setState({suspendUserModal: action});
+      } else if (menuOption === 'ACCEPTED') {
+        this.props.userStatusUpdate('APPROVED', action.item_id);
+      }
+    }
+  }
+
+  onClickShowBanDialog = (userId, userName, commentId) => {
+    this.props.onClickShowBanDialog(userId, userName, commentId);
+  }
+
+  mapModItems = (itemId, index) => {
+
+    const {comments = {}, users, actions = {}, modActions, suspectWords, hideActive} = this.props;
+    const {active} = this.state;
+
+    // Because ids are unique, the id will either appear as an action or as a comment.
+
+    const item = comments[itemId] || actions[itemId];
+    let modItem;
+
+    if (item.body) {
+
+      // If the item is a comment...
+      const author = users[item.author_id];
+      modItem = <Comment
+        suspectWords={suspectWords}
+        comment={item}
+        author={author}
+        key={index}
+        index={index}
+        onClickAction={this.onClickAction}
+        onClickShowBanDialog={this.onClickShowBanDialog}
+        modActions={modActions}
+        menuOptionsMap={menuOptionsMap}
+        isActive={itemId === active}
+        hideActive={hideActive} />;
+    } else {
+
+      // If the item is an action...
+      const user = users[item.item_id];
+      modItem = user && <User
+        suspectWords={suspectWords}
+        action={item}
+        user={user}
+        key={index}
+        index={index}
+        onClickAction={this.onClickAction}
+        onClickShowBanDialog={this.onClickShowBanDialog}
+        modActions={modActions}
+        menuOptionsMap={menuOptionsMap}
+        isActive={itemId === active}
+        hideActive={hideActive} />;
+    }
+    return modItem;
+  }
+
+  getModerationIds = () => {
+    const {commentIds = [], actionIds = [], comments, actions} = this.props;
+    if (comments && actions) {
+      return [ ...commentIds, ...actionIds ].sort((a, b) => {
+        const itemA = comments[a] || actions[a];
+        const itemB = comments[b] || actions[b];
+        return itemB.updated_at - itemA.updated_at;
+      });
+    } else {
+      return comments ? commentIds : actionIds;
+    }
+  }
+
+  render () {
+    const {singleView, key, suspendUser} = this.props;
+
+    // Combine moderations and actions into a single stream and sort by most recently updated.
+    const moderationIds = this.getModerationIds();
+
+    return (
+      <ul
+        className={`${styles.list} ${singleView ? styles.singleView : ''}`} {...key}
+        id='moderationList'>
+        {moderationIds.map(this.mapModItems)}
+        <SuspendUserModal
+          action = {this.state.suspendUserModal}
+          onClose={() => this.setState({suspendUserModal:null})}
+          suspendUser={suspendUser} />
+      </ul>
+    );
+  }
+}

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

@@ -1,44 +0,0 @@
-.root {
-  display: block;
-  color: #D03235;
-  border: solid 1px #D03235;
-  background: white;
-  padding: 10px 11px;
-  box-sizing: border-box;
-  vertical-align: middle;
-  line-height: 24px;
-  font-size: 17px;
-  height: 47px;
-  border-radius: 3px;
-  text-transform: capitalize;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.09);
-  width: 129px;
-  transform: scale(.8);
-  margin: 0;
-
-  &:hover {
-   color: white;
-   background-color: #D03235;
-   box-shadow: none;
-   cursor: pointer;
- }
-}
-
-.active {
-  color: white;
-  background-color: #D03235;
-  box-shadow: none;
-
-  &:hover {
-    cursor: not-allowed;
-  }
-}
-
-.minimal {
-  width: 45px;
-  min-width: 0;
-}
-
-.icon {
-  margin-right: 5px;
-}

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import cn from 'classnames';
-import styles from './RejectButton.css';
-import {Icon} from 'coral-ui';
-
-import t from 'coral-framework/services/i18n';
-
-const RejectButton = ({active, minimal, onClick, className}) => {
-  const text = active ? t('modqueue.rejected') : t('modqueue.reject');
-  return (
-    <button
-      className={cn(styles.root, {[styles.minimal]: minimal, [styles.active]: active}, className)}
-      onClick={onClick}
-    >
-      <Icon name={'close'} className={styles.icon} />
-      {!minimal && text}
-    </button>
-  );
-};
-
-RejectButton.propTypes = {
-  className: PropTypes.string,
-  active: PropTypes.bool,
-  minimal: PropTypes.bool,
-  onClick: PropTypes.func,
-};
-
-export default RejectButton;
-

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

@@ -1,9 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {PropTypes} from 'react';
 import {Dialog} from 'coral-ui';
 import {RadioGroup, Radio} from 'react-mdl';
 import styles from './SuspendUserDialog.css';
-import cn from 'classnames';
 
 import Button from 'coral-ui/components/Button';
 
@@ -67,7 +65,7 @@ class SuspendUserDialog extends React.Component {
           {t('suspenduser.title_suspend')}
         </h1>
         <p className={styles.description}>
-          {t('suspenduser.description_suspend', username)}
+         {t('suspenduser.description_suspend', username)}
         </p>
         <fieldset>
           <legend className={styles.legend}>{t('suspenduser.select_duration')}</legend>
@@ -88,7 +86,7 @@ class SuspendUserDialog extends React.Component {
           <Button cStyle="white" className={styles.cancel} onClick={onCancel} raised>
             {t('suspenduser.cancel')}
           </Button>
-          <Button cStyle="black" className={cn(styles.perform, 'talk-admin-suspend-user-dialog-confirm')} onClick={this.goToStep1} raised>
+          <Button cStyle="black" className={styles.perform} onClick={this.goToStep1} raised>
             {t('suspenduser.suspend_user')}
           </Button>
         </div>
@@ -105,7 +103,7 @@ class SuspendUserDialog extends React.Component {
           {t('suspenduser.title_notify')}
         </h1>
         <p className={styles.description}>
-          {t('suspenduser.description_notify', username)}
+         {t('suspenduser.description_notify', username)}
         </p>
         <fieldset>
           <legend className={styles.legend}>{t('suspenduser.write_message')}</legend>
@@ -121,7 +119,7 @@ class SuspendUserDialog extends React.Component {
           </Button>
           <Button
             cStyle="black"
-            className={cn(styles.perform, 'talk-admin-suspend-user-dialog-send')}
+            className={styles.perform}
             onClick={this.handlePerform}
             disabled={this.state.message.length === 0}
             raised
@@ -138,7 +136,7 @@ class SuspendUserDialog extends React.Component {
     const {step} = this.state;
     return (
       <Dialog
-        className={cn(styles.dialog, 'talk-admin-suspend-user-dialog')}
+        className={styles.dialog}
         onCancel={onCancel}
         open={open}
       >

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

@@ -2,25 +2,17 @@ import React from 'react';
 import TagsInput from 'react-tagsinput';
 import styles from './TagsInput.css';
 import AutosizeInput from 'react-input-autosize';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
 
 const autosizingRenderInput = ({onChange, value, addTag: _, ...other}) =>
   <AutosizeInput type='text' onChange={onChange} value={value} {...other} />;
 
-autosizingRenderInput.propTypes = {
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  addTag: PropTypes.func,
-};
-
-const TagsInputComponent = ({className = '', ...props}) => {
+export default (props) => {
   return (
     <TagsInput
       addOnBlur={true}
       addOnPaste={true}
       pasteSplit={(data) => data.split(',').map((d) => d.trim())}
-      className={cn(styles.root, 'tags-input', className)}
+      className={styles.root}
       focusedClassName={styles.rootFocus}
       renderInput={autosizingRenderInput}
       {...props}
@@ -37,11 +29,3 @@ const TagsInputComponent = ({className = '', ...props}) => {
     />
   );
 };
-
-TagsInputComponent.propTypes = {
-  className: PropTypes.string,
-  inputProps: PropTypes.object,
-  tagProps: PropTypes.object,
-};
-
-export default TagsInputComponent;

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

@@ -1,166 +0,0 @@
-.copyButton {
-  background-color: white;
-  border: solid 1px;
-  padding: 2px 6px;
-  height: auto;
-  line-height: initial;
-  min-width: auto;
-  letter-spacing: normal;
-  font-size: 0.9em;
-  margin-left: 10px;
-}
-
-.userDetailList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.userDetailItem {
-  margin: 0 5px;
-  font-weight: 500;
-}
-
-.stats {
-  display: flex;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  text-align: center;
-  margin: 15px 0 5px;
-  color: #595959;
-}
-
-.stat {
-  margin-right: 20px;
-}
-
-.stat:last-child {
-  margin-right: 0px;
-}
-
-.statItem,
-.statReportResult {
-  padding: 3px 5px;
-  background-color: #D8D8D8;
-  border-radius: 3px;
-  font-weight: 500;
-  display: block;
-  font-size: 0.9em;
-  line-height: normal;
-  letter-spacing: 0.4px;
-  min-width: 60px;
-}
-
-.statResult {
-  font-size: 1.5em;
-  padding: 5px 0;
-  display: inline-block;
-}
-
-.statReportResult {
-  color: white;
-  margin: 5px 0;
-  font-weight: 400;
-}
-
-.statReportResult.reliable {
-  background-color: #749C48;
-}
-
-.statReportResult.neutral {
-  background-color: #616161;
-}
-
-.statReportResult.unreliable {
-  background-color: #F44336;
-}
-
-.memberSince {
-  clear: both;
-}
-
-.small {
-  color: #888888;
-  font-size: 0.9em;
-  letter-spacing: 0.4px;
-}
-
-.profileEmail {
-  border: none;
-  background-color: transparent;
-  font-size: 16px;
-  outline: none;
-  width: calc(100% - 90px);
-}
-
-.commentStatuses {
-  padding: 0 0 0 10px;
-  margin: 0;
-  align-self: center;
-  list-style: none;
-  box-sizing: border-box;
-  li {
-    display: inline-block;
-    margin-right: 10px;
-    cursor: pointer;
-    padding: 0 10px;
-  }
-}
-
-.active {
-  font-weight: bold;
-  border-bottom: 3px solid #F36451;
-}
-
-.bulkActionGroup {
-  height: 52px;
-  background-color: #efefef;
-  padding: 0 0 0 10px;
-  display: flex;
-  i {
-    margin-right: 0;
-  }
-  .bulkAction {
-    display: inline-block;
-    width: 48px;
-    height: 48px;
-    transform: scale(.7);
-    min-width: 0;
-  }
-  .bulkAction:last-child {
-    margin-left: -10px;
-  }
-}
-
-.selectedCommentsInfo {
-  align-self: center;
-  font-weight: 500;
-  margin-left: 15px;
-}
-
-.loadMore>button {
-  background-color: #696969;
-  &:hover {
-    background-color: #404040;
-    color: white;
-  }
-}
-
-.toggleAll {
-  padding: 0 10px 0 0;
-  align-self: center;
-}
-
-.commentList {
-  clear: both;
-}
-
-.bulkActionHeader {
-  display: flex;
-  justify-content: space-between;
-  height: 52px;
-  &.selected {
-    background-color: #efefef;
-  }
-}

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

@@ -1,246 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Comment from '../containers/UserDetailComment';
-import styles from './UserDetail.css';
-import {Icon, Drawer, Spinner} from 'coral-ui';
-import {Slot} from 'coral-framework/components';
-import ButtonCopyToClipboard from './ButtonCopyToClipboard';
-import ClickOutside from 'coral-framework/components/ClickOutside';
-import LoadMore from '../components/LoadMore';
-import cn from 'classnames';
-import capitalize from 'lodash/capitalize';
-import {getReliability} from 'coral-framework/utils/user';
-import ApproveButton from './ApproveButton';
-import RejectButton from './RejectButton';
-import {getErrorMessages} from 'coral-framework/utils';
-
-export default class UserDetail extends React.Component {
-
-  static propTypes = {
-    userId: PropTypes.string.isRequired,
-    hideUserDetail: PropTypes.func.isRequired,
-    root: PropTypes.object.isRequired,
-    acceptComment: PropTypes.func.isRequired,
-    rejectComment: PropTypes.func.isRequired,
-    changeStatus: PropTypes.func.isRequired,
-    toggleSelect: PropTypes.func.isRequired,
-    bulkAccept: PropTypes.func.isRequired,
-    bulkReject: PropTypes.func.isRequired,
-    toggleSelectAll: PropTypes.func.isRequired,
-    loading: PropTypes.bool.isRequired,
-    data: PropTypes.shape({
-      refetch: PropTypes.func.isRequired,
-    }),
-    activeTab: PropTypes.string.isRequired,
-    selectedCommentIds: PropTypes.array.isRequired,
-    viewUserDetail: PropTypes.any.isRequired,
-    loadMore: PropTypes.any.isRequired,
-    notify: PropTypes.func.isRequired
-  }
-
-  rejectThenReload = async (info) => {
-    try {
-      await this.props.rejectComment(info);
-      this.props.data.refetch();
-    } catch (err) {
-
-      console.error(err);
-      this.props.notify('error', getErrorMessages(err));
-    }
-  }
-
-  acceptThenReload = async (info) => {
-    try {
-      await this.props.acceptComment(info);
-      this.props.data.refetch();
-    } catch (err) {
-
-      console.error(err);
-      this.props.notify('error', getErrorMessages(err));
-    }
-  }
-
-  bulkAcceptThenReload = async () => {
-    try {
-      await this.props.bulkAccept();
-      this.props.data.refetch();
-    } catch (err) {
-
-      console.error(err);
-      this.props.notify('error', getErrorMessages(err));
-    }
-  }
-
-  bulkRejectThenReload = async () => {
-    try {
-      await this.props.bulkReject();
-      this.props.data.refetch();
-    } catch (err) {
-
-      console.error(err);
-      this.props.notify('error', getErrorMessages(err));
-    }
-  }
-
-  showAll = () => {
-    this.props.changeStatus('all');
-  }
-
-  showRejected = () => {
-    this.props.changeStatus('rejected');
-  }
-
-  renderLoading() {
-    return (
-      <ClickOutside onClickOutside={this.props.hideUserDetail}>
-        <Drawer onClose={this.props.hideUserDetail}>
-          <Spinner />
-        </Drawer>
-      </ClickOutside>
-    );
-  }
-
-  renderLoaded() {
-    const {
-      data,
-      root,
-      root: {
-        user,
-        totalComments,
-        rejectedComments,
-        comments: {nodes, hasNextPage}
-      },
-      activeTab,
-      selectedCommentIds,
-      toggleSelect,
-      hideUserDetail,
-      viewUserDetail,
-      loadMore,
-      toggleSelectAll
-    } = this.props;
-
-    let rejectedPercent = (rejectedComments / totalComments) * 100;
-    if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
-
-      // if totalComments is 0, you're dividing by zero, which is naughty
-      rejectedPercent = 0;
-    }
-
-    return (
-      <ClickOutside onClickOutside={hideUserDetail}>
-        <Drawer onClose={hideUserDetail}>
-          <h3>{user.username}</h3>
-
-          <div>
-            <ul className={styles.userDetailList}>
-              <li>
-                <Icon name="assignment_ind" />
-                <span className={styles.userDetailItem}>Member Since:</span>
-                {new Date(user.created_at).toLocaleString()}
-              </li>
-
-              {user.profiles.map(({id}) =>
-                <li key={id}>
-                  <Icon name="email" />
-                  <span className={styles.userDetailItem}>Email:</span>
-                  {id} <ButtonCopyToClipboard className={styles.copyButton} icon="content_copy" copyText={id} />
-                </li>
-              )}
-            </ul>
-
-            <ul className={styles.stats}>
-              <li className={styles.stat}>
-                <span className={styles.statItem}>Total Comments</span>
-                <span className={styles.statResult}>{totalComments}</span>
-              </li>
-              <li className={styles.stat}>
-                <span className={styles.statItem}>Reject Rate</span>
-                <span className={styles.statResult}>
-                  {rejectedPercent.toFixed(1)}%
-                </span>
-              </li>
-              <li className={styles.stat}>
-                <span className={styles.statItem}>Reports</span>
-                <span className={cn(styles.statReportResult, styles[getReliability(user.reliable.flagger)])}>
-                  {capitalize(getReliability(user.reliable.flagger))}
-                </span>
-              </li>
-            </ul>
-          </div>
-
-          <Slot
-            fill="userProfile"
-            data={this.props.data}
-            queryData={{root, user}}
-          />
-          <hr />
-          <div className={(selectedCommentIds.length > 0) ? cn(styles.bulkActionHeader, styles.selected) : styles.bulkActionHeader}>
-            {
-              selectedCommentIds.length === 0
-                ? (
-                  <ul className={styles.commentStatuses}>
-                    <li className={activeTab === 'all' ? styles.active : ''} onClick={this.showAll}>All</li>
-                    <li className={activeTab === 'rejected' ? styles.active : ''} onClick={this.showRejected}>Rejected</li>
-                  </ul>
-                )
-                : (
-                  <div className={styles.bulkActionGroup}>
-                    <ApproveButton
-                      onClick={this.bulkAcceptThenReload}
-                      minimal
-                    />
-                    <RejectButton
-                      onClick={this.bulkRejectThenReload}
-                      minimal
-                    />
-                    <span className={styles.selectedCommentsInfo}>  {selectedCommentIds.length} comments selected</span>
-                  </div>
-                )
-            }
-            <div className={styles.toggleAll}>
-              <input
-                type='checkbox'
-                id='toogleAll'
-                checked={selectedCommentIds.length > 0 && selectedCommentIds.length === nodes.length}
-                onChange={(e) => {
-                  toggleSelectAll(nodes.map((comment) => comment.id), e.target.checked);
-                }} />
-              <label htmlFor='toogleAll'>Select all</label>
-            </div>
-          </div>
-          <div className={styles.commentList}>
-            {
-              nodes.map((comment) => {
-                const selected = selectedCommentIds.indexOf(comment.id) !== -1;
-                return <Comment
-                  key={comment.id}
-                  user={user}
-                  root={root}
-                  data={data}
-                  comment={comment}
-                  acceptComment={this.acceptThenReload}
-                  rejectComment={this.rejectThenReload}
-                  selected={selected}
-                  toggleSelect={toggleSelect}
-                  viewUserDetail={viewUserDetail}
-                />;
-              })
-            }
-          </div>
-          <LoadMore
-            className={styles.loadMore}
-            loadMore={loadMore}
-            showLoadMore={hasNextPage}
-          />
-        </Drawer>
-      </ClickOutside>
-    );
-  }
-
-  render() {
-    if (this.props.loading) {
-      return this.renderLoading();
-    }
-    return this.renderLoaded();
-  }
-}

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

@@ -1,133 +0,0 @@
-.root {
-  position: relative;
-  display: block;
-  margin: 0;
-  border-bottom: 1px solid #e0e0e0;
-  width: 100%;
-  transition: all 200ms;
-  padding: 10px 0px;
-  min-height: 0;
-}
-
-.root:last-child {
-  border: 0;
-}
-
-.rootSelected {
-  background-color: #ecf4ff;
-}
-
-.container {
-  padding: 0px 14px;
-}
-
-.story {
-  font-size: 14px;
-  margin: 10px 0;
-  font-weight: 500;
-  line-height: 1.2;
-  max-width: 500px;
-}
-
-.story > a {
-  display: inline-block;
-  color: #063b9a;
-  text-decoration: none;
-  font-weight: 500;
-  letter-spacing: .5px;
-  margin-left: 10px;
-  font-size: 13px;
-  margin-left: 5px;
-  padding-bottom: 0px;
-  border-bottom: solid 1px;
-  line-height: 16px;
-}
-
-.bodyContainer {
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 300;
-  margin-bottom: 8px;
-}
-
-.header {
-  position: relative;
-}
-
-.labels {
-  position: absolute;
-  right: 0px;
-}
-
-.created {
-  padding: 5px;
-  color: #262626;
-  font-size: 14px;
-  line-height: 1px;
-  font-weight: 300;
-}
-
-.body {
-  margin-top: 0px;
-  flex: 1;
-  color: black;
-  max-width: 500px;
-  word-wrap: break-word;
-  font-weight: 300;
-  font-size: 16px;
-  max-width: 360px;
-}
-
-.sideActions {
-}
-
-.editedMarker {
-  font-style: italic;
-  color: #666;
-  font-size: 12px;
-  line-height: 1px;
-  font-weight: 300;
-}
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.bulkSelectInput {
-  cursor: pointer;
-}
-
-.external {
-  font-size: .7em;
-  text-decoration: none;
-  color: #063b9a;
-  cursor: pointer;
-  font-weight: normal;
-  margin-left: 10px;
-  white-space: nowrap;
-
-  &:hover {
-    text-decoration: underline;
-    opacity: .9;
-  }
-
-  > i {
-    font-size: 12px;
-    top: 2px;
-    position: relative;
-  }
-}
-
-.hasLinks {
-  color: #f00;
-  text-align: right;
-  display: flex;
-  align-items: center;
-
-  > i {
-    margin-right: 5px;
-  }
-}

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

@@ -1,148 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Link} from 'react-router';
-
-import {Icon} from 'coral-ui';
-import CommentDetails from './CommentDetails';
-import styles from './UserDetailComment.css';
-import CommentBodyHighlighter from 'coral-admin/src/components/CommentBodyHighlighter';
-import IfHasLink from 'coral-admin/src/components/IfHasLink';
-import cn from 'classnames';
-import CommentAnimatedEdit from './CommentAnimatedEdit';
-import CommentLabels from '../containers/CommentLabels';
-import ApproveButton from './ApproveButton';
-import RejectButton from 'coral-admin/src/components/RejectButton';
-
-import t, {timeago} from 'coral-framework/services/i18n';
-
-class UserDetailComment extends React.Component {
-
-  approve = () => (this.props.comment.status === 'ACCEPTED'
-    ? null
-    : this.props.acceptComment({commentId: this.props.comment.id})
-  );
-
-  reject = () => (this.props.comment.status === 'REJECTED'
-    ? null
-    : this.props.rejectComment({commentId: this.props.comment.id})
-  );
-
-  render() {
-    const {
-      comment,
-      selected,
-      toggleSelect,
-      className,
-      data,
-      root: {settings: {wordlist: {banned, suspect}}},
-    } = this.props;
-
-    return (
-      <li
-        tabIndex={0}
-        className={cn(className, styles.root, {[styles.rootSelected]: selected})}
-      >
-        <div className={styles.container}>
-          <div className={styles.header}>
-            <input
-              className={styles.bulkSelectInput}
-              type='checkbox'
-              value={comment.id}
-              checked={selected}
-              onChange={(e) => toggleSelect(e.target.value, e.target.checked)} />
-            <span className={styles.created}>
-              {timeago(comment.created_at)}
-            </span>
-            {
-              (comment.editing && comment.editing.edited)
-                ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-                : null
-            }
-
-            <div className={styles.labels}>
-              <CommentLabels comment={comment} />
-            </div>
-          </div>
-          <div className={styles.story}>
-            Story: {comment.asset.title}
-            {<Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
-          </div>
-          <CommentAnimatedEdit body={comment.body}>
-            <div className={styles.bodyContainer}>
-              <div className={styles.body}>
-                <CommentBodyHighlighter
-                  suspectWords={suspect}
-                  bannedWords={banned}
-                  body={comment.body}
-                />
-                {' '}
-                <a
-                  className={styles.external}
-                  href={`${comment.asset.url}?commentId=${comment.id}`}
-                  target="_blank"
-                >
-                  <Icon name="open_in_new" /> {t('comment.view_context')}
-                </a>
-              </div>
-              <div className={styles.sideActions}>
-                <IfHasLink text={comment.body}>
-                  <span className={styles.hasLinks}>
-                    <Icon name="error_outline" /> Contains Link
-                  </span>
-                </IfHasLink>
-                <div className={styles.actions}>
-                  <ApproveButton
-                    active={comment.status === 'ACCEPTED'}
-                    onClick={this.approve}
-                    minimal
-                  />
-                  <RejectButton
-                    active={comment.status === 'REJECTED'}
-                    onClick={this.reject}
-                    minimal
-                  />
-                </div>
-              </div>
-            </div>
-          </CommentAnimatedEdit>
-        </div>
-        <CommentDetails
-          data={data}
-          root={root}
-          comment={comment}
-        />
-      </li>
-    );
-  }
-}
-
-UserDetailComment.propTypes = {
-  user: PropTypes.object.isRequired,
-  viewUserDetail: PropTypes.func.isRequired,
-  acceptComment: PropTypes.func.isRequired,
-  rejectComment: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  toggleSelect: PropTypes.func,
-  root: PropTypes.shape({
-    settings: PropTypes.shape({
-      wordlist: PropTypes.shape({
-        suspect: PropTypes.arrayOf(PropTypes.string).isRequired,
-        banned: PropTypes.arrayOf(PropTypes.string).isRequired,
-      }),
-    }),
-  }),
-  comment: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    status: PropTypes.string.isRequired,
-    body: PropTypes.string.isRequired,
-    actions: PropTypes.array,
-    created_at: PropTypes.string.isRequired,
-    asset: PropTypes.shape({
-      title: PropTypes.string,
-      url: PropTypes.string,
-      id: PropTypes.string
-    }),
-  }),
-};
-
-export default UserDetailComment;

client/coral-admin/src/components/ui/Drawer.js

@@ -1,35 +1,37 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {PropTypes} from 'react';
 import {Navigation, Drawer} from 'react-mdl';
 import {IndexLink, Link} from 'react-router';
 import styles from './Drawer.css';
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
-import cn from 'classnames';
 
-const CoralDrawer = ({handleLogout, auth = {}}) => (
-  <Drawer className={cn('talk-admin-drawer-nav', styles.drawer)}>
+const CoralDrawer = ({handleLogout, auth}) => (
+  <Drawer className={styles.header}>
     { auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
       <div>
         <Navigation className={styles.nav}>
+          <IndexLink
+            className={styles.navLink}
+            to="/admin/dashboard"
+            activeClassName={styles.active}>
+            {t('configure.dashboard')}
+          </IndexLink>
           {
             can(auth.user, 'MODERATE_COMMENTS') && (
-              <IndexLink
-                className={cn('talk-admin-nav-moderate', styles.navLink)}   
+              <Link
+                className={styles.navLink}
                 to="/admin/moderate"
                 activeClassName={styles.active}>
                 {t('configure.moderate')}
-              </IndexLink>
+              </Link>
             )
           }
-          <Link
-            className={cn('talk-admin-nav-stories', styles.navLink)}
+          <Link className={styles.navLink}
             to="/admin/stories"
             activeClassName={styles.active}>
             {t('configure.stories')}
           </Link>
-          <Link
-            className={cn('talk-admin-nav-community', styles.navLink)}
+          <Link className={styles.navLink}
             to="/admin/community"
             activeClassName={styles.active}>
             {t('configure.community')}
@@ -38,7 +40,7 @@ const CoralDrawer = ({handleLogout, auth = {}}) => (
             can(auth.user, 'UPDATE_CONFIG') &&
             (
               <Link
-                className={cn('talk-admin-nav-configure', styles.navLink)}
+                className={styles.navLink}
                 to="/admin/configure"
                 activeClassName={styles.active}>
                 {t('configure.configure')}
@@ -54,8 +56,7 @@ const CoralDrawer = ({handleLogout, auth = {}}) => (
 
 CoralDrawer.propTypes = {
   handleLogout: PropTypes.func.isRequired,
-  restricted: PropTypes.bool, // hide app elements from a logged out user
-  auth: PropTypes.object
+  restricted: PropTypes.bool // hide app elements from a logged out user
 };
 
 export default CoralDrawer;

client/coral-admin/src/components/ui/Header.css

@@ -15,25 +15,20 @@
   }
 }
 
-.headerWrapper {
-  background-color: #696969;
-}
-
 .header {
+  background-color: transparent;
   box-shadow: none;
   min-height: 58px;
   display: block;
-  max-width: 1280px;
-  margin: 0 auto;
-  background-color: #696969;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
 }
 
 .header > div {
+  background-color: #696969;
   position: relative;
   padding: 0;
-  max-width: 1280px;
+  min-width: 1280px;
   margin: 0 auto;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
   height: 58px;
 }
 

client/coral-admin/src/components/ui/Header.js

@@ -1,111 +1,105 @@
-import React from 'react';
-import cn from 'classnames';
-import PropTypes from 'prop-types';
+import React, {PropTypes} from 'react';
 import {Navigation, Header, IconButton, MenuItem, Menu} from 'react-mdl';
 import {Link, IndexLink} from 'react-router';
 import styles from './Header.css';
 import t from 'coral-framework/services/i18n';
 import {Logo} from './Logo';
 import {can} from 'coral-framework/services/perms';
-import Indicator from './Indicator';
 
 const CoralHeader = ({
   handleLogout,
   showShortcuts = () => {},
-  auth,
-  root
-}) => {
-  return (
-    <div className={styles.headerWrapper}>
-      <Header className={styles.header}>
-        <Logo className={styles.logo} />
-        <div> 
-          {
-            auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
-              <Navigation className={styles.nav}>
-                {
-                  can(auth.user, 'MODERATE_COMMENTS') && (
-                    <IndexLink
-                      id='moderateNav'
-                      className={cn('talk-admin-nav-moderate', styles.navLink)}
-                      to="/admin/moderate"
-                      activeClassName={styles.active}>
-                      {t('configure.moderate')}
-                      {(root.premodCount !== 0 || root.reportedCount !== 0) && <Indicator />}
-                    </IndexLink>
-                  )
-                }
+  auth
+}) => (
+  <Header className={styles.header}>
+    <Logo className={styles.logo} />
+      <div>
+        {
+          auth && auth.user && can(auth.user, 'ACCESS_ADMIN') ?
+          <Navigation className={styles.nav}>
+            <IndexLink
+              id='dashboardNav'
+              className={styles.navLink}
+              to="/admin/dashboard"
+              activeClassName={styles.active}>
+              {t('configure.dashboard')}
+            </IndexLink>
+            {
+              can(auth.user, 'MODERATE_COMMENTS') && (
                 <Link
-                  id='storiesNav'
-                  className={cn('talk-admin-nav-stories', styles.navLink)}
-                  to="/admin/stories"
+                  id='moderateNav'
+                  className={styles.navLink}
+                  to="/admin/moderate"
                   activeClassName={styles.active}>
-                  {t('configure.stories')}
+                  {t('configure.moderate')}
                 </Link>
-
+              )
+            }
+            <Link
+              id='streamsNav'
+              className={styles.navLink}
+              to="/admin/stories"
+              activeClassName={styles.active}>
+              {t('configure.stories')}
+            </Link>
+            <Link
+              id='communityNav'
+              className={styles.navLink}
+              to="/admin/community"
+              activeClassName={styles.active}>
+              {t('configure.community')}
+            </Link>
+            {
+              can(auth.user, 'UPDATE_CONFIG') && (
                 <Link
-                  id='communityNav'
-                  className={cn('talk-admin-nav-community', styles.navLink)}
-                  to="/admin/community"
+                  id='configureNav'
+                  className={styles.navLink}
+                  to="/admin/configure"
                   activeClassName={styles.active}>
-                  {t('configure.community')}
-                  {root.flaggedUsernamesCount !== 0 && <Indicator />}
+                  {t('configure.configure')}
                 </Link>
-
-                {
-                  can(auth.user, 'UPDATE_CONFIG') && (
-                    <Link
-                      id='configureNav'
-                      className={cn('talk-admin-nav-configure', styles.navLink)}
-                      to="/admin/configure"
-                      activeClassName={styles.active}>
-                      {t('configure.configure')}
-                    </Link>
-                  )
-                }
-              </Navigation>
-              :
-              null
-          }
-          <div className={styles.rightPanel}>
-            <ul>
-              <li className={cn(styles.settings, 'talk-admin-header-settings')}>
-                <div>
-                  <IconButton name="settings" id="menu-settings" className="talk-admin-header-settings-button"/>
-                  <Menu target="menu-settings" align="right">
-                    <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
-                    <MenuItem>
-                      <a href="https://github.com/coralproject/talk/releases" target="_blank" rel="noopener noreferrer">
-                          View latest version
-                      </a>
-                    </MenuItem>
-                    <MenuItem>
-                      <a href="https://support.coralproject.net" target="_blank" rel="noopener noreferrer">
-                          Report a bug or give feedback
-                      </a>
-                    </MenuItem>
-                    <MenuItem onClick={handleLogout} className="talk-admin-header-sign-out">
-                      {t('configure.sign_out')}
-                    </MenuItem>
-                  </Menu>
-                </div>
-              </li>
-              <li>
-                {`v${process.env.VERSION}`}
-              </li>
-            </ul>
-          </div>
+              )
+            }
+          </Navigation>
+          :
+          null
+        }
+        <div className={styles.rightPanel}>
+          <ul>
+            <li className={styles.settings}>
+              <div>
+                <IconButton name="settings" id="menu-settings"/>
+                <Menu target="menu-settings" align="right">
+                  <MenuItem onClick={() => showShortcuts(true)}>{t('configure.shortcuts')}</MenuItem>
+                  <MenuItem>
+                    <a href="https://github.com/coralproject/talk/releases" target="_blank">
+                      View latest version
+                    </a>
+                  </MenuItem>
+                  <MenuItem>
+                    <a href="https://coralproject.net/contribute.html#other-ideas-and-bug-reports" target="_blank">
+                      Report a bug or give feedback
+                    </a>
+                  </MenuItem>
+                  <MenuItem onClick={handleLogout}>
+                    {t('configure.sign_out')}
+                  </MenuItem>
+                </Menu>
+              </div>
+            </li>
+            <li>        
+             {`v${process.env.VERSION}`}        
+            </li>
+          </ul>
         </div>
-      </Header>
-    </div>
-  );
-};
+      </div>
+  </Header>
+);
 
 CoralHeader.propTypes = {
   auth: PropTypes.object,
   showShortcuts: PropTypes.func,
-  handleLogout: PropTypes.func.isRequired,
-  root: PropTypes.object.isRequired
+  handleLogout: PropTypes.func.isRequired
 };
 
 export default CoralHeader;

client/coral-admin/src/components/ui/Indicator.css

@@ -1,10 +0,0 @@
-.indicator {
-  background-color: #E46D59;
-  border-radius: 10px;
-  position: absolute;
-  top: 50%;
-  width: 7px;
-  height: 7px;
-  margin-top: -4px;
-  margin-left: 7px;
-}

client/coral-admin/src/components/ui/Indicator.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import styles from './Indicator.css';
-
-const Indicator = () => 
-  <span className={styles.indicator}></span>;
-
-export default Indicator;

client/coral-admin/src/components/ui/Layout.css

@@ -1,4 +1,5 @@
 .layout {
-  margin: 0 auto;
-  background-color: #FAFAFA;
+    max-width: 1280px;
+    margin: 0 auto;
+    background-color: #FAFAFA;
 }

client/coral-admin/src/components/ui/Layout.js

@@ -1,28 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {PropTypes} from 'react';
 import {Layout as LayoutMDL} from 'react-mdl';
-import Header from '../../containers/Header';
-import Drawer from '../Drawer';
+import Header from './Header';
+import Drawer from './Drawer';
 import styles from './Layout.css';
 
 const Layout = ({
   children,
   handleLogout = () => {},
-  toggleShortcutModal = () => {},
+  toggleShortcutModal,
   restricted = false,
-  auth,
-}) => (
+  ...props}) => (
   <LayoutMDL className={styles.layout} fixedDrawer>
     <Header
       handleLogout={handleLogout}
       showShortcuts={toggleShortcutModal}
-      auth={auth}
-    />
-    <Drawer 
-      handleLogout={handleLogout}
-      restricted={restricted}
-      auth={auth}
-    />
+      {...props} />
+    <Drawer handleLogout={handleLogout} restricted={restricted} {...props} />
     <div className={styles.layout}>
       {children}
     </div>
@@ -30,8 +23,6 @@ const Layout = ({
 );
 
 Layout.propTypes = {
-  children: PropTypes.node,
-  auth: PropTypes.object,
   handleLogout: PropTypes.func,
   toggleShortcutModal: PropTypes.func,
   restricted: PropTypes.bool // hide elements from a user that's logged out

client/coral-admin/src/components/ui/Logo.css

@@ -10,17 +10,16 @@
 .logo span {
   display: inline-block;
   margin-left: 10px;
-  font-size: 26px;
+  font-size: 18px;
   vertical-align: middle;
   font-weight: 500;
-  color: white;
 }
 
 .logo {
-  background: #696969;
+  background: #E5E5E5;
   height: 100%;
   width: 128px;
-  border-right: 1px #757575 solid;
+  z-index: 10;
 }
 
 .base {

client/coral-admin/src/components/ui/Logo.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import styles from './Logo.css';
 import {CoralLogo} from 'coral-ui';
-import PropTypes from 'prop-types';
 
 export const Logo = ({className = ''}) => (
   <div className={`${styles.logo} ${className}`}>
@@ -11,7 +10,3 @@ export const Logo = ({className = ''}) => (
     </h1>
   </div>
 );
-
-Logo.propTypes = {
-  className: PropTypes.string
-};

client/coral-admin/src/constants/assets.js

@@ -0,0 +1,9 @@
+export const FETCH_ASSETS_REQUEST = 'FETCH_ASSETS_REQUEST';
+export const FETCH_ASSETS_SUCCESS = 'FETCH_ASSETS_SUCCESS';
+export const FETCH_ASSETS_FAILURE = 'FETCH_ASSETS_FAILURE';
+
+export const UPDATE_ASSET_STATE_REQUEST = 'UPDATE_ASSET_STATE_REQUEST';
+export const UPDATE_ASSET_STATE_SUCCESS = 'UPDATE_ASSET_STATE_SUCCESS';
+export const UPDATE_ASSET_STATE_FAILURE = 'UPDATE_ASSET_STATE_FAILURE';
+
+export const UPDATE_ASSETS = 'UPDATE_ASSETS';

client/coral-admin/src/constants/community.js

@@ -1,22 +1,17 @@
-const prefix = 'COMMUNITY';
+export const FETCH_COMMENTERS_REQUEST = 'FETCH_COMMENTERS_REQUEST';
+export const FETCH_COMMENTERS_SUCCESS = 'FETCH_COMMENTERS_SUCCESS';
+export const FETCH_COMMENTERS_FAILURE = 'FETCH_COMMENTERS_FAILURE';
+export const SORT_UPDATE = 'SORT_UPDATE';
+export const COMMENTERS_NEW_PAGE = 'COMMENTERS_NEW_PAGE';
+export const SET_ROLE = 'SET_ROLE';
+export const SET_COMMENTER_STATUS = 'SET_COMMENTER_STATUS';
 
-export const FETCH_USERS_REQUEST = `${prefix}_FETCH_USERS_REQUEST`;
-export const FETCH_USERS_SUCCESS = `${prefix}_FETCH_USERS_SUCCESS`;
-export const FETCH_USERS_FAILURE = `${prefix}_FETCH_USERS_FAILURE`;
+export const FETCH_FLAGGED_COMMENTERS_REQUEST = 'FETCH_FLAGGED_COMMENTERS_REQUEST';
+export const FETCH_FLAGGED_COMMENTERS_SUCCESS = 'FETCH_FLAGGED_COMMENTERS_SUCCESS';
+export const FETCH_FLAGGED_COMMENTERS_FAILURE = 'FETCH_FLAGGED_COMMENTERS_FAILURE';
 
-export const SORT_UPDATE = `${prefix}_SORT_UPDATE`;
-export const SET_PAGE = `${prefix}_SET_PAGE`;
-export const SET_ROLE = `${prefix}_SET_ROLE`;
-export const SET_COMMENTER_STATUS = `${prefix}_SET_COMMENTER_STATUS`;
+export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
+export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
 
-export const FETCH_FLAGGED_COMMENTERS_REQUEST = `${prefix}_FETCH_FLAGGED_COMMENTERS_REQUEST`;
-export const FETCH_FLAGGED_COMMENTERS_SUCCESS = `${prefix}_FETCH_FLAGGED_COMMENTERS_SUCCESS`;
-export const FETCH_FLAGGED_COMMENTERS_FAILURE = `${prefix}_FETCH_FLAGGED_COMMENTERS_FAILURE`;
-
-export const SHOW_BANUSER_DIALOG = `${prefix}_SHOW_BANUSER_DIALOG`;
-export const HIDE_BANUSER_DIALOG = `${prefix}_HIDE_BANUSER_DIALOG`;
-
-export const SHOW_REJECT_USERNAME_DIALOG = `${prefix}_SHOW_REJECT_USERNAME_DIALOG`;
-export const HIDE_REJECT_USERNAME_DIALOG = `${prefix}_HIDE_REJECT_USERNAME_DIALOG`;
-
-export const SET_SEARCH_VALUE = `${prefix}_SET_SEARCH_VALUE`;
+export const SHOW_REJECT_USERNAME_DIALOG = 'SHOW_REJECT_USERNAME_DIALOG';
+export const HIDE_REJECT_USERNAME_DIALOG = 'HIDE_REJECT_USERNAME_DIALOG';

client/coral-admin/src/constants/configure.js

@@ -1,5 +0,0 @@
-const prefix = 'TALK_ADMIN_CONFIGURE';
-
-export const UPDATE_PENDING = `${prefix}_UPDATE_PENDING`;
-export const CLEAR_PENDING = `${prefix}_CLEAR_PENDING`;
-export const SET_ACTIVE_SECTION = `${prefix}_SET_ACTIVE_SECTION`;

client/coral-admin/src/constants/moderation.js

@@ -1,7 +1,13 @@
 export const TOGGLE_MODAL = 'TOGGLE_MODAL';
 export const SINGLE_VIEW = 'SINGLE_VIEW';
 export const HIDE_SHORTCUTS_NOTE = 'HIDE_SHORTCUTS_NOTE';
+export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
+export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
 export const SET_SORT_ORDER = 'MODERATION_SET_SORT_ORDER';
+export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
+export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
+export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
+export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
 export const SHOW_STORY_SEARCH = 'SHOW_STORY_SEARCH';
 export const HIDE_STORY_SEARCH = 'HIDE_STORY_SEARCH';
 export const STORY_SEARCH_CHANGE_VALUE = 'STORY_SEARCH_CHANGE_VALUE';

client/coral-admin/src/constants/stories.js

@@ -1,15 +0,0 @@
-const prefix = 'STORIES';
-
-export const FETCH_ASSETS_REQUEST = `${prefix}_FETCH_ASSETS_REQUEST`;
-export const FETCH_ASSETS_SUCCESS = `${prefix}_FETCH_ASSETS_SUCCESS`;
-export const FETCH_ASSETS_FAILURE = `${prefix}_FETCH_ASSETS_FAILURE`;
-
-export const UPDATE_ASSET_STATE_REQUEST = `${prefix}_UPDATE_ASSET_STATE_REQUEST`;
-export const UPDATE_ASSET_STATE_SUCCESS = `${prefix}_UPDATE_ASSET_STATE_SUCCESS`;
-export const UPDATE_ASSET_STATE_FAILURE = `${prefix}_UPDATE_ASSET_STATE_FAILURE`;
-
-export const UPDATE_ASSETS = `${prefix}_UPDATE_ASSETS`;
-
-export const SET_PAGE = `${prefix}_SET_PAGE`;
-export const SET_SEARCH_VALUE = `${prefix}_SET_SEARCH_VALUE`;
-export const SET_CRITERIA = `${prefix}_SET_CRITERIA`;

client/coral-admin/src/constants/userDetail.js

@@ -1,7 +0,0 @@
-export const VIEW_USER_DETAIL = 'VIEW_USER_DETAIL';
-export const HIDE_USER_DETAIL = 'HIDE_USER_DETAIL';
-export const CHANGE_USER_DETAIL_STATUSES = 'CHANGE_USER_DETAIL_STATUSES';
-export const SELECT_USER_DETAIL_COMMENT = 'SELECT_USER_DETAIL_COMMENT';
-export const UNSELECT_USER_DETAIL_COMMENT = 'UNSELECT_USER_DETAIL_COMMENT';
-export const CLEAR_USER_DETAIL_SELECTIONS = 'CLEAR_USER_DETAIL_SELECTIONS';
-export const SELECT_ALL_USER_DETAIL_COMMENT = 'SELECT_ALL_USER_DETAIL_COMMENT';

client/coral-admin/src/containers/BanUserDialog.js

@@ -6,22 +6,15 @@ import {hideBanUserDialog} from '../actions/banUserDialog';
 import {withSetUserStatus, withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import {compose} from 'react-apollo';
 import t from 'coral-framework/services/i18n';
-import {getErrorMessages} from 'coral-framework/utils';
-import {notify} from 'coral-framework/actions/notification';
 
 class BanUserDialogContainer extends Component {
 
   banUser = async () => {
-    const {userId, commentId, commentStatus, setUserStatus, setCommentStatus, hideBanUserDialog, notify} = this.props;
-    try {
-      await setUserStatus({userId, status: 'BANNED'});
-      hideBanUserDialog();
-      if (commentId && commentStatus && commentStatus !== 'REJECTED') {
-        await setCommentStatus({commentId, status: 'REJECTED'});
-      }
-    }
-    catch(err) {
-      notify('error', getErrorMessages(err));
+    const {userId, commentId, commentStatus, setUserStatus, setCommentStatus, hideBanUserDialog} = this.props;
+    await setUserStatus({userId, status: 'BANNED'});
+    hideBanUserDialog();
+    if (commentId && commentStatus && commentStatus !== 'REJECTED') {
+      await setCommentStatus({commentId, status: 'REJECTED'});
     }
   }
 
@@ -57,7 +50,6 @@ const mapStateToProps = ({banUserDialog: {open, userId, username, commentId, com
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     hideBanUserDialog,
-    notify,
   }, dispatch),
 });
 

client/coral-admin/src/containers/CommentDetails.js

@@ -1,24 +0,0 @@
-import {gql} from 'react-apollo';
-import CommentDetails from '../components/CommentDetails';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
-import withFragments from 'coral-framework/hocs/withFragments';
-
-const slots = [
-  'adminCommentDetailArea',
-  'adminCommentMoreDetails',
-];
-
-export default withFragments({
-  root: gql`
-    fragment CoralAdmin_CommentDetails_root on RootQuery {
-      __typename
-      ${getSlotFragmentSpreads(slots, 'root')}
-    }
-  `,
-  comment: gql`
-    fragment CoralAdmin_CommentDetails_comment on Comment {
-      __typename
-      ${getSlotFragmentSpreads(slots, 'comment')}
-    }
-  `
-})(CommentDetails);

client/coral-admin/src/containers/CommentLabels.js

@@ -1,34 +0,0 @@
-import {gql} from 'react-apollo';
-import CommentLabels from '../components/CommentLabels';
-import withFragments from 'coral-framework/hocs/withFragments';
-import {getSlotFragmentSpreads} from 'coral-framework/utils';
-
-const slots = [
-  'adminCommentLabels',
-];
-
-export default withFragments({
-  root: gql`
-    fragment CoralAdmin_CommentLabels_root on RootQuery {
-      __typename
-      ${getSlotFragmentSpreads(slots, 'root')}
-    }
-  `,
-  comment: gql`
-    fragment CoralAdmin_CommentLabels_comment on Comment {
-      hasParent
-      status
-      actions {
-        __typename
-        ... on FlagAction {
-          reason
-        }
-        user {
-          id
-          roles
-        }
-      }
-      ${getSlotFragmentSpreads(slots, 'comment')}
-    }
-  `
-})(CommentLabels);

client/coral-admin/src/containers/Header.js

@@ -1,24 +0,0 @@
-import {gql} from 'react-apollo';
-import withQuery from 'coral-framework/hocs/withQuery';
-import Header from '../components/ui/Header';
-
-export default withQuery(gql`
-  query TalkAdmin_Header {
-    __typename
-    premodCount: commentCount(query: {
-      statuses: [PREMOD]
-    })
-    reportedCount: commentCount(query: {
-      statuses: [NONE, PREMOD, SYSTEM_WITHHELD],
-      action_type: FLAG
-    })
-    flaggedUsernamesCount: userCount(query: {
-      action_type: FLAG,
-      statuses: [PENDING]
-    })
-  }
-`, {
-    options: {
-      pollInterval: 10000
-    }
-  })(Header);

client/coral-admin/src/containers/Layout.js

@@ -1,28 +1,24 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
 import Layout from '../components/ui/Layout';
 import {fetchConfig} from '../actions/config';
 import AdminLogin from '../components/AdminLogin';
+import {logout} from 'coral-framework/actions/auth';
 import {FullLoading} from '../components/FullLoading';
 import BanUserDialog from './BanUserDialog';
 import SuspendUserDialog from './SuspendUserDialog';
 import {toggleModal as toggleShortcutModal} from '../actions/moderation';
-import {checkLogin, handleLogin, requestPasswordReset, logout} from '../actions/auth';
+import {checkLogin, handleLogin, requestPasswordReset} from '../actions/auth';
 import {can} from 'coral-framework/services/perms';
-import UserDetail from 'coral-admin/src/containers/UserDetail';
-import PropTypes from 'prop-types';
 
-class LayoutContainer extends React.Component {
+class LayoutContainer extends Component {
   componentWillMount() {
     const {checkLogin, fetchConfig} = this.props;
 
     checkLogin();
     fetchConfig();
   }
-
   render() {
-
     const {
       user,
       loggedIn,
@@ -33,16 +29,13 @@ class LayoutContainer extends React.Component {
     } = this.props.auth;
 
     const {
-      children,
-      logout,
+      handleLogout,
       toggleShortcutModal,
-      TALK_RECAPTCHA_PUBLIC,
+      TALK_RECAPTCHA_PUBLIC
     } = this.props;
-
     if (loadingUser) {
       return <FullLoading />;
     }
-
     if (!loggedIn) {
       return (
         <AdminLogin
@@ -55,17 +48,16 @@ class LayoutContainer extends React.Component {
         />
       );
     }
-
     if (can(user, 'ACCESS_ADMIN') && loggedIn) {
       return (
         <Layout
-          handleLogout={logout}
+          handleLogout={handleLogout}
           toggleShortcutModal={toggleShortcutModal}
-          auth={this.props.auth} >
-          <BanUserDialog />
-          <SuspendUserDialog />
-          <UserDetail />
-          {children}
+          {...this.props}
+        >
+        <BanUserDialog />
+        <SuspendUserDialog />
+        {this.props.children}
         </Layout>
       );
     } else if (loggedIn) {
@@ -79,32 +71,21 @@ class LayoutContainer extends React.Component {
   }
 }
 
-LayoutContainer.propTypes = {
-  children: PropTypes.node,
-  requestPasswordReset: PropTypes.func,
-  handleLogin: PropTypes.func,
-  auth: PropTypes.object,
-  handleLogout: PropTypes.func,
-  logout: PropTypes.func,
-  toggleShortcutModal: PropTypes.func,
-  TALK_RECAPTCHA_PUBLIC: PropTypes.string,
-  checkLogin: PropTypes.func,
-  fetchConfig: PropTypes.func
-};
-
 const mapStateToProps = (state) => ({
-  auth: state.auth,
-  TALK_RECAPTCHA_PUBLIC: state.config.data.TALK_RECAPTCHA_PUBLIC,
+  auth: state.auth.toJS(),
+  TALK_RECAPTCHA_PUBLIC: state.config
+    .get('data')
+    .get('TALK_RECAPTCHA_PUBLIC', null)
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  checkLogin: () => dispatch(checkLogin()),
+  fetchConfig: () => dispatch(fetchConfig()),
+  handleLogin: (username, password, recaptchaResponse) =>
+    dispatch(handleLogin(username, password, recaptchaResponse)),
+  requestPasswordReset: (email) => dispatch(requestPasswordReset(email)),
+  toggleShortcutModal: (toggle) => dispatch(toggleShortcutModal(toggle)),
+  handleLogout: () => dispatch(logout())
 });
 
-const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({
-    checkLogin,
-    fetchConfig,
-    handleLogin,
-    requestPasswordReset,
-    toggleShortcutModal,
-    logout
-  }, dispatch);
-  
 export default connect(mapStateToProps, mapDispatchToProps)(LayoutContainer);

client/coral-admin/src/containers/SuspendUserDialog.js

@@ -1,34 +1,39 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import SuspendUserDialog from '../components/SuspendUserDialog';
 import {hideSuspendUserDialog} from '../actions/suspendUserDialog';
 import {withSetCommentStatus, withSuspendUser} from 'coral-framework/graphql/mutations';
 import {compose, gql} from 'react-apollo';
+import * as notification from 'coral-admin/src/services/notification';
 import t, {timeago} from 'coral-framework/services/i18n';
 import withQuery from 'coral-framework/hocs/withQuery';
-import {getErrorMessages} from 'coral-framework/utils';
 import get from 'lodash/get';
-import {notify} from 'coral-framework/actions/notification';
 
 class SuspendUserDialogContainer extends Component {
 
   suspendUser = async ({message, until}) => {
-    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser, notify} = this.props;
+    const {userId, username, commentStatus, commentId, hideSuspendUserDialog, setCommentStatus, suspendUser} = this.props;
     hideSuspendUserDialog();
     try {
-      await suspendUser({id: userId, message, until});
-      notify(
-        'success',
+      const result = await suspendUser({id: userId, message, until});
+      if (result.data.suspendUser.errors) {
+        throw result.data.suspendUser.errors;
+      }
+      notification.success(
         t('suspenduser.notify_suspend_until', username, timeago(until)),
       );
       if (commentId && commentStatus && commentStatus !== 'REJECTED') {
-        await setCommentStatus({commentId, status: 'REJECTED'});
+        return setCommentStatus({commentId, status: 'REJECTED'})
+          .then((result) => {
+            if (result.data.setCommentStatus.errors) {
+              throw result.data.setCommentStatus.errors;
+            }
+          });
       }
     }
     catch(err) {
-      notify('error', getErrorMessages(err));
+      notification.showMutationErrors(err);
     }
   };
 
@@ -45,17 +50,10 @@ class SuspendUserDialogContainer extends Component {
   }
 }
 
-SuspendUserDialogContainer.propTypes = {
-  open: PropTypes.bool,
-  hideSuspendUserDialog: PropTypes.func,
-  username: PropTypes.string,
-};
-
 const withOrganizationName = withQuery(gql`
   query CoralAdmin_SuspendUserDialog {
-      __typename
      settings {
-       organizationName
+      organizationName
     }
   }
 `);
@@ -71,7 +69,6 @@ const mapStateToProps = ({suspendUserDialog: {open, userId, username, commentId,
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     hideSuspendUserDialog,
-    notify,
   }, dispatch),
 });
 

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

@@ -1,198 +0,0 @@
-import React from 'react';
-import {compose, gql} from 'react-apollo';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import UserDetail from '../components/UserDetail';
-import withQuery from 'coral-framework/hocs/withQuery';
-import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
-import {
-  viewUserDetail,
-  hideUserDetail,
-  changeUserDetailStatuses,
-  clearUserDetailSelections,
-  toggleSelectCommentInUserDetail,
-  toggleSelectAllCommentInUserDetail
-} from 'coral-admin/src/actions/userDetail';
-import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
-import UserDetailComment from './UserDetailComment';
-import update from 'immutability-helper';
-import {notify} from 'coral-framework/actions/notification';
-
-const commentConnectionFragment = gql`
-  fragment CoralAdmin_UserDetail_CommentConnection on CommentConnection {
-    nodes {
-      ...${getDefinitionName(UserDetailComment.fragments.comment)}
-    }
-    hasNextPage
-    startCursor
-    endCursor
-  }
-  ${UserDetailComment.fragments.comment}
-`;
-
-const slots = [
-  'userProfile',
-];
-
-class UserDetailContainer extends React.Component {
-  isLoadingMore = false;
-
-  // status can be 'ACCEPTED' or 'REJECTED'
-  bulkSetCommentStatus = async (status) => {
-    const changes = this.props.selectedCommentIds.map((commentId) => {
-      return this.props.setCommentStatus({commentId, status});
-    });
-
-    await Promise.all(changes);
-    this.props.clearUserDetailSelections(); // un-select everything
-  }
-
-  bulkReject = () => {
-    return this.bulkSetCommentStatus('REJECTED');
-  }
-
-  bulkAccept = () => {
-    return this.bulkSetCommentStatus('ACCEPTED');
-  }
-
-  acceptComment = ({commentId}) => {
-    return this.props.setCommentStatus({commentId, status: 'ACCEPTED'});
-  }
-
-  rejectComment = ({commentId}) => {
-    return this.props.setCommentStatus({commentId, status: 'REJECTED'});
-  }
-
-  loadMore = () => {
-    if (this.isLoadingMore) {
-      return;
-    }
-
-    this.isLoadingMore = true;
-    const variables = {
-      limit: 10,
-      cursor: this.props.root.comments.endCursor,
-      author_id: this.props.data.variables.author_id,
-      statuses: this.props.data.variables.statuses,
-    };
-    this.props.data.fetchMore({
-      query: LOAD_MORE_QUERY,
-      variables,
-      updateQuery: (prev, {fetchMoreResult:{comments}}) => {
-        return update(prev, {
-          comments: {
-            nodes: {$push: comments.nodes},
-            hasNextPage: {$set: comments.hasNextPage},
-            startCursor: {$set: comments.startCursor},
-            endCursor: {$set: comments.endCursor},
-          },
-        });
-      }
-    })
-      .then(() => {
-        this.isLoadingMore = false;
-      })
-      .catch((err) => {
-        this.isLoadingMore = false;
-        throw err;
-      });
-  };
-
-  componentWillReceiveProps(next) {
-    if (this.props.userId === null && next.userId) {
-      next.data.refetch();
-    }
-  }
-
-  render () {
-    if (!this.props.userId) {
-      return null;
-    }
-
-    const loading = this.props.data.loading;
-
-    return <UserDetail
-      bulkReject={this.bulkReject}
-      bulkAccept={this.bulkAccept}
-      changeStatus={this.props.changeUserDetailStatuses}
-      toggleSelect={this.props.toggleSelectCommentInUserDetail}
-      toggleSelectAll={this.props.toggleSelectAllCommentInUserDetail}
-      acceptComment={this.acceptComment}
-      rejectComment={this.rejectComment}
-      loading={loading}
-      loadMore={this.loadMore}
-      {...this.props} />;
-  }
-}
-
-const LOAD_MORE_QUERY = gql`
-  query CoralAdmin_Moderation_LoadMore($limit: Int = 10, $cursor: Cursor, $author_id: ID!, $statuses: [COMMENT_STATUS!]) {
-    comments(query: {limit: $limit, cursor: $cursor, author_id: $author_id, statuses: $statuses}) {
-      ...CoralAdmin_UserDetail_CommentConnection
-    }
-  }
-  ${commentConnectionFragment}
-`;
-
-export const withUserDetailQuery = withQuery(gql`
-  query CoralAdmin_UserDetail($author_id: ID!, $statuses: [COMMENT_STATUS!]) {
-    user(id: $author_id) {
-      id
-      username
-      created_at
-      profiles {
-        id
-        provider
-      }
-      reliable {
-        flagger
-      }
-      ${getSlotFragmentSpreads(slots, 'user')}
-    }
-    totalComments: commentCount(query: {author_id: $author_id, statuses: []})
-    rejectedComments: commentCount(query: {author_id: $author_id, statuses: [REJECTED]})
-    comments: comments(query: {
-      author_id: $author_id,
-      statuses: $statuses
-    }) {
-      ...CoralAdmin_UserDetail_CommentConnection
-    }
-    ...${getDefinitionName(UserDetailComment.fragments.root)}
-    ${getSlotFragmentSpreads(slots, 'root')}
-  }
-  ${UserDetailComment.fragments.root}
-  ${commentConnectionFragment}
-`, {
-  options: ({userId, statuses}) => {
-    return {
-      variables: {author_id: userId, statuses},
-      fetchPolicy: 'network-only',
-    };
-  },
-  skip: (ownProps) => !ownProps.userId,
-});
-
-const mapStateToProps = (state) => ({
-  userId: state.userDetail.userId,
-  selectedCommentIds: state.userDetail.selectedCommentIds,
-  statuses: state.userDetail.statuses,
-  activeTab: state.userDetail.activeTab,
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  ...bindActionCreators({
-    changeUserDetailStatuses,
-    clearUserDetailSelections,
-    toggleSelectCommentInUserDetail,
-    viewUserDetail,
-    hideUserDetail,
-    toggleSelectAllCommentInUserDetail,
-    notify
-  }, dispatch)
-});
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-  withUserDetailQuery,
-  withSetCommentStatus,
-)(UserDetailContainer);

client/coral-admin/src/containers/UserDetailComment.js

@@ -1,44 +0,0 @@
-import {gql} from 'react-apollo';
-import UserDetailComment from '../components/UserDetailComment';
-import withFragments from 'coral-framework/hocs/withFragments';
-import {getDefinitionName} from 'coral-framework/utils';
-import CommentLabels from './CommentLabels';
-import CommentDetails from './CommentDetails';
-
-export default withFragments({
-  root: gql`
-    fragment CoralAdmin_UserDetailComment_root on RootQuery {
-      settings {
-        wordlist {
-          banned
-          suspect
-        }
-      }
-      ...${getDefinitionName(CommentLabels.fragments.root)}
-      ...${getDefinitionName(CommentDetails.fragments.root)}
-    }
-    ${CommentLabels.fragments.root}
-    ${CommentDetails.fragments.root}
-  `,
-  comment: gql`
-    fragment CoralAdmin_UserDetailComment_comment on Comment {
-      id
-      body
-      created_at
-      status
-      hasParent
-      asset {
-        id
-        title
-        url
-      }
-      editing {
-        edited
-      }
-      ...${getDefinitionName(CommentLabels.fragments.comment)}
-      ...${getDefinitionName(CommentDetails.fragments.comment)}
-    }
-    ${CommentLabels.fragments.comment}
-    ${CommentDetails.fragments.comment}
-  `
-})(UserDetailComment);

client/coral-admin/src/graphql/index.js

@@ -1,45 +1,14 @@
-import update from 'immutability-helper';
-import {mapLeaves} from 'coral-framework/utils';
+import {add} from 'coral-framework/services/graphqlRegistry';
 
-export default {
+const extension = {
   mutations: {
-    SetUserStatus: ({variables: {status, userId}}) => ({
-      updateQueries: {
-        TalkAdmin_Community: (prev) => {
-          if (status !== 'APPROVED') {
-            return prev;
-          }
-          const updated = update(prev, {
-            users: {
-              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== userId)},
-            },
-          });
-          return updated;
-        }
-      }
+    SetUserStatus: () => ({
+      refetchQueries: ['CoralAdmin_Community'],
     }),
-    RejectUsername: ({variables: {input: {id: userId}}})  => ({
-      updateQueries: {
-        TalkAdmin_Community: (prev) => {
-          const updated = update(prev, {
-            users: {
-              nodes: {$apply: (nodes) => nodes.filter((node) => node.id !== userId)},
-            },
-          });
-          return updated;
-        }
-      }
-    }),
-    UpdateSettings: ({variables: {input}})  => ({
-      updateQueries: {
-        TalkAdmin_Configure: (prev) => {
-          const updated = update(prev, {
-            settings: mapLeaves(input, (leaf) => ({$set: leaf})),
-          });
-          return updated;
-        }
-      }
+    RejectUsername: () => ({
+      refetchQueries: ['CoralAdmin_Community'],
     }),
   },
 };
 
+add(extension);