Skip to content

Commit d14ac0f

Browse files
ErrornameErrorname
authored
🏗️ Mini-refacto settings (#241)
1 parent ccd7558 commit d14ac0f

File tree

9 files changed

+335
-141
lines changed

9 files changed

+335
-141
lines changed

‎client/package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
"eslint-plugin-promise": "^4.0.1",
6363
"eslint-plugin-standard": "^4.0.0",
6464
"husky": "^3.0.2",
65-
"node-sass": "^4.12.0",
65+
"node-sass": "^4.13.0",
6666
"prettier": "^1.18.2",
6767
"pretty-quick": "^1.11.1",
6868
"webpack-cli": "^3.1.2"

‎client/src/scenes/Settings/Settings.jsx

Lines changed: 8 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,14 @@ import { alert, useIntl } from 'services'
55

66
import { useConfiguration } from 'contexts'
77

8-
import { Tabs, Tab, Input, Checkbox, Button, PairInputList, Icon, Radio } from 'components'
8+
import { Tabs, Button } from 'components'
99
import Card, { CardTitle, CardText, CardActions } from 'components/Card'
1010

11-
import { onListChangeActions } from 'helpers/onListChange'
12-
13-
import { TagsEditor } from './components'
14-
1511
import { reducer, serializeTags, synonymsToList, listToSynonyms } from './helpers'
1612

17-
import { REGENERATE_SLACK_COMMAND_KEY, UPDATE_CONFIGURATION } from './queries'
13+
import { UPDATE_CONFIGURATION } from './queries'
14+
15+
import { General, Tags, Synonyms, Integrations } from './scenes'
1816

1917
import './Settings.scss'
2018

@@ -31,11 +29,9 @@ const Settings = ({ configuration: conf }) => {
3129
const configuration = useConfiguration()
3230

3331
const [loading, setLoading] = useState(false)
34-
const [slackHookLoading, setSlackHookLoading] = useState(false)
3532

3633
const [state, dispatch] = useReducer(reducer, initState(conf))
3734

38-
const [mutateSlackCommandKey] = useMutation(REGENERATE_SLACK_COMMAND_KEY)
3935
const [mutate] = useMutation(UPDATE_CONFIGURATION)
4036

4137
useEffect(() => {
@@ -45,20 +41,6 @@ const Settings = ({ configuration: conf }) => {
4541
})
4642
}, [conf])
4743

48-
const generateSlackHook = () => {
49-
setSlackHookLoading(true)
50-
51-
mutateSlackCommandKey()
52-
.then(({ data }) =>
53-
dispatch({
54-
type: 'change_slack_commandkey',
55-
data: data.regenerateSlackCommandKey.slackCommandKey
56-
})
57-
)
58-
.catch(alert.pushDefaultError)
59-
.finally(() => setSlackHookLoading(false))
60-
}
61-
6244
const onSave = () => {
6345
setLoading(true)
6446
mutate({
@@ -99,116 +81,10 @@ const Settings = ({ configuration: conf }) => {
9981
</CardTitle>
10082
<CardText>
10183
<Tabs>
102-
<Tab label={intl('settings.general.tab')}>
103-
<h2>{intl('settings.general.title.title')}</h2>
104-
<br />
105-
<div className="inline-input">
106-
<Icon material="home" />
107-
<Input
108-
value={state.title}
109-
onChange={e => dispatch({ type: 'change_title', data: e.target.value })}
110-
placeholder={intl('settings.general.title.placeholder')}
111-
disabled={loading}
112-
/>
113-
</div>
114-
<br />
115-
<hr />
116-
<h2>{intl('settings.general.domains.title')}</h2>
117-
<br />
118-
<div className="inline-input">
119-
<Icon material="domain" />
120-
<Input
121-
style={{ flex: 1 }}
122-
value={state.authorizedDomains}
123-
onChange={e => dispatch({ type: 'change_domains', data: e.target.value })}
124-
placeholder={intl('settings.general.domains.placeholder')}
125-
disabled={loading}
126-
/>
127-
</div>
128-
<br />
129-
<hr />
130-
<h2>{intl('settings.general.bug_reporting.title')}</h2>
131-
<br />
132-
<div style={{ marginLeft: '1rem' }}>
133-
<Radio.Group
134-
name="bug_reporting"
135-
selected={state.bugReporting}
136-
onChange={data => dispatch({ type: 'change_bug_reporting', data })}
137-
disabled={loading}
138-
>
139-
<Radio label={intl('settings.general.bug_reporting.mail')} value="MAIL" />
140-
<Radio label={intl('settings.general.bug_reporting.github')} value="GITHUB" />
141-
</Radio.Group>
142-
</div>
143-
</Tab>
144-
<Tab label={intl('settings.tags.tab')}>
145-
<TagsEditor categories={state.tagCategories} onChange={onTagsChange} />
146-
</Tab>
147-
<Tab label={intl('settings.synonyms.tab')}>
148-
<PairInputList
149-
pairs={state.synonyms}
150-
options={{
151-
icons: { line: 'loop', value: 'list' },
152-
labels: intl('settings.synonyms.labels')
153-
}}
154-
actions={onListChangeActions('synonyms', dispatch)}
155-
disabled={loading}
156-
/>
157-
</Tab>
158-
<Tab label={intl('settings.integrations.tab')}>
159-
<h2>{intl('settings.integrations.workplace.title')}</h2>
160-
<br />
161-
<div style={{ marginLeft: '1rem' }}>
162-
<Checkbox
163-
label={intl('settings.integrations.workplace.label')}
164-
checked={state.workplaceSharing}
165-
onChange={e =>
166-
dispatch({
167-
type: 'toggle_workplace',
168-
data: e.target.checked
169-
})
170-
}
171-
disabled={loading}
172-
/>
173-
</div>
174-
<br />
175-
<hr />
176-
<h2>{intl('settings.integrations.slack.title')}</h2>
177-
<br />
178-
<div className="inline-input" style={{ marginTop: '1em' }}>
179-
<i style={{ marginLeft: '1em' }}>{intl('settings.integrations.slack.channel')}</i>
180-
<Input
181-
value={state.slackChannelHook || ''}
182-
style={{ flex: 1, marginRight: '1rem' }}
183-
onChange={e =>
184-
dispatch({ type: 'change_slack_channelhook', data: e.target.value })
185-
}
186-
/>
187-
</div>
188-
<div className="inline-input" style={{ marginTop: '1em' }}>
189-
<i style={{ marginLeft: '1em' }}>{intl('settings.integrations.slack.command')}</i>
190-
<Input
191-
value={
192-
state.slackCommandKey
193-
? `https://${window.location.host}/rest/integration/slack/${state.slackCommandKey}`
194-
: ''
195-
}
196-
disabled
197-
small
198-
style={{ flex: 1, marginLeft: '1rem', marginRight: '1rem' }}
199-
/>
200-
<Button
201-
label={
202-
(state.slackCommandKey
203-
? intl('settings.integrations.slack.regenerate')
204-
: intl('settings.integrations.slack.generate')) + ' URL'
205-
}
206-
link
207-
loading={slackHookLoading}
208-
onClick={generateSlackHook}
209-
/>
210-
</div>
211-
</Tab>
84+
<General state={state} dispatch={dispatch} loading={loading} />
85+
<Tags state={state} onTagsChange={onTagsChange} />
86+
<Synonyms state={state} dispatch={dispatch} loading={loading} />
87+
<Integrations state={state} dispatch={dispatch} loading={loading} />
21288
</Tabs>
21389
</CardText>
21490
<CardActions>

‎client/src/scenes/Settings/scenes/General.jsx

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React from 'react'
2+
3+
import { useIntl } from 'services'
4+
5+
import { Tab, Input, Icon, Radio } from 'components'
6+
7+
const General = ({ state, dispatch, loading }) => {
8+
const intl = useIntl(General)
9+
10+
return (
11+
<Tab label={intl('tab')}>
12+
<h2>{intl('title.title')}</h2>
13+
<br />
14+
<div className="inline-input">
15+
<Icon material="home" />
16+
<Input
17+
value={state.title}
18+
onChange={e => dispatch({ type: 'change_title', data: e.target.value })}
19+
placeholder={intl('title.placeholder')}
20+
disabled={loading}
21+
/>
22+
</div>
23+
<br />
24+
<hr />
25+
<h2>{intl('domains.title')}</h2>
26+
<br />
27+
<div className="inline-input">
28+
<Icon material="domain" />
29+
<Input
30+
style={{ flex: 1 }}
31+
value={state.authorizedDomains}
32+
onChange={e => dispatch({ type: 'change_domains', data: e.target.value })}
33+
placeholder={intl('domains.placeholder')}
34+
disabled={loading}
35+
/>
36+
</div>
37+
<br />
38+
<hr />
39+
<h2>{intl('bug_reporting.title')}</h2>
40+
<br />
41+
<div style={{ marginLeft: '1rem' }}>
42+
<Radio.Group
43+
name="bug_reporting"
44+
selected={state.bugReporting}
45+
onChange={data => dispatch({ type: 'change_bug_reporting', data })}
46+
disabled={loading}
47+
>
48+
<Radio label={intl('bug_reporting.mail')} value="MAIL" />
49+
<Radio label={intl('bug_reporting.github')} value="GITHUB" />
50+
</Radio.Group>
51+
</div>
52+
</Tab>
53+
)
54+
}
55+
56+
General.translations = {
57+
en: {
58+
tab: 'General',
59+
title: {
60+
title: 'Title',
61+
placeholder: 'Title'
62+
},
63+
domains: {
64+
title: 'Authorized domains',
65+
placeholder: 'E.g.: zenika.com, google.com, ...'
66+
},
67+
bug_reporting: {
68+
title: 'Bug reporting',
69+
mail: 'By email',
70+
github: 'By Github'
71+
}
72+
},
73+
fr: {
74+
tab: 'Général',
75+
title: {
76+
title: 'Titre',
77+
placeholder: 'Titre'
78+
},
79+
domains: {
80+
title: 'Domaines autorisés',
81+
placeholder: 'Ex: zenika.com, google.com, ...'
82+
},
83+
bug_reporting: {
84+
title: 'Signalement de bug',
85+
mail: 'Par email',
86+
github: 'Par Github'
87+
}
88+
}
89+
}
90+
91+
export default General

0 commit comments

Comments
 (0)