IMP: settings: first step and todo

src/App.js

 import React from 'react';
 // import ReactDOM from 'react-dom/client';
+import { SettingModal } from './Common';
 import './App.css';
 
 import { TodoItemContainer } from './TodoItem';
@@ -15,6 +16,8 @@ class App extends React.Component {
     this.handleRecord = this.handleRecord.bind(this);
     this.clearSearch = this.clearSearch.bind(this);
     this.doSearch = this.doSearch.bind(this);
+    this.getSettingContent = this.getSettingContent.bind(this);
+    this.containerState = this.containerState.bind(this);
 
     this.values = {
       todoList: [],
@@ -185,6 +188,32 @@ class App extends React.Component {
 
   }
 
+  getSettingContent() {
+    return (
+      <form>
+      <div>Ajouter setting pour token user pris sur headers ?</div>
+      <div>Ajouter setting: ?</div>
+      <div>Ajouter prise en charge séquence, effacer = cacher en fait : etc etc</div>
+        <label htmlFor="api_url" className='is-size-4'>API URL:</label>
+        <input type="text" className='is-size-4' placeholder={this.state.apiUrl} name="api_url" />
+      </form>
+    )
+  }
+
+  _getSettingDialog() {
+    let settingDialog = null;
+    if (this.state.displaySettings) {
+      settingDialog = (
+        <SettingModal
+          title="Settings"
+          content={this.getSettingContent()}
+          containerState={this.containerState}
+        />
+      )
+    }
+    return settingDialog;
+  }
+
   renderList() {
     if (this.state.displayLists) {
       return <TodoListContainer
@@ -223,6 +252,7 @@ class App extends React.Component {
   }
 
   render() {
+    let settingDialog = this._getSettingDialog();
     return (
       <div className="App">
         <header className="App-header">
@@ -233,7 +263,10 @@ class App extends React.Component {
           </div>
           <div className="a_main_box columns">
             <div className="column is-8">
-              <button id="settings" className="button is-success is-flex">Settings</button>
+              <button id="settings" className="button is-success is-flex"
+                onClick={() => this.setState({ displaySettings: true })}>
+                Settings
+              </button>
             </div>
             <div className="column is-flex is-size-4">
               <label className='mr-1' htmlFor='search'><i className="fa fa-search" aria-hidden="true"></i></label>
@@ -252,13 +285,13 @@ class App extends React.Component {
             </div>
           </div>
           <div id="Main window" className="block a_main_box box">
+            {settingDialog}
             <div className='pb-3'>
               {this.renderList()}
             </div>
             <div className='pb-5'>
               {this.renderItems()}
             </div>
-
           </div>
           <div className='subtitle is-5'>
             <a href="https://www.agayon.be" rel="noreferrer" target="_blank">Powered By AgayonTodo</a>

src/Common.js

@@ -141,4 +141,27 @@ class UpdateModal extends Modal {
     }
 }
 
-export { UpdateModal, DeletionModal };
\ No newline at end of file
+class SettingModal extends Modal {
+
+    constructor(props) {
+        super(props);
+        this.values = {
+            Name: this.props.title,
+            Content: this.props.content,
+            itemId: null
+        }
+    }
+
+    _getDiscardState() {
+        return { displaySettings: false, activeItem: null };
+    }
+
+    handleClick = (event, activeItem) => {
+        event.stopPropagation();
+        let action = "";
+        
+        this.props.containerState({ displaySettings: false, apiUrl: "/api" });
+    }
+}
+
+export { UpdateModal, DeletionModal , SettingModal};
\ No newline at end of file