roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 12:19:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: prettier on UI

Browse source
This commit is contained in:
Katie Thornhill 2019-11-19 23:04:09 -05:00
parent 912b40c383
commit 4b75eaa0ab
No known key found for this signature in database
GPG key ID: F76EDC6541A99644
49 changed files with 1703 additions and 1267 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
UI/config-overrides.js
View file

@ -1,4 +1,2 @@
const { override, addDecoratorsLegacy } = require('customize-cra') const { override, addDecoratorsLegacy } = require("customize-cra");
module.exports = override( module.exports = override(addDecoratorsLegacy());
addDecoratorsLegacy()
)

4
UI/package.json
View file

@ -31,7 +31,8 @@
"start": "react-app-rewired start", "start": "react-app-rewired start",
"build": "react-app-rewired build", "build": "react-app-rewired build",
"test": "react-app-rewired test", "test": "react-app-rewired test",
"eject": "react-app-rewired eject" "eject": "react-app-rewired eject",
"lint:prettier": "prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx}'"
}, },
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"
@ -53,6 +54,7 @@
"eslint-plugin-react": "^7.11.1", "eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0", "eslint-plugin-standard": "^4.0.0",
"node-sass-chokidar": "^1.3.4", "node-sass-chokidar": "^1.3.4",
"prettier": "^1.19.1",
"react-app-rewire-scss": "^1.0.2", "react-app-rewire-scss": "^1.0.2",
"react-app-rewired": "^2.1.1", "react-app-rewired": "^2.1.1",
"redux-devtools": "^3.4.1", "redux-devtools": "^3.4.1",

9
UI/src/.prettierrc.js Normal file
View file

@ -0,0 +1,9 @@
module.exports = {
printWidth: 90,
useTabs: false,
tabWidth: 2,
singleQuote: true,
trailingComma: 'es5',
bracketSpacing: true,
semi: true,
};

8
UI/src/App.css
View file

@ -23,6 +23,10 @@
} }
@keyframes App-logo-spin { @keyframes App-logo-spin {
from { transform: rotate(0deg); } from {
to { transform: rotate(360deg); } transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} }

40
UI/src/App.js
View file

@ -1,29 +1,29 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Provider } from 'react-redux' import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux' import { ConnectedRouter } from 'react-router-redux';
import { DragDropContext } from 'react-dnd' import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend' import HTML5Backend from 'react-dnd-html5-backend';
import createHistory from 'history/createBrowserHistory' import createHistory from 'history/createBrowserHistory';
import configureStore from './store/configureStore' import configureStore from './store/configureStore';
import './App.css' import './App.css';
import './generic.sass' import './generic.sass';
import Wrapper from './components/wrapper' import Wrapper from './components/wrapper';
import AppRouter from './router' import AppRouter from './router';
import { userInit } from './actions' import { userInit } from './actions';
const history = createHistory() const history = createHistory();
const store = configureStore(undefined, history) const store = configureStore(undefined, history);
window.__APP_STORE__ = store window.__APP_STORE__ = store;
@DragDropContext(HTML5Backend) @DragDropContext(HTML5Backend)
class App extends Component { class App extends Component {
componentWillMount () { componentWillMount() {
store.dispatch(userInit) store.dispatch(userInit);
} }
render () { render() {
return ( return (
<Provider store={store}> <Provider store={store}>
<ConnectedRouter history={history}> <ConnectedRouter history={history}>
@ -32,8 +32,8 @@ class App extends Component {
</Wrapper> </Wrapper>
</ConnectedRouter> </ConnectedRouter>
</Provider> </Provider>
) );
} }
} }
export default App export default App;

89
UI/src/actions/index.js
View file

@ -1,87 +1,88 @@
import superagent from 'superagent' import superagent from 'superagent';
import { push } from 'react-router-redux' import { push } from 'react-router-redux';
export const fetchServers = async dispatch => { export const fetchServers = async dispatch => {
const rsp = await superagent.get('/api/servers') const rsp = await superagent.get('/api/servers');
dispatch({ dispatch({
type: Symbol.for('update servers'), type: Symbol.for('update servers'),
data: rsp.body data: rsp.body,
}) });
dispatch({ dispatch({
type: Symbol.for('app ready') type: Symbol.for('app ready'),
}) });
} };
export const userInit = async dispatch => { export const userInit = async dispatch => {
if (!window.location.pathname.startsWith('/oauth')) { if (!window.location.pathname.startsWith('/oauth')) {
try { try {
const rsp = await superagent.get('/api/auth/user') const rsp = await superagent.get('/api/auth/user');
dispatch({ dispatch({
type: Symbol.for('set user'), type: Symbol.for('set user'),
data: rsp.body data: rsp.body,
}) });
dispatch(fetchServers) dispatch(fetchServers);
} catch (e) { } catch (e) {
dispatch({ dispatch({
type: Symbol.for('app ready') type: Symbol.for('app ready'),
}) });
// window.location.href = '/oauth/flow' // window.location.href = '/oauth/flow'
} }
} else { } else {
dispatch({ dispatch({
type: Symbol.for('app ready') type: Symbol.for('app ready'),
}) });
} }
} };
export const userLogout = async dispatch => { export const userLogout = async dispatch => {
try { try {
await superagent.post('/api/auth/logout') await superagent.post('/api/auth/logout');
} catch (e) { } catch (e) {}
}
dispatch({ dispatch({
type: Symbol.for('reset user') type: Symbol.for('reset user'),
}) });
window.location.href = '/' window.location.href = '/';
} };
export const startServerPolling = dispatch => { export const startServerPolling = dispatch => {
return poll(window.__APP_STORE__.dispatch, window.__APP_STORE__.getState) // let's not cheat... :c return poll(window.__APP_STORE__.dispatch, window.__APP_STORE__.getState); // let's not cheat... :c
} };
const poll = (dispatch, getState) => { const poll = (dispatch, getState) => {
const { servers } = getState() const { servers } = getState();
let stop = false let stop = false;
const stopPolling = () => { stop = true } const stopPolling = () => {
stop = true;
};
const pollFunc = async () => { const pollFunc = async () => {
if (stop) { if (stop) {
return return;
} }
try { try {
await fetchServers(dispatch) await fetchServers(dispatch);
} catch (e) { } catch (e) {
console.error(e) console.error(e);
setTimeout(pollFunc, 5000) setTimeout(pollFunc, 5000);
} }
const newServers = getState().servers const newServers = getState().servers;
if (servers.size >= newServers.size) { if (servers.size >= newServers.size) {
setTimeout(pollFunc, 5000) setTimeout(pollFunc, 5000);
} else { } else {
const old = servers.keySeq().toSet() const old = servers.keySeq().toSet();
const upd = newServers.keySeq().toSet() const upd = newServers.keySeq().toSet();
const newSrv = upd.subtract(old) const newSrv = upd.subtract(old);
stopPolling() stopPolling();
dispatch(push(`/s/${newSrv.toJS()[0]}/edit`)) dispatch(push(`/s/${newSrv.toJS()[0]}/edit`));
} }
} };
pollFunc() pollFunc();
return stopPolling return stopPolling;
} };

12
UI/src/actions/ui.js
View file

@ -1,13 +1,13 @@
export const fadeOut = cb => dispatch => { export const fadeOut = cb => dispatch => {
dispatch({ dispatch({
type: Symbol.for('app fade'), type: Symbol.for('app fade'),
data: true data: true,
}) });
setTimeout(cb, 300) setTimeout(cb, 300);
} };
export const fadeIn = { export const fadeIn = {
type: Symbol.for('app fade'), type: Symbol.for('app fade'),
data: false data: false,
} };

77
UI/src/components/add-server/index.js
View file

@ -1,41 +1,64 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom';
import TypingDemo from '../demos/typing' import TypingDemo from '../demos/typing';
import RoleypolyDemo from '../demos/roleypoly' import RoleypolyDemo from '../demos/roleypoly';
import * as Actions from '../../actions' import * as Actions from '../../actions';
import './styles.sass' import './styles.sass';
import discordLogo from '../../pages/images/discord-logo.svg' import discordLogo from '../../pages/images/discord-logo.svg';
export default class AddServer extends Component { export default class AddServer extends Component {
polling = null polling = null;
componentDidMount () { componentDidMount() {
if (this.props.match.params.server !== undefined) { if (this.props.match.params.server !== undefined) {
this.pollingStop = Actions.startServerPolling(this.props.dispatch) this.pollingStop = Actions.startServerPolling(this.props.dispatch);
} }
} }
componentWillUnmount () { componentWillUnmount() {
if (this.pollingStop != null) { if (this.pollingStop != null) {
this.pollingStop() this.pollingStop();
} }
} }
render () { render() {
return <div className="inner add-server"> return (
<h2>What is Roleypoly?</h2> <div className="inner add-server">
<p className="add-server__header"> <h2>What is Roleypoly?</h2>
Roleypoly is a helper bot to help server members assign themselves roles on Discord. <p className="add-server__header">
</p> Roleypoly is a helper bot to help server members assign themselves roles on
<div className="add-server__grid"> Discord.
<div><TypingDemo /></div> </p>
<div className="text">Could you easily remember 250 role names? You'd use images or bot commands to tell everyone what they can assign. This kinda limits how <i>many</i> roles you can reasonably have. And don't even start with emojis. <span alt="" role="img">💢</span></div> <div className="add-server__grid">
<div className="text right">Just click. <span role="img">🌈 💖</span></div> <div>
<div className="add-server__darkbg"><RoleypolyDemo /></div> <TypingDemo />
</div>
<div className="text">
Could you easily remember 250 role names? You'd use images or bot commands to
tell everyone what they can assign. This kinda limits how <i>many</i> roles
you can reasonably have. And don't even start with emojis.{' '}
<span alt="" role="img">
💢
</span>
</div>
<div className="text right">
Just click. <span role="img">🌈 💖</span>
</div>
<div className="add-server__darkbg">
<RoleypolyDemo />
</div>
</div>
<div className="add-server__header">
<a
href="/oauth/bot/flow"
target="_blank"
className="uk-button rp-button discord"
>
<img src={discordLogo} className="rp-button-logo" alt="" /> Authorize via
Discord
</a>
</div>
</div> </div>
<div className="add-server__header"> );
<a href="/oauth/bot/flow" target="_blank" className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo" alt=""/> Authorize via Discord</a>
</div>
</div>
} }
} }

22
UI/src/components/demos/roleypoly.js
View file

@ -1,12 +1,14 @@
import React from 'react' import React from 'react';
import RoleDemo from '../role/demo' import RoleDemo from '../role/demo';
const RoleypolyDemo = () => <div className="demo__roleypoly"> const RoleypolyDemo = () => (
<RoleDemo name="a cute role ♡" color="#3EC1BF" /> <div className="demo__roleypoly">
<RoleDemo name="a vanity role ♡" color="#F7335B" /> <RoleDemo name="a cute role ♡" color="#3EC1BF" />
<RoleDemo name="a brave role ♡" color="#A8D0B8" /> <RoleDemo name="a vanity role ♡" color="#F7335B" />
<RoleDemo name="a proud role ♡" color="#5C8B88" /> <RoleDemo name="a brave role ♡" color="#A8D0B8" />
<RoleDemo name="a wonderful role ♡" color="#D6B3C7" /> <RoleDemo name="a proud role ♡" color="#5C8B88" />
</div> <RoleDemo name="a wonderful role ♡" color="#D6B3C7" />
</div>
);
export default RoleypolyDemo export default RoleypolyDemo;

54
UI/src/components/demos/typing.js
View file

@ -1,29 +1,31 @@
import React from 'react' import React from 'react';
import moment from 'moment' import moment from 'moment';
import Typist from 'react-typist' import Typist from 'react-typist';
import './typing.sass' import './typing.sass';
const Typing = () => <div className="demo__discord rp-discord"> const Typing = () => (
<div className="discord__chat"> <div className="demo__discord rp-discord">
<span className="timestamp">{moment().format('LT')}</span> <div className="discord__chat">
<span className="username">Kata カタ</span> <span className="timestamp">{moment().format('LT')}</span>
<span className="text">Hey, I want some roles!</span> <span className="username">Kata カタ</span>
<span className="text">Hey, I want some roles!</span>
</div>
<div className="discord__textarea">
<Typist cursor={{ blink: true }}>
<span>.iam a cute role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a vanity role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a brave role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a proud role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a wonderful role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>i have too many roles.</span>
</Typist>
</div>
</div> </div>
<div className="discord__textarea"> );
<Typist cursor={{ blink: true }}>
<span>.iam a cute role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a vanity role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a brave role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a proud role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>.iam a wonderful role ♡</span>
<Typist.Backspace count={30} delay={1500} />
<span>i have too many roles.</span>
</Typist>
</div>
</div>
export default Typing export default Typing;

13
UI/src/components/dev-tools/index.js
View file

@ -1,11 +1,10 @@
import React from 'react' import React from 'react';
import { createDevTools } from 'redux-devtools' import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor' import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor' import DockMonitor from 'redux-devtools-dock-monitor';
export default createDevTools( export default createDevTools(
<DockMonitor toggleVisibilityKey="`" <DockMonitor toggleVisibilityKey="`" changePositionKey="ctrl-w">
changePositionKey="ctrl-w">
<LogMonitor /> <LogMonitor />
</DockMonitor> </DockMonitor>
) );

42
UI/src/components/logotype/index.js
View file

File diff suppressed because one or more lines are too long

40
UI/src/components/oauth-bot-flow/index.js
View file

@ -1,27 +1,35 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Redirect } from 'react-router-dom' import { Redirect } from 'react-router-dom';
import superagent from 'superagent' import superagent from 'superagent';
import { connect } from 'react-redux' import { connect } from 'react-redux';
import { push } from 'react-router-redux' import { push } from 'react-router-redux';
import { fetchServers } from '../../actions' import { fetchServers } from '../../actions';
@connect() @connect()
class OauthCallback extends Component { class OauthCallback extends Component {
state = { state = {
notReady: true, notReady: true,
message: 'chotto matte kudasai...', message: 'chotto matte kudasai...',
url: null url: null,
};
async componentDidMount() {
const {
body: { url },
} = await superagent.get('/api/oauth/bot?url=✔️');
this.setState({ url, notReady: false });
window.location.href = url;
} }
async componentDidMount () { render() {
const { body: { url } } = await superagent.get('/api/oauth/bot?url=✔️') return this.state.notReady ? (
this.setState({ url, notReady: false }) this.state.message
window.location.href = url ) : (
} <a style={{ zIndex: 10000 }} href={this.state.url}>
Something oopsed, click me to get to where you meant.
render () { </a>
return (this.state.notReady) ? this.state.message : <a style={{zIndex: 10000}} href={this.state.url}>Something oopsed, click me to get to where you meant.</a> );
} }
} }
export default OauthCallback export default OauthCallback;

88
UI/src/components/oauth-callback/index.js
View file

@ -1,83 +1,87 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Redirect } from 'react-router-dom' import { Redirect } from 'react-router-dom';
import superagent from 'superagent' import superagent from 'superagent';
import { connect } from 'react-redux' import { connect } from 'react-redux';
import { fetchServers } from '../../actions' import { fetchServers } from '../../actions';
@connect() @connect()
class OauthCallback extends Component { class OauthCallback extends Component {
state = { state = {
notReady: true, notReady: true,
message: 'chotto matte kudasai...', message: 'chotto matte kudasai...',
redirect: '/s' redirect: '/s',
};
stopped = false;
componentDidUnmount() {
this.stopped = true;
} }
stopped = false async componentDidMount() {
componentDidUnmount () {
this.stopped = true
}
async componentDidMount () {
// handle stuff in the url // handle stuff in the url
const sp = new URLSearchParams(this.props.location.search) const sp = new URLSearchParams(this.props.location.search);
const token = sp.get('code') const token = sp.get('code');
if (token === '' || token == null) { if (token === '' || token == null) {
this.setState({ message: 'token missing, what are you trying to do?!' }) this.setState({ message: 'token missing, what are you trying to do?!' });
return return;
} }
const stateToken = sp.get('state') const stateToken = sp.get('state');
const state = JSON.parse(window.sessionStorage.getItem('state') || 'null') const state = JSON.parse(window.sessionStorage.getItem('state') || 'null');
if (state !== null && state.state === stateToken && state.redirect != null) { if (state !== null && state.state === stateToken && state.redirect != null) {
this.setState({ redirect: state.redirect }) this.setState({ redirect: state.redirect });
} }
this.props.history.replace(this.props.location.pathname) this.props.history.replace(this.props.location.pathname);
let counter = 0 let counter = 0;
const retry = async () => { const retry = async () => {
if (this.stopped) return if (this.stopped) return;
try { try {
const rsp = await superagent.get('/api/auth/user') const rsp = await superagent.get('/api/auth/user');
this.props.dispatch({ this.props.dispatch({
type: Symbol.for('set user'), type: Symbol.for('set user'),
data: rsp.body data: rsp.body,
}) });
this.props.dispatch(fetchServers) this.props.dispatch(fetchServers);
this.setState({ notReady: false }) this.setState({ notReady: false });
} catch (e) { } catch (e) {
counter++ counter++;
if (counter > 10) { if (counter > 10) {
this.setState({ message: "i couldn't log you in. :c" }) this.setState({ message: "i couldn't log you in. :c" });
} else { } else {
setTimeout(() => { retry() }, 250) setTimeout(() => {
retry();
}, 250);
} }
} }
} };
// pass token to backend, await it to finish it's business. // pass token to backend, await it to finish it's business.
try { try {
await superagent.post('/api/auth/token').send({ token }) await superagent.post('/api/auth/token').send({ token });
// this.props.onLogin(rsp.body) // this.props.onLogin(rsp.body)
retry() retry();
} catch (e) { } catch (e) {
console.error('token pass error', e) console.error('token pass error', e);
this.setState({ message: 'g-gomen nasai... i broke it...' }) this.setState({ message: 'g-gomen nasai... i broke it...' });
return return;
} }
// update user stuff here // update user stuff here
} }
render () { render() {
return (this.state.notReady) ? this.state.message : <Redirect to={this.state.redirect} /> return this.state.notReady ? (
this.state.message
) : (
<Redirect to={this.state.redirect} />
);
} }
} }
export default OauthCallback export default OauthCallback;

89
UI/src/components/oauth-flow/index.js
View file

@ -1,10 +1,9 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Redirect } from 'react-router-dom' import { Redirect } from 'react-router-dom';
import superagent from 'superagent' import superagent from 'superagent';
import { connect } from 'react-redux' import { connect } from 'react-redux';
import uuidv4 from 'uuid/v4' import uuidv4 from 'uuid/v4';
import { fetchServers } from '../../actions' import { fetchServers } from '../../actions';
@connect() @connect()
class OauthCallback extends Component { class OauthCallback extends Component {
@ -12,62 +11,76 @@ class OauthCallback extends Component {
notReady: true, notReady: true,
message: 'chotto matte kudasai...', message: 'chotto matte kudasai...',
redirect: '/s', redirect: '/s',
url: null url: null,
} };
async fetchUser () { async fetchUser() {
const rsp = await superagent.get('/api/auth/user') const rsp = await superagent.get('/api/auth/user');
sessionStorage.setItem('user', JSON.stringify(rsp.body)) sessionStorage.setItem('user', JSON.stringify(rsp.body));
sessionStorage.setItem('user.update', JSON.stringify(Date.now())) sessionStorage.setItem('user.update', JSON.stringify(Date.now()));
this.props.dispatch({ this.props.dispatch({
type: Symbol.for('set user'), type: Symbol.for('set user'),
data: rsp.body data: rsp.body,
}) });
} }
setupUser () { setupUser() {
const userUpdateTime = sessionStorage.getItem('user.update') || 0 const userUpdateTime = sessionStorage.getItem('user.update') || 0;
if (+userUpdateTime + (1000 * 60 * 10) > Date.now()) { if (+userUpdateTime + 1000 * 60 * 10 > Date.now()) {
const user = sessionStorage.getItem('user') const user = sessionStorage.getItem('user');
if (user != null && user !== '') { if (user != null && user !== '') {
this.props.dispatch({ this.props.dispatch({
type: Symbol.for('set user'), type: Symbol.for('set user'),
data: JSON.parse(user) data: JSON.parse(user),
}) });
} }
} }
return this.fetchUser() return this.fetchUser();
} }
async componentDidMount () { async componentDidMount() {
const state = uuidv4() const state = uuidv4();
const oUrl = new URL(window.location.href) const oUrl = new URL(window.location.href);
if (oUrl.searchParams.has('r')) { if (oUrl.searchParams.has('r')) {
this.setState({ redirect: oUrl.searchParams.get('r') }) this.setState({ redirect: oUrl.searchParams.get('r') });
} }
window.sessionStorage.setItem('state', JSON.stringify({ state, redirect: oUrl.searchParams.get('r') })) window.sessionStorage.setItem(
'state',
JSON.stringify({ state, redirect: oUrl.searchParams.get('r') })
);
try { try {
await this.setupUser() await this.setupUser();
this.props.dispatch(fetchServers) this.props.dispatch(fetchServers);
this.setState({ notReady: false }) this.setState({ notReady: false });
} catch (e) { } catch (e) {
const { body: { url } } = await superagent.get('/api/auth/redirect?url=✔️') const {
const nUrl = new URL(url) body: { url },
} = await superagent.get('/api/auth/redirect?url=✔️');
const nUrl = new URL(url);
nUrl.searchParams.set('state', state) nUrl.searchParams.set('state', state);
this.setState({ url: nUrl.toString() }) this.setState({ url: nUrl.toString() });
window.location.href = nUrl.toString() window.location.href = nUrl.toString();
} }
} }
render () { render() {
return (this.state.notReady) ? this.state.message : <><Redirect to={this.state.redirect} /><a style={{zIndex: 10000}} href={this.state.url}>Something oopsed, click me to get to where you meant.</a></> return this.state.notReady ? (
this.state.message
) : (
<>
<Redirect to={this.state.redirect} />
<a style={{ zIndex: 10000 }} href={this.state.url}>
Something oopsed, click me to get to where you meant.
</a>
</>
);
} }
} }
export default OauthCallback export default OauthCallback;

88
UI/src/components/role-editor/Category.js
View file

@ -1,43 +1,69 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { DropTarget } from 'react-dnd' import { DropTarget } from 'react-dnd';
import Role from '../role/draggable' import Role from '../role/draggable';
import CategoryEditor from './CategoryEditor' import CategoryEditor from './CategoryEditor';
@DropTarget(Symbol.for('dnd: role'), { @DropTarget(
drop (props, monitor, element) { Symbol.for('dnd: role'),
props.onDrop(monitor.getItem()) {
drop(props, monitor, element) {
props.onDrop(monitor.getItem());
},
canDrop(props, monitor) {
return (
props.mode !== Symbol.for('edit') && monitor.getItem().category !== props.name
);
},
}, },
canDrop (props, monitor) { (connect, monitor) => ({
return (props.mode !== Symbol.for('edit') && monitor.getItem().category !== props.name) connectDropTarget: connect.dropTarget(),
} isOver: monitor.isOver(),
}, (connect, monitor) => ({ isOverCurrent: monitor.isOver({ shallow: true }),
connectDropTarget: connect.dropTarget(), canDrop: monitor.canDrop(),
isOver: monitor.isOver(), itemType: monitor.getItemType(),
isOverCurrent: monitor.isOver({ shallow: true }), })
canDrop: monitor.canDrop(), )
itemType: monitor.getItemType()
}))
class Category extends Component { class Category extends Component {
render () { render() {
const { category, name, isOver, canDrop, connectDropTarget, mode, onEditOpen, ...rest } = this.props const {
category,
name,
isOver,
canDrop,
connectDropTarget,
mode,
onEditOpen,
...rest
} = this.props;
if (mode === Symbol.for('edit')) { if (mode === Symbol.for('edit')) {
return <CategoryEditor category={category} name={name} {...rest} /> return <CategoryEditor category={category} name={name} {...rest} />;
} }
return connectDropTarget(<div key={name} className={`role-editor__category drop-zone ${(canDrop) ? 'can-drop' : ''} ${(isOver && canDrop) ? 'is-over' : ''}`}> return connectDropTarget(
<div className='role-editor__category-header'> <div
<h4>{ category.get('name') }</h4> key={name}
<div uk-tooltip='' title='Edit' uk-icon="icon: file-edit" onClick={onEditOpen} /> className={`role-editor__category drop-zone ${canDrop ? 'can-drop' : ''} ${
</div> isOver && canDrop ? 'is-over' : ''
{ }`}
category.get('roles_map') >
<div className="role-editor__category-header">
<h4>{category.get('name')}</h4>
<div
uk-tooltip=""
title="Edit"
uk-icon="icon: file-edit"
onClick={onEditOpen}
/>
</div>
{category
.get('roles_map')
.reverse() .reverse()
.map((r, k) => <Role key={k} role={r} categoryId={name} />) .map((r, k) => <Role key={k} role={r} categoryId={name} />)
.toArray() .toArray()}
} </div>
</div>) );
} }
} }
export default Category export default Category;

137
UI/src/components/role-editor/CategoryEditor.js
View file

@ -1,86 +1,109 @@
import React, { Component } from 'react' import React, { Component } from 'react';
export default class CategoryEditor extends Component { export default class CategoryEditor extends Component {
onKeyPress = e => {
onKeyPress = (e) => { const { onSave } = this.props;
const { onSave } = this.props
switch (e.key) { switch (e.key) {
case 'Enter': case 'Enter':
case 'Escape': case 'Escape':
return onSave() return onSave();
} }
} };
render () { render() {
const { const { category } = this.props;
category
} = this.props
return <div className="role-editor__category editor" onKeyDown={this.onKeyPress}> return (
<div className="uk-form-stacked uk-light"> <div className="role-editor__category editor" onKeyDown={this.onKeyPress}>
<div> <div className="uk-form-stacked uk-light">
<label className="uk-form-label">Category Name</label> <div>
<div className="uk-form-controls"> <label className="uk-form-label">Category Name</label>
<input type="text" className="uk-input" placeholder='' value={category.get('name')} onChange={this.props.onEdit('name', Symbol.for('edit: text'))} /> <div className="uk-form-controls">
</div> <input
<div className="role-editor__bumpers"> type="text"
<div className="uk-input"
onClick={this.props.onBump(-1)} placeholder=""
className={ value={category.get('name')}
`role-editor__bumpers-bump onChange={this.props.onEdit('name', Symbol.for('edit: text'))}
/>
</div>
<div className="role-editor__bumpers">
<div
onClick={this.props.onBump(-1)}
className={`role-editor__bumpers-bump
${category.get('position') === 0 ? 'yeet' : ''} ${category.get('position') === 0 ? 'yeet' : ''}
`} `}
uk-tooltip="delay: 1s" uk-tooltip="delay: 1s"
title="Move category up"> title="Move category up"
<i uk-icon="icon: chevron-up"></i> >
</div> <i uk-icon="icon: chevron-up"></i>
<div </div>
onClick={this.props.onBump(1)} <div
className={ onClick={this.props.onBump(1)}
`role-editor__bumpers-bump className={`role-editor__bumpers-bump
${category.get('position') === this.props.arrMax - 1 ? 'yeet' : ''} ${category.get('position') === this.props.arrMax - 1 ? 'yeet' : ''}
`} `}
uk-tooltip="delay: 1s" uk-tooltip="delay: 1s"
title="Move category down"> title="Move category down"
<i uk-icon="icon: chevron-down"></i> >
<i uk-icon="icon: chevron-down"></i>
</div>
</div> </div>
</div> </div>
</div> <div style={{ marginTop: 10 }}>
<div style={{ marginTop: 10 }}> <div className="uk-form-controls">
<div className="uk-form-controls"> <label
<label uk-tooltip="delay: 1s" title="Hides and disables roles in this category from being used."> uk-tooltip="delay: 1s"
<input title="Hides and disables roles in this category from being used."
style={{ marginRight: 5 }} >
type="checkbox" <input
className="uk-checkbox uk-light" style={{ marginRight: 5 }}
checked={category.get('hidden')} type="checkbox"
onChange={this.props.onEdit('hidden', Symbol.for('edit: bool'))} className="uk-checkbox uk-light"
/> checked={category.get('hidden')}
Hidden onChange={this.props.onEdit('hidden', Symbol.for('edit: bool'))}
</label> />
Hidden
</label>
</div>
</div> </div>
</div> <div style={{ marginTop: 10 }}>
<div style={{ marginTop: 10 }}> <div className="uk-form-label">
<div className="uk-form-label">Type <i uk-icon="icon: info; ratio: 0.7" uk-tooltip="" title="Single mode only lets a user pick one role in this category." /></div> Type{' '}
<div className="uk-form-controls"> <i
uk-icon="icon: info; ratio: 0.7"
uk-tooltip=""
title="Single mode only lets a user pick one role in this category."
/>
</div>
<div className="uk-form-controls">
<select <select
className="uk-select" className="uk-select"
value={category.get('type')} value={category.get('type')}
onChange={this.props.onEdit('type', Symbol.for('edit: select'))} onChange={this.props.onEdit('type', Symbol.for('edit: select'))}
> >
<option value='multi'>Multiple</option> <option value="multi">Multiple</option>
<option value='single'>Single</option> <option value="single">Single</option>
</select> </select>
</div>
</div>
<div className="role-editor__actions">
<button
className="uk-button rp-button secondary role-editor__actions_delete"
onClick={this.props.onDelete}
>
<i uk-icon="icon: trash" />
</button>
<button
className="uk-button rp-button primary role-editor__actions_save"
onClick={this.props.onSave}
>
Save
</button>
</div> </div>
</div> </div>
<div className='role-editor__actions'>
<button className="uk-button rp-button secondary role-editor__actions_delete" onClick={this.props.onDelete}>
<i uk-icon="icon: trash" />
</button>
<button className="uk-button rp-button primary role-editor__actions_save" onClick={this.props.onSave}>Save</button>
</div>
</div> </div>
</div> );
} }
} }

