김대휘 / Do-gether

Go to a project
Toggle navigation Toggle navigation pinning
김대휘
4118dc1f 1 parent 65f59535

DELETE 구현

Inline Side-by-side
Showing 8 changed files with 134 additions and 75 deletions
1 +# Do-gether
2 +----------
3 +Sharing your TODO-LIST with others!
4 +
5 +## HOW TO USE
6 +----------------
7 +You can come here and use DO-GETHER.
8 +[`http://wwww.dogether.tk:3000`](http://wwww.dogether.tk:3000)
9 +![main](/uploads/0b44105f829a49b4211d4e6adc9d2c33/main.png)
10 +
11 +## HOW TO INSTALL
12 +-------------
13 +First, clone this project
14 +
15 +`git clone http://khuhub.khu.ac.kr/2019102153/Do-gether.git`
16 +
17 +and execute this command.
18 +```sh
19 +npm install
20 +cd client
21 +npm install
22 +```
23 +
24 +Second, install yarn.
25 +
26 +On Debian or Ubuntu Linux, you can install Yarn via our Debian package repository.
27 +You will first need to configure the repository:
28 +```sh
29 +curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
30 +echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
31 +```
32 +
33 +On Ubuntu 16.04 or below and Debian Stable,
34 +you will also need to configure the NodeSource repository to get a new enough version of Node.js.
35 +
36 +Then you can simply:
37 +`sudo apt update && sudo apt install yarn`
38 +
39 +Reference : [`https://yarnpkg.com/en/docs/install`](https://yarnpkg.com/en/docs/install)
40 +
41 +## LISENCE
42 +---------
43 +Do-gether is free software, and may be redistributed under the terms specified in the [MIT LICENSE](http://khuhub.khu.ac.kr/2019102153/Do-gether/blob/master/LICENSE.txt) file.
...\ No newline at end of file ...\ No newline at end of file
1 +PORT=80
...\ No newline at end of file ...\ No newline at end of file
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 "react-scripts": "^3.4.1" 14 "react-scripts": "^3.4.1"
15 }, 15 },
16 "scripts": { 16 "scripts": {
17 - "start": "react-scripts start", 17 + "start": "PORT=80 && react-scripts start",
18 "build": "react-scripts build", 18 "build": "react-scripts build",
19 "test": "react-scripts test", 19 "test": "react-scripts test",
20 "eject": "react-scripts eject" 20 "eject": "react-scripts eject"
......
...@@ -90,13 +90,16 @@ export default function AddButton({ handleClose }) { ...@@ -90,13 +90,16 @@ export default function AddButton({ handleClose }) {
90 }).then((response) => response.json()); 90 }).then((response) => response.json());
91 }; 91 };
92 92
93 - const checkAndClose = () => { 93 + const handleAdd = () => {
94 if (title === "") { 94 if (title === "") {
95 alert("Please enter a title!"); 95 alert("Please enter a title!");
96 } else if (checkEemptyList(textList)) { 96 } else if (checkEemptyList(textList)) {
97 alert("Please fill in the blank!"); 97 alert("Please fill in the blank!");
98 } else { 98 } else {
99 - const initCK = Array.apply(null, Array(textList.length)).map(Number.prototype.valueOf,0); 99 + const initCK = Array.apply(null, Array(textList.length)).map(
100 + Number.prototype.valueOf,
101 + 0
102 + );
100 addApi({ 103 addApi({
101 isPublic: isPublic, 104 isPublic: isPublic,
102 name: localStorage["userName"], 105 name: localStorage["userName"],
...@@ -107,6 +110,7 @@ export default function AddButton({ handleClose }) { ...@@ -107,6 +110,7 @@ export default function AddButton({ handleClose }) {
107 ck: initCK.join(","), 110 ck: initCK.join(","),
108 }); 111 });
109 handleClose(); 112 handleClose();
113 + window.location.reload(false);
110 } 114 }
111 }; 115 };
112 116
...@@ -122,21 +126,13 @@ export default function AddButton({ handleClose }) { ...@@ -122,21 +126,13 @@ export default function AddButton({ handleClose }) {
122 return 0; 126 return 0;
123 }; 127 };
124 128
125 - const handleTitle = (e) => {
126 - setTitle(e.target.value);
127 - };
128 -
129 - const handlePublic = () => {
130 - setIsPublic(isPublic ? 0 : 1);
131 - };
132 -
133 const handleText = (e, idx) => { 129 const handleText = (e, idx) => {
134 let tempArr = textList; 130 let tempArr = textList;
135 tempArr[idx] = e.target.value; 131 tempArr[idx] = e.target.value;
136 setTextList(tempArr); 132 setTextList(tempArr);
137 }; 133 };
138 134
139 - const handleAdd = () => { 135 + const handleAddTODO = () => {
140 if (textFieldBody.length < 5) { 136 if (textFieldBody.length < 5) {
141 const idx = textFieldBody.length; 137 const idx = textFieldBody.length;
142 setTextFieldBody([ 138 setTextFieldBody([
...@@ -161,21 +157,33 @@ export default function AddButton({ handleClose }) { ...@@ -161,21 +157,33 @@ export default function AddButton({ handleClose }) {
161 </Typography> 157 </Typography>
162 <FormControlLabel 158 <FormControlLabel
163 className={classes.isPublic} 159 className={classes.isPublic}
164 - control={<Checkbox onClick={handlePublic} />} 160 + control={
161 + <Checkbox
162 + onClick={() => {
163 + setIsPublic(isPublic ? 0 : 1);
164 + }}
165 + />
166 + }
165 checked={isPublic} 167 checked={isPublic}
166 label="Public" 168 label="Public"
167 /> 169 />
168 170
169 <form className={classes.input} noValidate autoComplete="off"> 171 <form className={classes.input} noValidate autoComplete="off">
170 - <TextField required label="Title" onChange={handleTitle} /> 172 + <TextField
173 + required
174 + label="Title"
175 + onChange={(e) => {
176 + setTitle(e.target.value);
177 + }}
178 + />
171 {textFieldBody.map((field) => field)} 179 {textFieldBody.map((field) => field)}
172 </form> 180 </form>
173 - <IconButton className={classes.addButton} onClick={handleAdd}> 181 + <IconButton className={classes.addButton} onClick={handleAddTODO}>
174 <AddIcon /> 182 <AddIcon />
175 </IconButton> 183 </IconButton>
176 184
177 <form className={classes.buttonGroup}> 185 <form className={classes.buttonGroup}>
178 - <Button variant="contained" color="primary" onClick={checkAndClose}> 186 + <Button variant="contained" color="primary" onClick={handleAdd}>
179 확인 187 확인
180 </Button> 188 </Button>
181 <Button variant="contained" color="secondary" onClick={handleClose}> 189 <Button variant="contained" color="secondary" onClick={handleClose}>
......
...@@ -100,16 +100,22 @@ export default function AddButton({ data, handleClose }) { ...@@ -100,16 +100,22 @@ export default function AddButton({ data, handleClose }) {
100 }).then((response) => response.json()); 100 }).then((response) => response.json());
101 }; 101 };
102 102
103 - const checkAndClose = () => { 103 + const deleteApi = (data) => {
104 + return fetch("/api/deletecard", {
105 + method: "DELETE",
106 + headers: {
107 + "Content-Type": "application/json",
108 + },
109 + body: JSON.stringify(data),
110 + }).then((response) => response.json());
111 + };
112 +
113 + const handleModify = () => {
104 if (title === "") { 114 if (title === "") {
105 alert("Please enter a title!"); 115 alert("Please enter a title!");
106 } else if (checkEemptyList(textList)) { 116 } else if (checkEemptyList(textList)) {
107 alert("Please fill in the blank!"); 117 alert("Please fill in the blank!");
108 } else { 118 } else {
109 - const initCK = Array.apply(null, Array(textList.length)).map(
110 - Number.prototype.valueOf,
111 - 0
112 - );
113 modifyApi({ 119 modifyApi({
114 isPublic: isPublic, 120 isPublic: isPublic,
115 name: localStorage["userName"], 121 name: localStorage["userName"],
...@@ -117,13 +123,25 @@ export default function AddButton({ data, handleClose }) { ...@@ -117,13 +123,25 @@ export default function AddButton({ data, handleClose }) {
117 time: data.time, 123 time: data.time,
118 title: title, 124 title: title,
119 todo: textList.join(","), 125 todo: textList.join(","),
120 - ck: initCK.join(","), 126 + ck: data.ck,
121 }); 127 });
122 handleClose(); 128 handleClose();
123 window.location.reload(false); 129 window.location.reload(false);
124 } 130 }
125 }; 131 };
126 132
133 + const handleDelete = () => {
134 + deleteApi({
135 + name: localStorage["userName"],
136 + date: data.date,
137 + time: data.time,
138 + });
139 + handleClose();
140 + alert("Deleted Successfully!");
141 + window.location.reload(false);
142 + };
143 +
144 +
127 const checkEemptyList = (arr) => { 145 const checkEemptyList = (arr) => {
128 if (arr.length === 0) { 146 if (arr.length === 0) {
129 return 1; 147 return 1;
...@@ -136,21 +154,13 @@ export default function AddButton({ data, handleClose }) { ...@@ -136,21 +154,13 @@ export default function AddButton({ data, handleClose }) {
136 return 0; 154 return 0;
137 }; 155 };
138 156
139 - const handleTitle = (e) => {
140 - setTitle(e.target.value);
141 - };
142 -
143 - const handlePublic = () => {
144 - setIsPublic(isPublic ? 0 : 1);
145 - };
146 -
147 const handleText = (e, idx) => { 157 const handleText = (e, idx) => {
148 let tempArr = textList; 158 let tempArr = textList;
149 tempArr[idx] = e.target.value; 159 tempArr[idx] = e.target.value;
150 setTextList(tempArr); 160 setTextList(tempArr);
151 }; 161 };
152 162
153 - const handleAdd = () => { 163 + const handleAddTODO = () => {
154 if (textFieldBody.length < 5) { 164 if (textFieldBody.length < 5) {
155 const idx = textFieldBody.length; 165 const idx = textFieldBody.length;
156 setTextFieldBody([ 166 setTextFieldBody([
...@@ -175,24 +185,41 @@ export default function AddButton({ data, handleClose }) { ...@@ -175,24 +185,41 @@ export default function AddButton({ data, handleClose }) {
175 </Typography> 185 </Typography>
176 <FormControlLabel 186 <FormControlLabel
177 className={classes.isPublic} 187 className={classes.isPublic}
178 - control={<Checkbox onClick={handlePublic} />} 188 + control={
189 + <Checkbox
190 + onClick={() => {
191 + setIsPublic(isPublic ? 0 : 1);
192 + }}
193 + />
194 + }
179 checked={isPublic} 195 checked={isPublic}
180 label="Public" 196 label="Public"
181 /> 197 />
182 198
183 <form className={classes.input} noValidate autoComplete="off"> 199 <form className={classes.input} noValidate autoComplete="off">
184 - <TextField required label="Title" onChange={handleTitle} defaultValue={data.title}/> 200 + <TextField
201 + required
202 + label="Title"
203 + onChange={(e) => {
204 + setTitle(e.target.value);
205 + }}
206 + defaultValue={data.title}
207 + />
185 {textFieldBody.map((field) => field)} 208 {textFieldBody.map((field) => field)}
186 </form> 209 </form>
187 - <IconButton className={classes.addButton} onClick={handleAdd}> 210 + <IconButton className={classes.addButton} onClick={handleAddTODO}>
188 <AddIcon /> 211 <AddIcon />
189 </IconButton> 212 </IconButton>
190 213
191 <form className={classes.buttonGroup}> 214 <form className={classes.buttonGroup}>
192 - <Button variant="contained" color="primary" onClick={checkAndClose}> 215 + <Button variant="contained" color="primary" onClick={handleModify}>
193 수정 216 수정
194 </Button> 217 </Button>
195 - <Button variant="contained" color="secondary" onClick={handleClose}> 218 + <Button
219 + variant="contained"
220 + color="secondary"
221 + onClick={handleDelete}
222 + >
196 삭제 223 삭제
197 </Button> 224 </Button>
198 </form> 225 </form>
......
...@@ -23,6 +23,7 @@ export default function SettingButton({data, isMine }) { ...@@ -23,6 +23,7 @@ export default function SettingButton({data, isMine }) {
23 23
24 const handleOpen = () => { 24 const handleOpen = () => {
25 setOpen(true); 25 setOpen(true);
26 + console.log(data);
26 }; 27 };
27 28
28 const handleClose = () => { 29 const handleClose = () => {
......
...@@ -45,27 +45,25 @@ export default function TodoCard({ data, isMine }) { ...@@ -45,27 +45,25 @@ export default function TodoCard({ data, isMine }) {
45 ); 45 );
46 46
47 const handleCheck = (idx) => { 47 const handleCheck = (idx) => {
48 - if(localStorage["userName"]===data.name) 48 + if (localStorage["userName"] === data.name) {
49 - {
50 let tempArr = checkState; 49 let tempArr = checkState;
51 - tempArr[idx] = tempArr[idx] ? 0 : 1; 50 + tempArr[idx] = tempArr[idx] ? 0 : 1;
52 - setCheckState(tempArr); 51 + setCheckState(tempArr);
53 - setRender([]); 52 + data.ck=tempArr.join(",");
54 - modifyApi({ 53 + console.log(data);
55 - isPublic: data.isPublic, 54 + setRender([]);
56 - name: localStorage["userName"], 55 + modifyApi({
57 - date: data.date, 56 + isPublic: data.isPublic,
58 - time: data.time, 57 + name: localStorage["userName"],
59 - title: data.title, 58 + date: data.date,
60 - todo: data.todo, 59 + time: data.time,
61 - ck: tempArr.join(",") 60 + title: data.title,
62 - }); 61 + todo: data.todo,
63 - 62 + ck: tempArr.join(","),
64 - }else{ 63 + });
64 + } else {
65 alert("You can't modify other people's list."); 65 alert("You can't modify other people's list.");
66 } 66 }
67 -
68 -
69 }; 67 };
70 68
71 const modifyApi = (data) => { 69 const modifyApi = (data) => {
......
...@@ -72,15 +72,6 @@ app.put("/api/updatecard", (req, res) => { ...@@ -72,15 +72,6 @@ app.put("/api/updatecard", (req, res) => {
72 const sql = 72 const sql =
73 `UPDATE CARDINFO SET title="${data.title}",todo="${data.todo}",ck="${data.ck}" WHERE name="${data.name}" AND date="${data.date}" AND time="${data.time}";`; 73 `UPDATE CARDINFO SET title="${data.title}",todo="${data.todo}",ck="${data.ck}" WHERE name="${data.name}" AND date="${data.date}" AND time="${data.time}";`;
74 console.log(sql); 74 console.log(sql);
75 - // const params = [
76 - // data.isPublic,
77 - // data.name,
78 - // data.date,
79 - // data.time,
80 - // data.title,
81 - // data.todo,
82 - // data.ck,
83 - // ];
84 connection.query(sql, (err, rows, fields) => { 75 connection.query(sql, (err, rows, fields) => {
85 if (err) { 76 if (err) {
86 res.send({ 77 res.send({
...@@ -98,19 +89,9 @@ app.put("/api/updatecard", (req, res) => { ...@@ -98,19 +89,9 @@ app.put("/api/updatecard", (req, res) => {
98 89
99 app.delete("/api/deletecard", (req, res) => { 90 app.delete("/api/deletecard", (req, res) => {
100 const data = req.body; 91 const data = req.body;
101 - const sql = 92 + const sql = `DELETE FROM CARDINFO WHERE name="${data.name}" AND date="${data.date}" AND time="${data.time}";`;
102 - "INSERT INTO CARDINFO(isPublic,name,date,time,title,todo,ck) VALUES(?,?,?,?,?,?,?);";
103 93
104 - const params = [ 94 + connection.query(sql, (err, rows, fields) => {
105 - data.isPublic,
106 - data.name,
107 - data.date,
108 - data.time,
109 - data.title,
110 - data.todo,
111 - data.ck,
112 - ];
113 - connection.query(sql, params, (err, rows, fields) => {
114 if (err) { 95 if (err) {
115 res.send({ 96 res.send({
116 code: 400, 97 code: 400,
......