TODO 등록 기능 구현

@@ -2,15 +2,8 @@ import React, { useState } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { makeStyles } from "@material-ui/core/styles";
 import ModalControl from "./ModalControl.js";
 import ModalControl from "./ModalControl.js";
 
 
-import Modal from "@material-ui/core/Modal";
 import Icon from "@material-ui/core/Icon";
 import Icon from "@material-ui/core/Icon";
 import IconButton from "@material-ui/core/IconButton";
 import IconButton from "@material-ui/core/IconButton";
-import TextField from "@material-ui/core/TextField";
-import Button from "@material-ui/core/Button";
-import Typography from "@material-ui/core/Typography";
-import AddIcon from "@material-ui/icons/Add";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Checkbox from "@material-ui/core/Checkbox";
 
 
 const useStyles = makeStyles((theme) => ({
 const useStyles = makeStyles((theme) => ({
   iconButton: {
   iconButton: {
@@ -49,7 +42,6 @@ export default function AddButton() {
   };
   };
 
 
   const handleClose = () => {
   const handleClose = () => {
-    console.log(1);
     setOpen(false);
     setOpen(false);
   };
   };
 
 
@@ -64,7 +56,7 @@ export default function AddButton() {
   } else {
   } else {
     return (
     return (
       <>
       <>
-        <ModalControl state={open} handleClose={handleClose} />
+        <ModalControl handleClose={handleClose} />
       </>
       </>
     );
     );
   }
   }

@@ -70,9 +70,11 @@ const useStyles = makeStyles((theme) => ({
   },
   },
 }));
 }));
 
 
-export default function AddButton({ state, handleClose }) {
+export default function AddButton({ handleClose }) {
   const classes = useStyles();
   const classes = useStyles();
+  const initCk = new Array(3,0);
   const [title, setTitle] = useState("");
   const [title, setTitle] = useState("");
+  const [date, setDate] = useState(new Date());
   const [isPublic, setIsPublic] = useState(1);
   const [isPublic, setIsPublic] = useState(1);
   const [textList, setTextList] = useState(new Array());
   const [textList, setTextList] = useState(new Array());
   const [textFieldBody, setTextFieldBody] = useState([
   const [textFieldBody, setTextFieldBody] = useState([
@@ -80,6 +82,7 @@ export default function AddButton({ state, handleClose }) {
   ]);
   ]);
 
 
   const addApi = (data) => {
   const addApi = (data) => {
+    console.log(data);
     return fetch("/api/addcard", {
     return fetch("/api/addcard", {
       method: "POST",
       method: "POST",
       headers: {
       headers: {
@@ -89,16 +92,25 @@ export default function AddButton({ state, handleClose }) {
     }).then((response) => response.json());
     }).then((response) => response.json());
   };
   };
 
 
-  //   const initData = () => {
-  //     const initArr = new Array("","","","","");
-  //     setTitle("");
-  //     setIsPublic(1);
-  //     setTextList(initArr);
-  //     console.log(textList,1);
-  //     setTextFieldBody([
-  //       <TextField required label="To do 1" onChange={(e) => handleText(e, 0)} />,
-  //     ]);
-  //   };
+  const checkAndClose = () => {
+    if (title === "") {
+      alert("Please enter a title!");
+    } else if (checkEemptyList(textList)) {
+      alert("Please fill in the blank!");
+    } else {
+      const initCK = Array.apply(null, Array(textList.length)).map(Number.prototype.valueOf,0);
+      addApi({
+        isPublic: isPublic,
+        name: "testName",
+        date: date.toLocaleDateString(),
+        time: date.toLocaleTimeString(),
+        title: title,
+        todo: textList.join(","),
+        ck: initCK.join(","),
+      });
+      handleClose();
+    }
+  };
 
 
   const checkEemptyList = (arr) => {
   const checkEemptyList = (arr) => {
     if (arr.length === 0) {
     if (arr.length === 0) {
@@ -112,18 +124,6 @@ export default function AddButton({ state, handleClose }) {
     return 0;
     return 0;
   };
   };
 
 
-  const checkAndClose = () => {
-    if (title === "") {
-      alert("Please enter a title!");
-    } else if (checkEemptyList(textList)) {
-      alert("Please fill in the blank!");
-    } else {
-      //initData();
-      console.log(textList);
-      handleClose();
-    }
-  };
-
   const handleTitle = (e) => {
   const handleTitle = (e) => {
     setTitle(e.target.value);
     setTitle(e.target.value);
   };
   };

@@ -31,14 +31,13 @@ const useStyles = makeStyles({
 });
 });
 
 
 
 
-export default function TodoCard({ data, isMine, isVisible }) {
+export default function TodoCard({ data, isMine}) {
   const classes = useStyles();
   const classes = useStyles();
   const [render, setRender] = useState(0);
   const [render, setRender] = useState(0);
-  const todo = data.todo.split(",").slice(0,-1).map((text)=>{
+  const todo = data.todo.split(",").map((text)=>{
       return text;
       return text;
   });
   });
-  console.log(todo);
-  const [checkState, setCheckState] = useState(data.ck.split(",").slice(0,-1).map((ck) => {
+  const [checkState, setCheckState] = useState(data.ck.split(",").map((ck) => {
       return parseInt(ck);
       return parseInt(ck);
   }))
   }))
   let settingButton = null;
   let settingButton = null;
@@ -59,8 +58,8 @@ export default function TodoCard({ data, isMine, isVisible }) {
   return (
   return (
     <Card className={classes.root}>
     <Card className={classes.root}>
       <CardContent>
       <CardContent>
-        <Typography className={classes.date} color="textSecondary" gutterBottom>
-          {data.date} &middot; {data.name}
+        <Typography className={classes.date}  gutterBottom> {/*color="textSecondary"*/}
+           {data.name} &middot; {data.time} 
         </Typography>
         </Typography>
 
 
         {settingButton}
         {settingButton}
@@ -73,6 +72,7 @@ export default function TodoCard({ data, isMine, isVisible }) {
           {checkState.reduce((a, b) => a + b)}/{checkState.length}
           {checkState.reduce((a, b) => a + b)}/{checkState.length}
         </Typography>
         </Typography>
         {todo.map((item, idx) => {
         {todo.map((item, idx) => {
+          console.log(item);
           return (
           return (
             <FormControlLabel
             <FormControlLabel
               className={classes.checkBox}
               className={classes.checkBox}

@@ -5,16 +5,16 @@ const app = express();
 
 
 const port = process.env.PORT || 5000;
 const port = process.env.PORT || 5000;
 
 
-const data = fs.readFileSync('./database.json');
+const data = fs.readFileSync("./database.json");
 const conf = JSON.parse(data);
 const conf = JSON.parse(data);
-const mysql = require('mysql');
+const mysql = require("mysql");
 
 
 const connection = mysql.createConnection({
 const connection = mysql.createConnection({
   host: conf.host,
   host: conf.host,
   user: conf.user,
   user: conf.user,
   password: conf.password,
   password: conf.password,
   port: conf.port,
   port: conf.port,
-    database: conf.database
+  database: conf.database,
 });
 });
 
 
 connection.connect();
 connection.connect();
@@ -23,12 +23,28 @@ app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.urlencoded({ extended: true }));
 
 
 app.get("/api/cards", (req, res) => {
 app.get("/api/cards", (req, res) => {
-  connection.query(
-    'SELECT * FROM CARDINFO',
-    (err,rows,fields)=>{
+  connection.query("SELECT * FROM CARDINFO", (err, rows, fields) => {
     res.send(rows);
     res.send(rows);
+  });
+});
+
+app.post("/api/addcard", (req, res) => {
+  const data = req.body;
+  const sql = "INSERT INTO CARDINFO(isPublic,name,date,time,title,todo,ck) VALUES(?,?,?,?,?,?,?);";
+  const params =[data.isPublic,data.name,data.date,data.time,data.title,data.todo,data.ck];
+  connection.query(sql, params, (err, rows, fields) => {
+    if (err) {
+      res.send({
+        code: 400,
+        message: "error",
+      });
+    } else {
+      res.send({
+        code: 200,
+        message: "success",
+      });
     }
     }
-  )
+  });
 });
 });
 
 
 app.listen(port, () => console.log(`Listening on port ${port}`));
 app.listen(port, () => console.log(`Listening on port ${port}`));