Update Home Form

@@ -3,42 +3,111 @@ import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 import palette from '../../lib/styles/palette';
+import AuthForm from '../auth/AuthForm';
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
     background: palette.gray[2],
+    padding: theme.spacing(8),
   },
   paper: {
-    padding: theme.spacing(2),
+    padding: theme.spacing(8),
+    margin: 'auto',
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
 }));
-const HomeForm = () => {
+const HomeForm = ({ PSdata, goalNum }) => {
   const classes = useStyles();
-  return (
+  return PSdata ? (
     <div className={classes.root}>
-      <Grid container spacing={3}>
+      <Grid container spacing={5}>
         <Grid item xs={12}>
-          <Paper className={classes.paper}>xs=12</Paper>
+          <Paper className={classes.paper}>
+            <h1>{PSdata.recommend_data.problem_number}</h1>
+            <h1>{PSdata.recommend_data.problem_title}</h1>
+            <a
+              href={'http://www.boj.kr/' + PSdata.recommend_data.problem_number}
+            >
+              바로가기
+            </a>
+
+            <h3>오늘의 추천 문제</h3>
+          </Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>
+            <h1>{PSdata.presentNum + '/' + goalNum}</h1>
+            <h3>오늘 푼 문제</h3>
+          </Paper>
         </Grid>
         <Grid item xs={6}>
-          <Paper className={classes.paper}>xs=6</Paper>
+          <Paper className={classes.paper}>
+            <h1>{PSdata.latestSolve.problem_number}</h1>
+            <h1>{PSdata.latestSolve.problem_title}</h1>
+            <h3>마지막으로 푼 문제</h3>
+          </Paper>
+        </Grid>
+
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>
+            <h1>{PSdata.weekNum}</h1>
+            <h3>7일</h3>
+          </Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>
+            <h1>{PSdata.monthNum}</h1>
+            <h3>30일</h3>
+          </Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>
+            <h1>{PSdata.totalNum}</h1>
+            <h3>전체</h3>
+          </Paper>
+        </Grid>
+      </Grid>
+    </div>
+  ) : (
+    <div className={classes.root}>
+      <Grid container spacing={5}>
+        <Grid item xs={12}>
+          <Paper className={classes.paper}>
+            <h1></h1>
+            <h3>오늘의 추천 문제</h3>
+          </Paper>
         </Grid>
         <Grid item xs={6}>
-          <Paper className={classes.paper}>xs=6</Paper>
+          <Paper className={classes.paper}>
+            <h1></h1>
+            <h3>오늘</h3>
+          </Paper>
         </Grid>
-        <Grid item xs={3}>
-          <Paper className={classes.paper}>xs=3</Paper>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>
+            <h1></h1>
+            <h3>마지막 날</h3>
+          </Paper>
         </Grid>
-        <Grid item xs={3}>
-          <Paper className={classes.paper}>xs=3</Paper>
+
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>
+            <h1></h1>
+            <h3>7일</h3>
+          </Paper>
         </Grid>
-        <Grid item xs={3}>
-          <Paper className={classes.paper}>xs=3</Paper>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>
+            <h1></h1>
+            <h3>30일</h3>
+          </Paper>
         </Grid>
-        <Grid item xs={3}>
-          <Paper className={classes.paper}>xs=3</Paper>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>
+            <h1></h1>
+            <h3>전체</h3>
+          </Paper>
         </Grid>
       </Grid>
     </div>

@@ -9,13 +9,16 @@ const useStyles = makeStyles((theme) => ({
       margin: theme.spacing(1),
     },
   },
+  button: {
+    margin: theme.spacing(1),
+  },
 }));
 
 const BJIDForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
   const classes = useStyles();
   return (
     <div>
-      <form onSubmit={onBJIDSubmit}>
+      <form>
         <TextField
           name="userBJID"
           onChange={onChange}
@@ -23,11 +26,21 @@ const BJIDForm = ({ onChange, onBJIDSubmit, profile, onSyncBJIDSubmit }) => {
           placeholder="백준 아이디"
           label="백준 아이디"
         />
-        <Button variant="outlined" type="submit">
-          등록
-        </Button>
       </form>
-      <Button variant="outlined" onClick={onSyncBJIDSubmit}>
+      <Button
+        className={classes.button}
+        variant="outlined"
+        onClick={onBJIDSubmit}
+        color="primary"
+      >
+        등록
+      </Button>
+      <Button
+        className={classes.button}
+        variant="outlined"
+        onClick={onSyncBJIDSubmit}
+        color="secondary"
+      >
         동기화
       </Button>
     </div>

@@ -10,13 +10,16 @@ const useStyles = makeStyles((theme) => ({
       margin: theme.spacing(1),
     },
   },
+  button: {
+    margin: theme.spacing(1),
+  },
 }));
 
 const GoalNumForm = ({ onChange, profile, onGoalNumSubmit }) => {
   const classes = useStyles();
   return (
     <div>
-      <form onSubmit={onGoalNumSubmit}>
+      <form>
         <TextField
           name="goalNum"
           type="number"
@@ -28,10 +31,15 @@ const GoalNumForm = ({ onChange, profile, onGoalNumSubmit }) => {
             shrink: true,
           }}
         />
-        <Button variant="outlined" type="submit">
-          등록
-        </Button>
       </form>
+      <Button
+        className={classes.button}
+        onClick={onGoalNumSubmit}
+        color="primary"
+        variant="outlined"
+      >
+        등록
+      </Button>
     </div>
   );
 };

@@ -13,11 +13,12 @@ const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
     background: palette.gray[2],
+    padding: theme.spacing(8),
   },
   paper: {
+    padding: theme.spacing(8),
     margin: 'auto',
     textAlign: 'center',
-    padding: 30,
   },
 }));
 
