remove code bloat from preferences, add preferences to user schema

This commit is contained in:
catarak 2016-08-03 23:45:49 -04:00
parent 3d18960575
commit b542f72d33
5 changed files with 120 additions and 151 deletions

View file

@ -6,12 +6,13 @@ export const STOP_SKETCH = 'STOP_SKETCH';
export const OPEN_PREFERENCES = 'OPEN_PREFERENCES'; export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES'; export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE'; export const SET_FONT_SIZE = 'SET_FONT_SIZE';
export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
export const UPDATE_FONTSIZE = 'UPDATE_FONTSIZE';
export const INCREASE_INDENTATION = 'INCREASE_INDENTATION'; export const INCREASE_INDENTATION = 'INCREASE_INDENTATION';
export const DECREASE_INDENTATION = 'DECREASE_INDENTATION'; export const DECREASE_INDENTATION = 'DECREASE_INDENTATION';
export const UPDATE_INDENTATION = 'UPDATE_INDENTATION'; export const UPDATE_INDENTATION = 'UPDATE_INDENTATION';
export const SET_INDENTATION = 'SET_INDENTATION';
export const INDENT_WITH_SPACE = 'INDENT_WITH_SPACE'; export const INDENT_WITH_SPACE = 'INDENT_WITH_SPACE';
export const INDENT_WITH_TAB = 'INDENT_WITH_TAB'; export const INDENT_WITH_TAB = 'INDENT_WITH_TAB';

View file

@ -1,41 +1,18 @@
import * as ActionTypes from '../../../constants'; import * as ActionTypes from '../../../constants';
// import axios from 'axios';
export function increaseFont() { // const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
return {
type: ActionTypes.INCREASE_FONTSIZE
};
}
export function decreaseFont() { export function setFontSize(value) {
return { return {
type: ActionTypes.DECREASE_FONTSIZE type: ActionTypes.SET_FONT_SIZE,
};
}
export function updateFont(event) {
const value = event.target.value;
return {
type: ActionTypes.UPDATE_FONTSIZE,
value value
}; };
} }
export function increaseIndentation() { export function setIndentation(value) {
return { return {
type: ActionTypes.INCREASE_INDENTATION type: ActionTypes.SET_INDENTATION,
};
}
export function decreaseIndentation() {
return {
type: ActionTypes.DECREASE_INDENTATION
};
}
export function updateIndentation(event) {
const value = event.target.value;
return {
type: ActionTypes.UPDATE_INDENTATION,
value value
}; };
} }

View file

