MotherProject / Jaksimsamil

Go to a project
Toggle navigation Toggle navigation pinning
송용우
d6a4cca1 1 parent dedf7b26

Update Slack Setting

Expand all
Inline Side-by-side
Showing 9 changed files with 93 additions and 41 deletions
1 import React from 'react'; 1 import React from 'react';
2 import { makeStyles } from '@material-ui/core/styles'; 2 import { makeStyles } from '@material-ui/core/styles';
3 -import styled from 'styled-components';
4 -import palette from '../../lib/styles/palette';
5 import Button from '@material-ui/core/Button'; 3 import Button from '@material-ui/core/Button';
6 import TextField from '@material-ui/core/TextField'; 4 import TextField from '@material-ui/core/TextField';
7 5
......
1 import React from 'react'; 1 import React from 'react';
2 -import styled from 'styled-components';
3 -import Button from '../common/Button';
4 import palette from '../../lib/styles/palette'; 2 import palette from '../../lib/styles/palette';
5 import BJIDForm from './BJIDForm'; 3 import BJIDForm from './BJIDForm';
4 +import SlackForm from './SlackForm';
6 import { makeStyles } from '@material-ui/core/styles'; 5 import { makeStyles } from '@material-ui/core/styles';
7 import Paper from '@material-ui/core/Paper'; 6 import Paper from '@material-ui/core/Paper';
8 import Grid from '@material-ui/core/Grid'; 7 import Grid from '@material-ui/core/Grid';
9 8
10 -const SettingFormBlock = styled.div`
11 - h3 {
12 - margin: 0;
13 - color: ${palette.gray[8]};
14 - margin-bottom: 1rem;
15 - }
16 - background: ${palette.gray[2]};
17 - margin: 0 auto;
18 - display: flex;
19 - flex-direction: column;
20 -`;
21 -const StyledInput = styled.input`
22 - font-size: 1rem;
23 - border: none;
24 - border-bottom: 1px solid ${palette.gray[5]};
25 - padding-bottom: 0.5rem;
26 - outline: none;
27 - &:focus {
28 - color: $oc-teal-7;
29 - border-bottom: 1px solid ${palette.gray[7]};
30 - }
31 - & + & {
32 - margin-top: 1rem;
33 - }
34 -`;
35 -const SectionContainer = styled.div`
36 - display: flex;
37 -`;
38 -
39 const useStyles = makeStyles((theme) => ({ 9 const useStyles = makeStyles((theme) => ({
40 root: { 10 root: {
41 flexGrow: 1, 11 flexGrow: 1,
...@@ -48,7 +18,13 @@ const useStyles = makeStyles((theme) => ({ ...@@ -48,7 +18,13 @@ const useStyles = makeStyles((theme) => ({
48 }, 18 },
49 })); 19 }));
50 20
51 -const SettingForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => { 21 +const SettingForm = ({
22 + onChange,
23 + onBJIDSubmit,
24 + onSlackURLSubmit,
25 + profile,
26 + onSyncBJIDSubmit,
27 +}) => {
52 const classes = useStyles(); 28 const classes = useStyles();
53 return ( 29 return (
54 <div className={classes.root}> 30 <div className={classes.root}>
...@@ -68,6 +44,16 @@ const SettingForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => { ...@@ -68,6 +44,16 @@ const SettingForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
68 /> 44 />
69 </Paper> 45 </Paper>
70 </Grid> 46 </Grid>
47 +
48 + <Grid container item xs={12}>
49 + <Paper className={classes.paper} elevation={3}>
50 + <SlackForm
51 + profile={profile}
52 + onChange={onChange}
53 + onSlackURLSubmit={onSlackURLSubmit}
54 + />
55 + </Paper>
56 + </Grid>
71 </Grid> 57 </Grid>
72 </div> 58 </div>
73 ); 59 );
......
1 +import React from 'react';
2 +import { makeStyles } from '@material-ui/core/styles';
3 +
4 +import Button from '@material-ui/core/Button';
5 +import TextField from '@material-ui/core/TextField';
6 +
7 +const useStyles = makeStyles((theme) => ({
8 + root: {
9 + '& > *': {
10 + margin: theme.spacing(1),
11 + },
12 + },
13 +}));
14 +
15 +const SlackForm = ({ onChange, profile, onSlackURLSubmit }) => {
16 + const classes = useStyles();
17 + return (
18 + <div>
19 + <form onSubmit={onSlackURLSubmit}>
20 + <TextField
21 + name="slackWebHookURL"
22 + onChange={onChange}
23 + value={profile.slackWebHookURL}
24 + placeholder="슬랙 Webhook URL"
25 + label="슬랙 Webhook URL"
26 + />
27 + <Button variant="outlined" type="submit">
28 + 등록
29 + </Button>
30 + </form>
31 + </div>
32 + );
33 +};
34 +
35 +export default SlackForm;
1 -import React, { useEffect, useState } from 'react'; 1 +import React, { useEffect } from 'react';
2 import { useDispatch, useSelector } from 'react-redux'; 2 import { useDispatch, useSelector } from 'react-redux';
3 import { withRouter } from 'react-router-dom'; 3 import { withRouter } from 'react-router-dom';
4 import HomeForm from '../../components/home/HomeForm'; 4 import HomeForm from '../../components/home/HomeForm';
...@@ -6,7 +6,6 @@ import { getPROFILE } from '../../modules/profile'; ...@@ -6,7 +6,6 @@ import { getPROFILE } from '../../modules/profile';
6 import { analyzeBJ } from '../../lib/util/analyzeBJ'; 6 import { analyzeBJ } from '../../lib/util/analyzeBJ';
7 const HomeContainer = ({ history }) => { 7 const HomeContainer = ({ history }) => {
8 const dispatch = useDispatch(); 8 const dispatch = useDispatch();
9 - const [isLogin, setLogin] = useState(false);
10 const { user, profile } = useSelector(({ user, profile }) => ({ 9 const { user, profile } = useSelector(({ user, profile }) => ({
11 user: user.user, 10 user: user.user,
12 profile: profile, 11 profile: profile,
...@@ -15,7 +14,6 @@ const HomeContainer = ({ history }) => { ...@@ -15,7 +14,6 @@ const HomeContainer = ({ history }) => {
15 analyzeBJ(profile.solvedBJ); 14 analyzeBJ(profile.solvedBJ);
16 }, [profile.solvedBJ]); 15 }, [profile.solvedBJ]);
17 useEffect(() => { 16 useEffect(() => {
18 - setLogin(true);
19 if (user) { 17 if (user) {
20 let username = user.username; 18 let username = user.username;
21 dispatch(getPROFILE({ username })); 19 dispatch(getPROFILE({ username }));
......
1 -import React, { useEffect, useState } from 'react'; 1 +import React, { useEffect } from 'react';
2 import { useDispatch, useSelector } from 'react-redux'; 2 import { useDispatch, useSelector } from 'react-redux';
3 import { withRouter } from 'react-router-dom'; 3 import { withRouter } from 'react-router-dom';
4 import { 4 import {
...@@ -7,6 +7,7 @@ import { ...@@ -7,6 +7,7 @@ import {
7 getPROFILE, 7 getPROFILE,
8 syncBJID, 8 syncBJID,
9 initializeProfile, 9 initializeProfile,
10 + setSLACK,
10 } from '../../modules/profile'; 11 } from '../../modules/profile';
11 import SettingForm from '../../components/setting/SettingForm'; 12 import SettingForm from '../../components/setting/SettingForm';
12 13
...@@ -32,6 +33,12 @@ const SettingContainer = ({ history }) => { ...@@ -32,6 +33,12 @@ const SettingContainer = ({ history }) => {
32 let username = profile.username; 33 let username = profile.username;
33 dispatch(syncBJID({ username })); 34 dispatch(syncBJID({ username }));
34 }; 35 };
36 + const onSlackURLSubmit = (e) => {
37 + e.preventDefault();
38 + let username = profile.username;
39 + let slackWebHookURL = profile.slackWebHookURL;
40 + dispatch(setSLACK({ username, slackWebHookURL }));
41 + };
35 42
36 const onBJIDSubmit = (e) => { 43 const onBJIDSubmit = (e) => {
37 e.preventDefault(); 44 e.preventDefault();
...@@ -60,6 +67,7 @@ const SettingContainer = ({ history }) => { ...@@ -60,6 +67,7 @@ const SettingContainer = ({ history }) => {
60 onChange={onChange} 67 onChange={onChange}
61 onBJIDSubmit={onBJIDSubmit} 68 onBJIDSubmit={onBJIDSubmit}
62 onSyncBJIDSubmit={onSyncBJIDSubmit} 69 onSyncBJIDSubmit={onSyncBJIDSubmit}
70 + onSlackURLSubmit={onSlackURLSubmit}
63 profile={profile} 71 profile={profile}
64 ></SettingForm> 72 ></SettingForm>
65 ); 73 );
......
...@@ -5,7 +5,8 @@ export const setBJID = ({ username, userBJID }) => ...@@ -5,7 +5,8 @@ export const setBJID = ({ username, userBJID }) =>
5 username: username, 5 username: username,
6 userBJID: userBJID, 6 userBJID: userBJID,
7 }); 7 });
8 - 8 +export const setPROFILE = (postdata) =>
9 + client.post('api/profile/setprofile', postdata);
9 export const getPROFILE = ({ username }) => 10 export const getPROFILE = ({ username }) =>
10 client.post('api/profile/getprofile', { username }); 11 client.post('api/profile/getprofile', { username });
11 12
......
...@@ -12,6 +12,11 @@ const [SET_BJID, SET_BJID_SUCCESS, SET_BJID_FAILURE] = createRequestActionTypes( ...@@ -12,6 +12,11 @@ const [SET_BJID, SET_BJID_SUCCESS, SET_BJID_FAILURE] = createRequestActionTypes(
12 'profile/SET_BJID', 12 'profile/SET_BJID',
13 ); 13 );
14 const [ 14 const [
15 + SET_SLACK,
16 + SET_SLACK_SUCCESS,
17 + SET_SLACK_FAILURE,
18 +] = createRequestActionTypes('/profile/SET_SLACK');
19 +const [
15 GET_PROFILE, 20 GET_PROFILE,
16 GET_PROFILE_SUCCESS, 21 GET_PROFILE_SUCCESS,
17 GET_PROFILE_FAILURE, 22 GET_PROFILE_FAILURE,
...@@ -26,6 +31,13 @@ export const initializeProfile = createAction(INITIALIZE); ...@@ -26,6 +31,13 @@ export const initializeProfile = createAction(INITIALIZE);
26 export const syncBJID = createAction(SYNC_BJID, ({ username }) => ({ 31 export const syncBJID = createAction(SYNC_BJID, ({ username }) => ({
27 username, 32 username,
28 })); 33 }));
34 +export const setSLACK = createAction(
35 + SET_SLACK,
36 + ({ username, slackWebHookURL }) => ({
37 + username,
38 + slackWebHookURL,
39 + }),
40 +);
29 export const setBJID = createAction(SET_BJID, ({ username, userBJID }) => ({ 41 export const setBJID = createAction(SET_BJID, ({ username, userBJID }) => ({
30 username, 42 username,
31 userBJID, 43 userBJID,
...@@ -45,14 +57,17 @@ const initialState = { ...@@ -45,14 +57,17 @@ const initialState = {
45 solvedBJ: '', 57 solvedBJ: '',
46 friendList: [], 58 friendList: [],
47 profileError: '', 59 profileError: '',
60 + slackWebHookURL: '',
48 }; 61 };
49 const getPROFILESaga = createRequestSaga(GET_PROFILE, profileAPI.getPROFILE); 62 const getPROFILESaga = createRequestSaga(GET_PROFILE, profileAPI.getPROFILE);
50 const setBJIDSaga = createRequestSaga(SET_BJID, profileAPI.setBJID); 63 const setBJIDSaga = createRequestSaga(SET_BJID, profileAPI.setBJID);
64 +const setSLACKSaga = createRequestSaga(SET_SLACK, profileAPI.setPROFILE);
51 const syncBJIDSaga = createRequestSaga(SYNC_BJID, profileAPI.syncBJ); 65 const syncBJIDSaga = createRequestSaga(SYNC_BJID, profileAPI.syncBJ);
52 export function* profileSaga() { 66 export function* profileSaga() {
53 yield takeLatest(SET_BJID, setBJIDSaga); 67 yield takeLatest(SET_BJID, setBJIDSaga);
54 yield takeLatest(GET_PROFILE, getPROFILESaga); 68 yield takeLatest(GET_PROFILE, getPROFILESaga);
55 yield takeLatest(SYNC_BJID, syncBJIDSaga); 69 yield takeLatest(SYNC_BJID, syncBJIDSaga);
70 + yield takeLatest(SET_SLACK, setSLACKSaga);
56 } 71 }
57 72
58 export default handleActions( 73 export default handleActions(
...@@ -64,7 +79,9 @@ export default handleActions( ...@@ -64,7 +79,9 @@ export default handleActions(
64 }), 79 }),
65 [GET_PROFILE_SUCCESS]: ( 80 [GET_PROFILE_SUCCESS]: (
66 state, 81 state,
67 - { payload: { username, userBJID, solvedBJ, friendList } }, 82 + {
83 + payload: { username, userBJID, solvedBJ, friendList, slackWebHookURL },
84 + },
68 ) => ({ 85 ) => ({
69 ...state, 86 ...state,
70 username: username, 87 username: username,
...@@ -72,6 +89,7 @@ export default handleActions( ...@@ -72,6 +89,7 @@ export default handleActions(
72 solvedBJ: solvedBJ, 89 solvedBJ: solvedBJ,
73 friendList: friendList, 90 friendList: friendList,
74 profileError: null, 91 profileError: null,
92 + slackWebHookURL: slackWebHookURL,
75 }), 93 }),
76 [GET_PROFILE_FAILURE]: (state, { payload: error }) => ({ 94 [GET_PROFILE_FAILURE]: (state, { payload: error }) => ({
77 ...state, 95 ...state,
...@@ -87,6 +105,15 @@ export default handleActions( ...@@ -87,6 +105,15 @@ export default handleActions(
87 ...state, 105 ...state,
88 profileError: error, 106 profileError: error,
89 }), 107 }),
108 + [SET_SLACK_SUCCESS]: (state, { payload: { slackWebHookURL } }) => ({
109 + ...state,
110 + slackWebHookURL: slackWebHookURL,
111 + profileError: null,
112 + }),
113 + [SET_SLACK_FAILURE]: (state, { payload: error }) => ({
114 + ...state,
115 + profileError: error,
116 + }),
90 [SYNC_BJID_SUCCESS]: (state, { payload: { solvedBJ } }) => ({ 117 [SYNC_BJID_SUCCESS]: (state, { payload: { solvedBJ } }) => ({
91 ...state, 118 ...state,
92 solvedBJ, 119 solvedBJ,
......
1 import React from 'react'; 1 import React from 'react';
2 import HeaderContainer from '../containers/common/HeaderContainer'; 2 import HeaderContainer from '../containers/common/HeaderContainer';
3 -import SettingForm from '../components/setting/SettingForm';
4 import SettingContainer from '../containers/setting/SettingContainer'; 3 import SettingContainer from '../containers/setting/SettingContainer';
5 4
6 const SettingPage = () => { 5 const SettingPage = () => {
......
This diff is collapsed. Click to expand it.