'/api/delete' mypick user card 삭제 기능 구현

 /*global kakao*/
 /*global kakao*/
-import React, { useEffect, useState, Fragment } from "react";
-import { Input, Button, ButtonGroup } from "reactstrap";
-import { Label, CustomInput, Row, Col, FormGroup } from "reactstrap";
+import React, { useEffect, useState } from "react";
+import { Input, } from "reactstrap";
+import { Label, Row, Col, FormGroup } from "reactstrap";
 import appKey from "../config/appKey.json";
 import appKey from "../config/appKey.json";
 
 
 const LandingMap = (props) => {
 const LandingMap = (props) => {
@@ -23,7 +23,6 @@ const LandingMap = (props) => {
     document.head.appendChild(script);
     document.head.appendChild(script);
 
 
     script.onload = () => {
     script.onload = () => {
-      console.log(FDatas);
       kakao.maps.load(() => {
       kakao.maps.load(() => {
         let container = document.getElementById("map");
         let container = document.getElementById("map");
         let options = {
         let options = {
@@ -111,12 +110,11 @@ const LandingMap = (props) => {
       }
       }
     }
     }
     setFDatas(result);
     setFDatas(result);
-  }, [selectedOption]);
+  }, [selectedOption, props]);
  
  
 
 
 
 
   const handleOptionChange = (e) => {
   const handleOptionChange = (e) => {
-    console.log(e.target.value);
     setselectedOption(e.target.value);
     setselectedOption(e.target.value);
   }
   }
 
 

@@ -10,12 +10,16 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 const MealCard = (props) => {
 const MealCard = (props) => {
   
   
   const [modal, setModal] = useState(false);
   const [modal, setModal] = useState(false);
-  const [isLogin, setIsLogin] = useState(false);
   const toggleModal = () => setModal(!modal);
   const toggleModal = () => setModal(!modal);
   
   
   
   
     const authApi = () => {
     const authApi = () => {
         const user = JSON.parse(localStorage.getItem('user'));
         const user = JSON.parse(localStorage.getItem('user'));
+        if(!user) {
+          alert('로그인이 필요합니다.');
+            window.location.href = "/mypick";
+            return ;
+          }
         return fetch('/api/auth', {
         return fetch('/api/auth', {
             method: 'GET',
             method: 'GET',
             headers: {
             headers: {
@@ -45,7 +49,7 @@ const MealCard = (props) => {
                 alert('error');
                 alert('error');
               }
               }
             });
             });
-                setIsLogin(true);
+
             } else {
             } else {
               alert('로그인이 필요합니다.');
               alert('로그인이 필요합니다.');
               window.location.href = "/mypick";
               window.location.href = "/mypick";
@@ -59,11 +63,6 @@ const MealCard = (props) => {
       authApi();
       authApi();
     }
     }
 
 
-    // useEffect(() => {
-    //     authApi();
-    // }, [isLogin]);
-
-
   return (
   return (
     <>
     <>
       <Card style={{
       <Card style={{

@@ -35,7 +35,7 @@ const NavBar = (props) => {
                 <NavLink href="/mypick" style={{'color':'#fff'}}>MyPick</NavLink>
                 <NavLink href="/mypick" style={{'color':'#fff'}}>MyPick</NavLink>
               </NavItem>
               </NavItem>
             </Nav>
             </Nav>
-            <NavbarText><a href="http://khuhub.khu.ac.kr/2019102227/TermProject" target="_blank" style={{'color':'#fff', 'textDecoration':'none'}}>OSS Project</a></NavbarText>
+            <NavbarText><a href="http://khuhub.khu.ac.kr/2019102227/TermProject" target="_blank" rel="noopener" style={{'color':'#fff', 'textDecoration':'none'}}>OSS Project</a></NavbarText>
           </Collapse>  
           </Collapse>  
         </Container>
         </Container>
       </Navbar>
       </Navbar>

@@ -12,6 +12,56 @@ const MealCard = (props) => {
   const [modal, setModal] = useState(false);
   const [modal, setModal] = useState(false);
   const toggleModal = () => setModal(!modal);
   const toggleModal = () => setModal(!modal);
   
   
+  const authApi = () => {
+    const user = JSON.parse(localStorage.getItem('user'));
+    if(!user) {
+      alert('토큰이 만료되었습니다.');
+        window.location.href = "/mypick";
+        return ;
+      }
+    return fetch('/api/auth', {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+            'authorization': user
+        }
+    }).then(response => response.json())
+    .then(result => {
+        if(result.message === 'valid token') {
+           
+          return fetch('/api/delete', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'authorization': user
+            },
+            body: JSON.stringify({
+              "cardid":props.id
+            })
+        }).then(response => response.json())
+        .then(result => {
+          if(result.message === 'delete success') {
+            alert('delete success');
+            window.location.href = "/mypick";
+          } else if(result.message === 'delete error') {
+             alert('delete error');
+          } else {
+            alert('error');
+          }
+        });
+        } else {
+          alert('토큰이 만료되었습니다.');
+          window.location.href = "/mypick";
+        }
+    });
+}
+
+
+  const deleteHandler = (e) => {
+    e.preventDefault();
+    authApi();
+  }
+
   return (
   return (
     <>
     <>
       <Card style={{
       <Card style={{
@@ -80,7 +130,7 @@ const MealCard = (props) => {
         <small>
         <small>
         썸네일 출처
         썸네일 출처
         <hr className="my-2"/>
         <hr className="my-2"/>
-        {props.img_source}  <Button size="sm" className="float-right" color="danger">Delete</Button>
+        {props.img_source}  <Button size="sm" onClick={deleteHandler} className="float-right" color="danger">Delete</Button>
         </small>
         </small>
         </div>
         </div>
         </ModalFooter>
         </ModalFooter>

 import React, { useState, useEffect } from 'react';
 import React, { useState, useEffect } from 'react';
 import { Container, Row, Col, Button } from 'reactstrap';
 import { Container, Row, Col, Button } from 'reactstrap';
-import cookie from 'react-cookies';
-import axios from 'axios';
 import PickedCard from '../components/PickedCard';
 import PickedCard from '../components/PickedCard';
 
 
 const UserCards = (props) => {
 const UserCards = (props) => {
@@ -10,6 +8,7 @@ const UserCards = (props) => {
     
     
     const authApi = () => {
     const authApi = () => {
       const user = JSON.parse(localStorage.getItem('user'));
       const user = JSON.parse(localStorage.getItem('user'));
+      
       return fetch('/api/mypicks', {
       return fetch('/api/mypicks', {
         method: 'GET',
         method: 'GET',
         headers: {
         headers: {
@@ -19,7 +18,6 @@ const UserCards = (props) => {
       }).then(response => response.json())
       }).then(response => response.json())
       .then( result => {
       .then( result => {
         setPicks(result.datas);
         setPicks(result.datas);
-        console.log(result.datas);
       } 
       } 
       );
       );
     }
     }
@@ -27,7 +25,7 @@ const UserCards = (props) => {
     useEffect(() => {
     useEffect(() => {
       setUsername(props.username);
       setUsername(props.username);
       authApi();
       authApi();
-      }, [username]);
+      }, [username, props]);
 
 
 
 
 
 
@@ -50,7 +48,7 @@ const UserCards = (props) => {
             <Container style={{'paddingTop':'1.2rem'}}>
             <Container style={{'paddingTop':'1.2rem'}}>
                 <Row xs="2" sm="2" md="4">
                 <Row xs="2" sm="2" md="4">
                     {picks.map((data, index) => 
                     {picks.map((data, index) => 
-                    <Col>
+                    <Col key = {index}>
                     <PickedCard
                     <PickedCard
                         key = {index}
                         key = {index}
                         id = {data.id}
                         id = {data.id}

@@ -9,12 +9,7 @@ import 'react-app-polyfill/ie11';
 // import 'bootstrap-css-only/css/bootstrap.min.css'; 
 // import 'bootstrap-css-only/css/bootstrap.min.css'; 
 // import 'mdbreact/dist/css/mdb.css';
 // import 'mdbreact/dist/css/mdb.css';
 
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+ReactDOM.render( <App />, document.getElementById('root'));
 
 
 // If you want your app to work offline and load faster, you can change
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // unregister() to register() below. Note this comes with some pitfalls.

-import React, { useState, useEffect, Fragment } from 'react';
+import React, { useState, useEffect} from 'react';
 import NavBar from '../components/NavBar';
 import NavBar from '../components/NavBar';
 import LandingMap from '../components/LandingMap';
 import LandingMap from '../components/LandingMap';
 import { CustomInput } from 'reactstrap';
 import { CustomInput } from 'reactstrap';
@@ -55,7 +55,7 @@ const LandingPage = (props) => {
         }
         }
         setFilteredDatas(result);
         setFilteredDatas(result);
         setIsLoading(true);
         setIsLoading(true);
-    }, [Kfood, Cfood, Jfood, meat, snackfood, pub, fastfood, cafe, etc]);
+    }, [Kfood, Cfood, Jfood, meat, snackfood, pub, fastfood, cafe, etc, datas]);
 
 
     useEffect(() => {
     useEffect(() => {
         if(all === true) {
         if(all === true) {
@@ -95,7 +95,7 @@ const LandingPage = (props) => {
             let y = -1;
             let y = -1;
             while(1) {
             while(1) {
                 y = getRandomInt(0, filteredDatas.length);
                 y = getRandomInt(0, filteredDatas.length);
-                if(x!=y) break;
+                if(x!==y) break;
             }
             }
             setRandomCards([filteredDatas[x], filteredDatas[y]]);    
             setRandomCards([filteredDatas[x], filteredDatas[y]]);    
             setIsRandom(2);
             setIsRandom(2);

@@ -57,7 +57,7 @@ const MenuPage = (props) => {
         }
         }
         setFilteredDatas(result);
         setFilteredDatas(result);
         setIsLoading(true);
         setIsLoading(true);
-    }, [Kfood, Cfood, Jfood, meat, snackfood, pub, fastfood, cafe, etc]);
+    }, [Kfood, Cfood, Jfood, meat, snackfood, pub, fastfood, cafe, etc, datas]);
 
 
     useEffect(() => {
     useEffect(() => {
         if(all === true) {
         if(all === true) {

@@ -59,7 +59,6 @@ app.post("/api/signup", (req, res) => {
         const params = [req.body.username, hash];
         const params = [req.body.username, hash];
         connection.query(sql, params, (err, rows, fields) => {
         connection.query(sql, params, (err, rows, fields) => {
           if (err) {
           if (err) {
-            console.log(err);
             res.send({
             res.send({
               code: 400,
               code: 400,
               message: "error",
               message: "error",
@@ -202,9 +201,11 @@ app.post('/api/pick', (req, res) => {
 
 
     connection.query(`SELECT pick FROM USER WHERE NAME='${username}';`, (err, rows, fileds)=> {
     connection.query(`SELECT pick FROM USER WHERE NAME='${username}';`, (err, rows, fileds)=> {
       if(rows.length === 0) {
       if(rows.length === 0) {
-        // ??
+        return res.status(401).json({
+          code: 401,
+          message: 'card exist'
+        });
       } else {
       } else {
-        // ???? ??
         let flag = true;
         let flag = true;
         let user_picks = rows[0].pick.split(',');
         let user_picks = rows[0].pick.split(',');
         user_picks.pop();
         user_picks.pop();
@@ -233,4 +234,47 @@ app.post('/api/pick', (req, res) => {
     })
     })
 });
 });
 
 
+app.post('/api/delete', (req, res) => {
+  const user = jwt_decode(req.headers.authorization);
+  const username = user.name;
+  const cardid = req.body.cardid;
+
+  connection.query(`SELECT pick FROM USER WHERE NAME='${username}';`, (err, rows, fileds)=> {
+    if(rows.length === 0) {
+      return res.status(401).json({
+        code: 401,
+        message: 'card exist'
+      });
+    } else {
+      let flag = false;
+      let user_picks = rows[0].pick.split(',');
+      let newPick = '';
+      user_picks.pop();
+      for(let i=0; i<user_picks.length; i++) {
+        if(user_picks[i] == cardid) {
+          flag = true;
+          continue;
+        }
+        else newPick = newPick + (user_picks[i] + ',');
+      }
+      if(flag) {    
+        console.log(user_picks, newPick);
+        connection.query(`UPDATE USER SET pick='${newPick}' WHERE NAME='${username}';`, (err, rows, fields) => {
+          return res.status(200).json({
+            code: 200,
+            message: 'delete success',
+          });
+        })
+      } else {
+        return res.status(401).json({
+          code: 401,
+          message: 'delete error'
+        });
+      }
+
+    }
+  })
+
+});
+
 app.listen(port, () => console.log(`Listening on port ${port}`));
 app.listen(port, () => console.log(`Listening on port ${port}`));
\ No newline at end of file