@ -9,96 +9,106 @@ const exitUrl = require('../../../images/exit.svg');
const plusUrl = require('../../../images/plus.svg'); const plusUrl = require('../../../images/plus.svg');
const minusUrl = require('../../../images/minus.svg'); const minusUrl = require('../../../images/minus.svg');
function Preferences(props) { class Preferences extends React.Component {
const preferencesContainerClass = classNames({ handleUpdateFont(event) {
preferences: true, this.props.setFontSize(parseInt(event.target.value, 10));
'preferences--selected': props.isVisible }
});
let preferencesTabOptionClass = classNames({
preference__option: true,
'preference__option--selected': props.isTabIndent
});
let preferencesSpaceOptionClass = classNames({
preference__option: true,
'preference__option--selected': !props.isTabIndent
});
return (
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
<div className="preferences__heading">
<h2 className="preferences__title">Preferences</h2>
<button
className="preferences__exit-button"
onClick={props.closePreferences}
title="exit"
aria-label="exit preferences"
>
<InlineSVG src={exitUrl} alt="Exit Preferences" />
</button>
</div>
<div className="preference"> handleUpdateIndentation(event) {
<h4 className="preference__title">Text Size</h4> this.props.setIndentation(parseInt(event.target.value, 10));
<button }
className="preference__plus-button"
onClick={props.decreaseFont}
aria-label="decrease font size"
>
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={props.fontSize}
onChange={props.updateFont}
>
</input>
<button
className="preference__minus-button"
onClick={props.increaseFont}
aria-label="increase font size"
>
<InlineSVG src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6>
</button>
</div>
<div className="preference"> render() {
<h4 className="preference__title">Indentation Amount</h4> const preferencesContainerClass = classNames({
<button preferences: true,
className="preference__plus-button" 'preferences--selected': this.props.isVisible
onClick={props.decreaseIndentation} });
aria-label="decrease indentation amount" let preferencesTabOptionClass = classNames({
> preference__option: true,
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" /> 'preference__option--selected': this.props.isTabIndent
<h6 className="preference__label">Decrease</h6> });
</button> let preferencesSpaceOptionClass = classNames({
<input preference__option: true,
className="preference__value" 'preference__option--selected': !this.props.isTabIndent
aria-live="status" });
aria-live="polite" return (
role="status" <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
value={props.indentationAmount} <div className="preferences__heading">
onChange={props.updateIndentation} <h2 className="preferences__title">Preferences</h2>
> <button
</input> className="preferences__exit-button"
<button onClick={this.props.closePreferences}
className="preference__minus-button" title="exit"
onClick={props.increaseIndentation} aria-label="exit preferences"
aria-label="increase indentation amount" >
> <InlineSVG src={exitUrl} alt="Exit Preferences" />
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" /> </button>
<h6 className="preference__label">Increase</h6>
</button>
<div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace} aria-label="indentation with space">Spaces</button>
<button className={preferencesTabOptionClass} onClick={props.indentWithTab} aria-label="indentation with tab">Tabs</button>
</div> </div>
</div>
</section> <div className="preference">
); <h4 className="preference__title">Text Size</h4>
<button
className="preference__minus-button"
onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
aria-label="decrease font size"
>
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={this.props.fontSize}
onChange={this.handleUpdateFont}
>
</input>
<button
className="preference__plus-button"
onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
aria-label="increase font size"
>
<InlineSVG src={plusUrl} alt="Increase Font Size" />
<h6 className="preference__label">Increase</h6>
</button>
</div>
<div className="preference">
<h4 className="preference__title">Indentation Amount</h4>
<button
className="preference__minus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
aria-label="decrease indentation amount"
>
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
<h6 className="preference__label">Decrease</h6>
</button>
<input
className="preference__value"
aria-live="status"
aria-live="polite"
role="status"
value={this.props.indentationAmount}
onChange={this.handleUpdateIndentation}
>
</input>
<button
className="preference__plus-button"
onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
aria-label="increase indentation amount"
>
<InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
<h6 className="preference__label">Increase</h6>
</button>
<div className="preference__vertical-list">
<button className={preferencesSpaceOptionClass} onClick={this.props.indentWithSpace} aria-label="indentation with space">Spaces</button>
<button className={preferencesTabOptionClass} onClick={this.props.indentWithTab} aria-label="indentation with tab">Tabs</button>
</div>
</div>
</section>
);
}
} }
function mapStateToProps(state) { function mapStateToProps(state) {
@ -114,17 +124,13 @@ function mapDispatchToProps(dispatch) {
Preferences.propTypes = { Preferences.propTypes = {
isVisible: PropTypes.bool.isRequired, isVisible: PropTypes.bool.isRequired,
closePreferences: PropTypes.func.isRequired, closePreferences: PropTypes.func.isRequired,
decreaseFont: PropTypes.func.isRequired,
updateFont: PropTypes.func.isRequired,
fontSize: PropTypes.number.isRequired, fontSize: PropTypes.number.isRequired,
increaseFont: PropTypes.func.isRequired,
indentationAmount: PropTypes.number.isRequired, indentationAmount: PropTypes.number.isRequired,
decreaseIndentation: PropTypes.func.isRequired, setIndentation: PropTypes.func.isRequired,
increaseIndentation: PropTypes.func.isRequired,
updateIndentation: PropTypes.func.isRequired,
indentWithSpace: PropTypes.func.isRequired, indentWithSpace: PropTypes.func.isRequired,
indentWithTab: PropTypes.func.isRequired, indentWithTab: PropTypes.func.isRequired,
isTabIndent: PropTypes.bool.isRequired isTabIndent: PropTypes.bool.isRequired,
setFontSize: PropTypes.func.isRequired
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Preferences); export default connect(mapStateToProps, mapDispatchToProps)(Preferences);

View file

@ -8,30 +8,10 @@ const initialState = {
const preferences = (state = initialState, action) => { const preferences = (state = initialState, action) => {
switch (action.type) { switch (action.type) {
case ActionTypes.INCREASE_FONTSIZE: case ActionTypes.SET_FONT_SIZE:
return Object.assign({}, state, { return Object.assign({}, state, { fontSize: action.value });
fontSize: state.fontSize + 2 case ActionTypes.SET_INDENTATION:
}); return Object.assign({}, state, { indentationAmount: action.value });
case ActionTypes.DECREASE_FONTSIZE:
return Object.assign({}, state, {
fontSize: state.fontSize - 2
});
case ActionTypes.UPDATE_FONTSIZE:
return Object.assign({}, state, {
fontSize: parseInt(action.value, 10)
});
case ActionTypes.INCREASE_INDENTATION:
return Object.assign({}, state, {
indentationAmount: state.indentationAmount + 2
});
case ActionTypes.DECREASE_INDENTATION:
return Object.assign({}, state, {
indentationAmount: state.indentationAmount - 2
});
case ActionTypes.UPDATE_INDENTATION:
return Object.assign({}, state, {
indentationAmount: parseInt(action.value, 10)
});
case ActionTypes.INDENT_WITH_TAB: case ActionTypes.INDENT_WITH_TAB:
return Object.assign({}, state, { return Object.assign({}, state, {
isTabIndent: true isTabIndent: true

View file

@ -9,7 +9,12 @@ const userSchema = new Schema({
github: { type: String }, github: { type: String },
email: { type: String, unique: true }, email: { type: String, unique: true },
tokens: Array, tokens: Array,
admin: { type: Boolean, default: false } preferences: {
textSize: { type: Number, default: 18 },
indentationAmount: { type: Number, default: 2 },
isTabIndent: { type: Boolean, default: false },
autosave: { type: Boolean, default: true }
}
}, { timestamps: true }); }, { timestamps: true });
/** /**