@@ -45,14 +46,10 @@ const SettingForm = ({
     </LoadingParentStyle>
   ) : (
     <div className={classes.root}>
-      <Grid container spacing={3}>
-        <Grid item xs={12}>
-          <Paper className={classes.paper}>
-            <h3>{profile.username}</h3>
-          </Paper>
-        </Grid>
-        <Grid container item xs={12}>
+      <Grid container spacing={5}>
+        <Grid container item xs={6}>
           <Paper className={classes.paper} elevation={3}>
+            <h1>백준 아이디</h1>
             <BJIDForm
               profile={profile}
               onChange={onChange}
@@ -62,8 +59,9 @@ const SettingForm = ({
           </Paper>
         </Grid>
 
-        <Grid container item xs={12}>
+        <Grid container item xs={6}>
           <Paper className={classes.paper} elevation={3}>
+            <h1>슬랙 Hook URL</h1>
             <SlackForm
               profile={profile}
               onChange={onChange}
@@ -72,8 +70,9 @@ const SettingForm = ({
           </Paper>
         </Grid>
 
-        <Grid container item xs={12}>
+        <Grid container item xs={6}>
           <Paper className={classes.paper} elevation={3}>
+            <h1>일일 목표</h1>
             <GoalNumForm
               profile={profile}
               onChange={onChange}

@@ -10,13 +10,16 @@ const useStyles = makeStyles((theme) => ({
       margin: theme.spacing(1),
     },
   },
+  button: {
+    margin: theme.spacing(1),
+  },
 }));
 
 const SlackForm = ({ onChange, profile, onSlackURLSubmit }) => {
   const classes = useStyles();
   return (
     <div>
-      <form onSubmit={onSlackURLSubmit}>
+      <form>
         <TextField
           name="slackWebHookURL"
           onChange={onChange}
@@ -24,10 +27,16 @@ const SlackForm = ({ onChange, profile, onSlackURLSubmit }) => {
           placeholder="슬랙 Webhook URL"
           label="슬랙 Webhook URL"
         />
-        <Button variant="outlined" type="submit">
-          등록
-        </Button>
       </form>
+      <Button
+        className={classes.button}
+        onSubmit={onSlackURLSubmit}
+        variant="outlined"
+        type="submit"
+        color="primary"
+      >
+        등록
+      </Button>
     </div>
   );
 };

@@ -2,22 +2,35 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import HomeForm from '../../components/home/HomeForm';
-import { getPROFILE } from '../../modules/profile';
+import { getPROFILE, initializeProfile } from '../../modules/profile';
 const HomeContainer = ({ history }) => {
   const dispatch = useDispatch();
   const { user, profile } = useSelector(({ user, profile }) => ({
     user: user.user,
     profile: profile,
   }));
+
+  useEffect(() => {
+    if (!user) {
+      alert('로그인이 필요합니다  ');
+      history.push('/login');
+    } else {
+      let username = user.username;
+      dispatch(getPROFILE({ username }));
+      return () => {
+        dispatch(initializeProfile());
+      };
+    }
+  }, [dispatch, user, history]);
   useEffect(() => {
     console.log(profile);
-  }, [profile.solvedBJ]);
+  }, [profile]);
   useEffect(() => {
     if (user) {
       let username = user.username;
       dispatch(getPROFILE({ username }));
     }
   }, [dispatch, user]);
-  return <HomeForm />;
+  return <HomeForm PSdata={profile.solvedBJ_date} goalNum={profile.goalNum} />;
 };
 export default withRouter(HomeContainer);

 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+
 import { withRouter } from 'react-router-dom';
 import {
   changeField,
@@ -14,6 +15,7 @@ import SettingForm from '../../components/setting/SettingForm';
 
 const SettingContainer = ({ history }) => {
   const [isLoading, setLoading] = useState(false);
+
   const dispatch = useDispatch();
   const { user, profile, loading } = useSelector(
     ({ user, profile, loading }) => ({
@@ -63,7 +65,7 @@ const SettingContainer = ({ history }) => {
   useEffect(() => {
     if (!user) {
       alert('로그인이 필요합니다  ');
-      history.push('/');
+      history.push('/login');
     } else {
       let username = user.username;
       dispatch(getPROFILE({ username }));
@@ -81,16 +83,18 @@ const SettingContainer = ({ history }) => {
   }, [dispatch, loading]);
 
   return (
-    <SettingForm
-      type="setting"
-      onChange={onChange}
-      onBJIDSubmit={onBJIDSubmit}
-      onSyncBJIDSubmit={onSyncBJIDSubmit}
-      onSlackURLSubmit={onSlackURLSubmit}
-      onGoalNumSubmit={onGoalNumSubmit}
-      profile={profile}
-      isLoading={isLoading}
-    ></SettingForm>
+    <div>
+      <SettingForm
+        type="setting"
+        onChange={onChange}
+        onBJIDSubmit={onBJIDSubmit}
+        onSyncBJIDSubmit={onSyncBJIDSubmit}
+        onSlackURLSubmit={onSlackURLSubmit}
+        onGoalNumSubmit={onGoalNumSubmit}
+        profile={profile}
+        isLoading={isLoading}
+      ></SettingForm>
+    </div>
   );
 };
 

 let moment = require("moment");
-
+const problem_set = require("../data/problem_set");
+const compareBJ = require("./compareBJ");
 exports.analyzeBJ = function (solvedBJ) {
   try {
     if (solvedBJ) {
@@ -7,6 +8,7 @@ exports.analyzeBJ = function (solvedBJ) {
       let presentDate_str = presentDate.format("YYYYMMDD");
       let latestDate = moment(solvedBJ[0].solved_date, "YYYYMMDD");
       let difflatest = presentDate.diff(latestDate, "days");
+      let latestSolve = solvedBJ[0];
 
       let solvedBJbyDATE = {};
       for (let i = 0; i < solvedBJ.length; i++) {
@@ -23,12 +25,44 @@ exports.analyzeBJ = function (solvedBJ) {
         presentDate_str in solvedBJbyDATE
           ? solvedBJbyDATE[presentDate_str].length
           : 0;
+
+      let weekNUM = 0;
+      let monthNUM = 0;
+      let totalNUM = 0;
+      for (let i = 0; i < solvedBJ.length; i++) {
+        let diffDate = presentDate.diff(
+          moment(solvedBJ[i].solved_date, "YYYYMMDD"),
+          "days"
+        );
+        if (diffDate <= 7) {
+          weekNUM++;
+          monthNUM++;
+          totalNUM++;
+        } else if (diffDate <= 31) {
+          monthNUM++;
+          totalNUM++;
+        } else {
+          totalNUM++;
+        }
+      }
+
+      let unsolved_data = compareBJ.compareBJ(
+        solvedBJ,
+        problem_set.problem_set
+      );
+      let recommend_data = compareBJ.randomItem(unsolved_data);
+
       let returnOBJ = {
         latestDate: latestDate.format("YYYYMMDD"),
         difflatest: difflatest,
         latestNum: latestNum,
         presentNum: presentNum,
+        weekNum: weekNUM,
+        monthNum: monthNUM,
+        totalNum: totalNUM,
         solvedBJbyDATE: solvedBJbyDATE,
+        latestSolve: latestSolve,
+        recommend_data: recommend_data,
       };
 
       return returnOBJ;

@@ -14,7 +14,6 @@ exports.compareBJ = function (solvedBJ_new, problem_set) {
         new_obj.push(problem_set[i]);
       }
     }
-    console.log(new_obj);
     return new_obj;
   } catch (e) {
     console.log(e);