175
UI/src/components/role-editor/actions.js
View file

@ -1,55 +1,55 @@
import { Set } from 'immutable' import { Set } from 'immutable';
import * as UIActions from '../../actions/ui' import * as UIActions from '../../actions/ui';
import { getViewMap, setup } from '../role-picker/actions' import { getViewMap, setup } from '../role-picker/actions';
import uuidv4 from 'uuid/v4' import uuidv4 from 'uuid/v4';
import superagent from 'superagent' import superagent from 'superagent';
export const constructView = id => async (dispatch, getState) => { export const constructView = id => async (dispatch, getState) => {
await setup(id)(dispatch) await setup(id)(dispatch);
const server = getState().servers.get(id) const server = getState().servers.get(id);
let { viewMap, hasSafeRoles } = getViewMap(server) let { viewMap, hasSafeRoles } = getViewMap(server);
viewMap = viewMap.map((c, idx) => c.set('mode', Symbol.for('drop'))) viewMap = viewMap.map((c, idx) => c.set('mode', Symbol.for('drop')));
dispatch({ dispatch({
type: Symbol.for('re: setup'), type: Symbol.for('re: setup'),
data: { data: {
hasSafeRoles, hasSafeRoles,
viewMap, viewMap,
originalSnapshot: viewMap originalSnapshot: viewMap,
} },
}) });
dispatch(UIActions.fadeIn) dispatch(UIActions.fadeIn);
} };
export const addRoleToCategory = (id, oldId, role, flip = true) => (dispatch) => { export const addRoleToCategory = (id, oldId, role, flip = true) => dispatch => {
dispatch({ dispatch({
type: Symbol.for('re: add role to category'), type: Symbol.for('re: add role to category'),
data: { data: {
id, id,
role role,
} },
}) });
if (flip) { if (flip) {
dispatch(removeRoleFromCategory(oldId, id, role, false)) dispatch(removeRoleFromCategory(oldId, id, role, false));
} }
} };
export const removeRoleFromCategory = (id, oldId, role, flip = true) => (dispatch) => { export const removeRoleFromCategory = (id, oldId, role, flip = true) => dispatch => {
dispatch({ dispatch({
type: Symbol.for('re: remove role from category'), type: Symbol.for('re: remove role from category'),
data: { data: {
id, id,
role role,
} },
}) });
if (flip) { if (flip) {
dispatch(addRoleToCategory(oldId, id, role, false)) dispatch(addRoleToCategory(oldId, id, role, false));
} }
} };
export const editCategory = ({ id, key, value }) => dispatch => { export const editCategory = ({ id, key, value }) => dispatch => {
dispatch({ dispatch({
@ -57,38 +57,38 @@ export const editCategory = ({ id, key, value }) => dispatch => {
data: { data: {
id, id,
key, key,
value value,
} },
}) });
} };
export const saveCategory = (id, category) => (dispatch) => { export const saveCategory = (id, category) => dispatch => {
if (category.get('name') === '') { if (category.get('name') === '') {
return return;
} }
dispatch({ dispatch({
type: Symbol.for('re: switch category mode'), type: Symbol.for('re: switch category mode'),
data: { data: {
id, id,
mode: Symbol.for('drop') mode: Symbol.for('drop'),
} },
}) });
} };
export const openEditor = (id) => ({ export const openEditor = id => ({
type: Symbol.for('re: switch category mode'), type: Symbol.for('re: switch category mode'),
data: { data: {
id, id,
mode: Symbol.for('edit') mode: Symbol.for('edit'),
} },
}) });
export const deleteCategory = (id, category) => (dispatch, getState) => { export const deleteCategory = (id, category) => (dispatch, getState) => {
const roles = category.get('roles') const roles = category.get('roles');
const rolesMap = category.get('roles_map') const rolesMap = category.get('roles_map');
let uncategorized = getState().roleEditor.getIn(['viewMap', 'Uncategorized']) let uncategorized = getState().roleEditor.getIn(['viewMap', 'Uncategorized']);
dispatch({ dispatch({
type: Symbol.for('re: set category'), type: Symbol.for('re: set category'),
@ -99,29 +99,29 @@ export const deleteCategory = (id, category) => (dispatch, getState) => {
roles_map: uncategorized.get('roles_map').union(rolesMap), roles_map: uncategorized.get('roles_map').union(rolesMap),
hidden: true, hidden: true,
type: 'multi', type: 'multi',
mode: null mode: null,
} },
}) });
dispatch({ dispatch({
type: Symbol.for('re: delete category'), type: Symbol.for('re: delete category'),
data: id data: id,
}) });
} };
export const createCategory = (dispatch, getState) => { export const createCategory = (dispatch, getState) => {
const { roleEditor } = getState() const { roleEditor } = getState();
const vm = roleEditor.get('viewMap') const vm = roleEditor.get('viewMap');
let name = 'New Category' let name = 'New Category';
let idx = 1 let idx = 1;
const pred = c => c.get('name') === name const pred = c => c.get('name') === name;
while (vm.find(pred) !== undefined) { while (vm.find(pred) !== undefined) {
idx++ idx++;
name = `New Category ${idx}` name = `New Category ${idx}`;
} }
const id = uuidv4() const id = uuidv4();
dispatch({ dispatch({
type: Symbol.for('re: set category'), type: Symbol.for('re: set category'),
@ -133,28 +133,28 @@ export const createCategory = (dispatch, getState) => {
hidden: true, hidden: true,
type: 'multi', type: 'multi',
position: idx, position: idx,
mode: Symbol.for('edit') mode: Symbol.for('edit'),
} },
}) });
} };
export const bumpCategory = (category, name) => move => async (dispatch, getState) => { export const bumpCategory = (category, name) => move => async (dispatch, getState) => {
const { roleEditor } = getState() const { roleEditor } = getState();
const vm = roleEditor.get('viewMap') const vm = roleEditor.get('viewMap');
const position = category.get('position') const position = category.get('position');
const nextPos = position + move const nextPos = position + move;
const replaceThisOne = vm.findKey(category => category.get('position') === nextPos) const replaceThisOne = vm.findKey(category => category.get('position') === nextPos);
dispatch({ dispatch({
type: Symbol.for('re: edit category'), type: Symbol.for('re: edit category'),
data: { data: {
id: name, id: name,
key: 'position', key: 'position',
value: nextPos value: nextPos,
} },
}) });
if (!!replaceThisOne) { if (!!replaceThisOne) {
dispatch({ dispatch({
@ -162,27 +162,36 @@ export const bumpCategory = (category, name) => move => async (dispatch, getStat
data: { data: {
id: replaceThisOne, id: replaceThisOne,
key: 'position', key: 'position',
value: position value: position,
} },
}) });
} }
};
}
export const saveServer = id => async (dispatch, getState) => { export const saveServer = id => async (dispatch, getState) => {
const viewMap = getState().roleEditor.get('viewMap') const viewMap = getState()
.roleEditor.get('viewMap')
.filterNot((_, k) => k === 'Uncategorized') .filterNot((_, k) => k === 'Uncategorized')
.map(v => v.delete('roles_map').delete('mode').delete('id')) .map(v =>
v
.delete('roles_map')
.delete('mode')
.delete('id')
);
viewMap.map((v, idx) => { viewMap.map((v, idx) => {
if (v.has('position')) { if (v.has('position')) {
return v return v;
} }
console.warn('category position wasnt set, so fake ones are being made', {cat: v.toJS(), idx, position: viewMap.count()+idx}) console.warn('category position wasnt set, so fake ones are being made', {
return v.set('position', viewMap.count()+idx) cat: v.toJS(),
}) idx,
position: viewMap.count() + idx,
});
return v.set('position', viewMap.count() + idx);
});
await superagent.patch(`/api/server/${id}`).send({ categories: viewMap.toJS() }) await superagent.patch(`/api/server/${id}`).send({ categories: viewMap.toJS() });
dispatch({ type: Symbol.for('re: swap original state') }) dispatch({ type: Symbol.for('re: swap original state') });
} };

321
UI/src/components/role-editor/index.js
View file

@ -1,197 +1,238 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Set } from 'immutable' import { Set } from 'immutable';
import { connect } from 'react-redux' import { connect } from 'react-redux';
import { DropTarget } from 'react-dnd' import { DropTarget } from 'react-dnd';
import { Link, Prompt, Redirect } from 'react-router-dom' import { Link, Prompt, Redirect } from 'react-router-dom';
import { Scrollbars } from 'react-custom-scrollbars' import { Scrollbars } from 'react-custom-scrollbars';
import * as Actions from './actions' import * as Actions from './actions';
import * as PickerActions from '../role-picker/actions' import * as PickerActions from '../role-picker/actions';
import * as UIActions from '../../actions/ui' import * as UIActions from '../../actions/ui';
import './RoleEditor.sass' import './RoleEditor.sass';
import Category from './Category' import Category from './Category';
import CategoryEditor from './CategoryEditor' import CategoryEditor from './CategoryEditor';
import Role from '../role/draggable' import Role from '../role/draggable';
const mapState = ({ rolePicker, roleEditor, servers }, ownProps) => ({ const mapState = ({ rolePicker, roleEditor, servers }, ownProps) => ({
rp: rolePicker, rp: rolePicker,
editor: roleEditor, editor: roleEditor,
server: servers.get(ownProps.match.params.server) server: servers.get(ownProps.match.params.server),
}) });
@connect(mapState) @connect(mapState)
@DropTarget(Symbol.for('dnd: role'), { @DropTarget(
drop (props, monitor, element) { Symbol.for('dnd: role'),
element.dropRole({}, 'Uncategorized')(monitor.getItem()) {
drop(props, monitor, element) {
element.dropRole({}, 'Uncategorized')(monitor.getItem());
},
canDrop(props, monitor) {
return monitor.getItem().category !== 'Uncategorized';
},
}, },
canDrop (props, monitor) { (connect, monitor) => ({
return (monitor.getItem().category !== 'Uncategorized') connectDropTarget: connect.dropTarget(),
} isOver: monitor.isOver(),
}, (connect, monitor) => ({ isOverCurrent: monitor.isOver({ shallow: true }),
connectDropTarget: connect.dropTarget(), canDrop: monitor.canDrop(),
isOver: monitor.isOver(), itemType: monitor.getItemType(),
isOverCurrent: monitor.isOver({ shallow: true }), })
canDrop: monitor.canDrop(), )
itemType: monitor.getItemType()
}))
class RoleEditor extends Component { class RoleEditor extends Component {
componentWillMount () { componentWillMount() {
const { dispatch, match: { params: { server } } } = this.props const {
dispatch(Actions.constructView(server)) dispatch,
match: {
params: { server },
},
} = this.props;
dispatch(Actions.constructView(server));
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.match.params.server !== nextProps.match.params.server) { if (this.props.match.params.server !== nextProps.match.params.server) {
const { dispatch } = this.props const { dispatch } = this.props;
dispatch(UIActions.fadeOut(() => dispatch(Actions.constructView(nextProps.match.params.server)))) dispatch(
UIActions.fadeOut(() =>
dispatch(Actions.constructView(nextProps.match.params.server))
)
);
} }
} }
dropRole = (category, name) => ({role, category}) => { dropRole = (category, name) => ({ role, category }) => {
const { dispatch } = this.props const { dispatch } = this.props;
console.log(role) console.log(role);
dispatch(Actions.addRoleToCategory(name, category, role)) dispatch(Actions.addRoleToCategory(name, category, role));
} };
createCategory = () => { createCategory = () => {
const { dispatch } = this.props const { dispatch } = this.props;
dispatch(Actions.createCategory) dispatch(Actions.createCategory);
} };
saveCategory = (category, name) => () => { saveCategory = (category, name) => () => {
const { dispatch } = this.props const { dispatch } = this.props;
dispatch(Actions.saveCategory(name, category)) dispatch(Actions.saveCategory(name, category));
} };
deleteCategory = (category, id) => () => { deleteCategory = (category, id) => () => {
const { dispatch } = this.props const { dispatch } = this.props;
dispatch(Actions.deleteCategory(id, category)) dispatch(Actions.deleteCategory(id, category));
} };
openEditor = (category, name) => () => { openEditor = (category, name) => () => {
const { dispatch } = this.props const { dispatch } = this.props;
dispatch(Actions.openEditor(name)) dispatch(Actions.openEditor(name));
} };
editCategory = (category, id) => (key, type) => event => { editCategory = (category, id) => (key, type) => event => {
const { dispatch } = this.props const { dispatch } = this.props;
let value let value;
switch (type) { switch (type) {
case Symbol.for('edit: text'): case Symbol.for('edit: text'):
value = event.target.value value = event.target.value;
break break;
case Symbol.for('edit: bool'): case Symbol.for('edit: bool'):
value = event.target.checked value = event.target.checked;
break break;
case Symbol.for('edit: select'): case Symbol.for('edit: select'):
value = event.target.value value = event.target.value;
break break;
default: default:
value = null value = null;
} }
dispatch(Actions.editCategory({ category, id, key, type, value })) dispatch(Actions.editCategory({ category, id, key, type, value }));
} };
resetServer = () => { resetServer = () => {
const { dispatch } = this.props const { dispatch } = this.props;
dispatch({ type: Symbol.for('re: reset') }) dispatch({ type: Symbol.for('re: reset') });
} };
saveServer = () => { saveServer = () => {
const { dispatch, match: { params: { server } } } = this.props const {
dispatch(Actions.saveServer(server)) dispatch,
match: {
params: { server },
},
} = this.props;
dispatch(Actions.saveServer(server));
};
onBump = (category, name) => move => () =>
this.props.dispatch(Actions.bumpCategory(category, name)(move));
get hasChanged() {
return (
this.props.editor.get('originalSnapshot').hashCode() !==
this.props.editor.get('viewMap').hashCode()
);
} }
onBump = (category, name) => (move) => () => this.props.dispatch(Actions.bumpCategory(category, name)(move)) render() {
const { server } = this.props;
get hasChanged () {
return this.props.editor.get('originalSnapshot').hashCode() !== this.props.editor.get('viewMap').hashCode()
}
render () {
const { server } = this.props
if (server == null) { if (server == null) {
return null return null;
} }
if (server.getIn(['perms', 'canManageRoles']) !== true) { if (server.getIn(['perms', 'canManageRoles']) !== true) {
return <Redirect to={`/s/${server.get('id')}`} /> return <Redirect to={`/s/${server.get('id')}`} />;
} }
const vm = this.props.editor.get('viewMap') const vm = this.props.editor.get('viewMap');
return <div className="inner role-editor"> return (
<Prompt when={this.hasChanged} message="Are you sure you want to leave? You have unsaved changes that will be lost." /> <div className="inner role-editor">
<div className="role-picker__header" style={{ marginBottom: 10 }}> <Prompt
<h3>{this.props.server.getIn(['server','name'])}</h3> when={this.hasChanged}
<div className="role-picker__spacer"></div> message="Are you sure you want to leave? You have unsaved changes that will be lost."
<div className={`role-picker__actions ${(!this.hasChanged) ? 'hidden' : ''}`}> />
<button onClick={this.resetServer} disabled={!this.hasChanged} className="uk-button rp-button secondary"> <div className="role-picker__header" style={{ marginBottom: 10 }}>
Reset <h3>{this.props.server.getIn(['server', 'name'])}</h3>
</button> <div className="role-picker__spacer"></div>
<button onClick={this.saveServer} disabled={!this.hasChanged} className="uk-button rp-button primary"> <div className={`role-picker__actions ${!this.hasChanged ? 'hidden' : ''}`}>
Save Changes <button
</button> onClick={this.resetServer}
</div> disabled={!this.hasChanged}
</div> className="uk-button rp-button secondary"
<div className="role-editor__grid"> >
<div className="role-editor__grid__left"> Reset
<Scrollbars autoHeight autoHeightMax='calc(100vh - 110px)'> </button>
{ <button
vm onClick={this.saveServer}
.filter((_, k) => k !== 'Uncategorized') disabled={!this.hasChanged}
.sortBy(c => c.get('position')) className="uk-button rp-button primary"
.map((c, name, arr) => <Category >
key={name} Save Changes
name={name} </button>
category={c}
arrMax={arr.count()}
mode={c.get('mode')}
onDrop={this.dropRole(c, name)}
onEdit={this.editCategory(c, name)}
onEditOpen={this.openEditor(c, name)}
onSave={this.saveCategory(c, name)}
onDelete={this.deleteCategory(c, name)}
onBump={this.onBump(c, name)}
/>)
.toArray()
}
<div onClick={this.createCategory} uk-tooltip="pos: bottom" title="Add new category" className="role-editor__category add-button">
<i uk-icon="icon: plus" />
</div> </div>
</Scrollbars>
</div> </div>
{ <div className="role-editor__grid">
this.props.connectDropTarget( <div className="role-editor__grid__left">
<div className={`role-editor__grid__right drop-zone ${(this.props.canDrop) ? 'can-drop' : ''} ${(this.props.isOver && this.props.canDrop) ? 'is-over' : ''}`}> <Scrollbars autoHeight autoHeightMax="calc(100vh - 110px)">
<Scrollbars autoHeight autoHeightMax='calc(100vh - 145px)'> {vm
<div className="role-editor__uncat-zone"> .filter((_, k) => k !== 'Uncategorized')
{ .sortBy(c => c.get('position'))
(vm.getIn(['Uncategorized', 'roles_map']) || Set()) .map((c, name, arr) => (
.sortBy(r => r.get('position')) <Category
.reverse() key={name}
.map((r, k) => <Role key={k} categoryId='Uncategorized' role={r} />) name={name}
.toArray() category={c}
} arrMax={arr.count()}
{ mode={c.get('mode')}
(this.props.editor.get('hasSafeRoles') !== true) onDrop={this.dropRole(c, name)}
? <div className="role-editor__alert"> onEdit={this.editCategory(c, name)}
<Link to="/help/why-no-roles">Why are there no roles here? <i uk-icon="icon: info" /></Link> onEditOpen={this.openEditor(c, name)}
</div> onSave={this.saveCategory(c, name)}
: null onDelete={this.deleteCategory(c, name)}
} onBump={this.onBump(c, name)}
/>
))
.toArray()}
<div
onClick={this.createCategory}
uk-tooltip="pos: bottom"
title="Add new category"
className="role-editor__category add-button"
>
<i uk-icon="icon: plus" />
</div> </div>
</Scrollbars> </Scrollbars>
</div>) </div>
} {this.props.connectDropTarget(
<div
className={`role-editor__grid__right drop-zone ${
this.props.canDrop ? 'can-drop' : ''
} ${this.props.isOver && this.props.canDrop ? 'is-over' : ''}`}
>
<Scrollbars autoHeight autoHeightMax="calc(100vh - 145px)">
<div className="role-editor__uncat-zone">
{(vm.getIn(['Uncategorized', 'roles_map']) || Set())
.sortBy(r => r.get('position'))
.reverse()
.map((r, k) => <Role key={k} categoryId="Uncategorized" role={r} />)
.toArray()}
{this.props.editor.get('hasSafeRoles') !== true ? (
<div className="role-editor__alert">
<Link to="/help/why-no-roles">
Why are there no roles here? <i uk-icon="icon: info" />
</Link>
</div>
) : null}
</div>
</Scrollbars>
</div>
)}
</div>
</div> </div>
</div> );
} }
} }
export default RoleEditor export default RoleEditor;

