Load settings from graph

This commit is contained in:
Chi Vinh Le
2017-10-05 21:05:05 +07:00
parent 6259c1869d
commit 9c00050f6a
22 changed files with 218 additions and 282 deletions
@@ -0,0 +1,5 @@
import * as actions from 'constants/configure';
export const updatePending = ({updater, errorUpdater}) => {
return {type: actions.UPDATE_PENDING, updater, errorUpdater};
};
@@ -1,58 +0,0 @@
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, _, {rest}) => {
dispatch({type: SETTINGS_LOADING});
rest('/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, {rest}) => {
let settings = getState().settings;
if (settings.charCount) {
settings.charCount = parseInt(settings.charCount);
}
dispatch({type: SAVE_SETTINGS_LOADING});
rest('/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});
});
};
@@ -17,8 +17,6 @@ export default class UserDetail extends React.Component {
userId: PropTypes.string.isRequired,
hideUserDetail: PropTypes.func.isRequired,
root: PropTypes.object.isRequired,
bannedWords: PropTypes.array.isRequired,
suspectWords: PropTypes.array.isRequired,
acceptComment: PropTypes.func.isRequired,
rejectComment: PropTypes.func.isRequired,
changeStatus: PropTypes.func.isRequired,
@@ -79,8 +77,6 @@ export default class UserDetail extends React.Component {
},
activeTab,
selectedCommentIds,
bannedWords,
suspectWords,
toggleSelect,
bulkAccept,
bulkReject,
@@ -184,8 +180,6 @@ export default class UserDetail extends React.Component {
root={root}
data={data}
comment={comment}
suspectWords={suspectWords}
bannedWords={bannedWords}
acceptComment={this.acceptThenReload}
rejectComment={this.rejectThenReload}
selected={selected}
@@ -30,12 +30,11 @@ class UserDetailComment extends React.Component {
render() {
const {
comment,
suspectWords,
bannedWords,
selected,
toggleSelect,
className,
data,
root: {settings: {wordlist: {banned, suspect}}},
} = this.props;
return (
@@ -72,8 +71,8 @@ class UserDetailComment extends React.Component {
<div className={styles.bodyContainer}>
<div className={styles.body}>
<CommentBodyHighlighter
suspectWords={suspectWords}
bannedWords={bannedWords}
suspectWords={suspect}
bannedWords={banned}
body={comment.body}
/>
{' '}
@@ -123,9 +122,15 @@ UserDetailComment.propTypes = {
acceptComment: PropTypes.func.isRequired,
rejectComment: PropTypes.func.isRequired,
className: PropTypes.string,
suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
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,
@@ -136,8 +141,8 @@ UserDetailComment.propTypes = {
title: PropTypes.string,
url: PropTypes.string,
id: PropTypes.string
})
})
}),
}),
};
export default UserDetailComment;
@@ -0,0 +1,3 @@
const prefix = 'CORAL_ADMIN';
export const UPDATE_PENDING = `${prefix}_UPDATE_PENDING`;
@@ -179,8 +179,6 @@ const mapStateToProps = (state) => ({
selectedCommentIds: state.userDetail.selectedCommentIds,
statuses: state.userDetail.statuses,
activeTab: state.userDetail.activeTab,
bannedWords: state.settings.wordlist.banned,
suspectWords: state.settings.wordlist.suspect,
});
const mapDispatchToProps = (dispatch) => ({
@@ -8,7 +8,12 @@ import CommentDetails from './CommentDetails';
export default withFragments({
root: gql`
fragment CoralAdmin_UserDetailComment_root on RootQuery {
__typename
settings {
wordlist {
banned
suspect
}
}
...${getDefinitionName(CommentLabels.fragments.root)}
...${getDefinitionName(CommentDetails.fragments.root)}
}
@@ -0,0 +1,35 @@
import * as actions from '../constants/configure';
import isEmpty from 'lodash/isEmpty';
import update from 'immutability-helper';
const initialState = {
canSave: false,
pending: {},
errors: {},
};
export default function configure(state = initialState, action) {
switch (action.type) {
case actions.UPDATE_PENDING: {
let next = state;
if (action.updater) {
next = update(next, {
pending: action.updater,
});
}
if (action.errorUpdater) {
next = update(next, {
errors: action.errorUpdater,
});
}
const noErrors = Object.keys(next.errors).reduce((res, error) => res && !next.errors[error], true);
const canSave = !isEmpty(next.pending) && noErrors;
next = update(next, {
canSave: {$set: canSave},
});
return next;
}
}
return state;
}
@@ -0,0 +1,15 @@
// this is initialized here because
// currently you have to reload the dashboard to get new stats
// cleaner updates are planned in the future.
const DASHBOARD_WINDOW_MINUTES = 5;
let then = new Date();
then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
const initialState = {
windowStart: then.toISOString(),
windowEnd: new Date().toISOString(),
};
export default function dashboard (state = initialState, _action) {
return state;
}
+4 -2
View File
@@ -1,6 +1,7 @@
import auth from './auth';
import assets from './assets';
import settings from './settings';
import dashboard from './dashboard';
import configure from './configure';
import community from './community';
import moderation from './moderation';
import install from './install';
@@ -12,10 +13,11 @@ import userDetail from './userDetail';
export default {
auth,
banUserDialog,
dashboard,
configure,
suspendUserDialog,
userDetail,
assets,
settings,
community,
moderation,
install,
@@ -1,92 +0,0 @@
import * as actions from '../actions/settings';
import update from 'immutability-helper';
// this is initialized here because
// currently you have to reload the dashboard to get new stats
// cleaner updates are planned in the future.
// TODO: if there are more than two fields for the dashboard being created here,
// please create a new reducer specifically for the Dashboard.
const DASHBOARD_WINDOW_MINUTES = 5;
let then = new Date();
then.setMinutes(then.getMinutes() - DASHBOARD_WINDOW_MINUTES);
const initialState = {
wordlist: {
banned: [],
suspect: []
},
dashboardWindowStart: then.toISOString(),
dashboardWindowEnd: new Date().toISOString(),
domains: {
whitelist: []
},
saveSettingsError: null,
fetchSettingsError: null,
fetchingSettings: false
};
export default function settings (state = initialState, action) {
switch (action.type) {
case actions.SETTINGS_LOADING:
return {
...state,
fetchingSettings: true,
fetchSettingsError: null,
};
case actions.SETTINGS_RECEIVED:
return {
...state,
fetchingSettings: false,
fetchSettingsError: null,
...action.settings
};
case actions.SETTINGS_FETCH_ERROR:
return {
...state,
fetchingSettings: false,
fetchSettingsError: action.error,
};
case actions.SETTINGS_UPDATED:
return {
...state,
fetchingSettings: false,
fetchSettingsError: null,
...action.settings
};
case actions.SAVE_SETTINGS_LOADING:
return {
...state,
fetchingSettings: true,
saveSettingsError: null,
};
case actions.SAVE_SETTINGS_SUCCESS:
return {
...state,
fetchingSettings: false,
fetchSettingsError: null,
...action.settings
};
case actions.SAVE_SETTINGS_FAILED:
return {
...state,
fetchingSettings: false,
fetchSettingsError: action.error,
};
case actions.WORDLIST_UPDATED:
return update(state, {
wordlist: {
[action.listName]: {
$set: action.list
}
}
});
case actions.DOMAINLIST_UPDATED:
return update(state, {
domains: {
[action.listName]: {$set: action.list},
}
});
default:
return state;
}
}
@@ -1,6 +1,6 @@
import React, {Component} from 'react';
import {Button, List, Item, Card, Spinner} from 'coral-ui';
import {Button, List, Item} from 'coral-ui';
import styles from './Configure.css';
import StreamSettings from './StreamSettings';
import ModerationSettings from './ModerationSettings';
@@ -12,104 +12,57 @@ export default class Configure extends Component {
state = {
activeSection: 'stream',
changed: false,
errors: {}
};
saveSettings = () => {
this.props.saveSettingsToServer();
this.setState({changed: false});
}
changeSection = (activeSection) => {
this.setState({activeSection});
}
onChangeWordlist = (listName, list) => {
this.setState({changed: true});
this.props.updateWordlist(listName, list);
}
onChangeDomainlist = (listName, list) => {
this.setState({changed: true});
this.props.updateDomainlist(listName, list);
}
onSettingUpdate = (setting) => {
this.setState({changed: true});
this.props.updateSettings(setting);
}
// Sets an arbitrary error string and a boolean state.
// This allows the system to track multiple errors.
onSettingError = (error, state) => {
this.setState((prevState) => {
prevState.errors[error] = state;
return prevState;
});
}
getSection (section) {
const pageTitle = this.getPageTitle(section);
let sectionComponent;
switch(section){
case 'stream':
sectionComponent = <StreamSettings
settings={this.props.settings}
updateSettings={this.onSettingUpdate}
errors={this.state.errors}
settingsError={this.onSettingError}/>;
updateSettings={this.props.updateSettings}
errors={this.props.errors}
/>;
break;
case 'moderation':
sectionComponent = <ModerationSettings
onChangeWordlist={this.onChangeWordlist}
onChangeWordlist={this.props.updateWordlist}
settings={this.props.settings}
updateSettings={this.onSettingUpdate} />;
updateSettings={this.props.updateSettings}
/>;
break;
case 'tech':
sectionComponent = <TechSettings
onChangeDomainlist={this.onChangeDomainlist}
onChangeDomainlist={this.props.updateDomainlist}
settings={this.props.settings}
updateSettings={this.onSettingUpdate} />;
}
if (this.props.settings.fetchingSettings) {
return <Card shadow="4"><Spinner/>Loading settings...</Card>;
updateSettings={this.props.updateSettings}
/>;
}
return (
<div className={styles.settingsSection}>
<h3>{pageTitle}</h3>
{sectionComponent}
</div>
);
}
getPageTitle (section) {
switch(section) {
case 'stream':
return t('configure.stream_settings');
case 'moderation':
return t('configure.moderation_settings');
case 'tech':
return t('configure.tech_settings');
default:
return '';
}
}
render () {
const {activeSection} = this.state;
const section = this.getSection(activeSection);
const {auth: {user}} = this.props;
const {auth: {user}, canSave} = this.props;
if (!can(user, 'UPDATE_CONFIG')) {
return <p>You must be an administrator to access config settings. Please find the nearest Admin and ask them to level you up!</p>;
}
const showSave = Object.keys(this.state.errors).reduce(
(bool, error) => this.state.errors[error] ? false : bool, this.state.changed);
return (
<div className={styles.container}>
<div className={styles.leftColumn}>
@@ -126,7 +79,7 @@ export default class Configure extends Component {
</List>
<div className={styles.saveBox}>
{
showSave ?
canSave ?
<Button
raised
onClick={this.saveSettings}
@@ -150,9 +103,7 @@ export default class Configure extends Component {
</div>
<div className={styles.mainContent}>
{ this.props.saveFetchingError }
{ this.props.fetchSettingsError }
{ section }
{section}
</div>
</div>
);
@@ -28,6 +28,7 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
return (
<div className={styles.Configure}>
<h3>{t('configure.moderation_settings')}</h3>
<Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
<div className={styles.action}>
<Checkbox
@@ -17,14 +17,13 @@ const updateCharCountEnable = (updateSettings, charCountChecked) => () => {
updateSettings({charCountEnable});
};
const updateCharCount = (updateSettings, settingsError) => (event) => {
const updateCharCount = (updateSettings) => (event) => {
let error = null;
const charCount = event.target.value;
if (charCount.match(/[^0-9]/) || charCount.length === 0) {
settingsError('charCount', true);
} else {
settingsError('charCount', false);
error = true;
}
updateSettings({charCount: charCount});
updateSettings({charCount: charCount}, {setError: {'charCount': error}});
};
const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
@@ -68,7 +67,7 @@ const updateEditCommentWindowLength = (updateSettings) => (e) => {
updateSettings({editCommentWindowLength: milliseconds || value});
};
const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
const StreamSettings = ({updateSettings, settings, errors}) => {
// just putting this here for shorthand below
const on = styles.enabledSetting;
@@ -76,6 +75,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
return (
<div className={styles.Configure}>
<h3>{t('configure.stream_settings')}</h3>
<Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
<div className={styles.action}>
<Checkbox
@@ -89,7 +89,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
<input type='text'
className={`${styles.inlineTextfield} ${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
htmlFor='charCount'
onChange={updateCharCount(updateSettings, settingsError)}
onChange={updateCharCount(updateSettings)}
value={settings.charCount}
disabled={settings.charCountEnable ? '' : 'disabled'}
/>
@@ -14,6 +14,7 @@ const updateCustomCssUrl = (updateSettings) => (event) => {
const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
return (
<div className={styles.Configure}>
<h3>{t('configure.tech_settings')}</h3>
<Domainlist
domains={settings.domains.whitelist}
onChangeDomainlist={onChangeDomainlist} />
@@ -1,42 +1,124 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {compose} from 'react-apollo';
import {compose, gql} from 'react-apollo';
import withQuery from 'coral-framework/hocs/withQuery';
import {Spinner} from 'coral-ui';
import {notify} from 'coral-framework/actions/notification';
import merge from 'lodash/merge';
import {
fetchSettings,
updateSettings,
saveSettingsToServer,
updateWordlist,
updateDomainlist
} from '../../../actions/settings';
updatePending,
} from '../../../actions/configure';
import Configure from '../components/Configure';
class ConfigureContainer extends Component {
componentWillMount = () => {
this.props.fetchSettings();
}
updateWordlist = (listName, list) => {
this.props.updatePending({updater: {
wordlist: {$apply: (wordlist) => {
const changeSet = {[listName]: list};
if (!wordlist) {
return changeSet;
}
return {
...wordlist,
...changeSet,
};
}},
}});
};
updateDomainlist = (listName, list) => {
this.props.updatePending({updater: {
domains: {$apply: (domains) => {
const changeSet = {[listName]: list};
if (!domains) {
return changeSet;
}
return {
...domains,
...changeSet,
};
}},
}});
};
updateSettings = (settings, {setError = {}} = {}) => {
this.props.updatePending({updater: {$merge: settings}, errorUpdater: {$merge: setError}});
};
render () {
return <Configure {...this.props} />;
if(this.props.data.loading) {
return <Spinner/>;
}
const merged = merge({}, this.props.root.settings, this.props.pending);
return <Configure
notify={this.props.notify}
updateWordlist={this.updateWordlist}
updateDomainlist={this.updateDomainlist}
updateSettings={this.updateSettings}
errors={this.props.errors}
auth={this.props.auth}
data={this.props.data}
root={this.props.root}
settings={merged}
canSave={this.props.canSave}
/>;
}
}
const withConfigureQuery = withQuery(gql`
query CoralEmbedStream_Embed {
settings {
moderation
requireEmailConfirmation
infoBoxEnable
infoBoxContent
questionBoxEnable
questionBoxContent
premodLinksEnable
questionBoxIcon
autoCloseStream
customCssUrl
closedTimeout
closedMessage
editCommentWindowLength
charCountEnable
charCount
organizationName
wordlist {
suspect
banned
}
domains {
whitelist
}
}
}
`, {
options: () => ({
variables: {},
}),
});
const mapStateToProps = (state) => ({
auth: state.auth,
settings: state.settings
pending: state.configure.pending,
canSave: state.configure.canSave,
errors: state.configure.errors,
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators({
fetchSettings,
updateSettings,
saveSettingsToServer,
updateWordlist,
updateDomainlist
notify,
updatePending,
}, dispatch);
export default compose(
withConfigureQuery,
connect(mapStateToProps, mapDispatchToProps),
)(ConfigureContainer);
@@ -42,11 +42,11 @@ export const witDashboardQuery = withQuery(gql`
}
}
`, {
options: ({settings: {dashboardWindowStart, dashboardWindowEnd}}) => {
options: ({windowStart, windowEnd}) => {
return {
variables: {
from: dashboardWindowStart,
to: dashboardWindowEnd
from: windowStart,
to: windowEnd,
}
};
}
@@ -54,8 +54,8 @@ export const witDashboardQuery = withQuery(gql`
const mapStateToProps = (state) => {
return {
settings: state.settings,
moderation: state.moderation
windowStart: state.dashboard.windowStart,
windowEnd: state.dashboard.windowEnd,
};
};
@@ -58,12 +58,11 @@ class Comment extends React.Component {
render() {
const {
comment,
suspectWords,
bannedWords,
selected,
className,
data,
root,
root: {settings},
currentUserId,
currentAsset,
} = this.props;
@@ -130,8 +129,8 @@ class Comment extends React.Component {
<div className={styles.itemBody}>
<div className={styles.body}>
<CommentBodyHighlighter
suspectWords={suspectWords}
bannedWords={bannedWords}
suspectWords={settings.wordlist.suspect}
bannedWords={settings.wordlist.banned}
body={comment.body}
/>
{' '}
@@ -188,8 +187,6 @@ Comment.propTypes = {
acceptComment: PropTypes.func.isRequired,
rejectComment: PropTypes.func.isRequired,
className: PropTypes.string,
suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
currentAsset: PropTypes.object,
showBanUserDialog: PropTypes.func.isRequired,
showSuspendUserDialog: PropTypes.func.isRequired,
@@ -56,7 +56,7 @@ class Moderation extends Component {
const comments = this.getComments();
const commentIdx = comments.findIndex((comment) => comment.id === selectedCommentId);
const comment = comments[commentIdx];
if (accept) {
comment.status !== 'ACCEPTED' && acceptComment({commentId: comment.id});
} else {
@@ -196,7 +196,7 @@ class Moderation extends Component {
}
render () {
const {root, data, moderation, settings, viewUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
const {root, data, moderation, viewUserDetail, activeTab, getModPath, queueConfig, handleCommentChange, ...props} = this.props;
const {asset} = root;
const assetId = asset && asset.id;
@@ -235,8 +235,6 @@ class Moderation extends Component {
activeTab={activeTab}
singleView={moderation.singleView}
selectedCommentId={this.state.selectedCommentId}
bannedWords={settings.wordlist.banned}
suspectWords={settings.wordlist.suspect}
showBanUserDialog={props.showBanUserDialog}
showSuspendUserDialog={props.showSuspendUserDialog}
acceptComment={props.acceptComment}
@@ -281,7 +279,6 @@ Moderation.propTypes = {
storySearchChange: PropTypes.func.isRequired,
moderation: PropTypes.object.isRequired,
auth: PropTypes.object.isRequired,
settings: PropTypes.object.isRequired,
queueConfig: PropTypes.object.isRequired,
handleCommentChange: PropTypes.func.isRequired,
setSortOrder: PropTypes.func.isRequired,
@@ -147,8 +147,6 @@ class ModerationQueue extends React.Component {
key={comment.id}
comment={comment}
selected={true}
suspectWords={props.suspectWords}
bannedWords={props.bannedWords}
viewUserDetail={viewUserDetail}
showBanUserDialog={props.showBanUserDialog}
showSuspendUserDialog={props.showSuspendUserDialog}
@@ -193,8 +191,6 @@ class ModerationQueue extends React.Component {
key={comment.id}
comment={comment}
selected={comment.id === selectedCommentId}
suspectWords={props.suspectWords}
bannedWords={props.bannedWords}
viewUserDetail={viewUserDetail}
showBanUserDialog={props.showBanUserDialog}
showSuspendUserDialog={props.showSuspendUserDialog}
@@ -218,8 +214,6 @@ class ModerationQueue extends React.Component {
ModerationQueue.propTypes = {
viewUserDetail: PropTypes.func.isRequired,
bannedWords: PropTypes.arrayOf(PropTypes.string).isRequired,
suspectWords: PropTypes.arrayOf(PropTypes.string).isRequired,
currentAsset: PropTypes.object,
showBanUserDialog: PropTypes.func.isRequired,
showSuspendUserDialog: PropTypes.func.isRequired,
@@ -15,7 +15,12 @@ const slots = [
export default withFragments({
root: gql`
fragment CoralAdmin_ModerationComment_root on RootQuery {
__typename
settings {
wordlist {
banned
suspect
}
}
${getSlotFragmentSpreads(slots, 'root')}
...${getDefinitionName(CommentLabels.fragments.root)}
...${getDefinitionName(CommentDetails.fragments.root)}
@@ -13,7 +13,6 @@ import {isPremod, getModPath} from '../../../utils';
import {withSetCommentStatus} from 'coral-framework/graphql/mutations';
import {handleCommentChange} from '../graphql';
import {fetchSettings} from 'actions/settings';
import {showBanUserDialog} from 'actions/banUserDialog';
import {showSuspendUserDialog} from 'actions/suspendUserDialog';
import {viewUserDetail} from '../../../actions/userDetail';
@@ -146,7 +145,6 @@ class ModerationContainer extends Component {
componentWillMount() {
this.props.clearState();
this.props.fetchSettings();
this.subscribeToUpdates();
}
@@ -384,7 +382,6 @@ const withModQueueQuery = withQuery(({queueConfig}) => gql`
const mapStateToProps = (state) => ({
moderation: state.moderation,
settings: state.settings,
auth: state.auth,
});
@@ -392,7 +389,6 @@ const mapDispatchToProps = (dispatch) => ({
...bindActionCreators({
toggleModal,
singleView,
fetchSettings,
showBanUserDialog,
hideShortcutsNote,
toggleStorySearch,