[Modify] Migrate scheduleData to DB

@@ -9,10 +9,12 @@
     "axios": "^0.27.2",
     "axios": "^0.27.2",
     "body-parser": "^1.20.0",
     "body-parser": "^1.20.0",
     "cors": "^2.8.5",
     "cors": "^2.8.5",
+    "crypto-js": "^4.1.1",
     "express": "^4.18.1",
     "express": "^4.18.1",
     "fs": "^0.0.1-security",
     "fs": "^0.0.1-security",
     "localforage": "^1.10.0",
     "localforage": "^1.10.0",
     "mysql": "^2.18.1",
     "mysql": "^2.18.1",
+    "mysql2": "^2.3.3",
     "puppeteer": "^14.1.1",
     "puppeteer": "^14.1.1",
     "react": "^18.1.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-dom": "^18.1.0",

 const express = require("express");
 const express = require("express");
-const mysql = require("mysql");
+const mysql = require("mysql2/promise");
 const fs = require("fs");
 const fs = require("fs");
 const router = express.Router();
 const router = express.Router();
 
 
-const [id, pw] = fs
-  .readFileSync("server/libs/sql.pvdata", "utf8")
-  .split("\r\n");
-
-const connection = mysql.createConnection({
-  host: "localhost",
-  user: id,
-  password: pw,
-  database: "mydb",
-});
-
-router.get("/", (req, res) => {
-  res.send("DB Root");
-});
-
-router.get("/mytable", (req, res) => {
-  connection.query("SELECT * from mytable", (error, rows) => {
-    if (error) throw error;
-    console.log(rows);
-    res.send(rows);
+async function route() {
+  const [id, pw] = fs
+    .readFileSync("server/libs/sql.pvdata", "utf8")
+    .split("\r\n");
+  const connection = await mysql.createConnection({
+    host: "localhost",
+    user: id,
+    password: pw,
+    database: "db",
   });
   });
-});
+
+  // (userID, date) => schedules
+  router.get("/schedules_date", async (req, res) => {
+    console.log("/db/schedules_date");
+    try {
+      const queryString = `
+      SELECT sc.label, sc.type, sc.description, sc.url, sc.detail, sbj.name, us.color
+      FROM schedules_date sc
+      INNER JOIN \`user-subject\` us
+        ON sc.userID = us.userID
+        AND sc.subjectID = us.subjectID
+        AND us.status = 1
+      INNER JOIN subjects sbj
+        ON sc.subjectID = sbj.ID
+      WHERE sc.date = "${req.query.date}"
+        AND sc.userID = ${req.query.userID}
+        AND sc.status = 1`;
+      const [results] = await connection.query(queryString);
+      res.send(results);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
+  // (ID) => null | name  //unused
+  router.get("/subjects", async (req, res) => {
+    console.log("/db/subjects");
+    try {
+      const queryString = `
+      SELECT name FROM subjects sbj
+        WHERE sbj.ID = ${req.query.ID}`;
+      const [results] = await connection.query(queryString);
+      res.send(results.length && results[0].name);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
+  // (loginID) => null | ID(str)
+  router.get("/users", async (req, res) => {
+    console.log("/db/users");
+    try {
+      const queryString = `
+      SELECT ID FROM users us
+        WHERE us.loginID = '${req.query.loginID}'`;
+      const [results] = await connection.query(queryString);
+      res.send(results.length ? results[0].ID.toString() : null);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
+  // (loginID, loginPW) => null | "correct"
+  router.get("/users/check", async (req, res) => {
+    console.log("/db/users/check");
+    try {
+      const queryString = `
+      SELECT loginPW FROM users us
+        WHERE us.loginID = '${req.query.loginID}'`;
+      const [results] = await connection.query(queryString);
+      res.send(results[0].loginPW === req.query.loginPW ? "correct" : null);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
+  // (userID) => subjects
+  router.get("/user-subject", async (req, res) => {
+    console.log("/db/user-subject");
+    try {
+      const queryString = `
+        SELECT subjectID, nickname, status, color FROM \`user-subject\` us
+          WHERE us.userID = ${req.query.userID}`;
+      const [results] = await connection.query(queryString);
+      res.send(results);
+    } catch (e) {
+      console.log(e);
+      res.end();
+    }
+  });
+
+  router.get("*", (req, res) => {
+    console.log("/db/*");
+    res.end();
+  });
+}
+
+route();
 
 
 module.exports = router;
 module.exports = router;

@@ -15,8 +15,10 @@ app.use(
     credentials: true,
     credentials: true,
   })
   })
 );
 );
-app.use(bodyParser.urlencoded({ extended: false }));
-app.use(bodyParser.json());
+// app.use(bodyParser.urlencoded({ extended: false }));
+// app.use(bodyParser.json());
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
 
 
 app.post("/", (req, res) => {
 app.post("/", (req, res) => {
   res.send({ body: req.body });
   res.send({ body: req.body });

 import { useContext, useEffect, useState } from "react";
 import { useContext, useEffect, useState } from "react";
+import localforage from "localforage";
 
 
 import { toYMD, toYMDStr } from "../utils/Dates";
 import { toYMD, toYMDStr } from "../utils/Dates";
 import { scheForage } from "../utils/LocalForage";
 import { scheForage } from "../utils/LocalForage";
 
 
 import { CalendarStateContext } from "../pages/Calendar";
 import { CalendarStateContext } from "../pages/Calendar";
 import ScheduleItem from "./ScheduleItem";
 import ScheduleItem from "./ScheduleItem";
+import axios from "axios";
 
 
 const GridItem = ({ targetDate }) => {
 const GridItem = ({ targetDate }) => {
   const { state } = useContext(CalendarStateContext);
   const { state } = useContext(CalendarStateContext);
@@ -14,7 +16,14 @@ const GridItem = ({ targetDate }) => {
 
 
   useEffect(() => {
   useEffect(() => {
     async function loadScheduleItems() {
     async function loadScheduleItems() {
-      setSchedules(await scheForage.getItem(toYMDStr(targetDate)));
+      const userID = await localforage.getItem("userID");
+      const res = await axios.get("http://localhost:3001/db/schedules_date", {
+        params: {
+          userID,
+          date: toYMDStr(targetDate, "-"),
+        },
+      });
+      setSchedules(res.data);
     }
     }
     loadScheduleItems();
     loadScheduleItems();
   }, [targetDate]);
   }, [targetDate]);

+import localforage from "localforage";
 import { useContext } from "react";
 import { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 
 
 import { CalendarStateContext } from "../pages/Calendar";
 import { CalendarStateContext } from "../pages/Calendar";
 import "../styles/Header.css";
 import "../styles/Header.css";
 import { moveDate, toYMD } from "../utils/Dates";
 import { moveDate, toYMD } from "../utils/Dates";
-import { dataForage } from "../utils/LocalForage";
 
 
 const Header = () => {
 const Header = () => {
   const { state, setState } = useContext(CalendarStateContext);
   const { state, setState } = useContext(CalendarStateContext);
@@ -93,7 +93,7 @@ const Header = () => {
         <button
         <button
           className="hrb_r"
           className="hrb_r"
           onClick={async () => {
           onClick={async () => {
-            await dataForage.setItem("session", "");
+            await localforage.setItem("session", null);
             navigate("/");
             navigate("/");
           }}
           }}
         >
         >

@@ -5,14 +5,17 @@ import zoomSymbol from "../assets/zoom.png";
 import ecampusSymbol from "../assets/e-Campus.png";
 import ecampusSymbol from "../assets/e-Campus.png";
 
 
 const ScheduleItem = ({ schedule }) => {
 const ScheduleItem = ({ schedule }) => {
-  const { subCode, type, category, label, start, end } = schedule;
-  const { subsObj } = useContext(CalendarStateContext);
-  const subject = subsObj[subCode];
-  if (!subject) {
-    console.log("can't find " + subCode);
-    return;
-  }
-  if (!subject.selected) return;
+  const {
+    name: subjectName,
+    color: subjectColor,
+    type,
+    label,
+    description,
+    url,
+    detail,
+    startTime = null,
+    endTime = null,
+  } = schedule;
 
 
   const selectSymbol = () => {
   const selectSymbol = () => {
     let symbol;
     let symbol;
@@ -20,7 +23,7 @@ const ScheduleItem = ({ schedule }) => {
       case "zoom":
       case "zoom":
         symbol = zoomSymbol;
         symbol = zoomSymbol;
         break;
         break;
-      case "ecampus":
+      case "assignment":
         symbol = ecampusSymbol;
         symbol = ecampusSymbol;
         break;
         break;
       default:
       default:
@@ -29,11 +32,15 @@ const ScheduleItem = ({ schedule }) => {
   };
   };
 
 
   return (
   return (
-    <div className="ScheduleItem" style={{ borderColor: subject.color }}>
+    <div className="ScheduleItem" style={{ borderColor: subjectColor }}>
       <img className="s_symbol" src={selectSymbol()} alt="404" />
       <img className="s_symbol" src={selectSymbol()} alt="404" />
-      {start && <span className="s_start">{start[0] + ":" + start[1]}</span>}
-      {end && <span className="s_end">{end[0] + ":" + end[1]}</span>}
-      <span className="s_category">{category}</span>
+      {startTime && (
+        <span className="s_start">{startTime[0] + ":" + startTime[1]}</span>
+      )}
+      {endTime && (
+        <span className="s_end">{endTime[0] + ":" + endTime[1]}</span>
+      )}
+      {/* <span className="s_category">{subjectName}</span> */}
       <span className="s_slabel">{label}</span>
       <span className="s_slabel">{label}</span>
     </div>
     </div>
   );
   );

 import React, { useEffect, useReducer, useState } from "react";
 import React, { useEffect, useReducer, useState } from "react";
 import { useNavigate, Route, Routes } from "react-router-dom";
 import { useNavigate, Route, Routes } from "react-router-dom";
 
 
-import { initTempSubjects } from "../utils/Test";
-import { dataForage, subForage } from "../utils/LocalForage";
+import { subForage } from "../utils/LocalForage";
 
 
 import Month from "../components/Month";
 import Month from "../components/Month";
 import Header from "../components/Header";
 import Header from "../components/Header";
 import Side from "../components/Side";
 import Side from "../components/Side";
+import localforage from "localforage";
+import axios from "axios";
 
 
 export const CalendarStateContext = React.createContext();
 export const CalendarStateContext = React.createContext();
 
 
@@ -36,12 +37,17 @@ const Calendar = () => {
   const navigate = useNavigate();
   const navigate = useNavigate();
   useEffect(() => {
   useEffect(() => {
     async function onMount() {
     async function onMount() {
-      if (!(await dataForage.getItem("session"))) return navigate("/login");
-
-      if (!(await dataForage.getItem("Subjects"))) await initTempSubjects();
+      if (!(await localforage.getItem("session"))) return navigate("/login");
+      // get user's subjects
+      const userID = await localforage.getItem("userID");
+      const subjects = await axios.get(
+        "http://localhost:3001/db/user-subject",
+        { params: { userID } }
+      ).data;
+      console.log(subjects);
       let tsubsObj = {};
       let tsubsObj = {};
-      for (const code of await dataForage.getItem("Subjects")) {
-        tsubsObj[code] = await subForage.getItem(code);
+      for (const sub of subjects) {
+        tsubsObj[sub.subjectID] = sub;
       }
       }
       dispatch({ type: "INIT", subsObj: tsubsObj });
       dispatch({ type: "INIT", subsObj: tsubsObj });
     }
     }

+import localforage from "localforage";
 import { useEffect } from "react";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 
 
-import { dataForage } from "../utils/LocalForage";
-
 const Home = () => {
 const Home = () => {
   console.log("visit Home");
   console.log("visit Home");
 
 
@@ -10,7 +9,7 @@ const Home = () => {
   useEffect(() => {
   useEffect(() => {
     async function where() {
     async function where() {
       let destination;
       let destination;
-      if (await dataForage.getItem("session")) {
+      if (await localforage.getItem("session")) {
         destination = "/calendar/month";
         destination = "/calendar/month";
       } else {
       } else {
         destination = "/login";
         destination = "/login";

 import { useEffect, useState } from "react";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
+import localforage from "localforage";
 
 
-import { dataForage } from "../utils/LocalForage";
 import "../styles/Login.css";
 import "../styles/Login.css";
 import axios from "axios";
 import axios from "axios";
+import cryptoJs from "crypto-js";
 
 
 const Login = () => {
 const Login = () => {
   console.log("visit Login");
   console.log("visit Login");
   const [state, setState] = useState({
   const [state, setState] = useState({
     id: "",
     id: "",
     pw: "",
     pw: "",
+    btn: "Login",
   });
   });
 
 
   const handleChangeState = (e) => {
   const handleChangeState = (e) => {
@@ -21,21 +23,57 @@ const Login = () => {
 
 
   const navigate = useNavigate();
   const navigate = useNavigate();
   const login = async () => {
   const login = async () => {
-    const res = await axios.post("http://localhost:3001/login/", {
-      id: state.id,
-      pw: state.pw,
-    });
+    setState({ ...state, btn: "Login..." });
+    const { data: userDBID } = await axios.get(
+      "http://localhost:3001/db/users",
+      {
+        params: {
+          loginID: state.id,
+        },
+      }
+    );
 
 
-    if (res.data === "login failed") alert("ID/PW를 확인해주세요");
-    else {
-      await dataForage.setItem("session", true);
-      navigate("/");
+    if (userDBID) {
+      //pass crawling
+      const hashpw = cryptoJs.SHA256(state.pw).toString();
+      const { data: isCorrectPW } = await axios.get(
+        "http://localhost:3001/db/users/check",
+        {
+          params: { loginID: state.id, loginPW: hashpw },
+        }
+      );
+      if (isCorrectPW) await localforage.setItem("userID", Number(userDBID));
+      else {
+        setState({ ...state, btn: "Login" });
+        alert("ID/PW를 확인해주세요");
+        return;
+      }
+    } else {
+      //crawling
+      const { data: loginResult } = await axios.post(
+        "http://localhost:3001/login/",
+        {
+          id: state.id,
+          pw: state.pw,
+        }
+      );
+      if (loginResult === "login failed") {
+        setState({ ...state, btn: "Login" });
+        alert("ID/PW를 확인해주세요");
+        return;
+      }
+      // + else (성공시) localforage에 userID추가
     }
     }
+    // + localforage에 id pw 추가
+    await localforage.setItem("id", state.id);
+    await localforage.setItem("pw", state.pw);
+    await localforage.setItem("session", true);
+    navigate("/");
   };
   };
 
 
   useEffect(() => {
   useEffect(() => {
     async function ifAlreadyLogined() {
     async function ifAlreadyLogined() {
-      if (await dataForage.getItem("session")) navigate("/");
+      if (await localforage.getItem("session")) navigate("/");
     }
     }
     ifAlreadyLogined();
     ifAlreadyLogined();
   }, [navigate]);
   }, [navigate]);
@@ -61,7 +99,7 @@ const Login = () => {
           type="password"
           type="password"
         />
         />
       </div>
       </div>
-      <button onClick={login}>Login</button>
+      <button onClick={login}>{state.btn}</button>
     </div>
     </div>
   );
   );
 };
 };

+import localforage from "localforage";
 import { Navigate, useNavigate } from "react-router-dom";
 import { Navigate, useNavigate } from "react-router-dom";
 
 
 import "../styles/Settings.css";
 import "../styles/Settings.css";
-import { dataForage } from "../utils/LocalForage";
 
 
 const Settings = () => {
 const Settings = () => {
   console.log("visit Settings");
   console.log("visit Settings");
 
 
-  const session = dataForage.getItem("session");
+  const session = localforage.getItem("session");
 
 
   const navigate = useNavigate();
   const navigate = useNavigate();
 
 

@@ -12,7 +12,9 @@
 
 
 .GridItem {
 .GridItem {
   border: solid thin lightgray;
   border: solid thin lightgray;
-  height: 150px;
+  display: flex;
+  flex-direction: column;
+  /* height: 150px; */
   padding: 5px;
   padding: 5px;
 }
 }
 
 

@@ -6,12 +6,12 @@ function toYMD(dateObj) {
   return { year, month, date };
   return { year, month, date };
 }
 }
 
 
-function toYMDStr(dateObj) {
+function toYMDStr(dateObj, joint) {
   return [
   return [
     dateObj.getFullYear(),
     dateObj.getFullYear(),
     dateObj.getMonth() + 1,
     dateObj.getMonth() + 1,
     dateObj.getDate(),
     dateObj.getDate(),
-  ].join("/");
+  ].join(joint);
 }
 }
 
 
 function toSunday(dateObj) {
 function toSunday(dateObj) {

+const CryptoJS = require("crypto-js");
+
+function createHashed(str) {
+  var hash = CryptoJS.SHA256(str);
+  console.log("암호화된 값 : " + hash);
+
+  // base64
+  // var key = CryptoJS.enc.Utf8.parse(str);
+  // var base64 = CryptoJS.enc.Base64.stringify(key); //encoded
+  // var decrypt = CryptoJS.enc.Base64.parse(base64);
+  // var hashData = decrypt.toString(CryptoJS.enc.Utf8); //decoded
+}
+
+createHashed("Happy2468!");
+
+module.exports = createHashed;

@@ -19,9 +19,9 @@ async function initTempSubjects() {
     },
     },
   ];
   ];
 
 
-  await scheForage.setItem(toYMDStr(new Date("2022-5-20")), tempsch);
-  await scheForage.setItem(toYMDStr(new Date("2022-5-27")), tempsch);
-  await scheForage.setItem(toYMDStr(new Date("2022-6-3")), tempsch);
+  await scheForage.setItem(toYMDStr(new Date("2022-5-20"), "/"), tempsch);
+  await scheForage.setItem(toYMDStr(new Date("2022-5-27"), "/"), tempsch);
+  await scheForage.setItem(toYMDStr(new Date("2022-6-3"), "/"), tempsch);
 
 
   let tcolors = [
   let tcolors = [
     "red",
     "red",