Skip to content

Commit

Permalink
simplify preferences store (#80)
Browse files Browse the repository at this point in the history 
* simplify preferences store

* remove unused thunks

* use new preference method for prettier

* use new preference method for preview
  • Loading branch information
@viankakrisna @CompuIves
viankakrisna authored and CompuIves committed Jul 23, 2017
1 parent 953dabd commit bfcd906
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 265 deletions.
4 changes: 3 additions & 1 deletion src/app/containers/Preferences/CodeFormatting/Prettier.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@ class Prettier extends React.PureComponent {

setPrettierOption = key => val => {
this.setState({ [key]: val }, () => {
this.props.preferencesActions.setPrettierConfig(this.state);
this.props.preferencesActions.setPreference({
prettierConfig: this.state,
});
});
};

Expand Down
109 changes: 57 additions & 52 deletions src/app/containers/Preferences/EditorPageSettings/EditorSettings/Preferences.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { preferencesSelector } from 'app/store/preferences/selectors';
import preferencesActionCreators from 'app/store/preferences/actions';

import {
Container,
PreferenceContainer,
Expand All @@ -23,57 +24,61 @@ const mapStateToProps = state => ({
preferences: preferencesSelector(state),
});

const Preferences = ({ preferences, preferencesActions }: Props) =>
<Container>
<PreferenceContainer>
<PaddedPreference
title="Autocomplete"
type="boolean"
value={preferences.autoCompleteEnabled}
setValue={preferencesActions.setAutoCompletePreference}
/>
<Description>Show autocompletions while you type.</Description>
<Rule />
<PaddedPreference
title="Enable linter"
type="boolean"
tooltip="Made possible by eslint"
value={preferences.lintEnabled}
setValue={preferencesActions.setLintPreference}
/>
<Description>Use eslint to find syntax and style errors.</Description>
<Rule />
<PaddedPreference
title="Prettify on save"
type="boolean"
tooltip="Made possible by Prettier"
value={preferences.prettifyOnSaveEnabled}
setValue={preferencesActions.setPrettifyOnSavePreference}
/>
<Description>Format all code on save with prettier.</Description>
<Rule />
<PaddedPreference
title="VIM mode"
type="boolean"
value={preferences.vimMode}
setValue={preferencesActions.setVimPreference}
/>
<Rule />
<PaddedPreference
title="Editor font size"
type="number"
value={preferences.fontSize}
setValue={preferencesActions.setFontSizePreference}
/>
<Rule />
<PaddedPreference
title="Editor font family"
type="string"
placeholder="Source Code Pro"
value={preferences.fontFamily}
setValue={preferencesActions.setFontFamilyPreference}
/>
</PreferenceContainer>
</Container>;
const Preferences = ({ preferences, preferencesActions }: Props) => {
const bindValue = name => ({
value: preferences[name],
setValue: value =>
preferencesActions.setPreference({
[name]: value,
}),
});
return (
<Container>
<PreferenceContainer>
<PaddedPreference
title="Autocomplete"
type="boolean"
{...bindValue('autoCompleteEnabled')}
/>
<Description>Show autocompletions while you type.</Description>
<Rule />
<PaddedPreference
title="Enable linter"
type="boolean"
tooltip="Made possible by eslint"
{...bindValue('lintEnabled')}
/>
<Description>Use eslint to find syntax and style errors.</Description>
<Rule />
<PaddedPreference
title="Prettify on save"
type="boolean"
tooltip="Made possible by Prettier"
{...bindValue('prettifyOnSaveEnabled')}
/>
<Description>Format all code on save with prettier.</Description>
<Rule />
<PaddedPreference
title="VIM mode"
type="boolean"
{...bindValue('vimMode')}
/>
<Rule />
<PaddedPreference
title="Editor font size"
type="number"
{...bindValue('fontSize')}
/>
<Rule />
<PaddedPreference
title="Editor font family"
type="string"
placeholder="Source Code Pro"
{...bindValue('fontFamily')}
/>
</PreferenceContainer>
</Container>
);
};

export default connect(mapStateToProps, mapDispatchToProps)(Preferences);
71 changes: 39 additions & 32 deletions src/app/containers/Preferences/EditorPageSettings/PreviewSettings/Preferences.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,37 +24,44 @@ const mapDispatchToProps = dispatch => ({
const mapStateToProps = state => ({
preferences: preferencesSelector(state),
});
const Preferences = ({ preferences, preferencesActions }: Props) =>
<Container>
<PreferenceContainer>
<PaddedPreference
title="Preview on edit"
type="boolean"
value={preferences.livePreviewEnabled}
setValue={preferencesActions.setLivePreview}
tooltip="Only update on save"
/>
<Description>Preview the latest code without saving.</Description>
<Rule />
<PaddedPreference
title="Clear console"
type="boolean"
value={preferences.clearConsoleEnabled}
setValue={preferencesActions.setClearConsolePreference}
tooltip="Clear console when executing"
/>
<Description>
Clear your developer console between every execution.
</Description>
<Rule />
<PaddedPreference
title="Instant preview"
type="boolean"
value={preferences.instantPreviewEnabled}
setValue={preferencesActions.setInstantPreview}
/>
<Description>Show preview on every keypress.</Description>
</PreferenceContainer>
</Container>;
const Preferences = ({ preferences, preferencesActions }: Props) => {
const bindValue = name => ({
value: preferences[name],
setValue: value =>
preferencesActions.setPreference({
[name]: value,
}),
});
return (
<Container>
<PreferenceContainer>
<PaddedPreference
title="Preview on edit"
type="boolean"
{...bindValue('livePreviewEnabled')}
tooltip="Only update on save"
/>
<Description>Preview the latest code without saving.</Description>
<Rule />
<PaddedPreference
title="Clear console"
type="boolean"
{...bindValue('clearConsoleEnabled')}
tooltip="Clear console when executing"
/>
<Description>
Clear your developer console between every execution.
</Description>
<Rule />
<PaddedPreference
title="Instant preview"
type="boolean"
{...bindValue('instantPreviewEnabled')}
/>
<Description>Show preview on every keypress.</Description>
</PreferenceContainer>
</Container>
);
};

export default connect(mapStateToProps, mapDispatchToProps)(Preferences);
119 changes: 5 additions & 114 deletions src/app/store/preferences/actions.js
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,6 @@
import store from 'store/dist/store.modern';

import {
VIM_MODE,
AUTO_COMPLETE,
LIVE_PREVIEW,
PRETTIFY_ON_SAVE,
LINT_ENABLED,
INSTANT_PREVIEW,
FONT_SIZE,
FONT_FAMILY,
CLEAR_CONSOLE,
PRETTIER_CONFIG,
} from './keys';

export const SET_PREFERENCE_AUTOCOMPLETE = 'SET_PREFERENCE_AUTOCOMPLETE';
export const SET_PREFERENCE_VIM_MODE = 'SET_PREFERENCE_VIM_MODE';
export const SET_PREFERENCE_FONT_SIZE = 'SET_PREFERENCE_FONT_SIZE';
export const SET_PREFERENCE_FONT_FAMILY = 'SET_PREFERENCE_FONT_FAMILY';
export const SET_PREFERENCE_LIVE_PREVIEW = 'SET_PREFERENCE_LIVE_PREVIEW';
export const SET_PREFERENCE_PRETTIFY_ON_SAVE =
'SET_PREFERENCE_PRETTIFY_ON_SAVE';
export const SET_PREFERENCE_LINT = 'SET_PREFERENCE_LINT';
export const SET_INSTANT_PREVIEW = 'SET_INSTANT_PREVIEW';
export const SET_CLEAR_CONSOLE = 'SET_CLEAR_CONSOLE';
export const SET_PRETTIER_CONFIG = 'SET_PRETTIER_CONFIG';
export const SET_PREFERENCES = 'SET_PREFERENCES';

const setOption = (key, val) => {
try {
Expand All @@ -36,97 +13,11 @@ const setOption = (key, val) => {
};

export default {
setVimPreference: (vimMode: boolean) => (dispatch: Function) => {
setOption(VIM_MODE, vimMode);

dispatch({
type: SET_PREFERENCE_VIM_MODE,
option: vimMode,
});
},

setAutoCompletePreference: (autoComplete: boolean) => (
dispatch: Function,
) => {
setOption(AUTO_COMPLETE, autoComplete);

dispatch({
type: SET_PREFERENCE_AUTOCOMPLETE,
option: autoComplete,
});
},

setLivePreview: (livePreview: boolean) => (dispatch: Function) => {
setOption(LIVE_PREVIEW, livePreview);

dispatch({
type: SET_PREFERENCE_LIVE_PREVIEW,
option: livePreview,
});
},

setPrettifyOnSavePreference: (prettify: boolean) => (dispatch: Function) => {
setOption(PRETTIFY_ON_SAVE, prettify);

dispatch({
type: SET_PREFERENCE_PRETTIFY_ON_SAVE,
option: prettify,
});
},

setClearConsolePreference: (clearConsole: boolean) => (
dispatch: Function,
) => {
setOption(CLEAR_CONSOLE, clearConsole);

dispatch({
type: SET_CLEAR_CONSOLE,
option: clearConsole,
});
},

setLintPreference: (lint: boolean) => (dispatch: Function) => {
setOption(LINT_ENABLED, lint);

dispatch({
type: SET_PREFERENCE_LINT,
option: lint,
});
},

setInstantPreview: (instantPreview: boolean) => (dispatch: Function) => {
setOption(INSTANT_PREVIEW, instantPreview);

dispatch({
type: SET_INSTANT_PREVIEW,
option: instantPreview,
});
},

setFontSizePreference: (fontSize: number) => (dispatch: Function) => {
setOption(FONT_SIZE, fontSize);

dispatch({
type: SET_PREFERENCE_FONT_SIZE,
option: fontSize,
});
},

setFontFamilyPreference: (fontFamily: string) => (dispatch: Function) => {
setOption(FONT_FAMILY, fontFamily);

dispatch({
type: SET_PREFERENCE_FONT_FAMILY,
option: fontFamily,
});
},

setPrettierConfig: (config: Object) => (dispatch: Function) => {
setOption(PRETTIER_CONFIG, config);

setPreference: (preferences: Object) => (dispatch: Function) => {
Object.keys(preferences).forEach(key => setOption(key, preferences[key]));
dispatch({
type: SET_PRETTIER_CONFIG,
option: config,
type: SET_PREFERENCES,
preferences,
});
},
};
20 changes: 10 additions & 10 deletions src/app/store/preferences/keys.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
export const AUTO_COMPLETE = 'settings.autocomplete';
export const VIM_MODE = 'settings.vimmode';
export const LIVE_PREVIEW = 'settings.livepreview';
export const INSTANT_PREVIEW = 'settings.instantpreview';
export const PRETTIFY_ON_SAVE = 'settings.prettifyonsave';
export const LINT_ENABLED = 'settings.lintenabled';
export const FONT_SIZE = 'settings.fontsize';
export const FONT_FAMILY = 'settings.fontfamily';
export const CLEAR_CONSOLE = 'settings.clearconsole';
export const PRETTIER_CONFIG = 'settings.prettierconfig';
export const autoCompleteEnabled = 'settings.autocomplete';
export const vimMode = 'settings.vimmode';
export const livePreviewEnabled = 'settings.livepreview';
export const instantPreviewEnabled = 'settings.instantpreview';
export const prettifyOnSaveEnabled = 'settings.prettifyonsave';
export const prettierConfig = 'settings.prettierconfig';
export const lintEnabled = 'settings.lintenabled';
export const fontSize = 'settings.fontsize';
export const fontFamily = 'settings.fontfamily';
export const clearConsoleEnabled = 'settings.clearconsole';
Loading

0 comments on commit bfcd906

Please sign in to comment.