Skip to content

Commit bfcd906

Browse files
viankakrisnaCompuIves
viankakrisna
authored and
CompuIves
committed
simplify preferences store (codesandbox#80)
* simplify preferences store * remove unused thunks * use new preference method for prettier * use new preference method for preview
1 parent 953dabd commit bfcd906

File tree

6 files changed

+137
-265
lines changed

6 files changed

+137
-265
lines changed

‎src/app/containers/Preferences/CodeFormatting/Prettier.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ class Prettier extends React.PureComponent {
3333

3434
setPrettierOption = key => val => {
3535
this.setState({ [key]: val }, () => {
36-
this.props.preferencesActions.setPrettierConfig(this.state);
36+
this.props.preferencesActions.setPreference({
37+
prettierConfig: this.state,
38+
});
3739
});
3840
};
3941

‎src/app/containers/Preferences/EditorPageSettings/EditorSettings/Preferences.js‎

Lines changed: 57 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
33
import { bindActionCreators } from 'redux';
44
import { preferencesSelector } from 'app/store/preferences/selectors';
55
import preferencesActionCreators from 'app/store/preferences/actions';
6+
67
import {
78
Container,
89
PreferenceContainer,
@@ -23,57 +24,61 @@ const mapStateToProps = state => ({
2324
preferences: preferencesSelector(state),
2425
});
2526

26-
const Preferences = ({ preferences, preferencesActions }: Props) =>
27-
<Container>
28-
<PreferenceContainer>
29-
<PaddedPreference
30-
title="Autocomplete"
31-
type="boolean"
32-
value={preferences.autoCompleteEnabled}
33-
setValue={preferencesActions.setAutoCompletePreference}
34-
/>
35-
<Description>Show autocompletions while you type.</Description>
36-
<Rule />
37-
<PaddedPreference
38-
title="Enable linter"
39-
type="boolean"
40-
tooltip="Made possible by eslint"
41-
value={preferences.lintEnabled}
42-
setValue={preferencesActions.setLintPreference}
43-
/>
44-
<Description>Use eslint to find syntax and style errors.</Description>
45-
<Rule />
46-
<PaddedPreference
47-
title="Prettify on save"
48-
type="boolean"
49-
tooltip="Made possible by Prettier"
50-
value={preferences.prettifyOnSaveEnabled}
51-
setValue={preferencesActions.setPrettifyOnSavePreference}
52-
/>
53-
<Description>Format all code on save with prettier.</Description>
54-
<Rule />
55-
<PaddedPreference
56-
title="VIM mode"
57-
type="boolean"
58-
value={preferences.vimMode}
59-
setValue={preferencesActions.setVimPreference}
60-
/>
61-
<Rule />
62-
<PaddedPreference
63-
title="Editor font size"
64-
type="number"
65-
value={preferences.fontSize}
66-
setValue={preferencesActions.setFontSizePreference}
67-
/>
68-
<Rule />
69-
<PaddedPreference
70-
title="Editor font family"
71-
type="string"
72-
placeholder="Source Code Pro"
73-
value={preferences.fontFamily}
74-
setValue={preferencesActions.setFontFamilyPreference}
75-
/>
76-
</PreferenceContainer>
77-
</Container>;
27+
const Preferences = ({ preferences, preferencesActions }: Props) => {
28+
const bindValue = name => ({
29+
value: preferences[name],
30+
setValue: value =>
31+
preferencesActions.setPreference({
32+
[name]: value,
33+
}),
34+
});
35+
return (
36+
<Container>
37+
<PreferenceContainer>
38+
<PaddedPreference
39+
title="Autocomplete"
40+
type="boolean"
41+
{...bindValue('autoCompleteEnabled')}
42+
/>
43+
<Description>Show autocompletions while you type.</Description>
44+
<Rule />
45+
<PaddedPreference
46+
title="Enable linter"
47+
type="boolean"
48+
tooltip="Made possible by eslint"
49+
{...bindValue('lintEnabled')}
50+
/>
51+
<Description>Use eslint to find syntax and style errors.</Description>
52+
<Rule />
53+
<PaddedPreference
54+
title="Prettify on save"
55+
type="boolean"
56+
tooltip="Made possible by Prettier"
57+
{...bindValue('prettifyOnSaveEnabled')}
58+
/>
59+
<Description>Format all code on save with prettier.</Description>
60+
<Rule />
61+
<PaddedPreference
62+
title="VIM mode"
63+
type="boolean"
64+
{...bindValue('vimMode')}
65+
/>
66+
<Rule />
67+
<PaddedPreference
68+
title="Editor font size"
69+
type="number"
70+
{...bindValue('fontSize')}
71+
/>
72+
<Rule />
73+
<PaddedPreference
74+
title="Editor font family"
75+
type="string"
76+
placeholder="Source Code Pro"
77+
{...bindValue('fontFamily')}
78+
/>
79+
</PreferenceContainer>
80+
</Container>
81+
);
82+
};
7883

7984
export default connect(mapStateToProps, mapDispatchToProps)(Preferences);

‎src/app/containers/Preferences/EditorPageSettings/PreviewSettings/Preferences.js‎

Lines changed: 39 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -24,37 +24,44 @@ const mapDispatchToProps = dispatch => ({
2424
const mapStateToProps = state => ({
2525
preferences: preferencesSelector(state),
2626
});
27-
const Preferences = ({ preferences, preferencesActions }: Props) =>
28-
<Container>
29-
<PreferenceContainer>
30-
<PaddedPreference
31-
title="Preview on edit"
32-
type="boolean"
33-
value={preferences.livePreviewEnabled}
34-
setValue={preferencesActions.setLivePreview}
35-
tooltip="Only update on save"
36-
/>
37-
<Description>Preview the latest code without saving.</Description>
38-
<Rule />
39-
<PaddedPreference
40-
title="Clear console"
41-
type="boolean"
42-
value={preferences.clearConsoleEnabled}
43-
setValue={preferencesActions.setClearConsolePreference}
44-
tooltip="Clear console when executing"
45-
/>
46-
<Description>
47-
Clear your developer console between every execution.
48-
</Description>
49-
<Rule />
50-
<PaddedPreference
51-
title="Instant preview"
52-
type="boolean"
53-
value={preferences.instantPreviewEnabled}
54-
setValue={preferencesActions.setInstantPreview}
55-
/>
56-
<Description>Show preview on every keypress.</Description>
57-
</PreferenceContainer>
58-
</Container>;
27+
const Preferences = ({ preferences, preferencesActions }: Props) => {
28+
const bindValue = name => ({
29+
value: preferences[name],
30+
setValue: value =>
31+
preferencesActions.setPreference({
32+
[name]: value,
33+
}),
34+
});
35+
return (
36+
<Container>
37+
<PreferenceContainer>
38+
<PaddedPreference
39+
title="Preview on edit"
40+
type="boolean"
41+
{...bindValue('livePreviewEnabled')}
42+
tooltip="Only update on save"
43+
/>
44+
<Description>Preview the latest code without saving.</Description>
45+
<Rule />
46+
<PaddedPreference
47+
title="Clear console"
48+
type="boolean"
49+
{...bindValue('clearConsoleEnabled')}
50+
tooltip="Clear console when executing"
51+
/>
52+
<Description>
53+
Clear your developer console between every execution.
54+
</Description>
55+
<Rule />
56+
<PaddedPreference
57+
title="Instant preview"
58+
type="boolean"
59+
{...bindValue('instantPreviewEnabled')}
60+
/>
61+
<Description>Show preview on every keypress.</Description>
62+
</PreferenceContainer>
63+
</Container>
64+
);
65+
};
5966

6067
export default connect(mapStateToProps, mapDispatchToProps)(Preferences);

‎src/app/store/preferences/actions.js‎

Lines changed: 5 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,6 @@
11
import store from 'store/dist/store.modern';
22

3-
import {
4-
VIM_MODE,
5-
AUTO_COMPLETE,
6-
LIVE_PREVIEW,
7-
PRETTIFY_ON_SAVE,
8-
LINT_ENABLED,
9-
INSTANT_PREVIEW,
10-
FONT_SIZE,
11-
FONT_FAMILY,
12-
CLEAR_CONSOLE,
13-
PRETTIER_CONFIG,
14-
} from './keys';
15-
16-
export const SET_PREFERENCE_AUTOCOMPLETE = 'SET_PREFERENCE_AUTOCOMPLETE';
17-
export const SET_PREFERENCE_VIM_MODE = 'SET_PREFERENCE_VIM_MODE';
18-
export const SET_PREFERENCE_FONT_SIZE = 'SET_PREFERENCE_FONT_SIZE';
19-
export const SET_PREFERENCE_FONT_FAMILY = 'SET_PREFERENCE_FONT_FAMILY';
20-
export const SET_PREFERENCE_LIVE_PREVIEW = 'SET_PREFERENCE_LIVE_PREVIEW';
21-
export const SET_PREFERENCE_PRETTIFY_ON_SAVE =
22-
'SET_PREFERENCE_PRETTIFY_ON_SAVE';
23-
export const SET_PREFERENCE_LINT = 'SET_PREFERENCE_LINT';
24-
export const SET_INSTANT_PREVIEW = 'SET_INSTANT_PREVIEW';
25-
export const SET_CLEAR_CONSOLE = 'SET_CLEAR_CONSOLE';
26-
export const SET_PRETTIER_CONFIG = 'SET_PRETTIER_CONFIG';
3+
export const SET_PREFERENCES = 'SET_PREFERENCES';
274

285
const setOption = (key, val) => {
296
try {
@@ -36,97 +13,11 @@ const setOption = (key, val) => {
3613
};
3714

3815
export default {
39-
setVimPreference: (vimMode: boolean) => (dispatch: Function) => {
40-
setOption(VIM_MODE, vimMode);
41-
42-
dispatch({
43-
type: SET_PREFERENCE_VIM_MODE,
44-
option: vimMode,
45-
});
46-
},
47-
48-
setAutoCompletePreference: (autoComplete: boolean) => (
49-
dispatch: Function,
50-
) => {
51-
setOption(AUTO_COMPLETE, autoComplete);
52-
53-
dispatch({
54-
type: SET_PREFERENCE_AUTOCOMPLETE,
55-
option: autoComplete,
56-
});
57-
},
58-
59-
setLivePreview: (livePreview: boolean) => (dispatch: Function) => {
60-
setOption(LIVE_PREVIEW, livePreview);
61-
62-
dispatch({
63-
type: SET_PREFERENCE_LIVE_PREVIEW,
64-
option: livePreview,
65-
});
66-
},
67-
68-
setPrettifyOnSavePreference: (prettify: boolean) => (dispatch: Function) => {
69-
setOption(PRETTIFY_ON_SAVE, prettify);
70-
71-
dispatch({
72-
type: SET_PREFERENCE_PRETTIFY_ON_SAVE,
73-
option: prettify,
74-
});
75-
},
76-
77-
setClearConsolePreference: (clearConsole: boolean) => (
78-
dispatch: Function,
79-
) => {
80-
setOption(CLEAR_CONSOLE, clearConsole);
81-
82-
dispatch({
83-
type: SET_CLEAR_CONSOLE,
84-
option: clearConsole,
85-
});
86-
},
87-
88-
setLintPreference: (lint: boolean) => (dispatch: Function) => {
89-
setOption(LINT_ENABLED, lint);
90-
91-
dispatch({
92-
type: SET_PREFERENCE_LINT,
93-
option: lint,
94-
});
95-
},
96-
97-
setInstantPreview: (instantPreview: boolean) => (dispatch: Function) => {
98-
setOption(INSTANT_PREVIEW, instantPreview);
99-
100-
dispatch({
101-
type: SET_INSTANT_PREVIEW,
102-
option: instantPreview,
103-
});
104-
},
105-
106-
setFontSizePreference: (fontSize: number) => (dispatch: Function) => {
107-
setOption(FONT_SIZE, fontSize);
108-
109-
dispatch({
110-
type: SET_PREFERENCE_FONT_SIZE,
111-
option: fontSize,
112-
});
113-
},
114-
115-
setFontFamilyPreference: (fontFamily: string) => (dispatch: Function) => {
116-
setOption(FONT_FAMILY, fontFamily);
117-
118-
dispatch({
119-
type: SET_PREFERENCE_FONT_FAMILY,
120-
option: fontFamily,
121-
});
122-
},
123-
124-
setPrettierConfig: (config: Object) => (dispatch: Function) => {
125-
setOption(PRETTIER_CONFIG, config);
126-
16+
setPreference: (preferences: Object) => (dispatch: Function) => {
17+
Object.keys(preferences).forEach(key => setOption(key, preferences[key]));
12718
dispatch({
128-
type: SET_PRETTIER_CONFIG,
129-
option: config,
19+
type: SET_PREFERENCES,
20+
preferences,
13021
});
13122
},
13223
};

‎src/app/store/preferences/keys.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
export const AUTO_COMPLETE = 'settings.autocomplete';
2-
export const VIM_MODE = 'settings.vimmode';
3-
export const LIVE_PREVIEW = 'settings.livepreview';
4-
export const INSTANT_PREVIEW = 'settings.instantpreview';
5-
export const PRETTIFY_ON_SAVE = 'settings.prettifyonsave';
6-
export const LINT_ENABLED = 'settings.lintenabled';
7-
export const FONT_SIZE = 'settings.fontsize';
8-
export const FONT_FAMILY = 'settings.fontfamily';
9-
export const CLEAR_CONSOLE = 'settings.clearconsole';
10-
export const PRETTIER_CONFIG = 'settings.prettierconfig';
1+
export const autoCompleteEnabled = 'settings.autocomplete';
2+
export const vimMode = 'settings.vimmode';
3+
export const livePreviewEnabled = 'settings.livepreview';
4+
export const instantPreviewEnabled = 'settings.instantpreview';
5+
export const prettifyOnSaveEnabled = 'settings.prettifyonsave';
6+
export const prettierConfig = 'settings.prettierconfig';
7+
export const lintEnabled = 'settings.lintenabled';
8+
export const fontSize = 'settings.fontsize';
9+
export const fontFamily = 'settings.fontfamily';
10+
export const clearConsoleEnabled = 'settings.clearconsole';

0 commit comments

Comments
 (0)