mirror of
https://github.com/roleypoly/roleypoly-v1.git
synced 2025-06-16 10:19:10 +00:00
chore: prettier on UI
This commit is contained in:
Katie Thornhill
parent
912b40c383
commit
4b75eaa0ab
49 changed files with 1703 additions and 1267 deletions
|
|
@ -1,40 +1,43 @@
|
|||
import React, { Component, Fragment } from 'react'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import PropTypes from 'prop-types'
|
||||
import ServerCard from './ServerCard'
|
||||
import UserCard from './UserCard'
|
||||
import { Scrollbars } from 'react-custom-scrollbars'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import ServerCard from './ServerCard';
|
||||
import UserCard from './UserCard';
|
||||
import { Scrollbars } from 'react-custom-scrollbars';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
class ServersNavigation extends Component {
|
||||
static propTypes = {
|
||||
user: ImmutablePropTypes.map.isRequired,
|
||||
servers: ImmutablePropTypes.orderedMapOf(ImmutablePropTypes.map).isRequired,
|
||||
className: PropTypes.string
|
||||
}
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
render () {
|
||||
render() {
|
||||
// console.log(this.props.servers)
|
||||
return <Fragment>
|
||||
<UserCard user={this.props.user} />
|
||||
<div className={this.props.className}>
|
||||
<Scrollbars autoHeight autoHeightMax='calc(100vh - 180px)'>
|
||||
{
|
||||
this.props.servers.reduce((acc, s, i) => {
|
||||
acc.push(<ServerCard server={s} user={this.props.user} key={i} />)
|
||||
return acc
|
||||
}, [])
|
||||
}
|
||||
<NavLink className='server-list__item add-new' activeClassName='active' to={`/s/add`}>
|
||||
<div className='server-list__item__info'>
|
||||
<i uk-icon="icon: plus; ratio: 0.9"></i>
|
||||
Add to your server
|
||||
</div>
|
||||
</NavLink>
|
||||
</Scrollbars>
|
||||
</div>
|
||||
</Fragment>
|
||||
return (
|
||||
<Fragment>
|
||||
<UserCard user={this.props.user} />
|
||||
<div className={this.props.className}>
|
||||
<Scrollbars autoHeight autoHeightMax="calc(100vh - 180px)">
|
||||
{this.props.servers.reduce((acc, s, i) => {
|
||||
acc.push(<ServerCard server={s} user={this.props.user} key={i} />);
|
||||
return acc;
|
||||
}, [])}
|
||||
<NavLink
|
||||
className="server-list__item add-new"
|
||||
activeClassName="active"
|
||||
to={`/s/add`}
|
||||
>
|
||||
<div className="server-list__item__info">
|
||||
<i uk-icon="icon: plus; ratio: 0.9"></i> Add to your server
|
||||
</div>
|
||||
</NavLink>
|
||||
</Scrollbars>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ServersNavigation
|
||||
export default ServersNavigation;
|
||||
|
|
|
|||
|
|
@ -1,45 +1,76 @@
|
|||
import React, { Component } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import './ServerCard.sass'
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import './ServerCard.sass';
|
||||
import { withRouter } from 'react-router';
|
||||
|
||||
class ServerCard extends Component {
|
||||
static propTypes = {
|
||||
user: ImmutablePropTypes.map.isRequired,
|
||||
server: ImmutablePropTypes.map.isRequired,
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
const { server, user } = this.props
|
||||
render() {
|
||||
const { server, user } = this.props;
|
||||
|
||||
let icon = ''
|
||||
let icon = '';
|
||||
|
||||
console.log(__filename, server)
|
||||
|
||||
const s = server.get('server')
|
||||
const gm = server.get('gm')
|
||||
const perms = server.get('perms')
|
||||
console.log(__filename, server);
|
||||
|
||||
const s = server.get('server');
|
||||
const gm = server.get('gm');
|
||||
const perms = server.get('perms');
|
||||
|
||||
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')) {
|
||||
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')}`}>
|
||||
<div className='server-list__item__icon'>
|
||||
<img 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>
|
||||
return (
|
||||
<NavLink
|
||||
className="server-list__item"
|
||||
activeClassName="active"
|
||||
to={`/s/${s.get('id')}`}
|
||||
>
|
||||
<div className="server-list__item__icon">
|
||||
<img
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,47 +1,59 @@
|
|||
import React, { Component } from 'react'
|
||||
import { Link, Redirect } from 'react-router-dom'
|
||||
import superagent from 'superagent'
|
||||
import discordLogo from '../../pages/images/discord-logo.svg'
|
||||
import React, { Component } from 'react';
|
||||
import { Link, Redirect } from 'react-router-dom';
|
||||
import superagent from 'superagent';
|
||||
import discordLogo from '../../pages/images/discord-logo.svg';
|
||||
|
||||
export default class ServerLanding extends Component {
|
||||
state = {
|
||||
server: null,
|
||||
exit: false
|
||||
}
|
||||
exit: false,
|
||||
};
|
||||
|
||||
async componentWillMount () {
|
||||
console.log(this.props)
|
||||
async componentWillMount() {
|
||||
console.log(this.props);
|
||||
|
||||
try {
|
||||
const rsp = await superagent.get(`/api/server/${this.props.match.params.server}/slug`)
|
||||
this.setState({ server: rsp.body })
|
||||
const rsp = await superagent.get(
|
||||
`/api/server/${this.props.match.params.server}/slug`
|
||||
);
|
||||
this.setState({ server: rsp.body });
|
||||
} catch (e) {
|
||||
this.setState({ exit: true })
|
||||
return
|
||||
this.setState({ exit: true });
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render () {
|
||||
render() {
|
||||
if (this.state.exit === true) {
|
||||
return <Redirect to="/" />
|
||||
}
|
||||
|
||||
if (this.state.server === null) {
|
||||
return null //SPINNER
|
||||
return <Redirect to="/" />;
|
||||
}
|
||||
|
||||
return <div className="landing uk-width-1-1 uk-text-center">
|
||||
<div className="uk-container">
|
||||
<section>
|
||||
<h1>Hey there.</h1>
|
||||
<h4>{this.state.server.name} uses Roleypoly to manage self-assignable roles.</h4>
|
||||
<h5><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>
|
||||
if (this.state.server === null) {
|
||||
return null; //SPINNER
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="landing uk-width-1-1 uk-text-center">
|
||||
<div className="uk-container">
|
||||
<section>
|
||||
<h1>Hey there.</h1>
|
||||
<h4>
|
||||
{this.state.server.name} uses Roleypoly to manage self-assignable roles.
|
||||
</h4>
|
||||
<h5>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,70 @@
|
|||
import React, { Component } from 'react'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import { connect } from 'react-redux'
|
||||
import * as Actions from '../../actions'
|
||||
import './UserCard.sass'
|
||||
import React, { Component } from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import * as Actions from '../../actions';
|
||||
import './UserCard.sass';
|
||||
|
||||
@connect()
|
||||
class UserCard extends Component {
|
||||
static propTypes = {
|
||||
user: ImmutablePropTypes.map
|
||||
}
|
||||
user: ImmutablePropTypes.map,
|
||||
};
|
||||
|
||||
get avatar () {
|
||||
const { user } = this.props
|
||||
const avatar = user.get('avatar')
|
||||
get avatar() {
|
||||
const { user } = this.props;
|
||||
const avatar = user.get('avatar');
|
||||
|
||||
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 () {
|
||||
const { user } = this.props
|
||||
render() {
|
||||
const { user } = this.props;
|
||||
|
||||
// console.log(this.props)
|
||||
|
||||
return <div className='user-card'>
|
||||
<div className='user-card__icon'>
|
||||
<img src={this.avatar} alt={user.get('username')} />
|
||||
return (
|
||||
<div className="user-card">
|
||||
<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 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;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React, { Component } from 'react'
|
||||
import { Route, Switch } from 'react-router-dom'
|
||||
import { Scrollbars } from 'react-custom-scrollbars'
|
||||
import { connect } from 'react-redux'
|
||||
import { withRouter, Redirect } from 'react-router'
|
||||
import './index.sass'
|
||||
import React, { Component } from 'react';
|
||||
import { Route, Switch } from 'react-router-dom';
|
||||
import { Scrollbars } from 'react-custom-scrollbars';
|
||||
import { connect } from 'react-redux';
|
||||
import { withRouter, Redirect } from 'react-router';
|
||||
import './index.sass';
|
||||
|
||||
import Navigation from './Navigation'
|
||||
import RolePicker from '../role-picker'
|
||||
import RoleEditor from '../role-editor'
|
||||
import AddServer from '../add-server'
|
||||
import Error404 from '../../pages/Error404'
|
||||
import Navigation from './Navigation';
|
||||
import RolePicker from '../role-picker';
|
||||
import RoleEditor from '../role-editor';
|
||||
import AddServer from '../add-server';
|
||||
import Error404 from '../../pages/Error404';
|
||||
|
||||
// import mockData from './mockData'
|
||||
|
||||
|
|
@ -17,39 +17,53 @@ const mapState = ({ servers, user, appState }) => {
|
|||
return {
|
||||
servers,
|
||||
user,
|
||||
fade: appState.fade
|
||||
}
|
||||
}
|
||||
fade: appState.fade,
|
||||
};
|
||||
};
|
||||
|
||||
@connect(mapState)
|
||||
class Servers extends Component {
|
||||
get defaultPath () {
|
||||
console.log(this.props.servers.toJS())
|
||||
get defaultPath() {
|
||||
console.log(this.props.servers.toJS());
|
||||
|
||||
const first = this.props.servers.first()
|
||||
const first = this.props.servers.first();
|
||||
if (first != null) {
|
||||
return first.get('id')
|
||||
return first.get('id');
|
||||
}
|
||||
|
||||
return 'add'
|
||||
return 'add';
|
||||
}
|
||||
|
||||
render () {
|
||||
return <div className="servers">
|
||||
<Navigation className="servers__nav" servers={this.props.servers} user={this.props.user} />
|
||||
<div className='servers__content'>
|
||||
<Scrollbars className={`fade-element ${(this.props.fade) ? 'fade' : ''}`} autoHeight 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>
|
||||
render() {
|
||||
return (
|
||||
<div className="servers">
|
||||
<Navigation
|
||||
className="servers__nav"
|
||||
servers={this.props.servers}
|
||||
user={this.props.user}
|
||||
/>
|
||||
<div className="servers__content">
|
||||
<Scrollbars
|
||||
className={`fade-element ${this.props.fade ? 'fade' : ''}`}
|
||||
autoHeight
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Servers
|
||||
export default Servers;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue