added checklist for each card

src/App.js

@@ -7,7 +7,7 @@ import {MemoryRouter as Router, Route,Link,Switch} from 'react-router-dom'
 import SideBar2 from './sidebar/sideBar2';
 import List from './Lists/List'
 import Content from './content/Content';
-//import CheckList from './Lists/Checklist'
+import CheckList from './Lists/Checklist'
 
 
 class  App extends Component{
@@ -46,7 +46,7 @@ class  App extends Component{
       <Header></Header>
       <Switch>
       <Route path="/boards/:boardid" render={props =>(<List {...props}/>)} />
-      {/* <Route path="/check" render={props =>(<CheckList prop={props}/>)} /> */}
+       <Route path="/check" render={props =>(<CheckList prop={props}/>)} /> 
       <Route path="/" render={ props => (<Content  boards={this.state.boards}/>)} />
       </Switch>
     </div>

src/Lists/CheckList.css

@@ -0,0 +1,10 @@
+.card{
+    width:265px ;
+    background-color: #F4F5F7 !important;
+    height:75px ;
+    margin-top:5px !important;
+    margin-bottom:5px !important;
+    color:black;
+
+
+  }

src/Lists/Checklist.js

@@ -0,0 +1,100 @@
+import React, {Fragment} from 'react';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import FormDialog from '../body/Dialog'
+import { TramRounded } from '@material-ui/icons';
+import './CheckList.css'
+import CheckboxList from './checkBox'
+
+
+export default class CheckList extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+       token:"374c221b4185e80027a402574dc071768d32336c175b07d821f47c7cdfbaecf2",
+       key:"5c73e280ffee643ce764c6df16a719b5",
+       open:false,
+       id:this.props.checkId,
+       data:[],
+
+      }
+  }
+  async componentDidMount(){
+     console.log("component mounted")
+     if(this.props.checkId!=0){
+     const res= fetch(`https://api.trello.com/1/checklist/${this.state.id}?key=${this.state.key}&token=${this.state.token}`)
+    .then((res)=>res.json()).then((data1)=>{
+      this.setState({
+        data:data1.checkItems
+      },()=>console.log("state data",this.state.data))
+
+  })
+}
+}
+  handleClickOpen = () => {
+    this.setState({
+      open:true
+    })
+  };
+  // FormatData = ()=>{
+  //   let listArray=[]
+  //   if(this.state.data[0].length>0){
+  //   for(let i in this.state.data.checkList[0]){
+  //     listArray.push(this.props.checkList[0][i])
+  //   }
+  //   return listArray
+  // }
+  // return 0
+  // }
+
+   handleClose = () => {
+    this.setState({
+      open:false
+    })
+
+  };
+   handleSubmit = () => {
+    this.setState({
+      open:false
+    })
+  };
+  handleChange =(e)=>{
+      console.log(e.target.value)
+      this.setState({
+        open:true
+      })
+  }
+// check list items
+render(){
+  console.log("rendering")
+  return (
+    <Fragment>
+       <Button  className="card" onClick={this.handleClickOpen}>
+       {this.props.cardName}
+      </Button>
+      <Dialog open={this.state.open} onClose={this.handleClose} aria-labelledby="form-dialog-title">
+        <DialogTitle id="form-dialog-title">this.props.cardName</DialogTitle>
+        <FormDialog></FormDialog>
+        <DialogContent>
+          <CheckboxList checkData={this.state.data}></CheckboxList>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={this.handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button  color="primary">
+            submit
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Fragment>
+  );
+  }
+}
+

src/Lists/List.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import SimpleList from './Listitems'
 import FormDialog from '../body/Dialog'
+import {Route} from 'react-router-dom'
+import CheckList from './Checklist'
 
 class List extends Component{
     constructor(props) {
@@ -16,7 +18,7 @@ class List extends Component{
         }
     }
     async componentDidMount(){
-        console.log(this.state.id)
+        console.log(this.props)
         const res= await fetch(`https://api.trello.com/1/boards/${this.state.id}/lists?key=${this.state.key}&token=${this.state.token}`)
        const dataList = await res.json();
        const res2= await fetch(`https://api.trello.com/1/boards/5eaefe609dc0505416efe976/cards?key=${this.state.key}&token=${this.state.token}`)
@@ -28,12 +30,12 @@ class List extends Component{
                  let temp={}
                  temp["cardId"]=cardId;
                  temp["cardName"]=cardName;
-                 temp["checkId"]=idChecklists;
+                 temp["checkId"]=(idChecklists[0])?idChecklists[0]:0;
                  temp1.push(temp);
              }
 
         })
-        return <SimpleList key={listId} cardData={temp1} listData={{id:listId,name:listName}}/>;
+        return <SimpleList key={listId} url={this.props.match.url} cardData={temp1} listData={{id:listId,name:listName}}/>;
        })
       this.setState({
      lists:dataList,
@@ -48,6 +50,7 @@ console.log(this.state.listData)
             <div style={{maxHeight:"91vh",display:"flex",overflow:"scroll",marginTop:5}}>
               {this.state.listData}
               <FormDialog Stylename="ListStyle" title="Create New List" submit={this.handleSubmit} label="Enter List Name"></FormDialog>
+               {/* <Route exact path={`${this.props.match.url}/:cardId`} render={(props)=><CheckList {...props} dialogState={true}/>}></Route> */}
             </div>
         )
     }

src/Lists/ListItem.css

@@ -7,11 +7,12 @@
       border-radius:10;
       box-sizing: border-box;
   }
-    .cards{
-      width: 300px  ;
-      max-height:75vh;
+  .cards{
+      width: 300px;
+      max-height: 75vh;
       overflow:auto;
-      background-Color:#ebecf0;
+      background-Color:ebecf0;
+      box-sizing: border-box;
   }
   .header2{
       width:100%;

src/Lists/Listitems.js

@@ -1,16 +1,17 @@
 import React from 'react';
 import FormDialog from '../body/Dialog';
 import Button from '@material-ui/core/Button'
-import CardList from './Card'
-import './ListItem.css'
 
+import './ListItem.css'
+import {Link} from 'react-router-dom'
+import CheckList from './Checklist'
 
 const handleSubmit=()=>{
 
 }
 
 
-export default function SimpleList({cardData,listData}) {
+export default function SimpleList({cardData,listData,url}) {
 
   return (
     <div className="root">
@@ -19,7 +20,8 @@ export default function SimpleList({cardData,listData}) {
         </div>
         <div className="cards">
              {cardData.map((data)=>{
-                return <CardList CardData={data}/>
+                console.log(data.checkId)
+                return (<CheckList {...data}></CheckList>)
             })} 
         </div>
         <div className="footer">

src/Lists/checkBox copy.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import Checkbox from '@material-ui/core/Checkbox';
+import IconButton from '@material-ui/core/IconButton';
+import CommentIcon from '@material-ui/icons/Comment';
+import { Button } from '@material-ui/core';
+import FormDialog from '../body/Dialog'
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+}));
+export default function CheckboxList({checkList,name}) {
+  const [checked, setChecked] = React.useState([0]);
+  const [list, setList] = React.useState([]);
+  const [id1, setId]= React.useState(0)
+ let listArray=[]
+ for(let i in checkList[0]){
+    listArray.push(checkList[0][i])
+ }
+ setList([...listArray])
+  const classes = useStyles();
+  const handleSubmit=(name1)=>{
+    listArray.push({name:name1,id:id1+1})
+    setList([...listArray])
+  }
+
+  const handleToggle = (value) => () => {
+    const currentIndex = checked.indexOf(value);
+    const newChecked = [...checked];
+
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+
+    setChecked(newChecked);
+  };
+
+  return (
+     <div>
+    <List className={classes.root}>
+      { 
+       list.map((value)=>{
+        const labelId = `checkbox-list-label-${value.id}`;
+        console.log("data",value)
+        return (
+          <ListItem key={value.id} role={undefined} dense button onClick={handleToggle(value.id)}>
+            <ListItemIcon>
+              <Checkbox
+                edge="start"
+                checked={checked.indexOf(value.id) !== -1}
+                tabIndex={-1}
+                disableRipple
+                inputProps={{ 'aria-labelledby': labelId }}
+              />
+            </ListItemIcon>
+            <ListItemText id={value.id} primary={value.name} />
+
+          </ListItem>
+        );
+      })}
+
+    </List>
+    <FormDialog Stylename="checkList" title="Create New CheckList" submit={handleSubmit} label="Enter the task"></FormDialog>
+    </div>
+  );
+}