MotherProject / Jaksimsamil

Go to a project
Toggle navigation Toggle navigation pinning
송용우
9c91a85a 1 parent adc232b3

Update Home Form

Expand all
Inline Side-by-side
Showing 10 changed files with 202 additions and 54 deletions
...@@ -3,42 +3,111 @@ import { makeStyles } from '@material-ui/core/styles'; ...@@ -3,42 +3,111 @@ import { makeStyles } from '@material-ui/core/styles';
3 import Paper from '@material-ui/core/Paper'; 3 import Paper from '@material-ui/core/Paper';
4 import Grid from '@material-ui/core/Grid'; 4 import Grid from '@material-ui/core/Grid';
5 import palette from '../../lib/styles/palette'; 5 import palette from '../../lib/styles/palette';
6 +import AuthForm from '../auth/AuthForm';
6 const useStyles = makeStyles((theme) => ({ 7 const useStyles = makeStyles((theme) => ({
7 root: { 8 root: {
8 flexGrow: 1, 9 flexGrow: 1,
9 background: palette.gray[2], 10 background: palette.gray[2],
11 + padding: theme.spacing(8),
10 }, 12 },
11 paper: { 13 paper: {
12 - padding: theme.spacing(2), 14 + padding: theme.spacing(8),
15 + margin: 'auto',
13 textAlign: 'center', 16 textAlign: 'center',
14 color: theme.palette.text.secondary, 17 color: theme.palette.text.secondary,
15 }, 18 },
16 })); 19 }));
17 -const HomeForm = () => { 20 +const HomeForm = ({ PSdata, goalNum }) => {
18 const classes = useStyles(); 21 const classes = useStyles();
19 - return ( 22 + return PSdata ? (
20 <div className={classes.root}> 23 <div className={classes.root}>
21 - <Grid container spacing={3}> 24 + <Grid container spacing={5}>
22 <Grid item xs={12}> 25 <Grid item xs={12}>
23 - <Paper className={classes.paper}>xs=12</Paper> 26 + <Paper className={classes.paper}>
27 + <h1>{PSdata.recommend_data.problem_number}</h1>
28 + <h1>{PSdata.recommend_data.problem_title}</h1>
29 + <a
30 + href={'http://www.boj.kr/' + PSdata.recommend_data.problem_number}
31 + >
32 + 바로가기
33 + </a>
34 +
35 + <h3>오늘의 추천 문제</h3>
36 + </Paper>
37 + </Grid>
38 + <Grid item xs={6}>
39 + <Paper className={classes.paper}>
40 + <h1>{PSdata.presentNum + '/' + goalNum}</h1>
41 + <h3>오늘 푼 문제</h3>
42 + </Paper>
24 </Grid> 43 </Grid>
25 <Grid item xs={6}> 44 <Grid item xs={6}>
26 - <Paper className={classes.paper}>xs=6</Paper> 45 + <Paper className={classes.paper}>
46 + <h1>{PSdata.latestSolve.problem_number}</h1>
47 + <h1>{PSdata.latestSolve.problem_title}</h1>
48 + <h3>마지막으로 푼 문제</h3>
49 + </Paper>
50 + </Grid>
51 +
52 + <Grid item xs={4}>
53 + <Paper className={classes.paper}>
54 + <h1>{PSdata.weekNum}</h1>
55 + <h3>7일</h3>
56 + </Paper>
57 + </Grid>
58 + <Grid item xs={4}>
59 + <Paper className={classes.paper}>
60 + <h1>{PSdata.monthNum}</h1>
61 + <h3>30일</h3>
62 + </Paper>
63 + </Grid>
64 + <Grid item xs={4}>
65 + <Paper className={classes.paper}>
66 + <h1>{PSdata.totalNum}</h1>
67 + <h3>전체</h3>
68 + </Paper>
69 + </Grid>
70 + </Grid>
71 + </div>
72 + ) : (
73 + <div className={classes.root}>
74 + <Grid container spacing={5}>
75 + <Grid item xs={12}>
76 + <Paper className={classes.paper}>
77 + <h1></h1>
78 + <h3>오늘의 추천 문제</h3>
79 + </Paper>
27 </Grid> 80 </Grid>
28 <Grid item xs={6}> 81 <Grid item xs={6}>
29 - <Paper className={classes.paper}>xs=6</Paper> 82 + <Paper className={classes.paper}>
83 + <h1></h1>
84 + <h3>오늘</h3>
85 + </Paper>
30 </Grid> 86 </Grid>
31 - <Grid item xs={3}> 87 + <Grid item xs={6}>
32 - <Paper className={classes.paper}>xs=3</Paper> 88 + <Paper className={classes.paper}>
89 + <h1></h1>
90 + <h3>마지막 날</h3>
91 + </Paper>
33 </Grid> 92 </Grid>
34 - <Grid item xs={3}> 93 +
35 - <Paper className={classes.paper}>xs=3</Paper> 94 + <Grid item xs={4}>
95 + <Paper className={classes.paper}>
96 + <h1></h1>
97 + <h3>7일</h3>
98 + </Paper>
36 </Grid> 99 </Grid>
37 - <Grid item xs={3}> 100 + <Grid item xs={4}>
38 - <Paper className={classes.paper}>xs=3</Paper> 101 + <Paper className={classes.paper}>
102 + <h1></h1>
103 + <h3>30일</h3>
104 + </Paper>
39 </Grid> 105 </Grid>
40 - <Grid item xs={3}> 106 + <Grid item xs={4}>
41 - <Paper className={classes.paper}>xs=3</Paper> 107 + <Paper className={classes.paper}>
108 + <h1></h1>
109 + <h3>전체</h3>
110 + </Paper>
42 </Grid> 111 </Grid>
43 </Grid> 112 </Grid>
44 </div> 113 </div>
......
...@@ -9,13 +9,16 @@ const useStyles = makeStyles((theme) => ({ ...@@ -9,13 +9,16 @@ const useStyles = makeStyles((theme) => ({
9 margin: theme.spacing(1), 9 margin: theme.spacing(1),
10 }, 10 },
11 }, 11 },
12 + button: {
13 + margin: theme.spacing(1),
14 + },
12 })); 15 }));
13 16
14 const BJIDForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => { 17 const BJIDForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
15 const classes = useStyles(); 18 const classes = useStyles();
16 return ( 19 return (
17 <div> 20 <div>
18 - <form onSubmit={onBJIDSubmit}> 21 + <form>
19 <TextField 22 <TextField
20 name="userBJID" 23 name="userBJID"
21 onChange={onChange} 24 onChange={onChange}
...@@ -23,11 +26,21 @@ const BJIDForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => { ...@@ -23,11 +26,21 @@ const BJIDForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
23 placeholder="백준 아이디" 26 placeholder="백준 아이디"
24 label="백준 아이디" 27 label="백준 아이디"
25 /> 28 />
26 - <Button variant="outlined" type="submit">
27 - 등록
28 - </Button>
29 </form> 29 </form>
30 - <Button variant="outlined" onClick={onSyncBJIDSubmit}> 30 + <Button
31 + className={classes.button}
32 + variant="outlined"
33 + onClick={onBJIDSubmit}
34 + color="primary"
35 + >
36 + 등록
37 + </Button>
38 + <Button
39 + className={classes.button}
40 + variant="outlined"
41 + onClick={onSyncBJIDSubmit}
42 + color="secondary"
43 + >
31 동기화 44 동기화
32 </Button> 45 </Button>
33 </div> 46 </div>
......
...@@ -10,13 +10,16 @@ const useStyles = makeStyles((theme) => ({ ...@@ -10,13 +10,16 @@ const useStyles = makeStyles((theme) => ({
10 margin: theme.spacing(1), 10 margin: theme.spacing(1),
11 }, 11 },
12 }, 12 },
13 + button: {
14 + margin: theme.spacing(1),
15 + },
13 })); 16 }));
14 17
15 const GoalNumForm = ({ onChange, profile, onGoalNumSubmit }) => { 18 const GoalNumForm = ({ onChange, profile, onGoalNumSubmit }) => {
16 const classes = useStyles(); 19 const classes = useStyles();
17 return ( 20 return (
18 <div> 21 <div>
19 - <form onSubmit={onGoalNumSubmit}> 22 + <form>
20 <TextField 23 <TextField
21 name="goalNum" 24 name="goalNum"
22 type="number" 25 type="number"
...@@ -28,10 +31,15 @@ const GoalNumForm = ({ onChange, profile, onGoalNumSubmit }) => { ...@@ -28,10 +31,15 @@ const GoalNumForm = ({ onChange, profile, onGoalNumSubmit }) => {
28 shrink: true, 31 shrink: true,
29 }} 32 }}
30 /> 33 />
31 - <Button variant="outlined" type="submit">
32 - 등록
33 - </Button>
34 </form> 34 </form>
35 + <Button
36 + className={classes.button}
37 + onClick={onGoalNumSubmit}
38 + color="primary"
39 + variant="outlined"
40 + >
41 + 등록
42 + </Button>
35 </div> 43 </div>
36 ); 44 );
37 }; 45 };
......
...@@ -13,11 +13,12 @@ const useStyles = makeStyles((theme) => ({ ...@@ -13,11 +13,12 @@ const useStyles = makeStyles((theme) => ({
13 root: { 13 root: {
14 flexGrow: 1, 14 flexGrow: 1,
15 background: palette.gray[2], 15 background: palette.gray[2],
16 + padding: theme.spacing(8),
16 }, 17 },
17 paper: { 18 paper: {
19 + padding: theme.spacing(8),
18 margin: 'auto', 20 margin: 'auto',
19 textAlign: 'center', 21 textAlign: 'center',
20 - padding: 30,
21 }, 22 },
22 })); 23 }));
23 24
...@@ -45,14 +46,10 @@ const SettingForm = ({ ...@@ -45,14 +46,10 @@ const SettingForm = ({
45 </LoadingParentStyle> 46 </LoadingParentStyle>
46 ) : ( 47 ) : (
47 <div className={classes.root}> 48 <div className={classes.root}>
48 - <Grid container spacing={3}> 49 + <Grid container spacing={5}>
49 - <Grid item xs={12}> 50 + <Grid container item xs={6}>
50 - <Paper className={classes.paper}>
51 - <h3>{profile.username}</h3>
52 - </Paper>
53 - </Grid>
54 - <Grid container item xs={12}>
55 <Paper className={classes.paper} elevation={3}> 51 <Paper className={classes.paper} elevation={3}>
52 + <h1>백준 아이디</h1>
56 <BJIDForm 53 <BJIDForm
57 profile={profile} 54 profile={profile}
58 onChange={onChange} 55 onChange={onChange}
...@@ -62,8 +59,9 @@ const SettingForm = ({ ...@@ -62,8 +59,9 @@ const SettingForm = ({
62 </Paper> 59 </Paper>
63 </Grid> 60 </Grid>
64 61
65 - <Grid container item xs={12}> 62 + <Grid container item xs={6}>
66 <Paper className={classes.paper} elevation={3}> 63 <Paper className={classes.paper} elevation={3}>
64 + <h1>슬랙 Hook URL</h1>
67 <SlackForm 65 <SlackForm
68 profile={profile} 66 profile={profile}
69 onChange={onChange} 67 onChange={onChange}
...@@ -72,8 +70,9 @@ const SettingForm = ({ ...@@ -72,8 +70,9 @@ const SettingForm = ({
72 </Paper> 70 </Paper>
73 </Grid> 71 </Grid>
74 72
75 - <Grid container item xs={12}> 73 + <Grid container item xs={6}>
76 <Paper className={classes.paper} elevation={3}> 74 <Paper className={classes.paper} elevation={3}>
75 + <h1>일일 목표</h1>
77 <GoalNumForm 76 <GoalNumForm
78 profile={profile} 77 profile={profile}
79 onChange={onChange} 78 onChange={onChange}
......
...@@ -10,13 +10,16 @@ const useStyles = makeStyles((theme) => ({ ...@@ -10,13 +10,16 @@ const useStyles = makeStyles((theme) => ({
10 margin: theme.spacing(1), 10 margin: theme.spacing(1),
11 }, 11 },
12 }, 12 },
13 + button: {
14 + margin: theme.spacing(1),
15 + },
13 })); 16 }));
14 17
15 const SlackForm = ({ onChange, profile, onSlackURLSubmit }) => { 18 const SlackForm = ({ onChange, profile, onSlackURLSubmit }) => {
16 const classes = useStyles(); 19 const classes = useStyles();
17 return ( 20 return (
18 <div> 21 <div>
19 - <form onSubmit={onSlackURLSubmit}> 22 + <form>
20 <TextField 23 <TextField
21 name="slackWebHookURL" 24 name="slackWebHookURL"
22 onChange={onChange} 25 onChange={onChange}
...@@ -24,10 +27,16 @@ const SlackForm = ({ onChange, profile, onSlackURLSubmit }) => { ...@@ -24,10 +27,16 @@ const SlackForm = ({ onChange, profile, onSlackURLSubmit }) => {
24 placeholder="슬랙 Webhook URL" 27 placeholder="슬랙 Webhook URL"
25 label="슬랙 Webhook URL" 28 label="슬랙 Webhook URL"
26 /> 29 />
27 - <Button variant="outlined" type="submit">
28 - 등록
29 - </Button>
30 </form> 30 </form>
31 + <Button
32 + className={classes.button}
33 + onSubmit={onSlackURLSubmit}
34 + variant="outlined"
35 + type="submit"
36 + color="primary"
37 + >
38 + 등록
39 + </Button>
31 </div> 40 </div>
32 ); 41 );
33 }; 42 };
......
...@@ -2,22 +2,35 @@ import React, { useEffect } from 'react'; ...@@ -2,22 +2,35 @@ 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';
5 -import { getPROFILE } from '../../modules/profile'; 5 +import { getPROFILE, initializeProfile } from '../../modules/profile';
6 const HomeContainer = ({ history }) => { 6 const HomeContainer = ({ history }) => {
7 const dispatch = useDispatch(); 7 const dispatch = useDispatch();
8 const { user, profile } = useSelector(({ user, profile }) => ({ 8 const { user, profile } = useSelector(({ user, profile }) => ({
9 user: user.user, 9 user: user.user,
10 profile: profile, 10 profile: profile,
11 })); 11 }));
12 +
13 + useEffect(() => {
14 + if (!user) {
15 + alert('로그인이 필요합니다 ');
16 + history.push('/login');
17 + } else {
18 + let username = user.username;
19 + dispatch(getPROFILE({ username }));
20 + return () => {
21 + dispatch(initializeProfile());
22 + };
23 + }
24 + }, [dispatch, user, history]);
12 useEffect(() => { 25 useEffect(() => {
13 console.log(profile); 26 console.log(profile);
14 - }, [profile.solvedBJ]); 27 + }, [profile]);
15 useEffect(() => { 28 useEffect(() => {
16 if (user) { 29 if (user) {
17 let username = user.username; 30 let username = user.username;
18 dispatch(getPROFILE({ username })); 31 dispatch(getPROFILE({ username }));
19 } 32 }
20 }, [dispatch, user]); 33 }, [dispatch, user]);
21 - return <HomeForm />; 34 + return <HomeForm PSdata={profile.solvedBJ_date} goalNum={profile.goalNum} />;
22 }; 35 };
23 export default withRouter(HomeContainer); 36 export default withRouter(HomeContainer);
......
1 import React, { useEffect, useState } from 'react'; 1 import React, { useEffect, useState } from 'react';
2 import { useDispatch, useSelector } from 'react-redux'; 2 import { useDispatch, useSelector } from 'react-redux';
3 +
3 import { withRouter } from 'react-router-dom'; 4 import { withRouter } from 'react-router-dom';
4 import { 5 import {
5 changeField, 6 changeField,
...@@ -14,6 +15,7 @@ import SettingForm from '../../components/setting/SettingForm'; ...@@ -14,6 +15,7 @@ import SettingForm from '../../components/setting/SettingForm';
14 15
15 const SettingContainer = ({ history }) => { 16 const SettingContainer = ({ history }) => {
16 const [isLoading, setLoading] = useState(false); 17 const [isLoading, setLoading] = useState(false);
18 +
17 const dispatch = useDispatch(); 19 const dispatch = useDispatch();
18 const { user, profile, loading } = useSelector( 20 const { user, profile, loading } = useSelector(
19 ({ user, profile, loading }) => ({ 21 ({ user, profile, loading }) => ({
...@@ -63,7 +65,7 @@ const SettingContainer = ({ history }) => { ...@@ -63,7 +65,7 @@ const SettingContainer = ({ history }) => {
63 useEffect(() => { 65 useEffect(() => {
64 if (!user) { 66 if (!user) {
65 alert('로그인이 필요합니다 '); 67 alert('로그인이 필요합니다 ');
66 - history.push('/'); 68 + history.push('/login');
67 } else { 69 } else {
68 let username = user.username; 70 let username = user.username;
69 dispatch(getPROFILE({ username })); 71 dispatch(getPROFILE({ username }));
...@@ -81,16 +83,18 @@ const SettingContainer = ({ history }) => { ...@@ -81,16 +83,18 @@ const SettingContainer = ({ history }) => {
81 }, [dispatch, loading]); 83 }, [dispatch, loading]);
82 84
83 return ( 85 return (
84 - <SettingForm 86 + <div>
85 - type="setting" 87 + <SettingForm
86 - onChange={onChange} 88 + type="setting"
87 - onBJIDSubmit={onBJIDSubmit} 89 + onChange={onChange}
88 - onSyncBJIDSubmit={onSyncBJIDSubmit} 90 + onBJIDSubmit={onBJIDSubmit}
89 - onSlackURLSubmit={onSlackURLSubmit} 91 + onSyncBJIDSubmit={onSyncBJIDSubmit}
90 - onGoalNumSubmit={onGoalNumSubmit} 92 + onSlackURLSubmit={onSlackURLSubmit}
91 - profile={profile} 93 + onGoalNumSubmit={onGoalNumSubmit}
92 - isLoading={isLoading} 94 + profile={profile}
93 - ></SettingForm> 95 + isLoading={isLoading}
96 + ></SettingForm>
97 + </div>
94 ); 98 );
95 }; 99 };
96 100
......
This diff is collapsed. Click to expand it.
1 let moment = require("moment"); 1 let moment = require("moment");
2 - 2 +const problem_set = require("../data/problem_set");
3 +const compareBJ = require("./compareBJ");
3 exports.analyzeBJ = function (solvedBJ) { 4 exports.analyzeBJ = function (solvedBJ) {
4 try { 5 try {
5 if (solvedBJ) { 6 if (solvedBJ) {
...@@ -7,6 +8,7 @@ exports.analyzeBJ = function (solvedBJ) { ...@@ -7,6 +8,7 @@ exports.analyzeBJ = function (solvedBJ) {
7 let presentDate_str = presentDate.format("YYYYMMDD"); 8 let presentDate_str = presentDate.format("YYYYMMDD");
8 let latestDate = moment(solvedBJ[0].solved_date, "YYYYMMDD"); 9 let latestDate = moment(solvedBJ[0].solved_date, "YYYYMMDD");
9 let difflatest = presentDate.diff(latestDate, "days"); 10 let difflatest = presentDate.diff(latestDate, "days");
11 + let latestSolve = solvedBJ[0];
10 12
11 let solvedBJbyDATE = {}; 13 let solvedBJbyDATE = {};
12 for (let i = 0; i < solvedBJ.length; i++) { 14 for (let i = 0; i < solvedBJ.length; i++) {
...@@ -23,12 +25,44 @@ exports.analyzeBJ = function (solvedBJ) { ...@@ -23,12 +25,44 @@ exports.analyzeBJ = function (solvedBJ) {
23 presentDate_str in solvedBJbyDATE 25 presentDate_str in solvedBJbyDATE
24 ? solvedBJbyDATE[presentDate_str].length 26 ? solvedBJbyDATE[presentDate_str].length
25 : 0; 27 : 0;
28 +
29 + let weekNUM = 0;
30 + let monthNUM = 0;
31 + let totalNUM = 0;
32 + for (let i = 0; i < solvedBJ.length; i++) {
33 + let diffDate = presentDate.diff(
34 + moment(solvedBJ[i].solved_date, "YYYYMMDD"),
35 + "days"
36 + );
37 + if (diffDate <= 7) {
38 + weekNUM++;
39 + monthNUM++;
40 + totalNUM++;
41 + } else if (diffDate <= 31) {
42 + monthNUM++;
43 + totalNUM++;
44 + } else {
45 + totalNUM++;
46 + }
47 + }
48 +
49 + let unsolved_data = compareBJ.compareBJ(
50 + solvedBJ,
51 + problem_set.problem_set
52 + );
53 + let recommend_data = compareBJ.randomItem(unsolved_data);
54 +
26 let returnOBJ = { 55 let returnOBJ = {
27 latestDate: latestDate.format("YYYYMMDD"), 56 latestDate: latestDate.format("YYYYMMDD"),
28 difflatest: difflatest, 57 difflatest: difflatest,
29 latestNum: latestNum, 58 latestNum: latestNum,
30 presentNum: presentNum, 59 presentNum: presentNum,
60 + weekNum: weekNUM,
61 + monthNum: monthNUM,
62 + totalNum: totalNUM,
31 solvedBJbyDATE: solvedBJbyDATE, 63 solvedBJbyDATE: solvedBJbyDATE,
64 + latestSolve: latestSolve,
65 + recommend_data: recommend_data,
32 }; 66 };
33 67
34 return returnOBJ; 68 return returnOBJ;
......
...@@ -14,7 +14,6 @@ exports.compareBJ = function (solvedBJ_new, problem_set) { ...@@ -14,7 +14,6 @@ exports.compareBJ = function (solvedBJ_new, problem_set) {
14 new_obj.push(problem_set[i]); 14 new_obj.push(problem_set[i]);
15 } 15 }
16 } 16 }
17 - console.log(new_obj);
18 return new_obj; 17 return new_obj;
19 } catch (e) { 18 } catch (e) {
20 console.log(e); 19 console.log(e);
......