From 2beb908d2342476d8401d30f64e70d31064ae0e4 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Sun, 16 Aug 2020 23:06:39 -0500
Subject: [PATCH 01/15] Make configuration page

---
 src/App.js                                    | 55 +++++++++++--------
 src/Banner.js                                 | 30 ++++++++++
 src/modules/MakeConnectList/ConfButton.css    | 20 +++++++
 src/modules/MakeConnectList/ConfButton.js     | 16 ++++++
 .../MakeConnectList/ConfButtonContainers.css  | 13 +++++
 .../MakeConnectList/ConfButtonContainers.js   | 25 +++++++++
 .../MakeConnectList/MakeConnectList.js        | 27 +++++++++
 src/modules/makeConfiguration.js              |  2 +-
 8 files changed, 163 insertions(+), 25 deletions(-)
 create mode 100644 src/Banner.js
 create mode 100644 src/modules/MakeConnectList/ConfButton.css
 create mode 100644 src/modules/MakeConnectList/ConfButton.js
 create mode 100644 src/modules/MakeConnectList/ConfButtonContainers.css
 create mode 100644 src/modules/MakeConnectList/ConfButtonContainers.js
 create mode 100644 src/modules/MakeConnectList/MakeConnectList.js

diff --git a/src/App.js b/src/App.js
index 497bb76..e938ace 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,9 @@ import ExcelTaker from './ExcelTaker'
 import { Jumbotron } from 'reactstrap';
 import { makeConfiguration } from './modules/makeConfiguration';
 import Update from './modules/update/Update';
+import MakeConnectList from './modules/MakeConnectList/MakeConnectList';
+import Banner from "./Banner"
+
 
 const monday = mondaySdk();
 
@@ -67,26 +70,24 @@ class App extends Component {
 
   setConfiguration = (localItemList, mondayColumns, setHaveConf) => {
     this.setState({configuration:makeConfiguration(localItemList, mondayColumns, setHaveConf)}, () => 
-    this.setMondayJsonIndex(this.state.configuration))
-  }
+      {
+        if(this.haveConf){
+          this.setMondayJsonIndex(this.state.configuration)
+        }else{
+          this.setState({haveConnectList:false})
+        }
+      }
+   )}
 
   render() {
-    const { localItemList, mondayColumns, haveConf, configuration, mondayJsonIndex, boardIds, headerIndex } = this.state;
+    const { localItemList, mondayColumns,haveConnectList, haveConf, configuration, mondayJsonIndex, boardIds, headerIndex } = this.state;
     console.log(boardIds)
     return (
       <div>
-        <div>
-          <Jumbotron className="jumbotron-background">          
-              <h1 className="display-3">Update Monday Board</h1>
-              {
-                haveConf ? 
-                <p className="lead">Click Update Button</p>
-                :  
-                <p className="lead">Upload Excel file or CSV file</p>
-              }                 
-              <hr className="my-2" />
-          </Jumbotron>
-        </div>
+      <Banner 
+        haveConnectList={haveConnectList} 
+        haveConf={haveConf}
+      /> 
         {
           haveConf ? 
           <Update 
@@ -96,15 +97,21 @@ class App extends Component {
             localItemList={localItemList}
             headerIndex={headerIndex}
           />
-          :  
-          <ExcelTaker
-            getRows={this.getRows}
-            setConfiguration={this.setConfiguration}
-            mondayColumns={mondayColumns}
-            setHaveConf={this.setHaveConf}
-          />
-        }        
-      </div>
+          :
+            haveConnectList ?   
+              <ExcelTaker
+                getRows={this.getRows}
+                setConfiguration={this.setConfiguration}
+                mondayColumns={mondayColumns}
+                setHaveConf={this.setHaveConf}
+              /> 
+              :
+              <MakeConnectList 
+                localItemList={localItemList}
+                mondayColumns={mondayColumns}
+              />
+        }             
+        </div>
     );
   }
 }