79
UI/src/components/role-picker/Category.js
View file

@ -1,53 +1,68 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Map } from 'immutable' import { Map } from 'immutable';
import Role from '../role' import Role from '../role';
class Category extends Component { class Category extends Component {
toggleRoleMulti(id, next) {
toggleRoleMulti (id, next) { this.props.onChange(Map({ [id]: next }));
this.props.onChange(Map({ [id]: next }))
} }
toggleRoleSingle (id, next) { toggleRoleSingle(id, next) {
this.props.onChange(this.props.category.get('roles').reduce((acc, i) => acc.set(i, false), Map()).set(id, next)) this.props.onChange(
this.props.category
.get('roles')
.reduce((acc, i) => acc.set(i, false), Map())
.set(id, next)
);
} }
onRoleToggle = id => (next, old) => { onRoleToggle = id => (next, old) => {
const type = this.props.category.get('type') const type = this.props.category.get('type');
switch (type) { switch (type) {
case 'single': return this.toggleRoleSingle(id, next) case 'single':
case 'multi': return this.toggleRoleMulti(id, next) return this.toggleRoleSingle(id, next);
case 'multi':
return this.toggleRoleMulti(id, next);
default: default:
console.warn('DEFAULTING TO MULTI', id, next, old) console.warn('DEFAULTING TO MULTI', id, next, old);
return this.toggleRoleMulti(id, next) return this.toggleRoleMulti(id, next);
} }
} };
render () { render() {
const { category, name, isSelected } = this.props const { category, name, isSelected } = this.props;
if (category.get('hidden')) { if (category.get('hidden')) {
return null return null;
} }
if (category.get('roles').count() === 0) { if (category.get('roles').count() === 0) {
return null return null;
} }
return <div key={name} className="role-picker__category"> return (
<h4>{ category.get('name') }</h4> <div key={name} className="role-picker__category">
{ <h4>{category.get('name')}</h4>
category.get('roles_map') {category
.sortBy(r => r.get('position')) .get('roles_map')
.reverse() .sortBy(r => r.get('position'))
.map((r, k) => { .reverse()
const id = r.get('id') .map((r, k) => {
return <Role key={k} role={r} disabled={!r.get('safe')} selected={isSelected(id)} onToggle={this.onRoleToggle(id)}/> const id = r.get('id');
}) return (
.toArray() <Role
} key={k}
</div> role={r}
disabled={!r.get('safe')}
selected={isSelected(id)}
onToggle={this.onRoleToggle(id)}
/>
);
})
.toArray()}
</div>
);
} }
} }
export default Category export default Category;

184
UI/src/components/role-picker/actions.js
View file

@ -1,75 +1,89 @@
import { Map, Set, fromJS } from 'immutable' import { Map, Set, fromJS } from 'immutable';
import superagent from 'superagent' import superagent from 'superagent';
import * as UIActions from '../../actions/ui' import * as UIActions from '../../actions/ui';
export const setup = id => async dispatch => { export const setup = id => async dispatch => {
const rsp = await superagent.get(`/api/server/${id}`) const rsp = await superagent.get(`/api/server/${id}`);
const data = rsp.body const data = rsp.body;
dispatch({ dispatch({
type: Symbol.for('server: set'), type: Symbol.for('server: set'),
data: { data: {
id, id,
...data ...data,
} },
}) });
dispatch(constructView(id)) dispatch(constructView(id));
} };
export const getViewMap = server => { export const getViewMap = server => {
const roles = server.get('roles') const roles = server.get('roles');
const categories = server.get('categories') const categories = server.get('categories');
const categoriesIds = server.get('categories').keySeq() const categoriesIds = server.get('categories').keySeq();
const allRoles = server.get('roles').filter(v => v.get('safe')).map(r => r.get('id')).toSet() const allRoles = server
const accountedRoles = categories.map(c => c.get('roles')).toSet().flatten() .get('roles')
const unaccountedRoles = allRoles.subtract(accountedRoles) .filter(v => v.get('safe'))
.map(r => r.get('id'))
.toSet();
const accountedRoles = categories
.map(c => c.get('roles'))
.toSet()
.flatten();
const unaccountedRoles = allRoles.subtract(accountedRoles);
// console.log('roles', allRoles.toJS(), accountedRoles.toJS(), unaccountedRoles.toJS()) // console.log('roles', allRoles.toJS(), accountedRoles.toJS(), unaccountedRoles.toJS())
const viewMap = categories.set('Uncategorized', fromJS({ const viewMap = categories
roles: unaccountedRoles, .set(
hidden: true, 'Uncategorized',
type: 'multi', fromJS({
name: 'Uncategorized' roles: unaccountedRoles,
})) hidden: true,
.map( type: 'multi',
(cat, idx) => name: 'Uncategorized',
})
)
.map((cat, idx) =>
cat.set( cat.set(
'position', 'position',
cat.get('position', categoriesIds.findIndex(v => v === idx) cat.get(
'position',
categoriesIds.findIndex(v => v === idx)
)
) )
) )
) // .sortBy(cat => cat.get('position'))
// .sortBy(cat => cat.get('position')) .map(c => {
.map(c => { const roles = c
const roles = c.get('roles') .get('roles')
// fill in roles_map // fill in roles_map
.map(r => .map(r => server.get('roles').find(sr => sr.get('id') === r))
server.get('roles').find(sr => sr.get('id') === r) .filter(r => r != null)
) // sort by server position, backwards.
.filter(r => r != null) .sort((a, b) => a.position > b.position);
// sort by server position, backwards. // force data to sets
.sort((a, b) => a.position > b.position) return c.set('roles_map', Set(roles)).set('roles', Set(c.get('roles')));
// force data to sets });
return c.set('roles_map', Set(roles)).set('roles', Set(c.get('roles')))
})
const selected = roles.reduce((acc, r) => acc.set(r.get('id'), r.get('selected')), Map()) const selected = roles.reduce(
(acc, r) => acc.set(r.get('id'), r.get('selected')),
Map()
);
const hasSafeRoles = allRoles.size > 0 const hasSafeRoles = allRoles.size > 0;
return { return {
viewMap, viewMap,
selected, selected,
hasSafeRoles hasSafeRoles,
} };
} };
export const constructView = id => (dispatch, getState) => { export const constructView = id => (dispatch, getState) => {
const server = getState().servers.get(id) const server = getState().servers.get(id);
const { viewMap, selected } = getViewMap(server) const { viewMap, selected } = getViewMap(server);
dispatch({ dispatch({
type: Symbol.for('rp: setup role picker'), type: Symbol.for('rp: setup role picker'),
@ -79,79 +93,79 @@ export const constructView = id => (dispatch, getState) => {
originalRolesSelected: selected, originalRolesSelected: selected,
hidden: false, hidden: false,
isEditingMessage: false, isEditingMessage: false,
messageBuffer: '' messageBuffer: '',
} },
}) });
dispatch(UIActions.fadeIn) dispatch(UIActions.fadeIn);
} };
export const resetSelected = (dispatch) => { export const resetSelected = dispatch => {
dispatch({ dispatch({
type: Symbol.for('rp: reset selected') type: Symbol.for('rp: reset selected'),
}) });
} };
export const submitSelected = serverId => async (dispatch, getState) => { export const submitSelected = serverId => async (dispatch, getState) => {
const { rolePicker } = getState() const { rolePicker } = getState();
const original = rolePicker.get('originalRolesSelected') const original = rolePicker.get('originalRolesSelected');
const current = rolePicker.get('rolesSelected') const current = rolePicker.get('rolesSelected');
const diff = original.reduce((acc, v, k) => { const diff = original.reduce((acc, v, k) => {
if (current.get(k) !== v) { if (current.get(k) !== v) {
// if original value is false, then we know we're adding, otherwise removing. // if original value is false, then we know we're adding, otherwise removing.
if (v !== true) { if (v !== true) {
return acc.set('added', acc.get('added').add(k)) return acc.set('added', acc.get('added').add(k));
} else { } else {
return acc.set('removed', acc.get('removed').add(k)) return acc.set('removed', acc.get('removed').add(k));
} }
} }
return acc return acc;
}, Map({ added: Set(), removed: Set() })) }, Map({ added: Set(), removed: Set() }));
await superagent.patch(`/api/servers/${serverId}/roles`).send(diff.toJS()) await superagent.patch(`/api/servers/${serverId}/roles`).send(diff.toJS());
dispatch({ dispatch({
type: Symbol.for('rp: sync selected roles') type: Symbol.for('rp: sync selected roles'),
}) });
} };
export const updateRoles = roles => ({ export const updateRoles = roles => ({
type: Symbol.for('rp: update selected roles'), type: Symbol.for('rp: update selected roles'),
data: roles data: roles,
}) });
export const openMessageEditor = id => (dispatch, getState) => { export const openMessageEditor = id => (dispatch, getState) => {
const message = getState().servers.getIn([id, 'message']) const message = getState().servers.getIn([id, 'message']);
dispatch(editServerMessage(id, message)) dispatch(editServerMessage(id, message));
dispatch({ dispatch({
type: Symbol.for('rp: set message editor state'), type: Symbol.for('rp: set message editor state'),
data: true data: true,
}) });
} };
export const saveServerMessage = id => async (dispatch, getState) => { export const saveServerMessage = id => async (dispatch, getState) => {
const message = getState().rolePicker.get('messageBuffer') const message = getState().rolePicker.get('messageBuffer');
await superagent.patch(`/api/server/${id}`).send({ message }) await superagent.patch(`/api/server/${id}`).send({ message });
dispatch(closeMessageEditor) dispatch(closeMessageEditor);
dispatch({ dispatch({
type: Symbol.for('server: edit message'), type: Symbol.for('server: edit message'),
data: { data: {
id, id,
message message,
} },
}) });
} };
export const editServerMessage = (id, message) => ({ export const editServerMessage = (id, message) => ({
type: Symbol.for('rp: edit message buffer'), type: Symbol.for('rp: edit message buffer'),
data: message data: message,
}) });
export const closeMessageEditor = ({ export const closeMessageEditor = {
type: Symbol.for('rp: set message editor state'), type: Symbol.for('rp: set message editor state'),
data: false data: false,
}) };

263
UI/src/components/role-picker/index.js
View file

@ -1,145 +1,214 @@
import React, { Component, Fragment } from 'react' import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux' import { connect } from 'react-redux';
import { Prompt } from 'react-router-dom' import { Prompt } from 'react-router-dom';
import superagent from 'superagent' import superagent from 'superagent';
import * as Actions from './actions' import * as Actions from './actions';
import * as UIActions from '../../actions/ui' import * as UIActions from '../../actions/ui';
import { msgToReal } from '../../utils' import { msgToReal } from '../../utils';
import './RolePicker.sass' import './RolePicker.sass';
import Category from './Category' import Category from './Category';
import { Scrollbars } from 'react-custom-scrollbars'; import { Scrollbars } from 'react-custom-scrollbars';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
const mapState = ({ rolePicker, servers }, ownProps) => { const mapState = ({ rolePicker, servers }, ownProps) => {
return { return {
data: rolePicker, data: rolePicker,
server: servers.get(ownProps.match.params.server) server: servers.get(ownProps.match.params.server),
} };
} };
@connect(mapState) @connect(mapState)
class RolePicker extends Component { class RolePicker extends Component {
componentWillMount () { componentWillMount() {
const { dispatch, match: { params: { server } } } = this.props const {
dispatch(Actions.setup(server)) dispatch,
match: {
params: { server },
},
} = this.props;
dispatch(Actions.setup(server));
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.match.params.server !== nextProps.match.params.server) { if (this.props.match.params.server !== nextProps.match.params.server) {
const { dispatch } = this.props const { dispatch } = this.props;
dispatch(UIActions.fadeOut(() => dispatch(Actions.setup(nextProps.match.params.server)))) dispatch(
UIActions.fadeOut(() => dispatch(Actions.setup(nextProps.match.params.server)))
);
} }
} }
get serverId () { get serverId() {
return this.props.server.get('id') return this.props.server.get('id');
} }
isSelected = id => { isSelected = id => {
return this.props.data.getIn([ 'rolesSelected', id ]) return this.props.data.getIn(['rolesSelected', id]);
};
get rolesHaveChanged() {
const { data } = this.props;
return !data.get('rolesSelected').equals(data.get('originalRolesSelected'));
} }
get rolesHaveChanged () { editServerMessage = e => {
const { data } = this.props const { dispatch } = this.props;
return !data.get('rolesSelected').equals(data.get('originalRolesSelected')) dispatch(Actions.editServerMessage(this.serverId, e.target.value));
} };
editServerMessage = (e) => { saveServerMessage = e => {
const { dispatch } = this.props const { dispatch } = this.props;
dispatch(Actions.editServerMessage(this.serverId, e.target.value)) dispatch(Actions.saveServerMessage(this.serverId));
} };
saveServerMessage = (e) => {
const { dispatch } = this.props
dispatch(Actions.saveServerMessage(this.serverId))
}
openMessageEditor = () => { openMessageEditor = () => {
const { dispatch } = this.props const { dispatch } = this.props;
dispatch(Actions.openMessageEditor(this.serverId)) dispatch(Actions.openMessageEditor(this.serverId));
} };
closeMessageEditor = () => { closeMessageEditor = () => {
const { dispatch } = this.props const { dispatch } = this.props;
dispatch(Actions.closeMessageEditor) dispatch(Actions.closeMessageEditor);
} };
renderServerMessage (server) { renderServerMessage(server) {
const isEditing = this.props.data.get('isEditingMessage') const isEditing = this.props.data.get('isEditingMessage');
const roleManager = server.getIn(['perms', 'canManageRoles']) const roleManager = server.getIn(['perms', 'canManageRoles']);
const msg = server.get('message') const msg = server.get('message');
const msgBuffer = this.props.data.get('messageBuffer') const msgBuffer = this.props.data.get('messageBuffer');
console.log(msg, roleManager, isEditing, this.props.data.toJS()) console.log(msg, roleManager, isEditing, this.props.data.toJS());
if (!roleManager && msg !== '') { if (!roleManager && msg !== '') {
return <section> return (
<h3>Server Message</h3> <section>
<p dangerouslySetInnerHTML={{__html: msgToReal(msg)}}></p> <h3>Server Message</h3>
</section> <p dangerouslySetInnerHTML={{ __html: msgToReal(msg) }}></p>
</section>
);
} }
if (roleManager && !isEditing) { if (roleManager && !isEditing) {
return <section> return (
<div className="role-picker__header"> <section>
<h3>Server Message</h3> <div className="role-picker__header">
<div uk-tooltip='' title='Edit Server Message' uk-icon="icon: pencil" onClick={this.openMessageEditor} /> <h3>Server Message</h3>
</div> <div
<p dangerouslySetInnerHTML={{__html: msgToReal(msg) || '<i>no server message</i>'}}></p> uk-tooltip=""
</section> title="Edit Server Message"
uk-icon="icon: pencil"
onClick={this.openMessageEditor}
/>
</div>
<p
dangerouslySetInnerHTML={{
__html: msgToReal(msg) || '<i>no server message</i>',
}}
></p>
</section>
);
} }
if (roleManager && isEditing) { if (roleManager && isEditing) {
return <section> return (
<div className="role-picker__header"> <section>
<h3>Server Message</h3> <div className="role-picker__header">
<div uk-tooltip='' title='Save Server Message' onClick={this.saveServerMessage} style={{cursor: 'pointer', color: 'var(--c-green)'}} uk-icon="icon: check; ratio: 1.4" /> <h3>Server Message</h3>
<div uk-tooltip='' title='Discard Edits' onClick={this.closeMessageEditor} style={{cursor: 'pointer', color: 'var(--c-red)', marginLeft: 10}} uk-icon="icon: trash; ratio: 0.9" /> <div
</div> uk-tooltip=""
<textarea className="uk-width-1-2 uk-textarea role-picker__msg-editor" rows="3" onChange={this.editServerMessage} value={msgBuffer} /> title="Save Server Message"
</section> onClick={this.saveServerMessage}
style={{ cursor: 'pointer', color: 'var(--c-green)' }}
uk-icon="icon: check; ratio: 1.4"
/>
<div
uk-tooltip=""
title="Discard Edits"
onClick={this.closeMessageEditor}
style={{ cursor: 'pointer', color: 'var(--c-red)', marginLeft: 10 }}
uk-icon="icon: trash; ratio: 0.9"
/>
</div>
<textarea
className="uk-width-1-2 uk-textarea role-picker__msg-editor"
rows="3"
onChange={this.editServerMessage}
value={msgBuffer}
/>
</section>
);
} }
return null return null;
} }
render () { render() {
const { data, server, dispatch } = this.props const { data, server, dispatch } = this.props;
const vm = data.get('viewMap') const vm = data.get('viewMap');
if (server === undefined) { if (server === undefined) {
return null return null;
} }
return <div className={`inner role-picker ${(data.get('hidden')) ? 'hidden' : ''}`}> return (
<Prompt when={this.rolesHaveChanged} message="Are you sure you want to leave? You have unsaved changes that will be lost." /> <div className={`inner role-picker ${data.get('hidden') ? 'hidden' : ''}`}>
{ this.renderServerMessage(server) } <Prompt
<section> when={this.rolesHaveChanged}
<div className="role-picker__header sticky"> message="Are you sure you want to leave? You have unsaved changes that will be lost."
<h3>Roles</h3> />
{ server.getIn(['perms', 'canManageRoles']) === true {this.renderServerMessage(server)}
? <Link to={`/s/${server.get('id')}/edit`} uk-tooltip='' title='Edit Categories' uk-icon="icon: file-edit"></Link> <section>
: null <div className="role-picker__header sticky">
} <h3>Roles</h3>
<div className="role-picker__spacer"></div> {server.getIn(['perms', 'canManageRoles']) === true ? (
<div className={`role-picker__actions ${(!this.rolesHaveChanged) ? 'hidden' : ''}`}> <Link
<button disabled={!this.rolesHaveChanged} onClick={() => dispatch(Actions.resetSelected)} className="uk-button rp-button secondary"> to={`/s/${server.get('id')}/edit`}
Reset uk-tooltip=""
</button> title="Edit Categories"
<button disabled={!this.rolesHaveChanged} onClick={() => dispatch(Actions.submitSelected(this.props.match.params.server))} className="uk-button rp-button primary"> uk-icon="icon: file-edit"
Save Changes ></Link>
</button> ) : null}
<div className="role-picker__spacer"></div>
<div
className={`role-picker__actions ${!this.rolesHaveChanged ? 'hidden' : ''}`}
>
<button
disabled={!this.rolesHaveChanged}
onClick={() => dispatch(Actions.resetSelected)}
className="uk-button rp-button secondary"
>
Reset
</button>
<button
disabled={!this.rolesHaveChanged}
onClick={() =>
dispatch(Actions.submitSelected(this.props.match.params.server))
}
className="uk-button rp-button primary"
>
Save Changes
</button>
</div>
</div> </div>
</div> <div className="role-picker__categories">
<div className="role-picker__categories"> {vm
{ .sortBy(v => v.get('position'))
vm.sortBy(v => v.get('position')).map((c, name) => <Category key={name} name={name} category={c} isSelected={this.isSelected} onChange={(roles) => dispatch(Actions.updateRoles(roles))} />).toArray() .map((c, name) => (
} <Category
</div> key={name}
</section> name={name}
</div> category={c}
isSelected={this.isSelected}
onChange={roles => dispatch(Actions.updateRoles(roles))}
/>
))
.toArray()}
</div>
</section>
</div>
);
} }
} }
export default RolePicker export default RolePicker;

26
UI/src/components/role/demo.js
View file

@ -1,19 +1,25 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Map } from 'immutable' import { Map } from 'immutable';
import Role from './index' import Role from './index';
export default class DemoRole extends Component { export default class DemoRole extends Component {
state = { state = {
isSelected: false isSelected: false,
} };
handleToggle = () => { handleToggle = () => {
this.setState({ isSelected: !this.state.isSelected }) this.setState({ isSelected: !this.state.isSelected });
} };
render() {
render () { return (
return <Role selected={this.state.isSelected} role={Map({ name: this.props.name, color: this.props.color })} onToggle={this.handleToggle} type='button' /> <Role
selected={this.state.isSelected}
role={Map({ name: this.props.name, color: this.props.color })}
onToggle={this.handleToggle}
type="button"
/>
);
} }
} }

32
UI/src/components/role/draggable.js
View file

@ -1,7 +1,7 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { DragSource } from 'react-dnd' import { DragSource } from 'react-dnd';
import Role from './index' import Role from './index';
// @DragSource(Symbol.for('dnd: role'), { // @DragSource(Symbol.for('dnd: role'), {
// beginDrag ({ role, categoryId }) { // beginDrag ({ role, categoryId }) {
@ -13,20 +13,20 @@ import Role from './index'
// isDragging: monitor.isDragging() // isDragging: monitor.isDragging()
// })) // }))
export default export default
@DragSource( @DragSource(
Symbol.for('dnd: role'), Symbol.for('dnd: role'),
{ {
beginDrag ({ role, categoryId }) { beginDrag({ role, categoryId }) {
return { role, category: categoryId } return { role, category: categoryId };
}
}, },
(connect, monitor) => ({ },
connectDragSource: connect.dragSource(), (connect, monitor) => ({
isDragging: monitor.isDragging() connectDragSource: connect.dragSource(),
}) isDragging: monitor.isDragging(),
) })
)
class DraggableRole extends Component { class DraggableRole extends Component {
render () { render() {
return <Role {...this.props} type='drag' /> return <Role {...this.props} type="drag" />;
} }
} }

75
UI/src/components/role/index.js
View file

