Permalink
Browse files

Settings Page

This commit removes the unused AdminSettings and improves the layout on
the Settings page. It adds some system statistics that will be used to
link to the list of users.

Also bundled in this commit is a fix to a failing test due to some
changes at nytimes.com.
  • Loading branch information...
edsu committed Mar 11, 2018
1 parent 6fd5f34 commit 1622428cc3b00dd07ecccbaea83f4ada0eb70d34
@@ -60,9 +60,10 @@ export const saveSettings = () => {
const opts = {
method: 'PUT',
headers: {'Content-Type': 'application/json'},
credentials: 'same-origin',
body: JSON.stringify(settings)
}
return fetch('/api/v1/settings', opts)
return fetch('/api/v1/settings', opts, )
.then((resp) => {
if (settings.logoFile) {
dispatch(postLogo())
@@ -0,0 +1,17 @@
export const SET_SYSTEM_STATS = 'SET_SYSTEM_STATS'
export const setSystemStats = (stats) => {
return {
type: SET_SYSTEM_STATS,
stats
}
}
export const getSystemStats = () => {
return async (dispatch) => {
const stats = await fetch('/api/v1/stats', {credentials: 'same-origin'})
.then((resp) => {return resp.json()})
console.log(stats)
dispatch(setSystemStats(stats))
}
}

This file was deleted.

Oops, something went wrong.
@@ -1,5 +1,11 @@
.Preview img {
background-color: #4A4A4A;
.LogoUpload img {
max-height: 100px;
padding: 10px;
border: thin solid gray;
}
.LogoUpload input {
font-size: 12pt;
border: none;
font-weight: normal;
}
@@ -1,11 +1,11 @@
import React, { Component } from 'react'
import def from '../images/mith.png'
import defaultLogo from '../images/mith.png'
import styles from './LogoUpload.css'
import PropTypes from 'prop-types'
export default class LogoUpload extends Component {
state = {
imagePreviewUrl: this.props.logoUrl ? this.props.logoUrl : def
imagePreviewUrl: this.props.logoUrl ? this.props.logoUrl : defaultLogo
}
handleImageChange(e) {
@@ -36,24 +36,14 @@ export default class LogoUpload extends Component {
}
render() {
const {imagePreviewUrl} = this.state
let imagePreview = null
if (imagePreviewUrl) {
imagePreview = (<img src={imagePreviewUrl} />)
} else {
imagePreview = (<span>Please select an Image for Preview</span>)
}
return (
<div>
<label>Your Logo:</label>
<input
type="file"
onChange={(e)=>this.handleImageChange(e)} />
<div className={styles.Preview}>
{imagePreview}
</div>
</div>
<p className={styles.LogoUpload}>
<img src={this.state.imagePreviewUrl} />
<br />
<input
type="file"
onChange={(e)=>this.handleImageChange(e)} />
</p>
)
}
}
@@ -3,6 +3,7 @@ import { Component } from 'react'
export default class MediaQueryComponent extends Component {
constructor(props) {
super(props)
this.state = {mediaClass: null}
}
setMediaQuery(q, baseClass, mediaClass) {
@@ -1,17 +1,13 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import AdminSettingsForm from '../containers/AdminSettingsForm'
import style from './Profile.css'
export default class Profile extends Component {
render() {
let adminSettings = null
let disableSave = true
if (this.props.user.isSuperUser === 'true') {
adminSettings = <AdminSettingsForm />
}
if (this.props.updatedSettings || this.props.updatedUserSettings) {
disableSave = false
}
@@ -37,14 +33,12 @@ export default class Profile extends Component {
onChange={this.props.updateUserSettings} value={this.props.user.email}/>
</p>
{ adminSettings }
<div>
<button
type="button"
onClick={this.props.saveAllSettings}
disabled={disableSave}>
Save Settings
Save
</button>
</div>
@@ -1,23 +1,63 @@
.Settings {
display: flex;
flex-direction: column;
align-items: center;
flex-direction: row;
justify-content: center;
max-width: 600px;
margin-left: auto;
margin-right: auto;
font-size: 16pt;
}
.Settings p {
text-align: left;
margin-bottom: 25px;
}
.Settings input {
border: none;
font-size: 18pt;
border-bottom: thin solid grey;
width: 500px;
font-weight: bold;
}
.Settings label {
font-size: 12pt;
margin-bottom: 20px;
}
.SystemStats {
justify-content: right;
}
.SystemStats dl {
margin-left: 50px;
text-align: right;
padding: 10px;
border: thin solid gray;
background-color: lightgreen;
border-radius: 5px;
}
.SystemStats dd {
font-size: 18pt;
margin-left: 0px;
font-weight: bold;
}
.Settings input {
margin-left: 10px;
border-bottom: thin solid gray;
.SystemStats dt {
margin-bottom: 20px;
}
.SettingsUnder780px {
display: flex;
flex-direction: column;
justify-content: left;
margin: 5px;
}
.SettingsUnder780px input {
width: 90%;
}
.SettingsUnder780px dl {
text-align: left;
margin-left: 0px;
padding: 0px;
border: none;
}
@@ -1,18 +1,25 @@
import React, { Component } from 'react'
import React from 'react'
import PropTypes from 'prop-types'
import Keys from './Keys'
import style from './Settings.css'
export default class Settings extends Component {
import LogoUpload from './LogoUpload'
import MediaQueryComponent from '../components/MediaQueryComponent'
export default class Settings extends MediaQueryComponent {
componentWillMount() {
this.props.getSettings()
this.props.getSystemStats()
}
componentDidMount() {
this.setMediaQuery('(max-width: 780px)', style.Settings, style.SettingsUnder780px)
}
render() {
let welcome = ''
if (! this.props.appKey) {
if (! this.props.appKey && ! this.props.appSecret) {
welcome = (
<div>
<h1>Welcome!</h1>
@@ -32,35 +39,94 @@ export default class Settings extends Component {
}
return (
<div className={style.Settings}>
<div className={this.state.mediaStyle}>
{welcome}
<Keys
appKey={this.props.appKey}
appSecret={this.props.appSecret}
updateSettings={this.props.updateSettings} />
<p>
<button onClick={()=>{
this.props.saveSettings().then(() => {
if (this.props.userLoggedIn) {
this.props.returnHome()
} else {
window.location = '/auth/twitter/'
}
})
}}>Save</button>
</p>
<div className={style.SystemSettings}>
<p>
<input onChange={this.props.updateSettings}
id="instanceTitle"
name="instanceTitle"
type="text"
placeholder="My Community Group"
value={this.props.instanceTitle} />
<br />
<label htmlFor="instanceTitle">Instance Name</label>
</p>
<LogoUpload
logoUrl={this.props.logoUrl}
updateSettings={this.props.updateSettings} />
<p>
<input onChange={this.props.updateSettings}
id="appKey"
name="appKey"
type="text"
value={this.props.appKey} />
<br />
<label htmlFor="appKey">Consumer Key</label>
</p>
<p>
<input
onChange={this.props.updateSettings}
id="appSecret"
name="appSecret"
type="text"
value={this.props.appSecret} />
<br />
<label htmlFor="appSecret">Consumer Secret</label>
</p>
<p>
<button onClick={()=>{
this.props.saveSettings().then(() => {
if (this.props.userLoggedIn) {
this.props.returnHome()
} else {
window.location = '/auth/twitter/'
}
})
}}>Save</button>
</p>
</div>
<div className={style.SystemStats}>
<dl>
<dd>{this.props.tweetCount.toLocaleString()}</dd>
<dt>Tweets</dt>
<dd>{this.props.twitterUserCount.toLocaleString()}</dd>
<dt>Twitter Users</dt>
<dd>{this.props.userCount.toLocaleString()}</dd>
<dt>Instance Users</dt>
</dl>
</div>
</div>
)
}
}
Settings.propTypes = {
instanceTitle: PropTypes.string,
logoUrl: PropTypes.string,
appKey: PropTypes.string,
appSecret: PropTypes.string,
userLoggedIn: PropTypes.bool,
isSuperUser: PropTypes.bool,
tweetCount: PropTypes.number,
twitterUserCount: PropTypes.number,
userCount: PropTypes.number,
getSettings: PropTypes.func,
updateSettings: PropTypes.func,
saveSettings: PropTypes.func,
returnHome: PropTypes.func,
isSuperUser: PropTypes.bool,
getSystemStats: PropTypes.func
}
@@ -3,6 +3,7 @@
padding-left: 40px;
margin-left: 20px;
text-align: center;
line-height: 40px;
}
.TabBar a {
@@ -23,7 +24,6 @@
font-size: 16pt;
font-weight: 500;
min-width: 120px;
height: 40px;
padding: 6px 24px 6px 6px;
text-align: center;
text-decoration: none;
Oops, something went wrong.

0 comments on commit 1622428

Please sign in to comment.