diff --git a/src/Banner.js b/src/Banner.js
new file mode 100644
index 0000000..18c745e
--- /dev/null
+++ b/src/Banner.js
@@ -0,0 +1,30 @@
+import React  from 'react';
+import { Jumbotron } from 'reactstrap';
+
+const Banner = (props) => {
+    const {haveConnectList, haveConf} = props
+    return(
+        <div>
+          <Jumbotron className="jumbotron-background">          
+          {
+            haveConnectList ?
+              <h1 className="display-3">Update Monday Board</h1>
+              :
+              <h1 className="display-3">Configuration</h1>
+          }
+              {
+                haveConf ? 
+                <p className="lead">Click Update Button</p>
+                :  
+                haveConnectList ?
+                <p className="lead">Upload Excel file or CSV file</p>
+                :
+                null
+              }                 
+              <hr className="my-2" />
+          </Jumbotron>
+        </div>
+    )
+}
+
+export default Banner;
\ No newline at end of file
diff --git a/src/modules/MakeConnectList/ConfButton.css b/src/modules/MakeConnectList/ConfButton.css
new file mode 100644
index 0000000..4f28010
--- /dev/null
+++ b/src/modules/MakeConnectList/ConfButton.css
@@ -0,0 +1,20 @@
+.button {
+  background: #B22222; 
+  border-radius: 6px;
+  display: inline-block;
+  padding: 10px;
+  text-align: center;
+  color: #F0F8FF;
+  max-width: 150px;
+  text-decoration: none;
+}
+
+/* Disable color: #FFB6C1 */
+
+.button .text {
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #7FFFD4; 
+  margin: 0 0 15px;
+  font-size: 16px;
+}
\ No newline at end of file
diff --git a/src/modules/MakeConnectList/ConfButton.js b/src/modules/MakeConnectList/ConfButton.js
new file mode 100644
index 0000000..64816be
--- /dev/null
+++ b/src/modules/MakeConnectList/ConfButton.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Jumbotron } from 'reactstrap';
+import "./ConfButton.css"
+
+const ConfButton = (props) => {
+    const {title, type} = props
+
+    return(
+        <div className="button">
+        <p>{title}</p>
+        <p className="text">{type}</p>
+        </div>
+    )
+}
+
+export default ConfButton
\ No newline at end of file
diff --git a/src/modules/MakeConnectList/ConfButtonContainers.css b/src/modules/MakeConnectList/ConfButtonContainers.css
new file mode 100644
index 0000000..35105a1
--- /dev/null
+++ b/src/modules/MakeConnectList/ConfButtonContainers.css
@@ -0,0 +1,13 @@
+.wrap-container{
+    display: flex;
+    align-items: stretch;
+    justify-content:space-around;  
+}
+
+.sm-container{
+    flex-grow: 1;
+}
+
+.big-container{
+    flex-grow: 2;
+}
\ No newline at end of file
diff --git a/src/modules/MakeConnectList/ConfButtonContainers.js b/src/modules/MakeConnectList/ConfButtonContainers.js
new file mode 100644
index 0000000..c7f19b2
--- /dev/null
+++ b/src/modules/MakeConnectList/ConfButtonContainers.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import "./ConfButtonContainers.css" 
+import ConfButton from "./ConfButton"
+
+const ConfButtonContainers = (props) => {
+const  {mondayColumns,localItemList} = props
+mondayColumns.map(el => console.log(el.title))
+mondayColumns.map(el => console.log(el.type))
+const mondayColumnButtons = mondayColumns.map(el => 
+                            <ConfButton 
+                            type={el.type}
+                            title={el.title} 
+                            />)
+                            
+                
+return(
+    <div className="wrap-container"> 
+    <div className="sm-container">{mondayColumnButtons}</div>
+    <div className="sm-container">{mondayColumnButtons}</div>
+    <div className="big-container"> </div>
+    </div>
+        )
+    }
+
+    export default ConfButtonContainers
diff --git a/src/modules/MakeConnectList/MakeConnectList.js b/src/modules/MakeConnectList/MakeConnectList.js
new file mode 100644
index 0000000..da9a314
--- /dev/null
+++ b/src/modules/MakeConnectList/MakeConnectList.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import { Jumbotron } from 'reactstrap';
+import ConfButton from "./ConfButton"
+import ConfButtonContainers from "./ConfButtonContainers"
+
+class MakeConnectList extends Component {
+  constructor(props){
+    super(props);
+    this.state={
+    }
+  }
+
+render() {
+const  {mondayColumns,localItemList} = this.props
+console.log(mondayColumns)
+console.log(localItemList)
+  return (
+    <ConfButtonContainers 
+      localItemList={localItemList}
+      mondayColumns={mondayColumns}
+    />
+
+    )
+
+  }
+}
+export default MakeConnectList;
diff --git a/src/modules/makeConfiguration.js b/src/modules/makeConfiguration.js
index a8fece6..6d47178 100644
--- a/src/modules/makeConfiguration.js
+++ b/src/modules/makeConfiguration.js
@@ -82,7 +82,7 @@ export const makeConfiguration = (header, mondayColumns, setHaveConf) => {
         const mondayColumnsInConnectListWithHeader = mondayColumnsInConnectList.map(data => addHeaderData(data, header[0]))
         if (!isCorrectConf(mondayColumnsInConnectListWithHeader)){
             setHaveConf(false)
-            return mondayColumnsInConnectList
+            return [] 
         }
         const configuration = mondayColumnsInConnectListWithHeader.map(data => takeLabels(data))
         setHaveConf(true)

From fa209eb7c2d2969690a6a2d221b0bb5a9c9f9492 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Mon, 17 Aug 2020 16:32:52 -0500
Subject: [PATCH 02/15] get header index

---
 package.json                                  |  2 +-
 src/App.js                                    |  8 ++-
 .../MakeConnectList/ChooseHeaderIndex.css     | 37 ++++++++++
 .../MakeConnectList/ChooseHeaderIndex.js      | 69 +++++++++++++++++++
 src/modules/MakeConnectList/ConfButton.css    |  3 +-
 .../MakeConnectList/ConfButtonContainers.css  |  3 +
 .../MakeConnectList/ConfButtonContainers.js   | 13 +++-
 .../MakeConnectList/MakeConnectList.js        | 12 +++-
 8 files changed, 138 insertions(+), 9 deletions(-)
 create mode 100644 src/modules/MakeConnectList/ChooseHeaderIndex.css
 create mode 100644 src/modules/MakeConnectList/ChooseHeaderIndex.js

diff --git a/package.json b/package.json
index 8baf6d6..09c2e5f 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "start": "npm run stop && concurrently \"npm run server\" \"npm run expose\"",
     "build": "react-scripts build",
     "expose": "ngrok http 8301",
-    "server": "PORT=8301 react-scripts start",
+    "server": "react-scripts start",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "stop": "kill-port 8301 && kill-port 4049 && kill-port 4040"
diff --git a/src/App.js b/src/App.js
index e938ace..1e64364 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,7 +17,7 @@ class App extends Component {
     this.state={
       haveConnectList: true,
       haveConf: false,
-      headerIndex: 0,
+      headerIndex: null,
       boardIds: '',
       settings: {},
       context: {},
@@ -32,6 +32,10 @@ class App extends Component {
   componentDidMount() {
     monday.listen("context", this.getContext);
   }
+  
+  getHeaderIndex = (index) => {
+    this.setState({headerIndex:index})
+  }
 
   getContext = (res) => {
     const context = res.data;
@@ -109,6 +113,8 @@ class App extends Component {
               <MakeConnectList 
                 localItemList={localItemList}
                 mondayColumns={mondayColumns}
+                headerIndex={headerIndex}
+                getHeaderIndex={this.getHeaderIndex}
               />
         }             
         </div>
diff --git a/src/modules/MakeConnectList/ChooseHeaderIndex.css b/src/modules/MakeConnectList/ChooseHeaderIndex.css
new file mode 100644
index 0000000..8cd94e9
--- /dev/null
+++ b/src/modules/MakeConnectList/ChooseHeaderIndex.css
@@ -0,0 +1,37 @@
+.table-container{
+}
+
+.choosing-box{
+}
+
+table{
+    border-spacing: 5px;
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+    height: 100vh;
+    overflow:auto;
+}
+
+table, th, td{
+    border: 1px solid black;
+}
+
+th, tr, td{
+    text-align: center;
+    padding: 3px;
+}
+
+h2{
+    text-align: center;
+}
+
+p, .button{
+    margin-left: 5%;
+}
+
+.button{
+    margin-bottom: 20px;
+}
+
+tr:nth-child(even) {background-color: #f2f2f2;}
\ No newline at end of file
diff --git a/src/modules/MakeConnectList/ChooseHeaderIndex.js b/src/modules/MakeConnectList/ChooseHeaderIndex.js
new file mode 100644
index 0000000..27268c8
--- /dev/null
+++ b/src/modules/MakeConnectList/ChooseHeaderIndex.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import "./ChooseHeaderIndex.css"
+import { Button } from 'reactstrap';
+
+
+
+class ChooseHeaderIndex extends Component {
+    constructor(props){
+        super(props);
+        this.state={
+            choosenRowName: '',
+            choosenRowIndex: null, 
+        }
+
+        this.getHeaderIndex = props.getHeaderIndex.bind(this)
+        this.rowClickEvent = this.rowClickEvent.bind(this)
+    }
+
+    rowClickEvent = (rowEl, index) => {this.setState({choosenRowName:rowEl, choosenRowIndex: index})}
+
+    getRows = (localItemList) => {
+        let rows = []
+        
+        for(let index=0; index<localItemList.length; index++){
+
+            if (localItemList[index] === undefined || index > 10){
+                break
+            }
+
+            let row = []
+            const rowEl = `Row ${index}`
+            row.push(
+                    <td onClick={() => this.rowClickEvent(rowEl, index)}>
+                        {rowEl}
+                    </td>
+                    )
+
+            localItemList[index].forEach(el => row.push(<td>{el}</td>))
+
+            rows.push(<tr>{row}</tr>)
+        }
+        return rows
+    }
+
+    render() {
+        const {localItemList} = this.props
+        const {choosenRowName, choosenRowIndex} = this.state
+        const rows = this.getRows(localItemList)
+            return (
+                <div className="choosing-box">
+                    <h2>Choose Header</h2>
+                    <p>Click an appropriate row number as header.</p>
+                    <p>Then, click button.</p>
+            {
+                choosenRowName === '' ?
+                <Button color="success" className="button" disabled>Click Row</Button>
+                :
+                <Button color="success" className="button" onClick={() => {this.getHeaderIndex(choosenRowIndex)}}>{choosenRowName}</Button>
+            }   
+                    <div className="table-container">
+                        <table>
+                            {rows}
+                        </table>
+                    </div>
+                </div>
+            )
+    }
+}
+export default ChooseHeaderIndex
\ No newline at end of file
diff --git a/src/modules/MakeConnectList/ConfButton.css b/src/modules/MakeConnectList/ConfButton.css
index 4f28010..80a0b1b 100644
--- a/src/modules/MakeConnectList/ConfButton.css
+++ b/src/modules/MakeConnectList/ConfButton.css
@@ -5,7 +5,8 @@
   padding: 10px;
   text-align: center;
   color: #F0F8FF;
-  max-width: 150px;
+  max-width: 50%;
+  margin: 10px 25%;
   text-decoration: none;
 }
 
diff --git a/src/modules/MakeConnectList/ConfButtonContainers.css b/src/modules/MakeConnectList/ConfButtonContainers.css
index 35105a1..6aa7f63 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.css
+++ b/src/modules/MakeConnectList/ConfButtonContainers.css
@@ -6,6 +6,9 @@
 
 .sm-container{
     flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    border: 2px solid;
 }
 
 .big-container{
diff --git a/src/modules/MakeConnectList/ConfButtonContainers.js b/src/modules/MakeConnectList/ConfButtonContainers.js
index c7f19b2..6e28b14 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.js
+++ b/src/modules/MakeConnectList/ConfButtonContainers.js
@@ -4,19 +4,26 @@ import ConfButton from "./ConfButton"
 
 const ConfButtonContainers = (props) => {
 const  {mondayColumns,localItemList} = props
-mondayColumns.map(el => console.log(el.title))
-mondayColumns.map(el => console.log(el.type))
+console.log(localItemList)
 const mondayColumnButtons = mondayColumns.map(el => 
                             <ConfButton 
                             type={el.type}
                             title={el.title} 
                             />)
                             
+const localItemButtons = localItemList[0].reduce((buttons, el) => {
+    if (el === "" || el === null){
+        return buttons
+    }else{
+        buttons.push(<ConfButton title={el}/>)
+        return buttons
+    }
+}, [])
                 
 return(
     <div className="wrap-container"> 
     <div className="sm-container">{mondayColumnButtons}</div>
-    <div className="sm-container">{mondayColumnButtons}</div>
+    <div className="sm-container">{localItemButtons}</div>
     <div className="big-container"> </div>
     </div>
         )
diff --git a/src/modules/MakeConnectList/MakeConnectList.js b/src/modules/MakeConnectList/MakeConnectList.js
index da9a314..0348548 100644
--- a/src/modules/MakeConnectList/MakeConnectList.js
+++ b/src/modules/MakeConnectList/MakeConnectList.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Jumbotron } from 'reactstrap';
 import ConfButton from "./ConfButton"
 import ConfButtonContainers from "./ConfButtonContainers"
+import ChooseHeaderIndex from "./ChooseHeaderIndex"
 
 class MakeConnectList extends Component {
   constructor(props){
@@ -11,10 +12,15 @@ class MakeConnectList extends Component {
   }
 
 render() {
-const  {mondayColumns,localItemList} = this.props
-console.log(mondayColumns)
-console.log(localItemList)
+const  {mondayColumns, localItemList, headerIndex, getHeaderIndex} = this.props
   return (
+    headerIndex === null ?
+    <ChooseHeaderIndex 
+      localItemList={localItemList}
+      getHeaderIndex={getHeaderIndex}
+    />
+
+    :
     <ConfButtonContainers 
       localItemList={localItemList}
       mondayColumns={mondayColumns}

From 6b19001d285c4ad1ac8ff83b37549414b1be0b7f Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Mon, 17 Aug 2020 16:35:57 -0500
Subject: [PATCH 03/15] beautify

---
 src/modules/MakeConnectList/ChooseHeaderIndex.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/modules/MakeConnectList/ChooseHeaderIndex.js b/src/modules/MakeConnectList/ChooseHeaderIndex.js
index 27268c8..75c0043 100644
--- a/src/modules/MakeConnectList/ChooseHeaderIndex.js
+++ b/src/modules/MakeConnectList/ChooseHeaderIndex.js
@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import "./ChooseHeaderIndex.css"
 import { Button } from 'reactstrap';
 
-
-
 class ChooseHeaderIndex extends Component {
     constructor(props){
         super(props);
@@ -51,12 +49,12 @@ class ChooseHeaderIndex extends Component {
                     <h2>Choose Header</h2>
                     <p>Click an appropriate row number as header.</p>
                     <p>Then, click button.</p>
-            {
-                choosenRowName === '' ?
-                <Button color="success" className="button" disabled>Click Row</Button>
-                :
-                <Button color="success" className="button" onClick={() => {this.getHeaderIndex(choosenRowIndex)}}>{choosenRowName}</Button>
-            }   
+
+                    {choosenRowName === '' ?
+                    <Button color="success" className="button" disabled>Click Row</Button>
+                    :
+                    <Button color="success" className="button" onClick={() => {this.getHeaderIndex(choosenRowIndex)}}>{choosenRowName}</Button>}
+
                     <div className="table-container">
                         <table>
                             {rows}

From d2b8877fbb690ed339ce007ad6113f728a5ea95e Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Tue, 18 Aug 2020 16:15:09 -0500
Subject: [PATCH 04/15] display conifguration page

---
 src/Banner.js                                 |  2 +-
 src/banner.css                                |  0
 src/modules/MakeConnectList/ConfButton.css    | 78 +++++++++++++++++--
 src/modules/MakeConnectList/ConfButton.js     | 34 ++++++--
 .../MakeConnectList/ConfButtonContainers.css  | 14 +++-
 .../MakeConnectList/ConfButtonContainers.js   | 38 ++++++---
 .../MakeConnectList/MakeConnectList.js        |  4 +-
 7 files changed, 140 insertions(+), 30 deletions(-)
 create mode 100644 src/banner.css

diff --git a/src/Banner.js b/src/Banner.js
index 18c745e..4ee8e95 100644
--- a/src/Banner.js
+++ b/src/Banner.js
@@ -4,7 +4,7 @@ import { Jumbotron } from 'reactstrap';
 const Banner = (props) => {
     const {haveConnectList, haveConf} = props
     return(
-        <div>
+        <div className='banner-box'>
           <Jumbotron className="jumbotron-background">          
           {
             haveConnectList ?
diff --git a/src/banner.css b/src/banner.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/modules/MakeConnectList/ConfButton.css b/src/modules/MakeConnectList/ConfButton.css
index 80a0b1b..504e16f 100644
--- a/src/modules/MakeConnectList/ConfButton.css
+++ b/src/modules/MakeConnectList/ConfButton.css
@@ -1,21 +1,85 @@
-.button {
-  background: #B22222; 
+.button-one {
+  background: #00C875; 
   border-radius: 6px;
   display: inline-block;
   padding: 10px;
   text-align: center;
-  color: #F0F8FF;
-  max-width: 50%;
-  margin: 10px 25%;
+  color: #FFFFFF;
+  max-width: 80%;
+  margin: 10px 10%;
+  text-decoration: none;
+}
+
+.button-one p, .button-two p {
+  margin: 0 0 15px;
+}
+/* Disable color: #FFB6C1 */
+
+.button-one .text {
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #323338; 
+  margin: 0 0 15px;
+  font-size: 16px;
+}
+
+.button-two {
+  background: #FF7575; 
+  border-radius: 6px;
+  display: inline-block;
+  padding: 10px;
+  text-align: center;
+  color: #FFFFFF;
+  max-width: 80%;
+  margin: 10px 10%;
   text-decoration: none;
 }
 
 /* Disable color: #FFB6C1 */
 
-.button .text {
+.button-two .text {
   font-weight: bold;
   text-transform: uppercase;
-  color: #7FFFD4; 
+  color: #323338; 
   margin: 0 0 15px;
   font-size: 16px;
+}
+
+.conf-button-box{
+  border-radius: 6px;
+  max-width: 100%;
+  margin: 10px 10%;
+}
+
+.name-box{
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+
+.name1{
+  background: #00C875; 
+  padding: 10px;
+  text-align: center;
+  color: #FFFFFF;
+  text-decoration: none;
+  margin: 0;
+  flex-grow: 1; 
+}
+
+.name2{
+  background: #FF7575; 
+  padding: 10px;
+  text-align: center;
+  color: #FFFFFF;
+  text-decoration: none;
+  margin: 0;
+  flex-grow: 1; 
+}
+
+.type-box{
+  text-align: center;
+  background: #225091; 
+  color: #FFFFFF;
+  
 }
\ No newline at end of file
diff --git a/src/modules/MakeConnectList/ConfButton.js b/src/modules/MakeConnectList/ConfButton.js
index 64816be..059b309 100644
--- a/src/modules/MakeConnectList/ConfButton.js
+++ b/src/modules/MakeConnectList/ConfButton.js
@@ -2,15 +2,37 @@ import React from 'react';
 import { Jumbotron } from 'reactstrap';
 import "./ConfButton.css"
 
-const ConfButton = (props) => {
-    const {title, type} = props
+export const ConfButtonOne = (props) => {
+     const {title, type} = props
+    return(
+        <div className="button-two">
+            <p>{title}</p>
+            <p className="text">{type}</p>
+        </div>
+    )   
+}
 
+export const ConfButtonTwo = (props) => {
+const {title, type} = props
     return(
-        <div className="button">
-        <p>{title}</p>
-        <p className="text">{type}</p>
+        <div className="button-one">
+            <p>{title}</p>
+            <p className="text">{type}</p>
         </div>
     )
 }
 
-export default ConfButton
\ No newline at end of file
+export const ConfiguredConfButton = (props) => {
+    const {name1, name2, type} = props
+    return(
+        <div className="conf-button-box">
+            <div className="name-box">
+                <p className="name1">{name1}</p>
+                <p className="name2">{name2}</p>
+            </div>
+            <div className="type-box">
+                <p>{type}</p>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/modules/MakeConnectList/ConfButtonContainers.css b/src/modules/MakeConnectList/ConfButtonContainers.css
index 6aa7f63..90cff48 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.css
+++ b/src/modules/MakeConnectList/ConfButtonContainers.css
@@ -8,9 +8,19 @@
     flex-grow: 1;
     display: flex;
     flex-direction: column;
-    border: 2px solid;
 }
 
 .big-container{
-    flex-grow: 2;
+    flex-grow: 1;
+}
+
+.tool-box{
+    flex-grow: 1;
+}
+
+.tool{
+    position: fixed; 
+    top: 200;
+    right: 0;
+    padding-right: 1%;
 }
\ No newline at end of file
diff --git a/src/modules/MakeConnectList/ConfButtonContainers.js b/src/modules/MakeConnectList/ConfButtonContainers.js
index 6e28b14..49b42b4 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.js
+++ b/src/modules/MakeConnectList/ConfButtonContainers.js
@@ -1,32 +1,48 @@
 import React from 'react';
 import "./ConfButtonContainers.css" 
-import ConfButton from "./ConfButton"
+import{ ConfButtonOne, ConfButtonTwo, ConfiguredConfButton}  from "./ConfButton"
+import { CONNECT_LIST } from './../../globalConf'
+import { Button, ButtonGroup } from 'reactstrap';
 
 const ConfButtonContainers = (props) => {
-const  {mondayColumns,localItemList} = props
-console.log(localItemList)
+const  {mondayColumns, localItemList, headerIndex} = props
+//console.log(localItemList)
 const mondayColumnButtons = mondayColumns.map(el => 
-                            <ConfButton 
+                            <ConfButtonOne 
                             type={el.type}
                             title={el.title} 
                             />)
                             
-const localItemButtons = localItemList[0].reduce((buttons, el) => {
+const localItemButtons = localItemList[headerIndex].reduce((buttons, el) => {
     if (el === "" || el === null){
         return buttons
     }else{
-        buttons.push(<ConfButton title={el}/>)
+        buttons.push(<ConfButtonTwo title={el}/>)
         return buttons
     }
 }, [])
-                
+
+const configuredConfButton = Object.keys(CONNECT_LIST).reduce((buttons, el) => {
+    buttons.push(<ConfiguredConfButton name1={el} name2={CONNECT_LIST[el]} type='LONG-TEXT'/>)
+    return buttons
+}, [])
+
 return(
     <div className="wrap-container"> 
-    <div className="sm-container">{mondayColumnButtons}</div>
-    <div className="sm-container">{localItemButtons}</div>
-    <div className="big-container"> </div>
+        <div className="sm-container">{localItemButtons}</div>
+        <div className="sm-container">{mondayColumnButtons}</div>
+        <div className="big-container">{configuredConfButton} </div>
+        <div className="tool-box"></div>   
+        <div className="tool">
+            <ButtonGroup vertical>
+                <Button color="secondary">Edit</Button>
+                <Button color="secondary">Delete</Button>
+                <Button color="secondary">Trash Can</Button>
+            </ButtonGroup>
+        </div>
+
     </div>
         )
     }
 
-    export default ConfButtonContainers
+export default ConfButtonContainers
diff --git a/src/modules/MakeConnectList/MakeConnectList.js b/src/modules/MakeConnectList/MakeConnectList.js
index 0348548..9feb3c4 100644
--- a/src/modules/MakeConnectList/MakeConnectList.js
+++ b/src/modules/MakeConnectList/MakeConnectList.js
@@ -1,6 +1,4 @@
 import React, { Component } from 'react';
-import { Jumbotron } from 'reactstrap';
-import ConfButton from "./ConfButton"
 import ConfButtonContainers from "./ConfButtonContainers"
 import ChooseHeaderIndex from "./ChooseHeaderIndex"
 
@@ -19,11 +17,11 @@ const  {mondayColumns, localItemList, headerIndex, getHeaderIndex} = this.props
       localItemList={localItemList}
       getHeaderIndex={getHeaderIndex}
     />
-
     :
     <ConfButtonContainers 
       localItemList={localItemList}
       mondayColumns={mondayColumns}
+      headerIndex={headerIndex}
     />
 
     )

From 7e958ece17b8354da545ff866a67f9d24b3a1583 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Tue, 18 Aug 2020 17:21:13 -0500
Subject: [PATCH 05/15] add state on MakeConnectList.js

---
 .../MakeConnectList/ChooseHeaderIndex.js      |  1 -
 .../MakeConnectList/ConfButtonContainers.css  |  5 +++
 .../MakeConnectList/ConfButtonContainers.js   | 35 +++++++++++++++----
 .../MakeConnectList/MakeConnectList.js        | 27 +++++++++++++-
 4 files changed, 59 insertions(+), 9 deletions(-)

diff --git a/src/modules/MakeConnectList/ChooseHeaderIndex.js b/src/modules/MakeConnectList/ChooseHeaderIndex.js
index 75c0043..9f1051f 100644
--- a/src/modules/MakeConnectList/ChooseHeaderIndex.js
+++ b/src/modules/MakeConnectList/ChooseHeaderIndex.js
@@ -9,7 +9,6 @@ class ChooseHeaderIndex extends Component {
             choosenRowName: '',
             choosenRowIndex: null, 
         }
-
         this.getHeaderIndex = props.getHeaderIndex.bind(this)
         this.rowClickEvent = this.rowClickEvent.bind(this)
     }
diff --git a/src/modules/MakeConnectList/ConfButtonContainers.css b/src/modules/MakeConnectList/ConfButtonContainers.css
index 90cff48..c7dc6c1 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.css
+++ b/src/modules/MakeConnectList/ConfButtonContainers.css
@@ -23,4 +23,9 @@
     top: 200;
     right: 0;
     padding-right: 1%;
+}
+
+.container-text{
+    text-align: center;
+    margin-bottom: 50px;
 }
\ No newline at end of file
diff --git a/src/modules/MakeConnectList/ConfButtonContainers.js b/src/modules/MakeConnectList/ConfButtonContainers.js
index 49b42b4..0544a44 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.js
+++ b/src/modules/MakeConnectList/ConfButtonContainers.js
@@ -5,7 +5,19 @@ import { CONNECT_LIST } from './../../globalConf'
 import { Button, ButtonGroup } from 'reactstrap';
 
 const ConfButtonContainers = (props) => {
-const  {mondayColumns, localItemList, headerIndex} = props
+
+    const {  
+        localItemList,
+        mondayColumns,
+        headerIndex,
+        isEditMode,
+        isDeleteMode,
+        isOpenTrashCan,
+        confedHeaders,
+        preConfHeader,
+        trashCan,
+    } = props
+
 //console.log(localItemList)
 const mondayColumnButtons = mondayColumns.map(el => 
                             <ConfButtonOne 
@@ -27,17 +39,26 @@ const configuredConfButton = Object.keys(CONNECT_LIST).reduce((buttons, el) => {
     return buttons
 }, [])
 
+    console.log(isEditMode)
 return(
     <div className="wrap-container"> 
-        <div className="sm-container">{localItemButtons}</div>
-        <div className="sm-container">{mondayColumnButtons}</div>
-        <div className="big-container">{configuredConfButton} </div>
+        <div className="sm-container">
+            <h3 className="container-text">Excel Header</h3>
+            {localItemButtons}
+        </div>
+        <div className="sm-container">
+            <h3 className="container-text">Monday Header</h3>
+            {mondayColumnButtons}
+        </div>
+        <div className="big-container">
+            <h3 className="container-text">Configuration</h3>
+        </div>
         <div className="tool-box"></div>   
         <div className="tool">
             <ButtonGroup vertical>
-                <Button color="secondary">Edit</Button>
-                <Button color="secondary">Delete</Button>
-                <Button color="secondary">Trash Can</Button>
+                {isEditMode ? <Button color="primary">Edit</Button> : <Button color="secondary">Edit</Button>}
+                {isDeleteMode ? <Button color="primary">Delete</Button> : <Button color="secondary">Delete</Button>}
+                {isOpenTrashCan ? <Button color="primary">Trash Can</Button> : <Button color="secondary">Trash Can</Button>}
             </ButtonGroup>
         </div>
 
diff --git a/src/modules/MakeConnectList/MakeConnectList.js b/src/modules/MakeConnectList/MakeConnectList.js
index 9feb3c4..d46963e 100644
--- a/src/modules/MakeConnectList/MakeConnectList.js
+++ b/src/modules/MakeConnectList/MakeConnectList.js
@@ -6,11 +6,30 @@ class MakeConnectList extends Component {
   constructor(props){
     super(props);
     this.state={
+      isEditMode: true,
+      isDeleteMode: false,
+      isOpenTrashCan: false,
+      confedHeaders: {},
+      preConfHeader: '',
+      trashCan: [],
     }
   }
 
 render() {
-const  {mondayColumns, localItemList, headerIndex, getHeaderIndex} = this.props
+const  {mondayColumns,
+        localItemList,
+        headerIndex,
+        getHeaderIndex,
+      } = this.props
+
+const {isEditMode,
+       isDeleteMode,
+       isOpenTrashCan,
+       confedHeaders,
+       preConfHeader,
+       trashCan,
+      } = this.state
+
   return (
     headerIndex === null ?
     <ChooseHeaderIndex 
@@ -22,6 +41,12 @@ const  {mondayColumns, localItemList, headerIndex, getHeaderIndex} = this.props
       localItemList={localItemList}
       mondayColumns={mondayColumns}
       headerIndex={headerIndex}
+      isEditMode={isEditMode}
+      isDeleteMode={isDeleteMode}
+      isOpenTrashCan={isOpenTrashCan}
+      confedHeaders={confedHeaders}
+      preConfHeader={preConfHeader}
+      trashCan={trashCan}
     />
 
     )

From d9ae466d355b0324c5bc469388db94ba0af58725 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Wed, 23 Sep 2020 09:08:48 -0500
Subject: [PATCH 06/15] change buttom

---
 Book1.xlsx                                    | Bin 0 -> 9309 bytes
 .../MakeConnectList/ConfButtonContainers.css  |   5 +--
 .../MakeConnectList/ConfButtonContainers.js   |  31 +++++++++---------
 .../MakeConnectList/MakeConnectList.js        |  25 +++++++++++++-
 4 files changed, 43 insertions(+), 18 deletions(-)
 create mode 100644 Book1.xlsx

diff --git a/Book1.xlsx b/Book1.xlsx
new file mode 100644
index 0000000000000000000000000000000000000000..45d875a9931851ed565315f3b16683871c18645f
GIT binary patch
literal 9309
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

literal 0
HcmV?d00001

diff --git a/src/modules/MakeConnectList/ConfButtonContainers.css b/src/modules/MakeConnectList/ConfButtonContainers.css
index c7dc6c1..fc73b30 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.css
+++ b/src/modules/MakeConnectList/ConfButtonContainers.css
@@ -2,6 +2,7 @@
     display: flex;
     align-items: stretch;
     justify-content:space-around;  
+    margin-top: 40px;
 }
 
 .sm-container{
@@ -18,12 +19,12 @@
     flex-grow: 1;
 }
 
-.tool{
+/*.tool{
     position: fixed; 
     top: 200;
     right: 0;
     padding-right: 1%;
-}
+}*/
 
 .container-text{
     text-align: center;
diff --git a/src/modules/MakeConnectList/ConfButtonContainers.js b/src/modules/MakeConnectList/ConfButtonContainers.js
index 0544a44..a75ca8a 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.js
+++ b/src/modules/MakeConnectList/ConfButtonContainers.js
@@ -41,27 +41,28 @@ const configuredConfButton = Object.keys(CONNECT_LIST).reduce((buttons, el) => {
 
     console.log(isEditMode)
 return(
-    <div className="wrap-container"> 
-        <div className="sm-container">
-            <h3 className="container-text">Excel Header</h3>
-            {localItemButtons}
-        </div>
-        <div className="sm-container">
-            <h3 className="container-text">Monday Header</h3>
-            {mondayColumnButtons}
-        </div>
-        <div className="big-container">
-            <h3 className="container-text">Configuration</h3>
-        </div>
-        <div className="tool-box"></div>   
+    <div>
         <div className="tool">
-            <ButtonGroup vertical>
+            <ButtonGroup>
                 {isEditMode ? <Button color="primary">Edit</Button> : <Button color="secondary">Edit</Button>}
                 {isDeleteMode ? <Button color="primary">Delete</Button> : <Button color="secondary">Delete</Button>}
                 {isOpenTrashCan ? <Button color="primary">Trash Can</Button> : <Button color="secondary">Trash Can</Button>}
             </ButtonGroup>
         </div>
-
+        <div className="wrap-container"> 
+            <div className="sm-container">
+                <h3 className="container-text">Excel Header</h3>
+                {localItemButtons}
+            </div>
+            <div className="sm-container">
+                <h3 className="container-text">Monday Header</h3>
+                {mondayColumnButtons}
+            </div>
+            <div className="big-container">
+                <h3 className="container-text">Configuration</h3>
+            </div>
+            <div className="tool-box"></div>   
+        </div>
     </div>
         )
     }
diff --git a/src/modules/MakeConnectList/MakeConnectList.js b/src/modules/MakeConnectList/MakeConnectList.js
index d46963e..9cfe1fb 100644
--- a/src/modules/MakeConnectList/MakeConnectList.js
+++ b/src/modules/MakeConnectList/MakeConnectList.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import ConfButtonContainers from "./ConfButtonContainers"
 import ChooseHeaderIndex from "./ChooseHeaderIndex"
+import { each } from 'lodash';
 
 class MakeConnectList extends Component {
   constructor(props){
@@ -9,12 +10,34 @@ class MakeConnectList extends Component {
       isEditMode: true,
       isDeleteMode: false,
       isOpenTrashCan: false,
-      confedHeaders: {},
+      confedHeaders: [],
       preConfHeader: '',
       trashCan: [],
     }
   }
 
+  doesNeedMakeObj = (confedHeaders) => {
+    if (confedHeaders.length === 0){
+      return true 
+    }else{
+      return confedHeaders.every(conf => conf.local !== null || conf.monday !== null)
+    }
+  }
+
+  getHeader = (header) => {
+    const confedHeaders = this.state.confedHeaders
+    if (this.doesNeedMakeObj(confedHeaders)){
+      /*make obj 
+      {
+        local: null
+        monday: null
+      }
+
+      */
+    }
+    this.setState({})
+  }
+
 render() {
 const  {mondayColumns,
         localItemList,

From c5fb4e4436d3efb74db5d313882645d5104d1291 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Wed, 23 Sep 2020 11:34:09 -0500
Subject: [PATCH 07/15] test

---
 Book1.xlsx                       | Bin 9309 -> 9363 bytes
 src/App.js                       |   3 ++-
 src/modules/makeConfiguration.js |   3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/Book1.xlsx b/Book1.xlsx
index 45d875a9931851ed565315f3b16683871c18645f..488725b2183579603b9eebcf6289873ede2477d1 100644
GIT binary patch
delta 3583
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

delta 3529
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

diff --git a/src/App.js b/src/App.js
index 1e64364..d5b49a2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,7 +17,7 @@ class App extends Component {
     this.state={
       haveConnectList: true,
       haveConf: false,
-      headerIndex: null,
+      headerIndex: 0,
       boardIds: '',
       settings: {},
       context: {},
@@ -86,6 +86,7 @@ class App extends Component {
   render() {
     const { localItemList, mondayColumns,haveConnectList, haveConf, configuration, mondayJsonIndex, boardIds, headerIndex } = this.state;
     console.log(boardIds)
+    console.log(haveConnectList)
     return (
       <div>
       <Banner 
diff --git a/src/modules/makeConfiguration.js b/src/modules/makeConfiguration.js
index 059d85c..d901144 100644
--- a/src/modules/makeConfiguration.js
+++ b/src/modules/makeConfiguration.js
@@ -86,6 +86,9 @@ const addJsonIndex = (mondayColumnsInConnectList) => {
 }
 
 export const makeConfiguration = (header, mondayColumns, setHaveConf) => {
+    console.log(header)
+    console.log(mondayColumns)
+    console.log(setHaveConf)
     if ( header === null){
         console.log("Upload Excel File")
         setHaveConf(false)

From 1df6743f5f496d8f5ac9c8affa5c9c5278add29d Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Wed, 23 Sep 2020 11:34:23 -0500
Subject: [PATCH 08/15] test

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index ab75b3f..c4f10fb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,7 @@ build.zip
 .env.development.local
 .env.test.local
 .env.production.local
+*.xlsx
 
 npm-debug.log*
 yarn-debug.log*

From 53cdb00e7bfbe100c7f3230d231b557293fa2bf3 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Thu, 24 Sep 2020 17:27:38 -0500
Subject: [PATCH 09/15] move functions from ExelTaker to app.js

---
 src/App.js                       | 46 +++++++++++++++++---------------
 src/ExcelTaker.js                |  9 +++----
 src/modules/makeConfiguration.js | 36 ++++++++++++-------------
 3 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/src/App.js b/src/App.js
index fd640ad..5ab4735 100644
--- a/src/App.js
+++ b/src/App.js
@@ -189,34 +189,38 @@ class App extends Component {
     }, {})
   }
 
-  setConfiguration = (localItemList, mondayColumns, setHaveConf) => {
+  processLocalData = (localItemList, mondayColumns) => {
     const { connectList, headerIndex, exclusiveLabels, criteria } = this.state
     
-    //write error handling 
-    //if script cannot process this function, configuration is wrong
-    const header = localItemList[headerIndex].map(header => header.trim())
+    this.setState({localItemList: localItemList})
+    let header = []
+    try{
+      header = localItemList[headerIndex].map(header => header.trim())
+    }catch(error){
+       if (error instanceof TypeError){
+         alert('Configuration is wrong or upload wrong data')
+       }else{
+         alert('something wrong')
+       }
+    }
 
-    //call make configuration outside setState function
-    //need to have promise obj to wait necessary calculation
-    //also, need to separate make configuration and check configuration
-    this.setState({
-      configuration:makeConfiguration(header, mondayColumns, setHaveConf, connectList)}, () => {
-        this.setMondayJsonIndex(this.state.configuration)
-      })
-    
-    // Get haveConf val here because makeConfiguration decide if it can make configuration 
-    // and store value in haveConf 
-    if(this.state.haveConf){
+    makeConfiguration(header, mondayColumns, connectList).then((conf) => {
       this.setState({
-        exclusiveLabels: this.getIndex(exclusiveLabels, this.state.configuration),
-        criteria:  this.getReadyToUseCriteria(criteria, this.state.configuration, connectList)
+        configuration: conf,
+        mondayJsonIndex: this.makeMondayJsonIndex(conf),
+        exclusiveLabels: this.getIndex(exclusiveLabels, conf),
+        criteria: this.getReadyToUseCriteria(criteria, conf, connectList),
+        haveConf: true,
       })
-    }else{
+    })
+    .catch(err => {
       this.setState({
         haveConnectList:false,
         headerIndex: null,
+        haveConf: false,
       })
-    }
+      alert(err)
+    })
   }
 
   render() {
@@ -256,10 +260,8 @@ class App extends Component {
           :
             haveConnectList ?   
               <ExcelTaker
-                getRows={this.getRows}
-                setConfiguration={this.setConfiguration}
+                processLocalData={this.processLocalData}
                 mondayColumns={mondayColumns}
-                setHaveConf={this.setHaveConf}
               /> 
               :
               <MakeConnectList 
diff --git a/src/ExcelTaker.js b/src/ExcelTaker.js
index f8380bf..dce1939 100644
--- a/src/ExcelTaker.js
+++ b/src/ExcelTaker.js
@@ -13,15 +13,13 @@ class ExcelTaker extends Component {
         uploadedFileName: '',
       }
       this.fileInput = React.createRef();
-      this.getRows = props.getRows.bind(this);
-      this.setConfiguration = props.setConfiguration.bind(this)
-      this.setHaveConf=props.setHaveConf.bind(this)
+      this.processLocalData = props.processLocalData.bind(this)
     }
 
     renderFile = (fileObj, fileName) => {
         //just pass the fileObj as parameter
         const {uploadedFileName} = this.state;
-        const {mondayColumns, setHaveConf} = this.props;
+        const {mondayColumns} = this.props;
         ExcelRenderer(fileObj, (err, resp) => {
           if(err){
             console.log(err);            
@@ -30,9 +28,8 @@ class ExcelTaker extends Component {
             this.setState({
               dataLoaded: true,
             });
-            this.getRows(resp.rows)
             if (uploadedFileName !== fileName){
-                this.setConfiguration(resp.rows, mondayColumns, setHaveConf)
+                this.processLocalData(resp.rows, mondayColumns)
             }
           }
         }); 
diff --git a/src/modules/makeConfiguration.js b/src/modules/makeConfiguration.js
index 3360d45..4936366 100644
--- a/src/modules/makeConfiguration.js
+++ b/src/modules/makeConfiguration.js
@@ -79,23 +79,21 @@ const addJsonIndex = (mondayColumns) => {
     return mondayColumns
 }
 
-export const makeConfiguration = (header, mondayColumns, setHaveConf, connectList) => {
-
-    if ( header === null){
-        console.log("Upload Excel File")
-        setHaveConf(false)
-    }else{
-        const mondayColumnsWithIndex = addJsonIndex(mondayColumns)
-        const mondayColumnsInConnectList = mondayColumnsWithIndex.filter(col => findColumnInConnectList(col, connectList))
-        const mondayColumnsInConnectListWithHeader = mondayColumnsInConnectList.map(data => addHeaderData(data, header, connectList))
-        if (!isCorrectConf(mondayColumnsInConnectListWithHeader)){
-            setHaveConf(false)
-            alert("Proper Configuration fails to create. Please Check out local titles and Monday column titles")
-            return mondayColumnsInConnectList
-        }
-        const configuration = mondayColumnsInConnectListWithHeader.map(data => takeLabels(data))
-        setHaveConf(true)
-        console.log(configuration)
-        return configuration
-    }
+export const makeConfiguration = (header, mondayColumns, connectList) => {
+  return new Promise((resolve, reject) => {
+        if ( header === null){
+            reject("Upload Excel File")
+        }else if ( header.length === 0 ){
+            reject("Upload wrong Excel File")
+        }else{
+            const mondayColumnsWithIndex = addJsonIndex(mondayColumns)
+            const mondayColumnsInConnectList = mondayColumnsWithIndex.filter(col => findColumnInConnectList(col, connectList))
+            const mondayColumnsInConnectListWithHeader = mondayColumnsInConnectList.map(data => addHeaderData(data, header, connectList))
+            if (!isCorrectConf(mondayColumnsInConnectListWithHeader)){
+                reject("Proper Configuration fails to create. Please Check out local titles and Monday column titles")
+            }
+            const configuration = mondayColumnsInConnectListWithHeader.map(data => takeLabels(data))
+            resolve(configuration)
+        }  
+    })
 }
\ No newline at end of file

From 7e9ba4249c5181550dc0188fac7efc76c31c130f Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Mon, 28 Sep 2020 09:02:10 -0500
Subject: [PATCH 10/15] erase unnecessary dependencies form ExcelTaker

---
 src/App.js                       | 14 ++------------
 src/ExcelTaker.js                |  4 ++--
 src/modules/makeConfiguration.js |  1 +
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5ab4735..6de904d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -109,14 +109,6 @@ class App extends Component {
     })
   }
 
-  getRows = (rows) => {
-    this.setState({localItemList: rows})
-  }
-
-  setHaveConf = (val) => {
-    this.setState({haveConf:val})
-  }
-
   makeMondayJsonIndex = (configuration) => {
     return configuration.reduce((mondayJsonIndex, data) => {
       mondayJsonIndex[data['title']] = {'json_index':data['json_index'], 'type':data['type']}
@@ -189,9 +181,8 @@ class App extends Component {
     }, {})
   }
 
-  processLocalData = (localItemList, mondayColumns) => {
-    const { connectList, headerIndex, exclusiveLabels, criteria } = this.state
-    
+  processLocalData = (localItemList) => {
+    const { connectList, headerIndex, exclusiveLabels, criteria, mondayColumns } = this.state
     this.setState({localItemList: localItemList})
     let header = []
     try{
@@ -261,7 +252,6 @@ class App extends Component {
             haveConnectList ?   
               <ExcelTaker
                 processLocalData={this.processLocalData}
-                mondayColumns={mondayColumns}
               /> 
               :
               <MakeConnectList 
diff --git a/src/ExcelTaker.js b/src/ExcelTaker.js
index dce1939..b641ade 100644
--- a/src/ExcelTaker.js
+++ b/src/ExcelTaker.js
@@ -19,7 +19,7 @@ class ExcelTaker extends Component {
     renderFile = (fileObj, fileName) => {
         //just pass the fileObj as parameter
         const {uploadedFileName} = this.state;
-        const {mondayColumns} = this.props;
+        //const {mondayColumns} = this.props;
         ExcelRenderer(fileObj, (err, resp) => {
           if(err){
             console.log(err);            
@@ -29,7 +29,7 @@ class ExcelTaker extends Component {
               dataLoaded: true,
             });
             if (uploadedFileName !== fileName){
-                this.processLocalData(resp.rows, mondayColumns)
+                this.processLocalData(resp.rows)
             }
           }
         }); 
diff --git a/src/modules/makeConfiguration.js b/src/modules/makeConfiguration.js
index 4936366..e8cd33a 100644
--- a/src/modules/makeConfiguration.js
+++ b/src/modules/makeConfiguration.js
@@ -80,6 +80,7 @@ const addJsonIndex = (mondayColumns) => {
 }
 
 export const makeConfiguration = (header, mondayColumns, connectList) => {
+    console.log(mondayColumns)
   return new Promise((resolve, reject) => {
         if ( header === null){
             reject("Upload Excel File")

From 637feb8b2cb5f167ede3e25db1e003b8c66ee344 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Mon, 28 Sep 2020 09:55:15 -0500
Subject: [PATCH 11/15] erase unused functions

---
 src/App.js                       | 10 ++++++----
 src/modules/makeConfiguration.js |  1 -
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 6de904d..ab0b78f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -116,10 +116,6 @@ class App extends Component {
     }, {})
   }
 
-  setMondayJsonIndex = (configuration) => {
-    this.setState({mondayJsonIndex:this.makeMondayJsonIndex(configuration)})
-  }
-
   getTargetLabelSet = (labelTitle, configuration) => {
     for (let i=0; configuration.length>i; i++){
       if(labelTitle === configuration[i]['title']){
@@ -181,6 +177,12 @@ class App extends Component {
     }, {})
   }
 
+  /*
+  This method is called at ExcelTaker when a local file is uploaded
+  This method does three jobs
+  1. Make header of the local file
+  2. Make configuration file from the three data; local header, target Monday metadata, and configuration board data
+  */
   processLocalData = (localItemList) => {
     const { connectList, headerIndex, exclusiveLabels, criteria, mondayColumns } = this.state
     this.setState({localItemList: localItemList})
diff --git a/src/modules/makeConfiguration.js b/src/modules/makeConfiguration.js
index e8cd33a..4936366 100644
--- a/src/modules/makeConfiguration.js
+++ b/src/modules/makeConfiguration.js
@@ -80,7 +80,6 @@ const addJsonIndex = (mondayColumns) => {
 }
 
 export const makeConfiguration = (header, mondayColumns, connectList) => {
-    console.log(mondayColumns)
   return new Promise((resolve, reject) => {
         if ( header === null){
             reject("Upload Excel File")

From 226d51a894c9da10e09ca245077e8c601be1c675 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Mon, 28 Sep 2020 15:43:53 -0500
Subject: [PATCH 12/15] fix response to no configuration file

---
 Book1.xlsx                                    | Bin 9363 -> 9454 bytes
 src/App.js                                    |  63 +++++++++++-------
 .../MakeConnectList/MakeConnectList.js        |   1 -
 src/modules/makeConfiguration.js              |   1 +
 src/modules/update/makeConfVariable.js        |   5 ++
 5 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/Book1.xlsx b/Book1.xlsx
index 488725b2183579603b9eebcf6289873ede2477d1..80bfdd36643bde0771816b539099c13ba15ee49e 100644
GIT binary patch
delta 2908
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
G0001|kW%LW

delta 2829
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

diff --git a/src/App.js b/src/App.js
index ab0b78f..3ae6601 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { isEmpty } from 'lodash';
 import mondaySdk from "monday-sdk-js";
 import './App.css';
 import ExcelTaker from './ExcelTaker'
@@ -91,15 +92,18 @@ class App extends Component {
           .then((res) => {
             const boardAllItems = res.data.boards[0].items;
             const confVarialbes = makeConfVariable(boardAllItems, boardName)
-            this.setState({
-                    //headerIndedx should be taken from configuration board.
-                    headerIndex:0,
-                    connectList:confVarialbes.connect_list,
-                    connectIds:confVarialbes.ids,
-                    exclusiveLabels: confVarialbes.exclusiveLabelList,
-                    criteria: confVarialbes.criteriaList,
-                  })
-        })
+            if(confVarialbes.length === 0){}
+            else{
+              this.setState({
+                //headerIndedx should be taken from configuration board.
+                headerIndex:0,
+                connectList:confVarialbes.connect_list,
+                connectIds:confVarialbes.ids,
+                exclusiveLabels: confVarialbes.exclusiveLabelList,
+                criteria: confVarialbes.criteriaList,
+              })
+            }
+          })
         monday
           .api(`query { boards(ids:[${targetBoardId}]) { name, columns { title, type, settings_str, id } }}`)
           .then((res) => {
@@ -186,34 +190,44 @@ class App extends Component {
   processLocalData = (localItemList) => {
     const { connectList, headerIndex, exclusiveLabels, criteria, mondayColumns } = this.state
     this.setState({localItemList: localItemList})
+
     let header = []
     try{
       header = localItemList[headerIndex].map(header => header.trim())
     }catch(error){
        if (error instanceof TypeError){
-         alert('Configuration is wrong or upload wrong data')
+         console.log('Configuration is wrong or upload wrong data')
        }else{
-         alert('something wrong')
+         console.log('something wrong')
        }
     }
 
-    makeConfiguration(header, mondayColumns, connectList).then((conf) => {
-      this.setState({
-        configuration: conf,
-        mondayJsonIndex: this.makeMondayJsonIndex(conf),
-        exclusiveLabels: this.getIndex(exclusiveLabels, conf),
-        criteria: this.getReadyToUseCriteria(criteria, conf, connectList),
-        haveConf: true,
-      })
-    })
-    .catch(err => {
-      this.setState({
+    if(isEmpty(connectList)){
+       this.setState({
         haveConnectList:false,
         headerIndex: null,
         haveConf: false,
       })
-      alert(err)
-    })
+      alert('There is no connect list')
+    }else{
+      makeConfiguration(header, mondayColumns, connectList).then((conf) => {
+        this.setState({
+          configuration: conf,
+          mondayJsonIndex: this.makeMondayJsonIndex(conf),
+          exclusiveLabels: this.getIndex(exclusiveLabels, conf),
+          criteria: this.getReadyToUseCriteria(criteria, conf, connectList),
+          haveConf: true,
+        })
+      })
+      .catch(err => {
+        this.setState({
+          haveConnectList:false,
+          headerIndex: null,
+          haveConf: false,
+        })
+        alert(err)
+      })
+    }
   }
 
   render() {
@@ -230,7 +244,6 @@ class App extends Component {
             criteria,
             haveConnectList,
     } = this.state;
-    
     return (
       <div>
       <Banner 
diff --git a/src/modules/MakeConnectList/MakeConnectList.js b/src/modules/MakeConnectList/MakeConnectList.js
index 9cfe1fb..12b6fa8 100644
--- a/src/modules/MakeConnectList/MakeConnectList.js
+++ b/src/modules/MakeConnectList/MakeConnectList.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import ConfButtonContainers from "./ConfButtonContainers"
 import ChooseHeaderIndex from "./ChooseHeaderIndex"
-import { each } from 'lodash';
 
 class MakeConnectList extends Component {
   constructor(props){
diff --git a/src/modules/makeConfiguration.js b/src/modules/makeConfiguration.js
index 4936366..81a726a 100644
--- a/src/modules/makeConfiguration.js
+++ b/src/modules/makeConfiguration.js
@@ -71,6 +71,7 @@ const takeLabels = (data) =>{
 }
 
 const isCorrectConf = (mondayColumnsInConnectListWithHeader) => {
+    console.log(mondayColumnsInConnectListWithHeader)
     return mondayColumnsInConnectListWithHeader.every(el => el !== false)
 }
 
diff --git a/src/modules/update/makeConfVariable.js b/src/modules/update/makeConfVariable.js
index 6c46344..2444bc2 100644
--- a/src/modules/update/makeConfVariable.js
+++ b/src/modules/update/makeConfVariable.js
@@ -7,6 +7,11 @@ const makeconfvariable = (confBoardData, targetBoardName) => {
         return variableList
     }, [])
 
+    console.log(preConfVariables.length)
+    if(preConfVariables.length === 0){
+        return [] 
+    }
+
     confVariables['connect_list'] = makeConnectList(preConfVariables)
     confVariables['ids'] = makeIdList(preConfVariables) 
     confVariables['exclusiveLabelList'] = makeExclusiveLabelList(preConfVariables)

From 6ac22d431ffb1cf03e91555064625f967c797fa5 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Thu, 1 Oct 2020 17:08:17 -0500
Subject: [PATCH 13/15] add types on local conf button

---
 src/modules/MakeConnectList/ConfButton.css    |   8 +
 src/modules/MakeConnectList/ConfButton.js     |  27 +-
 .../MakeConnectList/ConfButtonContainers.js   | 230 +++++++++++++-----
 .../MakeConnectList/MakeConnectList.js        |  24 --
 src/modules/makeConfiguration.js              |   1 -
 src/modules/update/getLocalData.js            |   4 +-
 6 files changed, 207 insertions(+), 87 deletions(-)

diff --git a/src/modules/MakeConnectList/ConfButton.css b/src/modules/MakeConnectList/ConfButton.css
index 504e16f..0cc950d 100644
--- a/src/modules/MakeConnectList/ConfButton.css
+++ b/src/modules/MakeConnectList/ConfButton.css
@@ -10,6 +10,10 @@
   text-decoration: none;
 }
 
+.button-one-disabled {
+  background: #CCF4E3;
+}
+
 .button-one p, .button-two p {
   margin: 0 0 15px;
 }
@@ -35,6 +39,10 @@
   text-decoration: none;
 }
 
+.button-two-disabled {
+  background: #F9DADE;
+}
+
 /* Disable color: #FFB6C1 */
 
 .button-two .text {
diff --git a/src/modules/MakeConnectList/ConfButton.js b/src/modules/MakeConnectList/ConfButton.js
index 059b309..f850c9b 100644
--- a/src/modules/MakeConnectList/ConfButton.js
+++ b/src/modules/MakeConnectList/ConfButton.js
@@ -3,9 +3,19 @@ import { Jumbotron } from 'reactstrap';
 import "./ConfButton.css"
 
 export const ConfButtonOne = (props) => {
+     const {title, type, whichButton, getPreConfHeader} = props
+    return(
+        <div className="button-one" onClick={() => getPreConfHeader(title, type, whichButton)}>
+            <p>{title}</p>
+            <p className="text">{type}</p>
+        </div>
+    )   
+}
+
+export const ConfButtonOneDisabled = (props) => {
      const {title, type} = props
     return(
-        <div className="button-two">
+        <div className="button-one button-one-disabled" >
             <p>{title}</p>
             <p className="text">{type}</p>
         </div>
@@ -13,9 +23,22 @@ export const ConfButtonOne = (props) => {
 }
 
 export const ConfButtonTwo = (props) => {
+    const {title, types, whichButton, getPreConfHeader} = props
+    const typeSentence = types.reduce((typeSentece, type, index, types) => {
+        return typeSentece += types.length === index + 1 ? type : type + ', ' 
+    }, "")
+    return(
+        <div className="button-two" onClick={() => getPreConfHeader(title, types, whichButton)}>
+            <p>{title}</p>
+             <p className='text'>{typeSentence}</p>
+        </div>
+    )
+}
+
+export const ConfButtonTwoDisabled = (props) => {
 const {title, type} = props
     return(
-        <div className="button-one">
+        <div className="button-two button-two-disabled">
             <p>{title}</p>
             <p className="text">{type}</p>
         </div>
diff --git a/src/modules/MakeConnectList/ConfButtonContainers.js b/src/modules/MakeConnectList/ConfButtonContainers.js
index c2e59e5..4b59167 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.js
+++ b/src/modules/MakeConnectList/ConfButtonContainers.js
@@ -1,69 +1,183 @@
-import React from 'react';
+import React, { Component } from 'react';
 import "./ConfButtonContainers.css" 
-import{ ConfButtonOne, ConfButtonTwo, ConfiguredConfButton}  from "./ConfButton"
+import{ ConfButtonOneDisabled, ConfButtonTwo, ConfButtonTwoDisabled, ConfiguredConfButton, ConfButtonOne}  from "./ConfButton"
+import { excelDateToJSDate } from '../update/getLocalData'
 import { Button, ButtonGroup } from 'reactstrap';
+import { render } from '@testing-library/react';
 
-const ConfButtonContainers = (props) => {
-
-    const {  
-        localItemList,
-        mondayColumns,
-        headerIndex,
-        isEditMode,
-        isDeleteMode,
-        isOpenTrashCan,
-        confedHeaders,
-        preConfHeader,
-        trashCan,
-    } = props
-
-//console.log(localItemList)
-const mondayColumnButtons = mondayColumns.map(el => 
-                            <ConfButtonOne 
-                            type={el.type}
-                            title={el.title} 
-                            />)
-                            
-const localItemButtons = localItemList[headerIndex].reduce((buttons, el) => {
-    if (el === "" || el === null){
+class ConfButtonContainers extends Component {
+  constructor(props){
+    super(props);
+    this.state={
+      isEditMode: true,
+      isDeleteMode: false,
+      isOpenTrashCan: false,
+      confedHeaders: {},
+      preConfHeader: [],
+      trashCan: [],
+      mondayButtons: [],
+      localButtons: [],
+      localDataSet: {},
+    }
+  }
+
+    componentDidUpdate(){
+        const { preConfHeader, localDataSet } = this.state
+        console.log(preConfHeader)
+        console.log(localDataSet)
+    }
+
+    componentDidMount(){
+        this.setState({
+            mondayButtons: this.mondayButtons,
+            localButtons: this.localButtons,
+            localDataSet: this.makeLocalDataSet()
+        })
+    }
+
+    makeLocalDataSet = () => {
+        const header = this.props.localItemList.slice(this.props.headerIndex, 1)[0] 
+        const items = this.props.localItemList.slice(this.props.headerIndex + 1) 
+        let localDataSet = {}
+        for (let i = 0; i<header.length;i++){
+            let itemSet = new Set()
+            for (let item of items){
+                itemSet.add(item[i])
+            }
+            localDataSet[header[i]] = itemSet
+        }
+        return localDataSet
+    }
+
+    makeNewButtonDynamically = (button, name) => {
+        const {title, type, whichButton} = button.props
+        return title !== name ?
+        (
+            whichButton === 'monday' ?
+            <ConfButtonOneDisabled 
+            type={type}
+            title={title}
+            />
+            :
+            <ConfButtonTwoDisabled 
+            type={type}
+            title={title}
+            />
+        )
+        :
+        button
+    }
+
+    getPreConfHeader = (name, type, whichButton) => {
+        let { preConfHeader, localButtons, mondayButtons } = this.state
+        console.log(mondayButtons)
+        if (preConfHeader.length > 1){
+            console.log('never happen')
+        }else{
+            this.setState({preConfHeader: [...preConfHeader, {'name':name, 'type':type}]})
+            if (whichButton === 'monday'){
+                this.mondayButtons = this.mondayButtons.map(bottun => this.makeNewButtonDynamically(bottun, name))
+                this.localButtons = localButtons
+
+            }else{
+                this.localButtons = this.localButtons.map(bottun => this.makeNewButtonDynamically(bottun, name))
+                this.mondayButtons = mondayButtons
+            }
+        }
+    }
+
+    getTypes = (name, dataSet) => {
+        let types = ['name', 'text', 'long-text']
+        let isNumber = true
+        let isDate = true
+        for (let data of dataSet){
+            if (Number.isInteger(data)){}
+            else if(typeof(data) === 'number') isDate = false
+            else{
+                isNumber = false
+                isDate = false
+            }
+        }
+        if(isNumber) types.push('numeric')
+        if(isDate) types.push('date')
+        return types 
+    }
+
+    makeMondayButtons = () => {
+        const buttons = this.props.mondayColumns.map(
+            el => <ConfButtonOne 
+            type={el.type}
+            title={el.title}
+            whichButton={'monday'}
+            getPreConfHeader={this.getPreConfHeader} 
+            />
+        )
         return buttons
-    }else{
-        buttons.push(<ConfButtonTwo title={el}/>)
+    }
+
+    makeLocalItemButtons = () => {
+        const localDataSet = this.makeLocalDataSet()
+        const buttons = this.props.localItemList[this.props.headerIndex].reduce((buttons, name) => {
+        if (name === "" || name === null){
+            return buttons
+        }else{
+            buttons.push(<ConfButtonTwo 
+                        title={name}
+                        types={this.getTypes(name, localDataSet[name])}
+                        whichButton={'local'}
+                        getPreConfHeader={this.getPreConfHeader} 
+                         />)
+                return buttons
+            }
+        }, [])
         return buttons
     }
-}, [])
-
-/*const configuredConfButton = Object.keys(CONNECT_LIST).reduce((buttons, el) => {
-    buttons.push(<ConfiguredConfButton name1={el} name2={CONNECT_LIST[el]} type='LONG-TEXT'/>)
-    return buttons
-}, [])*/
-
-    console.log(isEditMode)
-return(
-    <div>
-        <div className="tool">
-            <ButtonGroup>
-                {isEditMode ? <Button color="primary">Edit</Button> : <Button color="secondary">Edit</Button>}
-                {isDeleteMode ? <Button color="primary">Delete</Button> : <Button color="secondary">Delete</Button>}
-                {isOpenTrashCan ? <Button color="primary">Trash Can</Button> : <Button color="secondary">Trash Can</Button>}
-            </ButtonGroup>
-        </div>
-        <div className="wrap-container"> 
-            <div className="sm-container">
-                <h3 className="container-text">Excel Header</h3>
-                {localItemButtons}
-            </div>
-            <div className="sm-container">
-                <h3 className="container-text">Monday Header</h3>
-                {mondayColumnButtons}
-            </div>
-            <div className="big-container">
-                <h3 className="container-text">Configuration</h3>
+
+    localButtons = this.makeLocalItemButtons()
+    mondayButtons = this.makeMondayButtons()
+
+    /*const configuredConfButton = Object.keys(CONNECT_LIST).reduce((buttons, el) => {
+        buttons.push(<ConfiguredConfButton name1={el} name2={CONNECT_LIST[el]} type='LONG-TEXT'/>)
+        return buttons
+    }, [])*/
+
+    render(){
+
+        const {
+            isEditMode,
+            isDeleteMode,
+            isOpenTrashCan,
+            confedHeaders,
+            preConfHeader,
+            trashCan,
+        } = this.state
+
+        return(
+            <div>
+                <div className="tool">
+                    <ButtonGroup>
+                        {isEditMode ? <Button color="primary">Edit</Button> : <Button color="secondary">Edit</Button>}
+                        {isDeleteMode ? <Button color="primary">Delete</Button> : <Button color="secondary">Delete</Button>}
+                        {isOpenTrashCan ? <Button color="primary">Trash Can</Button> : <Button color="secondary">Trash Can</Button>}
+                    </ButtonGroup>
+                </div>
+                <div className="wrap-container"> 
+                    <div className="sm-container">
+                        <h3 className="container-text">Excel Header</h3>
+                        {this.localButtons}
+                    </div>
+                    <div className="sm-container">
+                        <h3 className="container-text">Monday Header</h3>
+                        {this.mondayButtons}
+                    </div>
+                    <div className="big-container">
+                        <h3 className="container-text">Configuration</h3>
+                    </div>
+                    <div className="tool-box"></div>   
+                </div>
             </div>
-            <div className="tool-box"></div>   
-        </div>
-    </div>
         )
     }
+}
 
 export default ConfButtonContainers
diff --git a/src/modules/MakeConnectList/MakeConnectList.js b/src/modules/MakeConnectList/MakeConnectList.js
index 12b6fa8..3e55fa9 100644
--- a/src/modules/MakeConnectList/MakeConnectList.js
+++ b/src/modules/MakeConnectList/MakeConnectList.js
@@ -5,14 +5,6 @@ import ChooseHeaderIndex from "./ChooseHeaderIndex"
 class MakeConnectList extends Component {
   constructor(props){
     super(props);
-    this.state={
-      isEditMode: true,
-      isDeleteMode: false,
-      isOpenTrashCan: false,
-      confedHeaders: [],
-      preConfHeader: '',
-      trashCan: [],
-    }
   }
 
   doesNeedMakeObj = (confedHeaders) => {
@@ -44,14 +36,6 @@ const  {mondayColumns,
         getHeaderIndex,
       } = this.props
 
-const {isEditMode,
-       isDeleteMode,
-       isOpenTrashCan,
-       confedHeaders,
-       preConfHeader,
-       trashCan,
-      } = this.state
-
   return (
     headerIndex === null ?
     <ChooseHeaderIndex 
@@ -63,16 +47,8 @@ const {isEditMode,
       localItemList={localItemList}
       mondayColumns={mondayColumns}
       headerIndex={headerIndex}
-      isEditMode={isEditMode}
-      isDeleteMode={isDeleteMode}
-      isOpenTrashCan={isOpenTrashCan}
-      confedHeaders={confedHeaders}
-      preConfHeader={preConfHeader}
-      trashCan={trashCan}
     />
-
     )
-
   }
 }
 export default MakeConnectList;
diff --git a/src/modules/makeConfiguration.js b/src/modules/makeConfiguration.js
index 81a726a..4936366 100644
--- a/src/modules/makeConfiguration.js
+++ b/src/modules/makeConfiguration.js
@@ -71,7 +71,6 @@ const takeLabels = (data) =>{
 }
 
 const isCorrectConf = (mondayColumnsInConnectListWithHeader) => {
-    console.log(mondayColumnsInConnectListWithHeader)
     return mondayColumnsInConnectListWithHeader.every(el => el !== false)
 }
 
diff --git a/src/modules/update/getLocalData.js b/src/modules/update/getLocalData.js
index a577dbe..6ee916c 100644
--- a/src/modules/update/getLocalData.js
+++ b/src/modules/update/getLocalData.js
@@ -9,7 +9,7 @@ const makeLocalDataWithConf = (localData, confData) => {
 const transformData = (data, confData) => {
   const dataType = confData['type']
   if (dataType === 'date'){
-    return ExcelDateToJSDate(data)
+    return excelDateToJSDate(data)
   }else if(dataType === 'color'){
     return changeStatusFormat(confData['labels'], data)
   }else if(dataType === 'text' || dataType === 'long-text'){
@@ -35,7 +35,7 @@ const makeTwoDigitDateElement = (date) => {
 /*
 Monday only takes YYYY-MM-DD date format 
 */
-const ExcelDateToJSDate = (date) => {
+export const excelDateToJSDate = (date) => {
   if (date === undefined || date === 'Cabcekked' || date === ''){
     return ""
   }

From 8d94e2ba729c31caf774f6513f954d7d805aa8a6 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Mon, 5 Oct 2020 16:21:51 -0500
Subject: [PATCH 14/15] store connect list - prototype

---
 .../MakeConnectList/ConfButtonContainers.js   | 96 ++++++++++++++++---
 1 file changed, 83 insertions(+), 13 deletions(-)

diff --git a/src/modules/MakeConnectList/ConfButtonContainers.js b/src/modules/MakeConnectList/ConfButtonContainers.js
index 4b59167..89f2dfa 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.js
+++ b/src/modules/MakeConnectList/ConfButtonContainers.js
@@ -13,18 +13,59 @@ class ConfButtonContainers extends Component {
       isDeleteMode: false,
       isOpenTrashCan: false,
       confedHeaders: {},
+      confedHeadersButtons: [],
       preConfHeader: [],
       trashCan: [],
+      masterMondayButtons: [],
       mondayButtons: [],
+      masterLocalButtons: [],
       localButtons: [],
       localDataSet: {},
     }
   }
+    
+    localButtons = this.makeLocalItemButtons()
+    mondayButtons = this.makeMondayButtons()
 
     componentDidUpdate(){
-        const { preConfHeader, localDataSet } = this.state
-        console.log(preConfHeader)
-        console.log(localDataSet)
+        const { preConfHeader, 
+                localDataSet,
+                confedHeaders,
+                localButtons,
+                mondayButtons,
+                confedHeadersButtons,
+            } = this.state
+
+            console.log(confedHeadersButtons)
+        if (preConfHeader.length === 2){
+            const preConfString = typeof preConfHeader[0]['type'] === 'string' ?  preConfHeader[0] : preConfHeader[1]
+            const preConfGroup = typeof preConfHeader[0]['type'] === 'object' ?  preConfHeader[0] : preConfHeader[1]
+
+            if (this.isLegitimateCombination(preConfString['type'], preConfGroup['type'])){
+                this.setState(preState =>{
+                    let confedHeaders = {...preState.confedHeaders}
+                    confedHeaders[preConfString['name']] = preConfGroup['name']
+                    return {confedHeaders}
+                })
+                this.setState(preState =>{
+                    let confedHeadersButtons = [...preState.confedHeadersButtons]
+                    console.log(confedHeadersButtons)
+                    confedHeadersButtons.push({
+                        'local': this.getTargetButton(preConfString['name'], localButtons),
+                        'monday': this.getTargetButton(preConfGroup['name'], mondayButtons),
+                    })
+                    return {confedHeadersButtons}
+                })
+                this.setState({
+                    preConfHeader: [],
+                    localButtons: this.makeNewButtonSet(preConfString['name'], localButtons),
+                    mondayButtons: this.makeNewButtonSet(preConfGroup['name'], mondayButtons), 
+                }, ()=> {
+                    this.localButtons = this.state.localButtons
+                    this.mondayButtons = this.state.mondayButtons
+                })
+            }
+        }
     }
 
     componentDidMount(){
@@ -34,6 +75,22 @@ class ConfButtonContainers extends Component {
             localDataSet: this.makeLocalDataSet()
         })
     }
+    
+    isLegitimateCombination = (typeString, typeGroup) => {
+        return typeGroup.some(type => type === typeString)
+    }
+
+    makeNewButtonSet = (title, buttons) => {
+        return buttons.filter(button => button.props.title !== title)
+    }
+
+    getTargetButton = (title, buttons) => {
+        for (const button of buttons){
+            if (button.props.title === title) return button
+        }
+        console.log('something wrong')
+        return null
+    }
 
     makeLocalDataSet = () => {
         const header = this.props.localItemList.slice(this.props.headerIndex, 1)[0] 
@@ -50,18 +107,22 @@ class ConfButtonContainers extends Component {
     }
 
     makeNewButtonDynamically = (button, name) => {
-        const {title, type, whichButton} = button.props
+        const {title, type, whichButton, index} = button.props
         return title !== name ?
         (
             whichButton === 'monday' ?
             <ConfButtonOneDisabled 
             type={type}
             title={title}
+            key={title}
+            index={index}
             />
             :
             <ConfButtonTwoDisabled 
             type={type}
             title={title}
+            key={title}
+            index={index}
             />
         )
         :
@@ -86,8 +147,10 @@ class ConfButtonContainers extends Component {
         }
     }
 
+
+
     getTypes = (name, dataSet) => {
-        let types = ['name', 'text', 'long-text']
+        let types = ['name', 'color', 'text', 'long-text']
         let isNumber = true
         let isDate = true
         for (let data of dataSet){
@@ -105,11 +168,13 @@ class ConfButtonContainers extends Component {
 
     makeMondayButtons = () => {
         const buttons = this.props.mondayColumns.map(
-            el => <ConfButtonOne 
+            (el, index) => <ConfButtonOne 
+            key={el.title}
             type={el.type}
             title={el.title}
             whichButton={'monday'}
-            getPreConfHeader={this.getPreConfHeader} 
+            getPreConfHeader={this.getPreConfHeader}
+            index={index}
             />
         )
         return buttons
@@ -117,15 +182,17 @@ class ConfButtonContainers extends Component {
 
     makeLocalItemButtons = () => {
         const localDataSet = this.makeLocalDataSet()
-        const buttons = this.props.localItemList[this.props.headerIndex].reduce((buttons, name) => {
+        const buttons = this.props.localItemList[this.props.headerIndex].reduce((buttons, name, index) => {
         if (name === "" || name === null){
             return buttons
         }else{
             buttons.push(<ConfButtonTwo 
+                        key={name}
                         title={name}
                         types={this.getTypes(name, localDataSet[name])}
                         whichButton={'local'}
-                        getPreConfHeader={this.getPreConfHeader} 
+                        getPreConfHeader={this.getPreConfHeader}
+                        index={index}
                          />)
                 return buttons
             }
@@ -133,8 +200,6 @@ class ConfButtonContainers extends Component {
         return buttons
     }
 
-    localButtons = this.makeLocalItemButtons()
-    mondayButtons = this.makeMondayButtons()
 
     /*const configuredConfButton = Object.keys(CONNECT_LIST).reduce((buttons, el) => {
         buttons.push(<ConfiguredConfButton name1={el} name2={CONNECT_LIST[el]} type='LONG-TEXT'/>)
@@ -146,11 +211,16 @@ class ConfButtonContainers extends Component {
         const {
             isEditMode,
             isDeleteMode,
+            mondayButtons,
+            localButtons,
             isOpenTrashCan,
             confedHeaders,
             preConfHeader,
             trashCan,
         } = this.state
+        
+        const mButtons = ( mondayButtons === undefined || this.mondayButtons[0].whichButton === undefined) ? this.mondayButtons : mondayButtons
+        const lButtons = (localButtons === undefined || this.localButtons[0].whichButton === undefined ) ? this.localButtons : localButtons 
 
         return(
             <div>
@@ -164,11 +234,11 @@ class ConfButtonContainers extends Component {
                 <div className="wrap-container"> 
                     <div className="sm-container">
                         <h3 className="container-text">Excel Header</h3>
-                        {this.localButtons}
+                        {lButtons}
                     </div>
                     <div className="sm-container">
                         <h3 className="container-text">Monday Header</h3>
-                        {this.mondayButtons}
+                        {mButtons}
                     </div>
                     <div className="big-container">
                         <h3 className="container-text">Configuration</h3>

From c95c16a42c2dd30aad1a93684e40401056f26699 Mon Sep 17 00:00:00 2001
From: hiroTochigi <hiroyuki.terauchi.japan@gmail.com>
Date: Tue, 6 Oct 2020 13:02:06 -0500
Subject: [PATCH 15/15] add function to buttons

---
 .../MakeConnectList/ConfButtonContainers.js   | 126 +++++++++---------
 1 file changed, 62 insertions(+), 64 deletions(-)

diff --git a/src/modules/MakeConnectList/ConfButtonContainers.js b/src/modules/MakeConnectList/ConfButtonContainers.js
index 89f2dfa..ca57adc 100644
--- a/src/modules/MakeConnectList/ConfButtonContainers.js
+++ b/src/modules/MakeConnectList/ConfButtonContainers.js
@@ -23,50 +23,6 @@ class ConfButtonContainers extends Component {
       localDataSet: {},
     }
   }
-    
-    localButtons = this.makeLocalItemButtons()
-    mondayButtons = this.makeMondayButtons()
-
-    componentDidUpdate(){
-        const { preConfHeader, 
-                localDataSet,
-                confedHeaders,
-                localButtons,
-                mondayButtons,
-                confedHeadersButtons,
-            } = this.state
-
-            console.log(confedHeadersButtons)
-        if (preConfHeader.length === 2){
-            const preConfString = typeof preConfHeader[0]['type'] === 'string' ?  preConfHeader[0] : preConfHeader[1]
-            const preConfGroup = typeof preConfHeader[0]['type'] === 'object' ?  preConfHeader[0] : preConfHeader[1]
-
-            if (this.isLegitimateCombination(preConfString['type'], preConfGroup['type'])){
-                this.setState(preState =>{
-                    let confedHeaders = {...preState.confedHeaders}
-                    confedHeaders[preConfString['name']] = preConfGroup['name']
-                    return {confedHeaders}
-                })
-                this.setState(preState =>{
-                    let confedHeadersButtons = [...preState.confedHeadersButtons]
-                    console.log(confedHeadersButtons)
-                    confedHeadersButtons.push({
-                        'local': this.getTargetButton(preConfString['name'], localButtons),
-                        'monday': this.getTargetButton(preConfGroup['name'], mondayButtons),
-                    })
-                    return {confedHeadersButtons}
-                })
-                this.setState({
-                    preConfHeader: [],
-                    localButtons: this.makeNewButtonSet(preConfString['name'], localButtons),
-                    mondayButtons: this.makeNewButtonSet(preConfGroup['name'], mondayButtons), 
-                }, ()=> {
-                    this.localButtons = this.state.localButtons
-                    this.mondayButtons = this.state.mondayButtons
-                })
-            }
-        }
-    }
 
     componentDidMount(){
         this.setState({
@@ -75,7 +31,7 @@ class ConfButtonContainers extends Component {
             localDataSet: this.makeLocalDataSet()
         })
     }
-    
+
     isLegitimateCombination = (typeString, typeGroup) => {
         return typeGroup.some(type => type === typeString)
     }
@@ -129,26 +85,68 @@ class ConfButtonContainers extends Component {
         button
     }
 
+    storeData = (preConfHeader) => {
+        const { localDataSet,
+                confedHeaders,
+                localButtons,
+                mondayButtons,
+                confedHeadersButtons,
+            } = this.state
+
+        if (preConfHeader.length === 2){
+
+            const preConfString = typeof preConfHeader[0]['type'] === 'string' ?  preConfHeader[0] : preConfHeader[1]
+            const preConfGroup = typeof preConfHeader[0]['type'] === 'object' ?  preConfHeader[0] : preConfHeader[1]
+
+            if (this.isLegitimateCombination(preConfString['type'], preConfGroup['type'])){
+                this.setState(preState =>{
+                    let confedHeaders = {...preState.confedHeaders}
+                    confedHeaders[preConfString['name']] = preConfGroup['name']
+                    return {confedHeaders}
+                })
+                this.setState(preState =>{
+                    let confedHeadersButtons = [...preState.confedHeadersButtons]
+                    confedHeadersButtons.push({
+                        'local': this.getTargetButton(preConfString['name'], localButtons),
+                        'monday': this.getTargetButton(preConfGroup['name'], mondayButtons),
+                    })
+                    return {confedHeadersButtons}
+                })
+                this.localButtons = this.makeNewButtonSet(preConfString['name'], localButtons)
+                this.mondayButtons = this.makeNewButtonSet(preConfGroup['name'], mondayButtons)
+                this.setState({
+                    preConfHeader: [],
+                    localButtons: this.localButtons,
+                    mondayButtons: this.mondayButtons, 
+                })
+            }
+        }
+    }
+
+    updateButtons = (name, type, whichButton) => {
+        const { localButtons, mondayButtons } = this.state
+        if (whichButton === 'monday'){
+            this.mondayButtons = this.mondayButtons.map(bottun => this.makeNewButtonDynamically(bottun, name))
+            this.localButtons = localButtons
+        }else{
+            this.localButtons = this.localButtons.map(bottun => this.makeNewButtonDynamically(bottun, name))
+            this.mondayButtons = mondayButtons
+        }
+        console.log(localButtons)
+    }
+
     getPreConfHeader = (name, type, whichButton) => {
-        let { preConfHeader, localButtons, mondayButtons } = this.state
-        console.log(mondayButtons)
+        let { preConfHeader } = this.state
         if (preConfHeader.length > 1){
             console.log('never happen')
         }else{
-            this.setState({preConfHeader: [...preConfHeader, {'name':name, 'type':type}]})
-            if (whichButton === 'monday'){
-                this.mondayButtons = this.mondayButtons.map(bottun => this.makeNewButtonDynamically(bottun, name))
-                this.localButtons = localButtons
-
-            }else{
-                this.localButtons = this.localButtons.map(bottun => this.makeNewButtonDynamically(bottun, name))
-                this.mondayButtons = mondayButtons
-            }
+            this.updateButtons(name, type, whichButton)
+            const newPreConfHeader = [...preConfHeader, {'name':name, 'type':type}]
+            this.setState({preConfHeader:newPreConfHeader})
+            this.storeData(newPreConfHeader)
         }
     }
 
-
-
     getTypes = (name, dataSet) => {
         let types = ['name', 'color', 'text', 'long-text']
         let isNumber = true
@@ -200,6 +198,8 @@ class ConfButtonContainers extends Component {
         return buttons
     }
 
+    localButtons = this.makeLocalItemButtons()
+    mondayButtons = this.makeMondayButtons()
 
     /*const configuredConfButton = Object.keys(CONNECT_LIST).reduce((buttons, el) => {
         buttons.push(<ConfiguredConfButton name1={el} name2={CONNECT_LIST[el]} type='LONG-TEXT'/>)
@@ -211,16 +211,14 @@ class ConfButtonContainers extends Component {
         const {
             isEditMode,
             isDeleteMode,
-            mondayButtons,
-            localButtons,
             isOpenTrashCan,
             confedHeaders,
             preConfHeader,
             trashCan,
         } = this.state
         
-        const mButtons = ( mondayButtons === undefined || this.mondayButtons[0].whichButton === undefined) ? this.mondayButtons : mondayButtons
-        const lButtons = (localButtons === undefined || this.localButtons[0].whichButton === undefined ) ? this.localButtons : localButtons 
+        //const mButtons = ( mondayButtons === undefined ) ? this.mondayButtons : mondayButtons
+        //const lButtons = (localButtons === undefined  ) ? this.localButtons : localButtons 
 
         return(
             <div>
@@ -234,11 +232,11 @@ class ConfButtonContainers extends Component {
                 <div className="wrap-container"> 
                     <div className="sm-container">
                         <h3 className="container-text">Excel Header</h3>
-                        {lButtons}
+                        {this.localButtons}
                     </div>
                     <div className="sm-container">
                         <h3 className="container-text">Monday Header</h3>
-                        {mButtons}
+                        {this.mondayButtons}
                     </div>
                     <div className="big-container">
                         <h3 className="container-text">Configuration</h3>