Weekly 완성

client/src/components/Calendar/DateSet.js

@@ -8,7 +8,7 @@ const DateSet = ({ index, info, today, handleClick }) => {
         <div className="col d-flex flex-column text-center" onClick={() => handleClick(info.date)}>
             <span className="text-center">{week[index]}</span>
             <span className={today ? `rounded-circle ${styles.today}` : ""}>{moment(info.date).format("DD")}</span>
-            <span className="text-secondary">{info.rate ? info.rate + "%" : null}</span>
+            <span className="text-secondary">{info.rate !== "" ? info.rate + "%" : null}</span>
         </div>
     )
 }

client/src/components/Calendar/Weekly.js

@@ -16,12 +16,12 @@ const Weekly = () => {
     const [initialDate, setInitialDate] = useState(moment().format("YYYY-MM-DD"))
     const [chooseDate, setChooseDate] = useState(moment(date).format("YYYY-MM-DD"))
     const [week, setWeek] = useState([
-        { date: moment(date).day(0).format("YYYY-MM-DD"), rate: "75" },
-        { date: moment(date).day(1).format("YYYY-MM-DD"), rate: "85" },
-        { date: moment(date).day(2).format("YYYY-MM-DD"), rate: "40" },
-        { date: moment(date).day(3).format("YYYY-MM-DD"), rate: "100" },
+        { date: moment(date).day(0).format("YYYY-MM-DD"), rate: "" },
+        { date: moment(date).day(1).format("YYYY-MM-DD"), rate: "" },
+        { date: moment(date).day(2).format("YYYY-MM-DD"), rate: "" },
+        { date: moment(date).day(3).format("YYYY-MM-DD"), rate: "" },
         { date: moment(date).day(4).format("YYYY-MM-DD"), rate: "" },
-        { date: moment(date).day(5).format("YYYY-MM-DD"), rate: "0" },
+        { date: moment(date).day(5).format("YYYY-MM-DD"), rate: "" },
         { date: moment(date).day(6).format("YYYY-MM-DD"), rate: "" }
     ])
     const [error, setError] = useState("")
@@ -35,24 +35,22 @@ const Weekly = () => {
     })
 
     useEffect(() => {
-        setChooseDate(moment(date).format("YYYY-MM-DD"))
-        getTodoList()
-        setWeek([
-            { date: moment(date).day(0).format("YYYY-MM-DD"), rate: "7" },
-            { date: moment(date).day(1).format("YYYY-MM-DD"), rate: "8" },
-            { date: moment(date).day(2).format("YYYY-MM-DD"), rate: "4" },
-            { date: moment(date).day(3).format("YYYY-MM-DD"), rate: "100" },
-            { date: moment(date).day(4).format("YYYY-MM-DD"), rate: "" },
-            { date: moment(date).day(5).format("YYYY-MM-DD"), rate: "0" },
-            { date: moment(date).day(6).format("YYYY-MM-DD"), rate: "" }
-        ])
+        setChooseDate(date)
+        getTodoList(date)
     }, [date])
 
-    async function getTodoList() {
+    async function getTodoList(date) {
         try {
             setError("")
+            let weekArr = []
             const result = await todoApi.getTodopercent(user.id, moment(date).day(0).format("YYYY-MM-DD"), moment(date).day(6).format("YYYY-MM-DD"))
-            console.log("result==", result)
+            for (let i = 0; i < 7; i++) {
+                const generateDate = moment(date).day(i).format("YYYY-MM-DD")
+                const find = result.find(el => el.date === generateDate)
+                if (find) weekArr[i] = find
+                else weekArr[i] = { date: generateDate, rate: "" }
+            }
+            setWeek(weekArr)
         } catch (error) {
             catchErrors(error, setError)
         }
@@ -60,13 +58,13 @@ const Weekly = () => {
 
     function prev() {
         calendar.prev()
-        let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+        const date = moment(calendar.getDate()).format('YYYY-MM-DD')
         history.push(`/todo/${date}`)
     }
 
     function next() {
         calendar.next()
-        let date = moment(calendar.getDate()).format('YYYY-MM-DD')
+        const date = moment(calendar.getDate()).format('YYYY-MM-DD')
         history.push(`/todo/${date}`)
     }
 

server/controllers/todo.controller.js

@@ -3,33 +3,16 @@ import sequelize from 'sequelize';
 
 const { Op } = sequelize
 
-const findbyId = async (req, res, next) => {
-  try {
-    const userId = req.userId
-    const { todoId } = req.query
-    if (todoId) {
-      console.log(" findbyId todoId가 있을 때 실행", todoId)
-      const findTodo = await Todo.findOne({ where: { [Op.and]: [{ id: todoId }, { userId: userId }] }, attributes: ['id', ['title', 'todoTitle'], ['date', 'todoDate'], 'done'] })
-      if (!findTodo) throw new Error("해당 todo를 찾지 못했습니다.")
-      req.todoOne = findTodo
-    }
-    next()
-  } catch (error) {
-    return res.status(500).send(error.message || "todo 가져오는 중 에러 발생")
-  }
-}
-
-const findbyDate = async (req, res, next) => {
+const findbyDate = async (req, res) => {
   try {
+    // Todo 페이지
+    console.log("Todo 페이지에서의 요청 처리")
     const userId = req.userId
     const { date } = req.query
-    if (date) {
-      console.log(" findbydate 날짜가 있을 때 실행", date, userId)
-      const findList = await Todo.findAll({ where: { [Op.and]: [{ date: { [Op.eq]: date } }, { userId: userId }] }, attributes: ['id', ['title', 'todoTitle'], ['date', 'todoDate'], 'done'] })
-      console.log("find==", findList)
-      req.todoList = findList
-    }
-    next()
+    const nonCheck = await Todo.findAll({ where: { [Op.and]: [{ done: false }, { date: { [Op.eq]: date } }, { userId: userId }] }, attributes: ['id', ['title', 'todoTitle'], ['date', 'todoDate'], 'done'], order: [['updatedAt', "DESC"]] })
+    const check = await Todo.findAll({ where: { [Op.and]: [{ done: true }, { date: { [Op.eq]: date } }, { userId: userId }] }, attributes: ['id', ['title', 'todoTitle'], ['date', 'todoDate'], 'done'], order: [['updatedAt', "DESC"]] })
+    check.forEach(el => nonCheck.push(el.dataValues))
+    return res.json(nonCheck)
   } catch (error) {
     return res.status(500).send(error.message || "todo 가져오는 중 에러 발생")
   }
@@ -37,23 +20,48 @@ const findbyDate = async (req, res, next) => {
 
 const findforPercent = async (req, res) => {
   try {
-    let sendList = null
+    let nonCheck = null
+    let check = null
     const userId = req.userId
     const { start, end } = req.query
     if (end) {
-      // weekly에서 불러올 todoList
-      console.log("week 실행하냐")
-      // const findList = await Todo.findAndCountAll({ where: { [Op.and]: [{ userId: userId }, { date: [start, end] }] }, order: [[]] group: ['date'] })
-      // console.log("week findList", findList)
+      // weekly percent
+      nonCheck = await Todo.findAll({
+        where: { [Op.and]: [{ userId: userId }, { done: false }, { date: { [Op.between]: [start, end] } }] },
+        order: [['date']]
+      })
+      check = await Todo.findAll({
+        where: { [Op.and]: [{ userId: userId }, { done: true }, { date: { [Op.between]: [start, end] } }] },
+        order: [['date']]
+      })
+      const nonCheckCountList = countInList(nonCheck)
+      let checkCountList = countInList(check)
+      let percentList = nonCheckCountList.map(nonCheckEl => {
+        const findIdx = checkCountList.findIndex(el => el.date === nonCheckEl.date)
+        if (findIdx === -1) nonCheckEl['rate'] = 0
+        else {
+          nonCheckEl['rate'] = Math.round((checkCountList[findIdx].count / (nonCheckEl.count + checkCountList[findIdx].count)) * 100)
+          checkCountList.splice(findIdx, 1)
+        }
+
+        return nonCheckEl
+      })
+      if (checkCountList.length !== 0) {
+        checkCountList.forEach(el => el['rate'] = 100)
+        const sendList = percentList.concat(checkCountList).sort((pre, next) => {
+          if (pre.date < next.date) return -1
+          else if (pre.date > next.date) return 1
+          else return 0
+        })
+        return res.json(sendList)
+      } else return res.json(percentList)
     } else {
       // Menu
       let percent = 0
-      console.log("findforPercent end 없음")
-      const nonCheck = await Todo.findAndCountAll({ where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }, { done: false }] }, order: [['updatedAt', "DESC"]] })
-      const check = await Todo.findAndCountAll({ where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }, { done: true }] }, order: [['updatedAt', "DESC"]] })
+      nonCheck = await Todo.findAndCountAll({ where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }, { done: false }] }, order: [['updatedAt', "DESC"]] })
+      check = await Todo.findAndCountAll({ where: { [Op.and]: [{ date: { [Op.eq]: start } }, { userId: userId }, { done: true }] }, order: [['updatedAt', "DESC"]] })
       let total = nonCheck.count + check.count
-      if (total === 0) percent = 0
-      else percent = Math.round((check.count / total) * 100)
+      if (total !== 0) percent = Math.round((check.count / total) * 100)
 
       if (nonCheck.count < 3) check.rows.forEach(el => nonCheck.rows.push(el.dataValues))
       return res.json({ percent: percent, list: nonCheck.rows.slice(0, 3) })
@@ -80,7 +88,6 @@ const edit = async (req, res) => {
     const userId = req.userId
     const { todoId } = req.query
     const { todoTitle, todoDate, done } = req.body
-    console.log("done==",done, userId, todoId)
     if (todoTitle) updated = await Todo.update({ title: todoTitle, date: todoDate }, { where: { [Op.and]: [{ id: todoId }, { userId: userId }] } })
     else if (todoDate) updated = await Todo.update({ date: todoDate }, { where: { [Op.and]: [{ id: todoId }, { userId: userId }] } })
     else updated = await Todo.update({ done: !done }, { where: { [Op.and]: [{ id: todoId }, { userId: userId }] } })
@@ -113,22 +120,22 @@ const getParams = async (req, res, next) => {
   }
 }
 
-const send = async (req, res) => {
-  try {
-    const result = req.todoOne || req.todoList
-    return res.json(result)
-  } catch (error) {
-    return res.status(500).send(error.message || "todo 가져오는 중 에러 발생")
-  }
+function countInList(list) {
+  const countList = list.reduce((acc, cur) => {
+    const findIdx = acc.findIndex(el => el.date === cur.dataValues.date)
+    if (findIdx === -1) acc.push({ date: cur.dataValues.date, count: 1 })
+    else acc[findIdx].count += 1
+
+    return acc
+  }, [])
+  return countList
 }
 
 export default {
-  findbyId,
   findbyDate,
   findforPercent,
   create,
   edit,
   remove,
-  getParams,
-  send
+  getParams
 }
\ No newline at end of file

server/routes/todo.route.js

@@ -9,7 +9,7 @@ router
 
 router
     .route("/:userId")
-    .get(todoCtrl.findbyId, todoCtrl.findbyDate, todoCtrl.send)
+    .get(todoCtrl.findbyDate)
     .post(todoCtrl.create)
     .put(todoCtrl.edit)
     .delete(todoCtrl.remove)