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 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';
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 });
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue