'values not storing to board if i edit the value
If i click on edit button, try to change the value and after saving the value, It's changing the value in localhost but not updating in board. [In the image shows todo app, If i add the data in input field, the values entered is storing in board and if i delete, values are deleting. But, if i click on edit, values are changing in localhost but not in board][1] Please help me to find the right solution.
import mondaySdk from "monday-sdk-js";
import "monday-ui-react-core/dist/main.css";
import { BrowserRouter,Route,Routes } from "react-router-dom";
import Update from "./Update";
import { Link } from "react-router-dom";
import EdiText from 'react-editext'
const monday = mondaySdk();
class Todo extends React.Component {
constructor(props) {
super(props)
this.state = {
settings: {},
name: '',
nameError:'',
dataDelete:[],
nameBlank:false,
arrayData:[],
page:1,
totalPagination:0
};
}
componentDidMount() {
monday.listen("settings", res => {
this.setState({
settings:{
backgroundColor:res.data.backgroundColor
}
})
});
}
onClickDelete=(itemId)=>{
const query = 'mutation{ delete_item (item_id: '+itemId+') { id }}';
fetch ("https://api.monday.com/v2", {
method: 'post',
headers: {
'Content-Type': 'application/json',
'Authorization' : 'eyJhbGciOiJIUzI1NiJ9.eyJ0aWQiOjE0MTE3NTM5NSwidWlkIjoyNzA5Mzk2NCwiaWFkIjoiMjAyMi0wMS0xN1QxMzoyNzo0My4wMDBaIiwicGVyIjoibWU6d3JpdGUiLCJhY3RpZCI6NzYxMzc0MywicmduIjoidXNlMSJ9.pg_vHeW_LBGr4FANVSfS9bc2QJI--q0NFDv2sODlufM'
},
body: JSON.stringify({query:query})
})
}
componentDidMount(){
let query = '{boards(limit:100) { name id items { name column_values{title id text } } } }';
fetch ("https://api.monday.com/v2", {
method: 'post',
headers: {
'Content-Type': 'application/json',
'Authorization' : 'eyJhbGciOiJIUzI1NiJ9.eyJ0aWQiOjE0MTE3NTM5NSwidWlkIjoyNzA5Mzk2NCwiaWFkIjoiMjAyMi0wMS0xN1QxMzoyNzo0My4wMDBaIiwicGVyIjoibWU6d3JpdGUiLCJhY3RpZCI6NzYxMzc0MywicmduIjoidXNlMSJ9.pg_vHeW_LBGr4FANVSfS9bc2QJI--q0NFDv2sODlufM'
},
body: JSON.stringify({
'query' : query
})
})
.then(res => res.json())
// .then(res=>console.log(res.data.boards))
.then(res=>res.data.boards.map((dataValue)=>{
if(dataValue.name==='Todo Board')
{
var itemLength=dataValue.items.length
// console.log(dataValue)
this.setState({
arrayData:res.data.boards,
totalPagination:itemLength
})
}
}))
}
componentDidUpdate(){
var currentPage=this.state.page
let query = '{boards(limit:100) { name id items(limit:10,page:'+currentPage+') { name column_values{title id text } } } }';
fetch ("https://api.monday.com/v2", {
method: 'post',
headers: {
'Content-Type': 'application/json',
'Authorization' : 'eyJhbGciOiJIUzI1NiJ9.eyJ0aWQiOjE0MTE3NTM5NSwidWlkIjoyNzA5Mzk2NCwiaWFkIjoiMjAyMi0wMS0xN1QxMzoyNzo0My4wMDBaIiwicGVyIjoibWU6d3JpdGUiLCJhY3RpZCI6NzYxMzc0MywicmduIjoidXNlMSJ9.pg_vHeW_LBGr4FANVSfS9bc2QJI--q0NFDv2sODlufM'
},
body: JSON.stringify({
'query' : query
})
})
.then(res => res.json())
.then(res=>this.setState({arrayData:res.data.boards}))
}
onChangeName=(event1)=>{
this.setState({
name:event1.target.value,
nameBlank:false
})
}
onValidation()
{
const {name}=this.state
if(name==="")
{
this.setState({
nameBlank:true
})
}
else if(name.length<3)
{
this.setState({
nameError:"Enter the name above 3 characters",
})
}
else
{
this.onStoreDataToBoard();
}
}
onStoreDataToBoard()
{
let query = 'mutation ($myItemName: String!, $columnVals: JSON!) { create_item (board_id:2171185233, item_name:$myItemName, column_values:$columnVals) { id } }';
let vars = {
"myItemName" : this.state.name,
"columnVals" : JSON.stringify({
})
};
fetch ("https://api.monday.com/v2", {
method: 'post',
headers: {
'Content-Type': 'application/json',
'Authorization' : 'eyJhbGciOiJIUzI1NiJ9.eyJ0aWQiOjE0MTE3NTM5NSwidWlkIjoyNzA5Mzk2NCwiaWFkIjoiMjAyMi0wMS0xN1QxMzoyNzo0My4wMDBaIiwicGVyIjoibWU6d3JpdGUiLCJhY3RpZCI6NzYxMzc0MywicmduIjoidXNlMSJ9.pg_vHeW_LBGr4FANVSfS9bc2QJI--q0NFDv2sODlufM'
},
body: JSON.stringify({
'query' : query,
'variables' : JSON.stringify(vars)
})
})
}
onSave = (itemVal) => {
let query = 'mutation ( $myItemName: String!) { change_simple_column_value (board_id:2171185233, item_id:2192899865, column_id:name, value:$myItemName) { id } }';
let vars = {
"myItemName" : this.state.name,
// "columnVals" : JSON.stringify({
// "name" :this.state.name,
// })
};
fetch ("https://api.monday.com/v2", {
method: 'post',
headers: {
'Content-Type': 'application/json',
'Authorization' : 'eyJhbGciOiJIUzI1NiJ9.eyJ0aWQiOjE0MTE3NTM5NSwidWlkIjoyNzA5Mzk2NCwiaWFkIjoiMjAyMi0wMS0xN1QxMzoyNzo0My4wMDBaIiwicGVyIjoibWU6d3JpdGUiLCJhY3RpZCI6NzYxMzc0MywicmduIjoidXNlMSJ9.pg_vHeW_LBGr4FANVSfS9bc2QJI--q0NFDv2sODlufM'
},
body: JSON.stringify({
'query' : query,
'variables' : JSON.stringify(vars)
})
})
.then(res => res.json())
.then(res => console.log(JSON.stringify(res, null, 2)));
}
onClickButton=()=>{
this.onValidation()
}
render() {
const {nameBlank,nameError}=this.state
return (
<div>
<div className="DetailsData" style={{background:this.state.settings.backgroundColor,display:'block',padding:'10px'}}>
<br/>
<div className="Createinside">
<h1>Todo List</h1>
<label>Add Todo: </label>
<input type="text" name="name" onChange={(event1)=>this.onChangeName(event1)}/>
<button style={{backgroundColor:'orange'}} onClick={this.onClickButton}>Submit</button>
{
nameBlank?<p>Enter the Todo Name</p>:null
}
<div>{nameError}</div>
<br/>
<br/>
</div>
</div>
<div>
<table className="center">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<td>
{
this.state.arrayData.map((value,index)=>{
return (
<div key={index}>
{value.name==='Todo Board'?
<div>
{
value.items.map((itemVal,index)=>{
return (
<div key={index}>
{
itemVal.column_values.map((columnVal,index)=>{
return (
<div key={index}>
{
columnVal.title==='Item ID'?
<div>
<p className="gettingValue">{columnVal.text}</p>
</div>:null
}
</div>
)
})
}
</div>
)
})
}
</div>:null
}
</div>
)
})
}
</td>
<td>
{
this.state.arrayData.map((value,index)=>{
return (
<div key={index}>
{
value.name==='Todo Board'?
<div>
{value.items.map((itemVal,index)=>{
return (
<div key={index}>
{/* <p className="gettingValue">{itemVal.name}</p> */}
<EdiText className="gettingValue"
type='text'
editButtonContent='Edit'
value={itemVal.name}
onSave={this.onSave(itemVal.text)}
/>
</div>
)
})}
</div>:null
}
</div>
)
})
}
</td>
<td>
{
this.state.arrayData.map((value,index)=>{
return (
<div key={index}>
{value.name==='Todo Board'?
<div>
{
value.items.map((itemVal,index)=>{
return (
<div key={index}>
{
itemVal.column_values.map((columnVal,index)=>{
return (
<div key={index}>
{
columnVal.title==='Item ID'?
<div>
<p className="gettingValue">
<button style={{background:'yellow'}} onClick={()=>this.onClickDelete(columnVal.text)}>Delete</button>
</p>
</div>:null
}
</div>
)
})
}
</div>
)
})
}
</div>:null
}
</div>
)
})
}
</td>
</tr>
</table>
</div>
</div>
)
}
}
export default Todo;```
[1]: https://i.stack.imgur.com/6Tpma.png
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|