@ -1,9 +1,9 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import PropTypes from 'prop-types' import PropTypes from 'prop-types';
import Color from 'color' import Color from 'color';
import './Role.sass' import './Role.sass';
const whiteColor = Color('#efefef') const whiteColor = Color('#efefef');
class Role extends Component { class Role extends Component {
static propTypes = { static propTypes = {
@ -11,50 +11,55 @@ class Role extends Component {
onToggle: PropTypes.func, onToggle: PropTypes.func,
type: PropTypes.string, type: PropTypes.string,
selected: PropTypes.bool, selected: PropTypes.bool,
disabled: PropTypes.bool disabled: PropTypes.bool,
} };
render () { render() {
let { role, selected, disabled, type, isDragging } = this.props let { role, selected, disabled, type, isDragging } = this.props;
type = type || 'button' type = type || 'button';
// console.log(this.props) // console.log(this.props)
let color = Color(role.get('color')) let color = Color(role.get('color'));
if (color.rgbNumber() === 0) { if (color.rgbNumber() === 0) {
color = whiteColor color = whiteColor;
} }
const c = color const c = color;
let hc = color.lighten(0.1) let hc = color.lighten(0.1);
const out = <div const out = (
onClick={() => { <div
if (!disabled && this.props.onToggle != null) { onClick={() => {
this.props.onToggle(!selected, selected) } if (!disabled && this.props.onToggle != null) {
} this.props.onToggle(!selected, selected);
} }
{...((disabled) ? { 'uk-tooltip': '', title: "I don't have permissions to grant this." } : {})} }}
className={`role font-sans-serif ${(disabled) ? 'disabled' : ''} ${(isDragging) ? 'is-dragging' : ''} role__${type}`} {...(disabled
title={role.get('name')} ? { 'uk-tooltip': '', title: "I don't have permissions to grant this." }
style={{ : {})}
'--role-color-hex': c.string(), className={`role font-sans-serif ${disabled ? 'disabled' : ''} ${
'--role-color-hover': hc.string(), isDragging ? 'is-dragging' : ''
'--role-color-rgba': `rgba(${c.red()}, ${c.green()}, ${c.blue()}, 0.7)` } role__${type}`}
}}> title={role.get('name')}
<div className={`role__option ${(selected) ? 'selected' : ''}`}/> style={{
<div className='role__name'> '--role-color-hex': c.string(),
{role.get('name')} '--role-color-hover': hc.string(),
'--role-color-rgba': `rgba(${c.red()}, ${c.green()}, ${c.blue()}, 0.7)`,
}}
>
<div className={`role__option ${selected ? 'selected' : ''}`} />
<div className="role__name">{role.get('name')}</div>
</div> </div>
</div> );
if (type === 'drag' && this.props.connectDragSource != null) { if (type === 'drag' && this.props.connectDragSource != null) {
return this.props.connectDragSource(out) return this.props.connectDragSource(out);
} }
return out return out;
} }
} }
export default Role export default Role;

63
UI/src/components/servers/Navigation.js
View file

@ -1,40 +1,43 @@
import React, { Component, Fragment } from 'react' import React, { Component, Fragment } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types' import PropTypes from 'prop-types';
import ServerCard from './ServerCard' import ServerCard from './ServerCard';
import UserCard from './UserCard' import UserCard from './UserCard';
import { Scrollbars } from 'react-custom-scrollbars' import { Scrollbars } from 'react-custom-scrollbars';
import { NavLink } from 'react-router-dom' import { NavLink } from 'react-router-dom';
class ServersNavigation extends Component { class ServersNavigation extends Component {
static propTypes = { static propTypes = {
user: ImmutablePropTypes.map.isRequired, user: ImmutablePropTypes.map.isRequired,
servers: ImmutablePropTypes.orderedMapOf(ImmutablePropTypes.map).isRequired, servers: ImmutablePropTypes.orderedMapOf(ImmutablePropTypes.map).isRequired,
className: PropTypes.string className: PropTypes.string,
} };
render () { render() {
// console.log(this.props.servers) // console.log(this.props.servers)
return <Fragment> return (
<UserCard user={this.props.user} /> <Fragment>
<div className={this.props.className}> <UserCard user={this.props.user} />
<Scrollbars autoHeight autoHeightMax='calc(100vh - 180px)'> <div className={this.props.className}>
{ <Scrollbars autoHeight autoHeightMax="calc(100vh - 180px)">
this.props.servers.reduce((acc, s, i) => { {this.props.servers.reduce((acc, s, i) => {
acc.push(<ServerCard server={s} user={this.props.user} key={i} />) acc.push(<ServerCard server={s} user={this.props.user} key={i} />);
return acc return acc;
}, []) }, [])}
} <NavLink
<NavLink className='server-list__item add-new' activeClassName='active' to={`/s/add`}> className="server-list__item add-new"
<div className='server-list__item__info'> activeClassName="active"
<i uk-icon="icon: plus; ratio: 0.9"></i>&nbsp; to={`/s/add`}
Add to your server >
</div> <div className="server-list__item__info">
</NavLink> <i uk-icon="icon: plus; ratio: 0.9"></i>&nbsp; Add to your server
</Scrollbars> </div>
</div> </NavLink>
</Fragment> </Scrollbars>
</div>
</Fragment>
);
} }
} }
export default ServersNavigation export default ServersNavigation;

81
UI/src/components/servers/ServerCard.js
View file

@ -1,45 +1,76 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { connect } from 'react-redux' import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePropTypes from 'react-immutable-proptypes';
import { NavLink } from 'react-router-dom' import { NavLink } from 'react-router-dom';
import './ServerCard.sass' import './ServerCard.sass';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
class ServerCard extends Component { class ServerCard extends Component {
static propTypes = { static propTypes = {
user: ImmutablePropTypes.map.isRequired, user: ImmutablePropTypes.map.isRequired,
server: ImmutablePropTypes.map.isRequired, server: ImmutablePropTypes.map.isRequired,
} };
render () { render() {
const { server, user } = this.props const { server, user } = this.props;
let icon = '' let icon = '';
console.log(__filename, server) console.log(__filename, server);
const s = server.get('server') const s = server.get('server');
const gm = server.get('gm') const gm = server.get('gm');
const perms = server.get('perms') const perms = server.get('perms');
if (perms.get('canManageRoles')) { if (perms.get('canManageRoles')) {
icon = <span title='Role Manager' uk-tooltip='' role='img' aria-label='Role Manager' className="server-list__item__tag" uk-icon="icon: bolt; ratio: 0.7" /> icon = (
<span
title="Role Manager"
uk-tooltip=""
role="img"
aria-label="Role Manager"
className="server-list__item__tag"
uk-icon="icon: bolt; ratio: 0.7"
/>
);
} }
if (perms.get('isAdmin')) { if (perms.get('isAdmin')) {
icon = <span title='Server Admin' uk-tooltip='' role='img' aria-label='Server Admin' className="server-list__item__tag" uk-icon="icon: star; ratio: 0.7" /> icon = (
<span
title="Server Admin"
uk-tooltip=""
role="img"
aria-label="Server Admin"
className="server-list__item__tag"
uk-icon="icon: star; ratio: 0.7"
/>
);
} }
return <NavLink className='server-list__item' activeClassName='active' to={`/s/${s.get('id')}`}> return (
<div className='server-list__item__icon'> <NavLink
<img src={`https://cdn.discordapp.com/icons/${s.get('id')}/${s.get('icon')}.png`} alt={s.name} /> className="server-list__item"
</div> activeClassName="active"
<div className='server-list__item__info'> to={`/s/${s.get('id')}`}
<b>{s.get('name')}</b><br /> >
<span style={{ color: gm.get('color') }}>{ gm.get('nickname') || user.get('username') }</span> { icon } <div className="server-list__item__icon">
</div> <img
</NavLink> src={`https://cdn.discordapp.com/icons/${s.get('id')}/${s.get('icon')}.png`}
alt={s.name}
/>
</div>
<div className="server-list__item__info">
<b>{s.get('name')}</b>
<br />
<span style={{ color: gm.get('color') }}>
{gm.get('nickname') || user.get('username')}
</span>{' '}
{icon}
</div>
</NavLink>
);
} }
} }
export default ServerCard export default ServerCard;

66
UI/src/components/servers/ServerLanding.js
View file

@ -1,47 +1,59 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Link, Redirect } from 'react-router-dom' import { Link, Redirect } from 'react-router-dom';
import superagent from 'superagent' import superagent from 'superagent';
import discordLogo from '../../pages/images/discord-logo.svg' import discordLogo from '../../pages/images/discord-logo.svg';
export default class ServerLanding extends Component { export default class ServerLanding extends Component {
state = { state = {
server: null, server: null,
exit: false exit: false,
} };
async componentWillMount () { async componentWillMount() {
console.log(this.props) console.log(this.props);
try { try {
const rsp = await superagent.get(`/api/server/${this.props.match.params.server}/slug`) const rsp = await superagent.get(
this.setState({ server: rsp.body }) `/api/server/${this.props.match.params.server}/slug`
);
this.setState({ server: rsp.body });
} catch (e) { } catch (e) {
this.setState({ exit: true }) this.setState({ exit: true });
return return;
} }
} }
render () { render() {
if (this.state.exit === true) { if (this.state.exit === true) {
return <Redirect to="/" /> return <Redirect to="/" />;
} }
if (this.state.server === null) { if (this.state.server === null) {
return null //SPINNER return null; //SPINNER
} }
return <div className="landing uk-width-1-1 uk-text-center"> return (
<div className="uk-container"> <div className="landing uk-width-1-1 uk-text-center">
<section> <div className="uk-container">
<h1>Hey there.</h1> <section>
<h4>{this.state.server.name} uses Roleypoly to manage self-assignable roles.</h4> <h1>Hey there.</h1>
<h5><span role="img">💖</span></h5> <h4>
</section> {this.state.server.name} uses Roleypoly to manage self-assignable roles.
<section> </h4>
<Link to={`/oauth/flow?r=${window.location.pathname}`} className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo"/> Sign in with Discord</Link> <h5>
</section> <span role="img">💖</span>
</h5>
</section>
<section>
<Link
to={`/oauth/flow?r=${window.location.pathname}`}
className="uk-button rp-button discord"
>
<img src={discordLogo} className="rp-button-logo" /> Sign in with Discord
</Link>
</section>
</div>
</div> </div>
</div> );
} }
} }

85
UI/src/components/servers/UserCard.js
View file

@ -1,51 +1,70 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePropTypes from 'react-immutable-proptypes';
import { NavLink } from 'react-router-dom' import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux' import { connect } from 'react-redux';
import * as Actions from '../../actions' import * as Actions from '../../actions';
import './UserCard.sass' import './UserCard.sass';
@connect() @connect()
class UserCard extends Component { class UserCard extends Component {
static propTypes = { static propTypes = {
user: ImmutablePropTypes.map user: ImmutablePropTypes.map,
} };
get avatar () { get avatar() {
const { user } = this.props const { user } = this.props;
const avatar = user.get('avatar') const avatar = user.get('avatar');
if (avatar === '' || avatar == null) { if (avatar === '' || avatar == null) {
return `https://cdn.discordapp.com/embed/avatars/${Math.ceil(Math.random() * 9999) % 5}.png` return `https://cdn.discordapp.com/embed/avatars/${Math.ceil(Math.random() * 9999) %
5}.png`;
} }
return `https://cdn.discordapp.com/avatars/${user.get('id')}/${avatar}.png` return `https://cdn.discordapp.com/avatars/${user.get('id')}/${avatar}.png`;
} }
render () { render() {
const { user } = this.props const { user } = this.props;
// console.log(this.props) // console.log(this.props)
return <div className='user-card'> return (
<div className='user-card__icon'> <div className="user-card">
<img src={this.avatar} alt={user.get('username')} /> <div className="user-card__icon">
<img src={this.avatar} alt={user.get('username')} />
</div>
<div className="user-card__info">
<span className="user-card__info__name">{user.get('username')}</span>
<span className="user-card__info__discrim">#{user.get('discriminator')}</span>
</div>
<div className="user-card__actions">
<ul className="uk-iconnav uk-iconnav-vertical">
<li>
<a
uk-tooltip=""
title="Sign out"
uk-icon="icon: sign-out"
onClick={() => {
this.props.dispatch(Actions.userLogout);
}}
/>
</li>
{this.props.user.isRoot === true ? (
<li>
<NavLink
uk-tooltip=""
title="Root"
uk-icon="icon: bolt"
to="/root/"
activeClassName="uk-active"
/>
</li>
) : null}
</ul>
</div>
</div> </div>
<div className='user-card__info'> );
<span className='user-card__info__name'>{user.get('username')}</span><span className='user-card__info__discrim'>#{user.get('discriminator')}</span>
</div>
<div className='user-card__actions'>
<ul className='uk-iconnav uk-iconnav-vertical'>
<li><a uk-tooltip='' title='Sign out' uk-icon='icon: sign-out' onClick={() => { this.props.dispatch(Actions.userLogout) }} /></li>
{
(this.props.user.isRoot === true)
? <li><NavLink uk-tooltip='' title='Root' uk-icon='icon: bolt' to='/root/' activeClassName='uk-active' /></li>
: null
}
</ul>
</div>
</div>
} }
} }
export default UserCard export default UserCard;

82
UI/src/components/servers/index.js
View file

