remove code bloat from preferences, add preferences to user schema
This commit is contained in:
parent
3d18960575
commit
b542f72d33
5 changed files with 120 additions and 151 deletions
|
@ -6,12 +6,13 @@ export const STOP_SKETCH = 'STOP_SKETCH';
|
|||
|
||||
export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
|
||||
export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
|
||||
export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
|
||||
export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
|
||||
export const UPDATE_FONTSIZE = 'UPDATE_FONTSIZE';
|
||||
export const SET_FONT_SIZE = 'SET_FONT_SIZE';
|
||||
|
||||
export const INCREASE_INDENTATION = 'INCREASE_INDENTATION';
|
||||
export const DECREASE_INDENTATION = 'DECREASE_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_TAB = 'INDENT_WITH_TAB';
|
||||
|
||||
|
|
|
@ -1,41 +1,18 @@
|
|||
import * as ActionTypes from '../../../constants';
|
||||
// import axios from 'axios';
|
||||
|
||||
export function increaseFont() {
|
||||
return {
|
||||
type: ActionTypes.INCREASE_FONTSIZE
|
||||
};
|
||||
}
|
||||
// const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
|
||||
|
||||
export function decreaseFont() {
|
||||
export function setFontSize(value) {
|
||||
return {
|
||||
type: ActionTypes.DECREASE_FONTSIZE
|
||||
};
|
||||
}
|
||||
|
||||
export function updateFont(event) {
|
||||
const value = event.target.value;
|
||||
return {
|
||||
type: ActionTypes.UPDATE_FONTSIZE,
|
||||
type: ActionTypes.SET_FONT_SIZE,
|
||||
value
|
||||
};
|
||||
}
|
||||
|
||||
export function increaseIndentation() {
|
||||
export function setIndentation(value) {
|
||||
return {
|
||||
type: ActionTypes.INCREASE_INDENTATION
|
||||
};
|
||||
}
|
||||
|
||||
export function decreaseIndentation() {
|
||||
return {
|
||||
type: ActionTypes.DECREASE_INDENTATION
|
||||
};
|
||||
}
|
||||
|
||||
export function updateIndentation(event) {
|
||||
const value = event.target.value;
|
||||
return {
|
||||
type: ActionTypes.UPDATE_INDENTATION,
|
||||
type: ActionTypes.SET_INDENTATION,
|
||||
value
|
||||
};
|
||||
}
|
||||
|
|
|
@ -9,18 +9,27 @@ const exitUrl = require('../../../images/exit.svg');
|
|||
const plusUrl = require('../../../images/plus.svg');
|
||||
const minusUrl = require('../../../images/minus.svg');
|
||||
|
||||
function Preferences(props) {
|
||||
class Preferences extends React.Component {
|
||||
handleUpdateFont(event) {
|
||||
this.props.setFontSize(parseInt(event.target.value, 10));
|
||||
}
|
||||
|
||||
handleUpdateIndentation(event) {
|
||||
this.props.setIndentation(parseInt(event.target.value, 10));
|
||||
}
|
||||
|
||||
render() {
|
||||
const preferencesContainerClass = classNames({
|
||||
preferences: true,
|
||||
'preferences--selected': props.isVisible
|
||||
'preferences--selected': this.props.isVisible
|
||||
});
|
||||
let preferencesTabOptionClass = classNames({
|
||||
preference__option: true,
|
||||
'preference__option--selected': props.isTabIndent
|
||||
'preference__option--selected': this.props.isTabIndent
|
||||
});
|
||||
let preferencesSpaceOptionClass = classNames({
|
||||
preference__option: true,
|
||||
'preference__option--selected': !props.isTabIndent
|
||||
'preference__option--selected': !this.props.isTabIndent
|
||||
});
|
||||
return (
|
||||
<section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
|
||||
|
@ -28,7 +37,7 @@ function Preferences(props) {
|
|||
<h2 className="preferences__title">Preferences</h2>
|
||||
<button
|
||||
className="preferences__exit-button"
|
||||
onClick={props.closePreferences}
|
||||
onClick={this.props.closePreferences}
|
||||
title="exit"
|
||||
aria-label="exit preferences"
|
||||
>
|
||||
|
@ -39,8 +48,8 @@ function Preferences(props) {
|
|||
<div className="preference">
|
||||
<h4 className="preference__title">Text Size</h4>
|
||||
<button
|
||||
className="preference__plus-button"
|
||||
onClick={props.decreaseFont}
|
||||
className="preference__minus-button"
|
||||
onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
|
||||
aria-label="decrease font size"
|
||||
>
|
||||
<InlineSVG src={minusUrl} alt="Decrease Font Size" />
|
||||
|
@ -51,13 +60,13 @@ function Preferences(props) {
|
|||
aria-live="status"
|
||||
aria-live="polite"
|
||||
role="status"
|
||||
value={props.fontSize}
|
||||
onChange={props.updateFont}
|
||||
value={this.props.fontSize}
|
||||
onChange={this.handleUpdateFont}
|
||||
>
|
||||
</input>
|
||||
<button
|
||||
className="preference__minus-button"
|
||||
onClick={props.increaseFont}
|
||||
className="preference__plus-button"
|
||||
onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
|
||||
aria-label="increase font size"
|
||||
>
|
||||
<InlineSVG src={plusUrl} alt="Increase Font Size" />
|
||||
|
@ -68,8 +77,8 @@ function Preferences(props) {
|
|||
<div className="preference">
|
||||
<h4 className="preference__title">Indentation Amount</h4>
|
||||
<button
|
||||
className="preference__plus-button"
|
||||
onClick={props.decreaseIndentation}
|
||||
className="preference__minus-button"
|
||||
onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
|
||||
aria-label="decrease indentation amount"
|
||||
>
|
||||
<InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
|
||||
|
@ -80,25 +89,26 @@ function Preferences(props) {
|
|||
aria-live="status"
|
||||
aria-live="polite"
|
||||
role="status"
|
||||
value={props.indentationAmount}
|
||||
onChange={props.updateIndentation}
|
||||
value={this.props.indentationAmount}
|
||||
onChange={this.handleUpdateIndentation}
|
||||
>
|
||||
</input>
|
||||
<button
|
||||
className="preference__minus-button"
|
||||
onClick={props.increaseIndentation}
|
||||
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={props.indentWithSpace} aria-label="indentation with space">Spaces</button>
|
||||
<button className={preferencesTabOptionClass} onClick={props.indentWithTab} aria-label="indentation with tab">Tabs</button>
|
||||
<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) {
|
||||
|
@ -114,17 +124,13 @@ function mapDispatchToProps(dispatch) {
|
|||
Preferences.propTypes = {
|
||||
isVisible: PropTypes.bool.isRequired,
|
||||
closePreferences: PropTypes.func.isRequired,
|
||||
decreaseFont: PropTypes.func.isRequired,
|
||||
updateFont: PropTypes.func.isRequired,
|
||||
fontSize: PropTypes.number.isRequired,
|
||||
increaseFont: PropTypes.func.isRequired,
|
||||
indentationAmount: PropTypes.number.isRequired,
|
||||
decreaseIndentation: PropTypes.func.isRequired,
|
||||
increaseIndentation: PropTypes.func.isRequired,
|
||||
updateIndentation: PropTypes.func.isRequired,
|
||||
setIndentation: PropTypes.func.isRequired,
|
||||
indentWithSpace: 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);
|
||||
|
|
|
@ -8,30 +8,10 @@ const initialState = {
|
|||
|
||||
const preferences = (state = initialState, action) => {
|
||||
switch (action.type) {
|
||||
case ActionTypes.INCREASE_FONTSIZE:
|
||||
return Object.assign({}, state, {
|
||||
fontSize: state.fontSize + 2
|
||||
});
|
||||
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.SET_FONT_SIZE:
|
||||
return Object.assign({}, state, { fontSize: action.value });
|
||||
case ActionTypes.SET_INDENTATION:
|
||||
return Object.assign({}, state, { indentationAmount: action.value });
|
||||
case ActionTypes.INDENT_WITH_TAB:
|
||||
return Object.assign({}, state, {
|
||||
isTabIndent: true
|
||||
|
|
|
@ -9,7 +9,12 @@ const userSchema = new Schema({
|
|||
github: { type: String },
|
||||
email: { type: String, unique: true },
|
||||
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 });
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue