From 968f987470635876e9f4c1703d91fedb0197b719 Mon Sep 17 00:00:00 2001
From: pymit <amkr.here@gmail.com>
Date: Tue, 16 Jul 2019 19:40:59 +0530
Subject: [PATCH 1/6] adding icon button

---
 src/main/Homepage/feedback/cardview.js |  2 +-
 src/main/Homepage/feedback/divider.js  | 71 +++++++++++---------------
 src/main/Homepage/feedback/index.js    |  2 +-
 3 files changed, 31 insertions(+), 44 deletions(-)

diff --git a/src/main/Homepage/feedback/cardview.js b/src/main/Homepage/feedback/cardview.js
index 251aa53..058c3ba 100644
--- a/src/main/Homepage/feedback/cardview.js
+++ b/src/main/Homepage/feedback/cardview.js
@@ -19,7 +19,7 @@ const useStyles = makeStyles({
 export default function Maincard(props) {
     const classes = useStyles();
     var pingDividerMain;
-    if(typeof props.data !=='undefined')
+    if(typeof props.data !=='undefined') // It checks wether the argument passed contains any array data or not
     {
       pingDividerMain = <DividerMain  data={props.data}/>;
     }
diff --git a/src/main/Homepage/feedback/divider.js b/src/main/Homepage/feedback/divider.js
index 197cf15..1fe44b3 100644
--- a/src/main/Homepage/feedback/divider.js
+++ b/src/main/Homepage/feedback/divider.js
@@ -6,63 +6,50 @@ import ListItemAvatar from "@material-ui/core/ListItemAvatar";
 import Avatar from "@material-ui/core/Avatar";
 import Icon from "@material-ui/core/Icon";
 import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
 
 export class DividerMain extends Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            contents: null,
+            contents: null
         };
     }
-
-	componentWillMount() {
+    componentWillMount() {
         this.setState({ contents: this.props.data });
-	}
-
+    }
 
     render() {
-		const someData = [{"id":18,"suggestedName":"Bill Gates","upvote":0,"downvote":0,"feedback":"6c2c99a1-6510-4584-9c05-6b87d4106565"},{"id":19,"suggestedName":"Bill Gates","upvote":0,"downvote":0,"feedback":"6c2c99a1-6510-4584-9c05-6b87d4106565"}];
-		// const testdata = JSON.parse(JSON.stringify( this.state.contents))
-		// console.log(this.state.contents.length)
-		console.log(typeof(this.state.contents))
-
-		if(typeof this.props.data !=='undefined')
-		{
-			console.log("oh no")
-			console.log( this.props.data.length)
+        // const someData = [{"id":18,"suggestedName":"Bill Gates","upvote":0,"downvote":0,"feedback":"6c2c99a1-6510-4584-9c05-6b87d4106565"},{"id":19,"suggestedName":"Bill Gates","upvote":0,"downvote":0,"feedback":"6c2c99a1-6510-4584-9c05-6b87d4106565"}];
+        // const testdata = JSON.parse(JSON.stringify( this.state.contents))
+        // console.log(this.state.contents.length)
+        const receivedData = this.state.contents;
 
-			this.props.data.map(o => (
-				  console.log(o)
-				))
-		}
         return (
             <div>
-
-
-				{ someData.map(o => (
-					<h4>
-					  {o.upvote} {o.suggestedName} {o.downvote}
-					</h4>
-					))
-				}
-
-
                 <List>
-                    <ListItem>
-                        <Divider variant="inset" />
-                        <ListItemAvatar>
-                            <Avatar>
-                                <Icon>thumb_up</Icon>
-                            </Avatar>
-                        </ListItemAvatar>
-                        <ListItemText primary="testing" secondary="" />
-                        <ListItemAvatar>
-                            <Avatar>
-                                <Icon>thumb_down</Icon>
-                            </Avatar>
-                        </ListItemAvatar>
-                    </ListItem>
+                    {receivedData.map(out => (
+                        <ListItem key={out.id}>
+                            <ListItemAvatar>
+                                <IconButton>
+                                    {" "}
+                                    <Icon>thumb_up</Icon>
+                                </IconButton>
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={out.suggestedName}
+                                secondary=" "
+                            />
+                            <ListItemAvatar>
+                                <IconButton>
+                                    {" "}
+                                    <Icon>thumb_down</Icon>
+                                </IconButton>
+                            </ListItemAvatar>
+                            <Divider variant="inset" />
+                        </ListItem>
+                    ))}
                 </List>
             </div>
         );
diff --git a/src/main/Homepage/feedback/index.js b/src/main/Homepage/feedback/index.js
index 8bc5aa1..d97782c 100644
--- a/src/main/Homepage/feedback/index.js
+++ b/src/main/Homepage/feedback/index.js
@@ -41,7 +41,7 @@ class FeedBack extends Component {
                         data={this.state.test.data}
                     />
                 </div>
-                <div>feedback {indexId}</div>
+                <div>feedback </div>
 
             </div>
         );

From 415f1b4b8f59f85952bee3f3edfc73859fb7f293 Mon Sep 17 00:00:00 2001
From: pymit <amkr.here@gmail.com>
Date: Wed, 17 Jul 2019 06:59:51 +0530
Subject: [PATCH 2/6] adding onclick handler for upvote and downvote system

---
 src/main/Homepage/feedback/cardview.js | 27 ++++++++++----------------
 src/main/Homepage/feedback/divider.js  | 19 ++++++++++++++----
 src/main/Homepage/feedback/index.css   | 18 ++++++++++++-----
 src/main/Homepage/feedback/index.js    |  1 -
 4 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/main/Homepage/feedback/cardview.js b/src/main/Homepage/feedback/cardview.js
index 058c3ba..3be9928 100644
--- a/src/main/Homepage/feedback/cardview.js
+++ b/src/main/Homepage/feedback/cardview.js
@@ -19,13 +19,11 @@ const useStyles = makeStyles({
 export default function Maincard(props) {
     const classes = useStyles();
     var pingDividerMain;
-    if(typeof props.data !=='undefined') // It checks wether the argument passed contains any array data or not
-    {
-      pingDividerMain = <DividerMain  data={props.data}/>;
-    }
-    else
-    {
-      pingDividerMain =  "";
+    if (typeof props.data !== "undefined") {
+        // It checks wether the argument passed contains any array data or not
+        pingDividerMain = <DividerMain data={props.data} />;
+    } else {
+        pingDividerMain = "";
     }
 
     return (
@@ -40,19 +38,14 @@ export default function Maincard(props) {
                         />
                     </CardActionArea>
                     <CardActions>
-                        <Button size="small" color="primary">
-                            Share
-                        </Button>
-                        <Button size="small" color="primary">
-                            Learn More
-                        </Button>
+                        <Button size="small" color="primary" />{" "}
+                        <Button size="small" color="primary" />
+                        <Button size="small" color="primary" />{" "}
+                        <Button size="small" color="primary" />
                     </CardActions>
                 </Card>
             </div>
-            <div>
-
-          {pingDividerMain}
-            </div>
+            <div>{pingDividerMain}</div>
         </div>
     );
 }
diff --git a/src/main/Homepage/feedback/divider.js b/src/main/Homepage/feedback/divider.js
index 1fe44b3..69ca5cf 100644
--- a/src/main/Homepage/feedback/divider.js
+++ b/src/main/Homepage/feedback/divider.js
@@ -15,7 +15,18 @@ export class DividerMain extends Component {
         this.state = {
             contents: null
         };
-    }
+		this.handleUpvoteClick = this.handleUpvoteClick.bind(this);
+		this.handleDownvoteClick = this.handleDownvoteClick.bind(this);
+	}
+
+	handleUpvoteClick(feed,uvote) {
+	  console.log("upvote ",feed,uvote)
+	}
+	handleDownvoteClick(feed,dvote) {
+		console.log("Downvote ",feed,dvote)
+	  }
+
+
     componentWillMount() {
         this.setState({ contents: this.props.data });
     }
@@ -32,9 +43,9 @@ export class DividerMain extends Component {
                     {receivedData.map(out => (
                         <ListItem key={out.id}>
                             <ListItemAvatar>
-                                <IconButton>
+                                <IconButton onClick={() => this.handleUpvoteClick(out.id,out.upvote)}>
                                     {" "}
-                                    <Icon>thumb_up</Icon>
+                                    <Icon>thumb_up amit</Icon>
                                 </IconButton>
                             </ListItemAvatar>
                             <ListItemText
@@ -42,7 +53,7 @@ export class DividerMain extends Component {
                                 secondary=" "
                             />
                             <ListItemAvatar>
-                                <IconButton>
+                                <IconButton onClick={() => this.handleDownvoteClick(out.id,out.downvote)}>
                                     {" "}
                                     <Icon>thumb_down</Icon>
                                 </IconButton>
diff --git a/src/main/Homepage/feedback/index.css b/src/main/Homepage/feedback/index.css
index 162332a..6ceb5ac 100644
--- a/src/main/Homepage/feedback/index.css
+++ b/src/main/Homepage/feedback/index.css
@@ -1,11 +1,19 @@
 .maincardview {
-    /* position: absolute; */
-    /* margin: auto;
+    position: absolute;
+     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
-    left: 0; */
-    /* width: 600px;
-	height: 600px; */
+    left: 0;
+    width: 800px;
+	height: 350px;
 	display: flex;
 }
+
+.MuiCardActions-root
+{
+    /* background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); */
+    /* background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%,  rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% ); */
+    /* background-image: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%); */
+    /* background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% ); */
+}
diff --git a/src/main/Homepage/feedback/index.js b/src/main/Homepage/feedback/index.js
index d97782c..1550749 100644
--- a/src/main/Homepage/feedback/index.js
+++ b/src/main/Homepage/feedback/index.js
@@ -41,7 +41,6 @@ class FeedBack extends Component {
                         data={this.state.test.data}
                     />
                 </div>
-                <div>feedback </div>
 
             </div>
         );

From 625227726ce9c093c63ba0d29381b8db11edd980 Mon Sep 17 00:00:00 2001
From: pymit <amkr.here@gmail.com>
Date: Wed, 17 Jul 2019 08:12:41 +0530
Subject: [PATCH 3/6] post data

---
 src/main/Homepage/feedback/FeedBackDB.js | 14 ++++++-
 src/main/Homepage/feedback/divider.js    | 48 +++++++++++++++++-------
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/src/main/Homepage/feedback/FeedBackDB.js b/src/main/Homepage/feedback/FeedBackDB.js
index 6178e74..fb3ad75 100644
--- a/src/main/Homepage/feedback/FeedBackDB.js
+++ b/src/main/Homepage/feedback/FeedBackDB.js
@@ -6,12 +6,22 @@ const API_URL = "http://localhost:8000";
 export default class FeedBackService {
     constructor() {}
 
-    getEmeddingList() {
+    getEmeddingList() { // Get the list of faceid
         const url = `${API_URL}/api/faceid/`;
         return axios.get(url).then(response => response.data);
     }
-    getFeedbackList() {
+    getFeedbackList() { //get the info saved in feedback table
         const url = `${API_URL}/api/feedback/`;
         return axios.get(url).then(response => response);
     }
+    postFeedbackList(postedValue) { //post to update or add suggested name in feedback feature
+        const url = `${API_URL}/api/feedback/`;
+        let form_data = new FormData();
+        form_data.append("data", postedValue);
+        return axios.post(url, postedValue, {
+            headers: {
+                "content-type": "multipart/form-data"
+            }
+        })
+    }
 }
diff --git a/src/main/Homepage/feedback/divider.js b/src/main/Homepage/feedback/divider.js
index 69ca5cf..286e181 100644
--- a/src/main/Homepage/feedback/divider.js
+++ b/src/main/Homepage/feedback/divider.js
@@ -7,6 +7,8 @@ import Avatar from "@material-ui/core/Avatar";
 import Icon from "@material-ui/core/Icon";
 import Divider from "@material-ui/core/Divider";
 import IconButton from "@material-ui/core/IconButton";
+import FeedBackService from "./FeedBackDB";
+const postFBservice = new FeedBackService();
 
 export class DividerMain extends Component {
     constructor(props) {
@@ -15,17 +17,31 @@ export class DividerMain extends Component {
         this.state = {
             contents: null
         };
-		this.handleUpvoteClick = this.handleUpvoteClick.bind(this);
-		this.handleDownvoteClick = this.handleDownvoteClick.bind(this);
-	}
-
-	handleUpvoteClick(feed,uvote) {
-	  console.log("upvote ",feed,uvote)
-	}
-	handleDownvoteClick(feed,dvote) {
-		console.log("Downvote ",feed,dvote)
-	  }
+        this.handleUpvoteClick = this.handleUpvoteClick.bind(this);
+        this.handleDownvoteClick = this.handleDownvoteClick.bind(this);
+    }
 
+    handleUpvoteClick(valueSent) {
+        const dataToBeSent = {
+            id: valueSent.id,
+            suggestedName: valueSent.suggestedName,
+            upvote: valueSent.upvote + 1,
+            downvote: valueSent.downvote,
+            feedback: valueSent.feedback
+        };
+        // console.log(dataToBeSent);
+        postFBservice.postFeedbackList(dataToBeSent);
+    }
+    handleDownvoteClick(valueSent) {
+        const dataToBeSent = {
+            id: valueSent.id,
+            suggestedName: valueSent.suggestedName,
+            upvote: valueSent.upvote + -1,
+            downvote: valueSent.downvote,
+            feedback: valueSent.feedback
+		};
+		console.log(dataToBeSent);
+    }
 
     componentWillMount() {
         this.setState({ contents: this.props.data });
@@ -43,9 +59,11 @@ export class DividerMain extends Component {
                     {receivedData.map(out => (
                         <ListItem key={out.id}>
                             <ListItemAvatar>
-                                <IconButton onClick={() => this.handleUpvoteClick(out.id,out.upvote)}>
+                                <IconButton
+                                    onClick={() => this.handleUpvoteClick(out)}
+                                >
                                     {" "}
-                                    <Icon>thumb_up amit</Icon>
+                                    <Icon>thumb_up</Icon>
                                 </IconButton>
                             </ListItemAvatar>
                             <ListItemText
@@ -53,7 +71,11 @@ export class DividerMain extends Component {
                                 secondary=" "
                             />
                             <ListItemAvatar>
-                                <IconButton onClick={() => this.handleDownvoteClick(out.id,out.downvote)}>
+                                <IconButton
+                                    onClick={() =>
+                                        this.handleDownvoteClick(out)
+                                    }
+                                >
                                     {" "}
                                     <Icon>thumb_down</Icon>
                                 </IconButton>

From 017c0856046214c053d6c64fcedc5ec7db3eeeb8 Mon Sep 17 00:00:00 2001
From: pymit <amkr.here@gmail.com>
Date: Wed, 17 Jul 2019 08:16:25 +0530
Subject: [PATCH 4/6] post data

---
 src/main/Homepage/feedback/FeedBackDB.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/Homepage/feedback/FeedBackDB.js b/src/main/Homepage/feedback/FeedBackDB.js
index fb3ad75..1cc0fcd 100644
--- a/src/main/Homepage/feedback/FeedBackDB.js
+++ b/src/main/Homepage/feedback/FeedBackDB.js
@@ -17,8 +17,8 @@ export default class FeedBackService {
     postFeedbackList(postedValue) { //post to update or add suggested name in feedback feature
         const url = `${API_URL}/api/feedback/`;
         let form_data = new FormData();
-        form_data.append("data", postedValue);
-        return axios.post(url, postedValue, {
+        form_data.append("data", JSON.stringify(postedValue));
+        return axios.post(url, form_data, {
             headers: {
                 "content-type": "multipart/form-data"
             }

From c436434e8f3fdf580eb0a9512d958d71e704299c Mon Sep 17 00:00:00 2001
From: pymit <amkr.here@gmail.com>
Date: Fri, 19 Jul 2019 22:48:55 +0530
Subject: [PATCH 5/6] Now data is being sent to the django backend

---
 src/main/Homepage/feedback/FeedBackDB.js | 15 +++++++++++----
 src/main/Homepage/feedback/divider.js    | 12 ++++++------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/main/Homepage/feedback/FeedBackDB.js b/src/main/Homepage/feedback/FeedBackDB.js
index 1cc0fcd..758cada 100644
--- a/src/main/Homepage/feedback/FeedBackDB.js
+++ b/src/main/Homepage/feedback/FeedBackDB.js
@@ -16,12 +16,19 @@ export default class FeedBackService {
     }
     postFeedbackList(postedValue) { //post to update or add suggested name in feedback feature
         const url = `${API_URL}/api/feedback/`;
+
         let form_data = new FormData();
-        form_data.append("data", JSON.stringify(postedValue));
+        form_data.set('id',postedValue.id);
+        form_data.set('suggestedName',postedValue.suggestedName);
+        form_data.set('upvote',postedValue.upvote);
+        form_data.set('downvote',postedValue.downvote);
+        form_data.set('feedback_id',postedValue.feedback_id);
+
         return axios.post(url, form_data, {
-            headers: {
-                "content-type": "multipart/form-data"
-            }
+             headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+          },
+
         })
     }
 }
diff --git a/src/main/Homepage/feedback/divider.js b/src/main/Homepage/feedback/divider.js
index 286e181..481fe72 100644
--- a/src/main/Homepage/feedback/divider.js
+++ b/src/main/Homepage/feedback/divider.js
@@ -3,11 +3,11 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemAvatar from "@material-ui/core/ListItemAvatar";
-import Avatar from "@material-ui/core/Avatar";
 import Icon from "@material-ui/core/Icon";
 import Divider from "@material-ui/core/Divider";
 import IconButton from "@material-ui/core/IconButton";
 import FeedBackService from "./FeedBackDB";
+
 const postFBservice = new FeedBackService();
 
 export class DividerMain extends Component {
@@ -27,7 +27,7 @@ export class DividerMain extends Component {
             suggestedName: valueSent.suggestedName,
             upvote: valueSent.upvote + 1,
             downvote: valueSent.downvote,
-            feedback: valueSent.feedback
+            feedback_id: valueSent.feedback
         };
         // console.log(dataToBeSent);
         postFBservice.postFeedbackList(dataToBeSent);
@@ -36,11 +36,11 @@ export class DividerMain extends Component {
         const dataToBeSent = {
             id: valueSent.id,
             suggestedName: valueSent.suggestedName,
-            upvote: valueSent.upvote + -1,
+            upvote: valueSent.upvote - 1,
             downvote: valueSent.downvote,
-            feedback: valueSent.feedback
-		};
-		console.log(dataToBeSent);
+            feedback_id: valueSent.feedback
+        };
+        postFBservice.postFeedbackList(dataToBeSent);
     }
 
     componentWillMount() {

From 1023425edcc6225978616f44bd58106900a91c56 Mon Sep 17 00:00:00 2001
From: pymit <amkr.here@gmail.com>
Date: Sun, 21 Jul 2019 08:33:06 +0530
Subject: [PATCH 6/6] feature to add new name suggested

---
 src/main/Homepage/feedback/divider.js   | 69 +++++++++++++++----------
 src/main/Homepage/feedback/nameInput.js | 63 ++++++++++++++++++++++
 2 files changed, 104 insertions(+), 28 deletions(-)
 create mode 100644 src/main/Homepage/feedback/nameInput.js

diff --git a/src/main/Homepage/feedback/divider.js b/src/main/Homepage/feedback/divider.js
index 481fe72..3b1948b 100644
--- a/src/main/Homepage/feedback/divider.js
+++ b/src/main/Homepage/feedback/divider.js
@@ -7,6 +7,7 @@ import Icon from "@material-ui/core/Icon";
 import Divider from "@material-ui/core/Divider";
 import IconButton from "@material-ui/core/IconButton";
 import FeedBackService from "./FeedBackDB";
+import NameInput from "./nameInput";
 
 const postFBservice = new FeedBackService();
 
@@ -15,7 +16,9 @@ export class DividerMain extends Component {
         super(props);
 
         this.state = {
-            contents: null
+            contents: null,
+            input_feedback_id: null,
+            isValueSet: false
         };
         this.handleUpvoteClick = this.handleUpvoteClick.bind(this);
         this.handleDownvoteClick = this.handleDownvoteClick.bind(this);
@@ -56,33 +59,43 @@ export class DividerMain extends Component {
         return (
             <div>
                 <List>
-                    {receivedData.map(out => (
-                        <ListItem key={out.id}>
-                            <ListItemAvatar>
-                                <IconButton
-                                    onClick={() => this.handleUpvoteClick(out)}
-                                >
-                                    {" "}
-                                    <Icon>thumb_up</Icon>
-                                </IconButton>
-                            </ListItemAvatar>
-                            <ListItemText
-                                primary={out.suggestedName}
-                                secondary=" "
-                            />
-                            <ListItemAvatar>
-                                <IconButton
-                                    onClick={() =>
-                                        this.handleDownvoteClick(out)
-                                    }
-                                >
-                                    {" "}
-                                    <Icon>thumb_down</Icon>
-                                </IconButton>
-                            </ListItemAvatar>
-                            <Divider variant="inset" />
-                        </ListItem>
-                    ))}
+                    {receivedData.map(out => {
+                        !this.isValueSet
+                            ? (this.state.input_feedback_id = out.feedback)
+                            : (this.isValueSet = true);
+                        return (
+                            <ListItem key={out.id}>
+                                <ListItemAvatar>
+                                    <IconButton
+                                        onClick={() =>
+                                            this.handleUpvoteClick(out)
+                                        }
+                                    >
+                                        <Icon>thumb_up</Icon>
+                                    </IconButton>
+                                </ListItemAvatar>
+                                <ListItemText
+                                    primary={out.suggestedName}
+                                    secondary=" "
+                                />
+                                <ListItemAvatar>
+                                    <IconButton
+                                        onClick={() =>
+                                            this.handleDownvoteClick(out)
+                                        }
+                                    >
+                                        {" "}
+                                        <Icon>thumb_down</Icon>
+                                    </IconButton>
+                                </ListItemAvatar>
+                                <Divider variant="inset" />
+
+                                {/* {!this.isValueSet?this.setState({input_feedback_id :out.feedback}):this.isValueSet=true} */}
+                            </ListItem>
+                        );
+                    })}
+                    {/*console.log(this.state.input_feedback_id) */}
+                    <NameInput feedback_id_value = {this.state.input_feedback_id}/>
                 </List>
             </div>
         );
diff --git a/src/main/Homepage/feedback/nameInput.js b/src/main/Homepage/feedback/nameInput.js
new file mode 100644
index 0000000..fba23f9
--- /dev/null
+++ b/src/main/Homepage/feedback/nameInput.js
@@ -0,0 +1,63 @@
+import React from "react";
+import TextField from "@material-ui/core/TextField";
+import FeedBackService from "./FeedBackDB";
+
+const postFBservice = new FeedBackService();
+
+export default class NameInput extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            value: null,
+            isSent: false,
+            id: -1,
+            suggestedName: null,
+            upvote: 0,
+            downvote: 0,
+            feedback_id: this.props.feedback_id_value
+        };
+    }
+    handleChange = event => {
+        this.setState({
+            suggestedName: event.target.value
+        });
+    };
+
+    handleClick = event => {
+        if (this.state.isSent === false && this.state.suggestedName!==null) {
+            const dataToBeSent = {
+                id: this.state.id,
+                suggestedName: this.state.suggestedName,
+                upvote: this.state.upvote,
+                downvote: this.state.downvote,
+                feedback_id: this.state.feedback_id
+            };
+            postFBservice.postFeedbackList(dataToBeSent);
+
+            // console.log(dataToBeSent);
+
+            this.setState({
+                isSent: true
+            });
+        } else {
+            alert("You can't suggest blank or more than 1 name");
+        }
+    };
+
+    render() {
+        return (
+            <div>
+                <TextField
+                    id="outlined-dense"
+                    label="Suggest Name"
+                    margin="Suggest Name"
+                    variant="outlined"
+                    value={this.state.value}
+                    onChange={this.handleChange}
+                />
+                <button onClick={this.handleClick}>Send</button>
+            </div>
+        );
+    }
+}