@ -1,15 +1,15 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom' import { Route, Switch } from 'react-router-dom';
import { Scrollbars } from 'react-custom-scrollbars' import { Scrollbars } from 'react-custom-scrollbars';
import { connect } from 'react-redux' import { connect } from 'react-redux';
import { withRouter, Redirect } from 'react-router' import { withRouter, Redirect } from 'react-router';
import './index.sass' import './index.sass';
import Navigation from './Navigation' import Navigation from './Navigation';
import RolePicker from '../role-picker' import RolePicker from '../role-picker';
import RoleEditor from '../role-editor' import RoleEditor from '../role-editor';
import AddServer from '../add-server' import AddServer from '../add-server';
import Error404 from '../../pages/Error404' import Error404 from '../../pages/Error404';
// import mockData from './mockData' // import mockData from './mockData'
@ -17,39 +17,53 @@ const mapState = ({ servers, user, appState }) => {
return { return {
servers, servers,
user, user,
fade: appState.fade fade: appState.fade,
} };
} };
@connect(mapState) @connect(mapState)
class Servers extends Component { class Servers extends Component {
get defaultPath () { get defaultPath() {
console.log(this.props.servers.toJS()) console.log(this.props.servers.toJS());
const first = this.props.servers.first() const first = this.props.servers.first();
if (first != null) { if (first != null) {
return first.get('id') return first.get('id');
} }
return 'add' return 'add';
} }
render () { render() {
return <div className="servers"> return (
<Navigation className="servers__nav" servers={this.props.servers} user={this.props.user} /> <div className="servers">
<div className='servers__content'> <Navigation
<Scrollbars className={`fade-element ${(this.props.fade) ? 'fade' : ''}`} autoHeight autoHeightMax='calc(100vh - 80px)'> className="servers__nav"
<Switch> servers={this.props.servers}
<Route path='/s/add' component={AddServer} exact /> user={this.props.user}
<Route path='/s/:server/edit' component={RoleEditor} /> />
<Route path='/s/:server' component={RolePicker} /> <div className="servers__content">
<Route path='/s' exact render={() => <Redirect to={`/s/${this.defaultPath}`} />} /> <Scrollbars
<Route component={Error404} /> className={`fade-element ${this.props.fade ? 'fade' : ''}`}
</Switch> autoHeight
</Scrollbars> autoHeightMax="calc(100vh - 80px)"
>
<Switch>
<Route path="/s/add" component={AddServer} exact />
<Route path="/s/:server/edit" component={RoleEditor} />
<Route path="/s/:server" component={RolePicker} />
<Route
path="/s"
exact
render={() => <Redirect to={`/s/${this.defaultPath}`} />}
/>
<Route component={Error404} />
</Switch>
</Scrollbars>
</div>
</div> </div>
</div> );
} }
} }
export default Servers export default Servers;

83
UI/src/components/wrapper/index.js
View file

@ -1,41 +1,52 @@
import React, { Component } from 'react' import React, { Component } from 'react';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom';
import Scrollbars from 'react-custom-scrollbars' import Scrollbars from 'react-custom-scrollbars';
import Logotype from '../logotype' import Logotype from '../logotype';
import './wrapper.sass' import './wrapper.sass';
import discordLogo from '../../pages/images/discord-logo.svg' import discordLogo from '../../pages/images/discord-logo.svg';
class Wrapper extends Component { class Wrapper extends Component {
render () { render() {
return <div className='wrapper'> return (
<Scrollbars autoHeight autoHeightMax='calc(100vh + 2px)'> <div className="wrapper">
<div className='wrapper__background' /> <Scrollbars autoHeight autoHeightMax="calc(100vh + 2px)">
<div className='wrapper__container'> <div className="wrapper__background" />
<nav uk-navbar='' className='uk-navbar-transparent wrapper__nav'> <div className="wrapper__container">
<div className='uk-navbar-left'> <nav uk-navbar="" className="uk-navbar-transparent wrapper__nav">
<Link to="/"> <div className="uk-navbar-left">
<Logotype style={{ height: '2rem' }} className='wrapper__logotype' /> <Link to="/">
</Link> <Logotype style={{ height: '2rem' }} className="wrapper__logotype" />
</div> </Link>
<div className='uk-navbar-right'> </div>
<ul className='uk-navbar-nav'> <div className="uk-navbar-right">
<li><div className='wrapper__nav__button'> <ul className="uk-navbar-nav">
<a href="/oauth/bot/flow" target="_blank" className="uk-button rp-button discord-alt"><img src={discordLogo} className="rp-button-logo" alt=""/> Add Roleypoly</a> <li>
</div></li> <div className="wrapper__nav__button">
<li><a href='https://discord.gg/PWQUVsd'>Join the Discord</a></li> <a
<li><a href='https://patreon.com/kata'>Patreon</a></li> href="/oauth/bot/flow"
</ul> target="_blank"
</div> className="uk-button rp-button discord-alt"
</nav> >
<main className="wrapper__content"> <img src={discordLogo} className="rp-button-logo" alt="" /> Add
{ Roleypoly
this.props.children </a>
} </div>
</main> </li>
</div> <li>
</Scrollbars> <a href="https://discord.gg/PWQUVsd">Join the Discord</a>
</div> </li>
<li>
<a href="https://patreon.com/kata">Patreon</a>
</li>
</ul>
</div>
</nav>
<main className="wrapper__content">{this.props.children}</main>
</div>
</Scrollbars>
</div>
);
} }
} }
export default Wrapper export default Wrapper;

16
UI/src/index.css
View file

@ -1,19 +1,20 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: "source-han-sans-japanese", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: 'source-han-sans-japanese', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.font-sans-serif { .font-sans-serif {
font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
} }
:root { :root {
--c-white: #efefef; --c-white: #efefef;
--c-9: #EBD6D4; --c-9: #ebd6d4;
--c-7: #ab9b9a; --c-7: #ab9b9a;
--c-5: #756867; --c-5: #756867;
--c-3: #5d5352; --c-3: #5d5352;
@ -47,11 +48,16 @@ body {
overflow-y: hidden; overflow-y: hidden;
} }
h1,h2,h3,h4,h5,h6 { h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--c-9); color: var(--c-9);
} }
.uk-navbar-nav>li>a { .uk-navbar-nav > li > a {
color: var(--c-7); color: var(--c-7);
} }

14
UI/src/index.js
View file

@ -1,8 +1,8 @@
import React from 'react' import React from 'react';
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom';
import './index.css' import './index.css';
import App from './App' import App from './App';
import {unregister} from './registerServiceWorker' import { unregister } from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root')) ReactDOM.render(<App />, document.getElementById('root'));
unregister() unregister();

17
UI/src/pages/Error404.js
View file

@ -1,14 +1,19 @@
import React from 'react' import React from 'react';
import './landing.sass' import './landing.sass';
const Error404 = ({ root = false }) => const Error404 = ({ root = false }) => (
<div className="landing uk-width-1-1 uk-text-center"> <div className="landing uk-width-1-1 uk-text-center">
<div className="uk-container"> <div className="uk-container">
<section> <section>
<h1><span role="img">💔</span> g-gomen nasai</h1> <h1>
<h4>I'm not sure what page you were looking for <span role="img">😢</span></h4> <span role="img">💔</span> g-gomen nasai
</h1>
<h4>
I'm not sure what page you were looking for <span role="img">😢</span>
</h4>
</section> </section>
</div> </div>
</div> </div>
);
export default Error404 export default Error404;

29
UI/src/pages/Landing.js
View file

@ -1,14 +1,14 @@
import React, { Component, Fragment } from 'react' import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom';
import Scrollbars from 'react-custom-scrollbars' import Scrollbars from 'react-custom-scrollbars';
import Typist from 'react-typist' import Typist from 'react-typist';
import moment from 'moment' import moment from 'moment';
import './landing.sass' import './landing.sass';
import discordLogo from './images/discord-logo.svg' import discordLogo from './images/discord-logo.svg';
import RoleypolyDemo from '../components/demos/roleypoly' import RoleypolyDemo from '../components/demos/roleypoly';
import TypingDemo from '../components/demos/typing' import TypingDemo from '../components/demos/typing';
const Landing = ({ root = false }) => const Landing = ({ root = false }) => (
<div className="landing uk-width-1-1 uk-text-center"> <div className="landing uk-width-1-1 uk-text-center">
<div className="uk-container"> <div className="uk-container">
<section> <section>
@ -16,7 +16,9 @@ const Landing = ({ root = false }) =>
<h4>Ditch bot commands once and for all.</h4> <h4>Ditch bot commands once and for all.</h4>
</section> </section>
<section> <section>
<Link to="/oauth/flow" className="uk-button rp-button discord"><img src={discordLogo} className="rp-button-logo"/> Sign in with Discord</Link> <Link to="/oauth/flow" className="uk-button rp-button discord">
<img src={discordLogo} className="rp-button-logo" /> Sign in with Discord
</Link>
</section> </section>
<section uk-grid=""> <section uk-grid="">
{/* Typist */} {/* Typist */}
@ -27,9 +29,10 @@ const Landing = ({ root = false }) =>
{/* role side */} {/* role side */}
<div className="uk-width-1-2"> <div className="uk-width-1-2">
<RoleypolyDemo /> <RoleypolyDemo />
<p className="subtext">It's {(new Date()).getUTCFullYear()}. We can do better.</p> <p className="subtext">It's {new Date().getUTCFullYear()}. We can do better.</p>
</div> </div>
</section> </section>
</div> </div>
</div> </div>
export default Landing );
export default Landing;

46
UI/src/pages/WhyNoRoles.js
View file

@ -1,19 +1,33 @@
import React, { Fragment } from 'react' import React, { Fragment } from 'react';
import goodImg from './images/whynoroles-good.png' import goodImg from './images/whynoroles-good.png';
import badImg from './images/whynoroles-bad.png' import badImg from './images/whynoroles-bad.png';
const WhyNoRoles = (props) => { const WhyNoRoles = props => {
return <Fragment> return (
<h2>Why don't I see any roles in my editor?</h2> <Fragment>
<p>Roleypoly needs to be a higher role position than other roles in order to assign them to anyone.</p> <h2>Why don't I see any roles in my editor?</h2>
<h3 className="pages__bad">Bad <i uk-icon="icon: ban"></i></h3> <p>
<img src={badImg} className="rp-discord" alt="Bad example"/> Roleypoly needs to be a higher role position than other roles in order to assign
<p>In this example, Roleypoly is at the bottom of the list. It can't assign anyone any roles above it.</p> them to anyone.
<h3 className="pages__good">Good <i uk-icon="icon: check"></i></h3> </p>
<img src={goodImg} className="rp-discord" alt="Good example"/> <h3 className="pages__bad">
<p>In this example, Roleypoly is above other roles, and will be able to assign them.</p> Bad <i uk-icon="icon: ban"></i>
</Fragment> </h3>
} <img src={badImg} className="rp-discord" alt="Bad example" />
<p>
In this example, Roleypoly is at the bottom of the list. It can't assign anyone
any roles above it.
</p>
<h3 className="pages__good">
Good <i uk-icon="icon: check"></i>
</h3>
<img src={goodImg} className="rp-discord" alt="Good example" />
<p>
In this example, Roleypoly is above other roles, and will be able to assign them.
</p>
</Fragment>
);
};
export default WhyNoRoles export default WhyNoRoles;

46
UI/src/pages/index.js
View file

@ -1,25 +1,27 @@
import React from 'react' import React from 'react';
import { Route, Switch } from 'react-router-dom' import { Route, Switch } from 'react-router-dom';
import Scrollbars from 'react-custom-scrollbars' import Scrollbars from 'react-custom-scrollbars';
import './pages.sass' import './pages.sass';
import WhyNoRoles from './WhyNoRoles' import WhyNoRoles from './WhyNoRoles';
import Error404 from './Error404' import Error404 from './Error404';
export { default as Landing } from './Landing' export { default as Landing } from './Landing';
export { default as Error404 } from './Error404' export { default as Error404 } from './Error404';
const Pages = (props) => { const Pages = props => {
return <div className="pages"> return (
<Scrollbars autoHeight autoHeightMax='calc(100vh - 80px)'> <div className="pages">
<div className="pages-inner"> <Scrollbars autoHeight autoHeightMax="calc(100vh - 80px)">
<Switch> <div className="pages-inner">
<Route path="/help/why-no-roles" component={WhyNoRoles} /> <Switch>
{/* { isDev ? <Route path="/p/landing" component={Landing} /> : null } */} <Route path="/help/why-no-roles" component={WhyNoRoles} />
<Route component={Error404} /> {/* { isDev ? <Route path="/p/landing" component={Landing} /> : null } */}
</Switch> <Route component={Error404} />
</div> </Switch>
</Scrollbars> </div>
</div> </Scrollbars>
} </div>
);
};
export default Pages export default Pages;

34
UI/src/reducers/index.js
View file

