feat(SettingIcon): Add clear symbols button (chrisleekr#626)

Ailein · May 3, 2023 · 8a54f8d · 8a54f8d
1 parent d321990
commit 8a54f8d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ All notable changes to this project will be documented in this file.
 
 - Added the prefix to environment parameter for `TRADINGVIEW` related - [#616](https://github.com/chrisleekr/binance-trading-bot/pull/616)
 - Fixed the issue with minNotional - [#623](https://github.com/chrisleekr/binance-trading-bot/pull/623)
+- Add clear symbols button by [@TheSmuks](https://github.com/TheSmuks) - [#626](https://github.com/chrisleekr/binance-trading-bot/pull/626)
+
+Thanks [@TheSmuks](https://github.com/TheSmuks) for your great contributions. 💯 :heart:
 
 ## [0.0.97] - 2023-03-21
 

diff --git a/public/css/App.css b/public/css/App.css
@@ -893,6 +893,23 @@ input[type='number'] {
   End: Dust Transfer
 */
 
+/**
+  Start: Symbols selection
+*/
+.btn-clear-symbols {
+  background-color: #f84960;
+  color: white;
+}
+
+.btn-clear-symbols:hover {
+  box-shadow: none;
+  color: white;
+  background-color: #ff4265;
+}
+/**
+  End: Symbols selection
+*/
+
 /**
   Start: Grid Trade
 */

diff --git a/public/js/SettingIcon.js b/public/js/SettingIcon.js
@@ -32,6 +32,7 @@ class SettingIcon extends React.Component {
     this.handleBotOptionsChange = this.handleBotOptionsChange.bind(this);
 
     this.handleSetValidation = this.handleSetValidation.bind(this);
+    this.symbolsTypeaheadRef = React.createRef();
   }
 
   getQuoteAssets(
@@ -259,6 +260,12 @@ class SettingIcon extends React.Component {
 
                                 configuration.symbols = selected;
 
+                                this.handleSetValidation('symbols', true);
+
+                                if (_.isEmpty(configuration.symbols)) {
+                                  this.handleSetValidation('symbols', false);
+                                }
+
                                 const {
                                   quoteAssets,
                                   minNotionals,
@@ -278,6 +285,7 @@ class SettingIcon extends React.Component {
                                   minNotionals
                                 });
                               }}
+                              ref={this.symbolsTypeaheadRef}
                               size='sm'
                               options={_.keys(exchangeSymbols)}
                               renderMenuItemChildren={(
@@ -315,10 +323,28 @@ class SettingIcon extends React.Component {
                               )}
                               defaultSelected={selectedSymbols}
                               placeholder='Choose symbols to monitor...'
+                              isInvalid={
+                                _.get(validation, `symbols`, true) === false
+                              }
                             />
                           </Form.Group>
                         </div>
                       </div>
+                      <div className='row'>
+                        <div className='col-12 text-right'>
+                          <button
+                            type='button'
+                            className='btn btn-sm btn-clear-symbols'
+                            onClick={e => {
+                              e.preventDefault();
+                              this.symbolsTypeaheadRef.current.clear();
+                              const { configuration } = this.state;
+                              configuration.symbols = [];
+                            }}>
+                            Clear selection
+                          </button>
+                        </div>
+                      </div>
                     </Card.Body>
                   </Accordion.Collapse>
                 </Card>