feature to add new name suggested

marxmit7 · Jul 21, 2019 · 1023425 · 1023425
1 parent c436434
commit 1023425
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 28 deletions.
diff --git 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
@@ -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>
+        );
+    }
+}