@ -1,16 +1,16 @@
import { combineReducers } from 'redux' import { combineReducers } from 'redux';
import servers from './servers' import servers from './servers';
import user from './user' import user from './user';
import rolePicker from './role-picker' import rolePicker from './role-picker';
import roleEditor from './role-editor' import roleEditor from './role-editor';
import { routerMiddleware } from 'react-router-redux' import { routerMiddleware } from 'react-router-redux';
// import roles from './roles' // import roles from './roles'
const initialState = { const initialState = {
ready: false, ready: false,
fade: true fade: true,
} };
const appState = (state = initialState, { type, data }) => { const appState = (state = initialState, { type, data }) => {
switch (type) { switch (type) {
@ -18,19 +18,19 @@ const appState = (state = initialState, { type, data }) => {
return { return {
...state, ...state,
ready: true, ready: true,
fade: false fade: false,
} };
case Symbol.for('app fade'): case Symbol.for('app fade'):
return { return {
...state, ...state,
fade: data fade: data,
} };
default: default:
return state return state;
} }
} };
const rootReducer = combineReducers({ const rootReducer = combineReducers({
appState, appState,
@ -39,7 +39,7 @@ const rootReducer = combineReducers({
router: routerMiddleware, router: routerMiddleware,
// roles, // roles,
rolePicker, rolePicker,
roleEditor roleEditor,
}) });
export default rootReducer export default rootReducer;

56
UI/src/reducers/role-editor.js
View file

@ -1,54 +1,66 @@
import { Map, OrderedMap, fromJS } from 'immutable' import { Map, OrderedMap, fromJS } from 'immutable';
const initialState = Map({ const initialState = Map({
viewMap: OrderedMap({}), viewMap: OrderedMap({}),
originalSnapshot: OrderedMap({}), originalSnapshot: OrderedMap({}),
hasAvailableRoles: true hasAvailableRoles: true,
}) });
const reducer = (state = initialState, { type, data }) => { const reducer = (state = initialState, { type, data }) => {
switch (type) { switch (type) {
case Symbol.for('re: setup'): case Symbol.for('re: setup'):
const { viewMap, originalSnapshot, ...rest } = data const { viewMap, originalSnapshot, ...rest } = data;
return state.merge({ viewMap: OrderedMap(viewMap), originalSnapshot: OrderedMap(originalSnapshot), ...rest }) return state.merge({
viewMap: OrderedMap(viewMap),
originalSnapshot: OrderedMap(originalSnapshot),
...rest,
});
case Symbol.for('re: set category'): case Symbol.for('re: set category'):
return state.setIn(['viewMap', data.id], Map(data)) return state.setIn(['viewMap', data.id], Map(data));
case Symbol.for('re: edit category'): case Symbol.for('re: edit category'):
return state.setIn(['viewMap', data.id, data.key], data.value) return state.setIn(['viewMap', data.id, data.key], data.value);
case Symbol.for('re: delete category'): case Symbol.for('re: delete category'):
return state.deleteIn(['viewMap', data]) return state.deleteIn(['viewMap', data]);
case Symbol.for('re: switch category mode'): case Symbol.for('re: switch category mode'):
return state.setIn(['viewMap', data.id, 'mode'], data.mode) return state.setIn(['viewMap', data.id, 'mode'], data.mode);
case Symbol.for('re: add role to category'): case Symbol.for('re: add role to category'):
const category = state.getIn(['viewMap', data.id]) const category = state.getIn(['viewMap', data.id]);
return state.setIn(['viewMap', data.id], return state.setIn(
['viewMap', data.id],
category category
.set('roles', category.get('roles').add(data.role.get('id'))) .set('roles', category.get('roles').add(data.role.get('id')))
.set('roles_map', category.get('roles_map').add(data.role)) .set('roles_map', category.get('roles_map').add(data.role))
) );
case Symbol.for('re: remove role from category'): case Symbol.for('re: remove role from category'):
const rmCat = state.getIn(['viewMap', data.id]) const rmCat = state.getIn(['viewMap', data.id]);
return state.setIn(['viewMap', data.id], return state.setIn(
['viewMap', data.id],
rmCat rmCat
.set('roles', rmCat.get('roles').filterNot(r => r === data.role.get('id'))) .set(
.set('roles_map', rmCat.get('roles_map').filterNot(r => r.get('id') === data.role.get('id'))) 'roles',
) rmCat.get('roles').filterNot(r => r === data.role.get('id'))
)
.set(
'roles_map',
rmCat.get('roles_map').filterNot(r => r.get('id') === data.role.get('id'))
)
);
case Symbol.for('re: reset'): case Symbol.for('re: reset'):
return state.set('viewMap', state.get('originalSnapshot')) return state.set('viewMap', state.get('originalSnapshot'));
case Symbol.for('re: swap original state'): case Symbol.for('re: swap original state'):
return state.set('originalSnapshot', state.get('viewMap')) return state.set('originalSnapshot', state.get('viewMap'));
default: default:
return state return state;
} }
} };
export default reducer export default reducer;

28
UI/src/reducers/role-picker.js
View file

@ -1,4 +1,4 @@
import { Map, OrderedMap } from 'immutable' import { Map, OrderedMap } from 'immutable';
const initialState = Map({ const initialState = Map({
hidden: true, // should the view be hidden? hidden: true, // should the view be hidden?
@ -7,38 +7,38 @@ const initialState = Map({
messageBuffer: '', messageBuffer: '',
viewMap: OrderedMap({}), // roles in categories viewMap: OrderedMap({}), // roles in categories
originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected originalRolesSelected: Map({}), // Map<role id, bool> -- original roles for diffing against selected
rolesSelected: Map({}) // Map<role id, bool> -- new roles for diffing rolesSelected: Map({}), // Map<role id, bool> -- new roles for diffing
}) });
export default (state = initialState, { type, data }) => { export default (state = initialState, { type, data }) => {
switch (type) { switch (type) {
case Symbol.for('rp: setup role picker'): case Symbol.for('rp: setup role picker'):
return Map(data) return Map(data);
case Symbol.for('rp: hide role picker ui'): case Symbol.for('rp: hide role picker ui'):
return state.set('hidden', data) return state.set('hidden', data);
case Symbol.for('rp: reset role picker ui'): case Symbol.for('rp: reset role picker ui'):
return state.set('emptyRoles', data) return state.set('emptyRoles', data);
case Symbol.for('rp: update selected roles'): case Symbol.for('rp: update selected roles'):
return state.mergeIn(['rolesSelected'], data) return state.mergeIn(['rolesSelected'], data);
case Symbol.for('rp: sync selected roles'): case Symbol.for('rp: sync selected roles'):
return state.set('originalRolesSelected', state.get('rolesSelected')) return state.set('originalRolesSelected', state.get('rolesSelected'));
case Symbol.for('rp: reset selected'): case Symbol.for('rp: reset selected'):
return state.set('rolesSelected', state.get('originalRolesSelected')) return state.set('rolesSelected', state.get('originalRolesSelected'));
case Symbol.for('rp: set message editor state'): case Symbol.for('rp: set message editor state'):
return state.set('isEditingMessage', data) return state.set('isEditingMessage', data);
case Symbol.for('rp: edit message buffer'): case Symbol.for('rp: edit message buffer'):
return state.set('messageBuffer', data) return state.set('messageBuffer', data);
// case Symbol.for('rp: zero role picker'): // case Symbol.for('rp: zero role picker'):
// return initialState // return initialState
default: default:
return state return state;
} }
} };

26
UI/src/reducers/servers.js
View file

@ -1,32 +1,32 @@
import { Set, OrderedMap, Map, fromJS } from 'immutable' import { Set, OrderedMap, Map, fromJS } from 'immutable';
const blankServer = Map({ const blankServer = Map({
id: '386659935687147521', id: '386659935687147521',
gm: { gm: {
nickname: null, nickname: null,
color: '#cca1a1' color: '#cca1a1',
}, },
message: 'Hey hey!', message: 'Hey hey!',
server: { server: {
id: '386659935687147521', id: '386659935687147521',
name: 'Roleypoly', name: 'Roleypoly',
ownerID: '62601275618889728', ownerID: '62601275618889728',
icon: '4fa0c1063649a739f3fe1a0589aa2c03' icon: '4fa0c1063649a739f3fe1a0589aa2c03',
}, },
roles: Set([]), roles: Set([]),
categories: OrderedMap(), categories: OrderedMap(),
perms: { perms: {
isAdmin: true, isAdmin: true,
canManageRoles: true canManageRoles: true,
} },
}) });
const initialState = OrderedMap({}) const initialState = OrderedMap({});
export default (state = initialState, { type, data }) => { export default (state = initialState, { type, data }) => {
switch (type) { switch (type) {
case Symbol.for('update servers'): case Symbol.for('update servers'):
return data.reduce((acc, s) => acc.set(s.id, fromJS(s)), OrderedMap()) return data.reduce((acc, s) => acc.set(s.id, fromJS(s)), OrderedMap());
// case Symbol.for('update server roles'): // case Symbol.for('update server roles'):
// return state.set(data.id, // return state.set(data.id,
@ -34,15 +34,15 @@ export default (state = initialState, { type, data }) => {
// ) // )
case Symbol.for('server: set'): case Symbol.for('server: set'):
return state.set(data.id, fromJS(data)) return state.set(data.id, fromJS(data));
case Symbol.for('server: edit message'): case Symbol.for('server: edit message'):
return state.setIn([data.id, 'message'], data.message) return state.setIn([data.id, 'message'], data.message);
case Symbol.for('add debug server'): case Symbol.for('add debug server'):
return state.set('0', blankServer) return state.set('0', blankServer);
default: default:
return state return state;
} }
} };

14
UI/src/reducers/user.js
View file

@ -1,22 +1,22 @@
import { Map } from 'immutable' import { Map } from 'immutable';
const initialState = Map({ const initialState = Map({
isLoggedIn: false, isLoggedIn: false,
username: 'あたし', username: 'あたし',
discriminator: '0001', discriminator: '0001',
id: '', id: '',
avatar: null avatar: null,
}) });
export default (state = initialState, { type, data }) => { export default (state = initialState, { type, data }) => {
switch (type) { switch (type) {
case Symbol.for('set user'): case Symbol.for('set user'):
return Map({...data, isLoggedIn: true}) return Map({ ...data, isLoggedIn: true });
case Symbol.for('reset user'): case Symbol.for('reset user'):
return initialState return initialState;
default: default:
return state return state;
} }
} };

4
UI/src/registerServiceWorker.js
View file

@ -93,9 +93,7 @@ function checkValidServiceWorker(swUrl) {
} }
}) })
.catch(() => { .catch(() => {
console.log( console.log('No internet connection found. App is running in offline mode.');
'No internet connection found. App is running in offline mode.'
);
}); });
} }

80
UI/src/router/index.js
View file

@ -1,55 +1,57 @@
import React, { Component, Fragment } from 'react' import React, { Component, Fragment } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom' import { Route, Switch, Redirect } from 'react-router-dom';
import { connect } from 'react-redux' import { connect } from 'react-redux';
import { withRouter } from 'react-router' import { withRouter } from 'react-router';
import Servers from '../components/servers' import Servers from '../components/servers';
import OauthCallback from '../components/oauth-callback' import OauthCallback from '../components/oauth-callback';
import OauthFlow from '../components/oauth-flow' import OauthFlow from '../components/oauth-flow';
import OauthBotFlow from '../components/oauth-bot-flow' import OauthBotFlow from '../components/oauth-bot-flow';
import Pages, { Landing, Error404 } from '../pages' import Pages, { Landing, Error404 } from '../pages';
import ServerLanding from '../components/servers/ServerLanding' import ServerLanding from '../components/servers/ServerLanding';
const aaa = (props) => (<div>{ JSON.stringify(props) }</div>) const aaa = props => <div>{JSON.stringify(props)}</div>;
export default export default
@withRouter @withRouter
@connect(({ appState, user }) => ({ ready: appState.ready, user })) @connect(({ appState, user }) => ({ ready: appState.ready, user }))
class AppRouter extends Component { class AppRouter extends Component {
render () { render() {
const isLoggedIn = this.props.user.get('isLoggedIn') const isLoggedIn = this.props.user.get('isLoggedIn');
if (!this.props.ready) { if (!this.props.ready) {
return null return null;
} }
return <Switch> return (
{ (isLoggedIn === true) <Switch>
{isLoggedIn === true ? (
// YES LOGGED IN // YES LOGGED IN
? <Route path='/s' component={Servers} /> <Route path="/s" component={Servers} />
) : (
// NOT LOGGED IN // NOT LOGGED IN
: [<Route path='/s/:server' key={1} component={ServerLanding} />, <Route path='/s' key={2} render={() => <Redirect to="/" />} />] [
<Route path="/s/:server" key={1} component={ServerLanding} />,
<Route path="/s" key={2} render={() => <Redirect to="/" />} />,
]
)}
} {/* GENERAL ROUTES */}
<Route path="/oauth/callback" component={OauthCallback} />
<Route path="/oauth/flow" component={OauthFlow} />
<Route path="/oauth/bot/flow" component={OauthBotFlow} />
<Route path="/p/landing" exact component={Landing} />
<Route path="/p" component={Pages} />
<Route path="/help" component={Pages} />
{/* GENERAL ROUTES */} <Route
<Route path='/oauth/callback' component={OauthCallback} /> exact
<Route path='/oauth/flow' component={OauthFlow} /> path="/"
<Route path='/oauth/bot/flow' component={OauthBotFlow} /> render={() => (isLoggedIn ? <Redirect to="/s" /> : <Landing root={true} />)}
<Route path="/p/landing" exact component={Landing} /> />
<Route path='/p' component={Pages} />
<Route path='/help' component={Pages} />
<Route exact path='/' render={() => <Route component={Error404} />
isLoggedIn </Switch>
? <Redirect to="/s" /> );
: <Landing root={true} />
} />
<Route component={Error404} />
</Switch>
} }
} }

27
UI/src/store/configureStore.dev.js
View file

@ -1,30 +1,29 @@
import { createStore, applyMiddleware, compose } from 'redux';
import { createStore, applyMiddleware, compose } from 'redux' import thunk from 'redux-thunk';
import thunk from 'redux-thunk' import { createLogger } from 'redux-logger';
import { createLogger } from 'redux-logger'
// import api from '../middleware/api' // import api from '../middleware/api'
import rootReducer from '../reducers' import rootReducer from '../reducers';
import DevTools from '../components/dev-tools' import DevTools from '../components/dev-tools';
import { routerMiddleware } from 'react-router-redux' import { routerMiddleware } from 'react-router-redux';
const configureStore = (preloadedState, history) => { const configureStore = (preloadedState, history) => {
const store = createStore( const store = createStore(
rootReducer, rootReducer,
preloadedState, preloadedState,
compose( compose(
applyMiddleware(thunk, routerMiddleware(history), createLogger()), applyMiddleware(thunk, routerMiddleware(history), createLogger())
// DevTools.instrument() // DevTools.instrument()
) )
) );
if (module.hot) { if (module.hot) {
// Enable Webpack hot module replacement for reducers // Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () => { module.hot.accept('../reducers', () => {
store.replaceReducer(rootReducer) store.replaceReducer(rootReducer);
}) });
} }
return store return store;
} };
export default configureStore export default configureStore;

4
UI/src/store/configureStore.js
View file

@ -1,5 +1,5 @@
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === 'production') {
module.exports = require('./configureStore.prod') module.exports = require('./configureStore.prod');
} else { } else {
module.exports = require('./configureStore.dev') module.exports = require('./configureStore.dev');
} }

21
UI/src/store/configureStore.prod.js
View file

@ -1,14 +1,15 @@
import { createStore, applyMiddleware } from 'redux' import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'react-router-redux' import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk' import thunk from 'redux-thunk';
// import api from '../middleware/api' // import api from '../middleware/api'
import rootReducer from '../reducers' import rootReducer from '../reducers';
const configureStore = (preloadedState, history) => createStore( const configureStore = (preloadedState, history) =>
rootReducer, createStore(
preloadedState, rootReducer,
applyMiddleware(thunk, routerMiddleware(history)) preloadedState,
) applyMiddleware(thunk, routerMiddleware(history))
);
export default configureStore export default configureStore;

2
UI/src/utils.js
View file

@ -1 +1 @@
export const msgToReal = (msg) => (msg.replace(/</g, '&lt;').replace(/\n/g, '<br />')) export const msgToReal = msg => msg.replace(/</g, '&lt;').replace(/\n/g, '<br />');

5
UI/yarn.lock
View file

@ -8458,6 +8458,11 @@ preserve@^0.2.0:
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks= integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
prettier@^1.19.1:
version "1.19.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
pretty-bytes@^4.0.2: pretty-bytes@^4.0.2:
version "4.0.2" version "4.0.2"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"