WORKING HELLL YYEEEEEEUH

3 files changed, 28 insertions, 24 deletions

diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index a684944d7..1894332a1 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -50,12 +50,14 @@ export class IconButton extends React.Component<IconButtonProps>{
             () => IconBar.Instance.ResetClicked,
             () => {
                 if (IconBar.Instance.ResetClicked) {
-                    this.reset();
-                    IconBar.Instance.Reset++;
-                    if (IconBar.Instance.Reset === 9) {
-                        IconBar.Instance.Reset = 0;
-                        IconBar.Instance.ResetClicked = false;
-                    }
+                    runInAction(() => {
+                        this.reset();
+                        IconBar.Instance.Reset++;
+                        if (IconBar.Instance.Reset === 9) {
+                            IconBar.Instance.Reset = 0;
+                            IconBar.Instance.ResetClicked = false;
+                        }
+                    })
                 }
             },
         )
@@ -63,12 +65,14 @@ export class IconButton extends React.Component<IconButtonProps>{
             () => IconBar.Instance.SelectAllClicked,
             () => {
                 if (IconBar.Instance.SelectAllClicked) {
-                    this.select();
-                    IconBar.Instance.Select++;
-                    if (IconBar.Instance.Select === 9) {
-                        IconBar.Instance.Select = 0;
-                        IconBar.Instance.SelectAllClicked = false;
-                    }
+                    runInAction(() => {
+                        this.select();
+                        IconBar.Instance.Select++;
+                        if (IconBar.Instance.Select === 9) {
+                            IconBar.Instance.Select = 0;
+                            IconBar.Instance.SelectAllClicked = false;
+                        }
+                    })
                 }
             },
         )
@@ -106,11 +110,11 @@ export class IconButton extends React.Component<IconButtonProps>{
     onClick = () => {
         let newList: string[] = SearchBox.Instance.getIcons();
 
-        if(!this.isSelected){
+        if (!this.isSelected) {
             this.isSelected = true;
             newList.push(this.props.type)
         }
-        else{
+        else {
             this.isSelected = false;
             _.pull(newList, this.props.type)
         }
@@ -186,7 +190,7 @@ export class IconButton extends React.Component<IconButtonProps>{
                 onMouseLeave={this.onMouseLeave}
                 onClick={this.onClick}>
                 <div className="type-icon" id={this.props.type + "-icon"}
-                    style = {this.hover ? this.hoverStyle : this.isSelected ? this.selected : this.notSelected}
+                    style={this.hover ? this.hoverStyle : this.isSelected ? this.selected : this.notSelected}
                 >
                     {this.getFA()}
                 </div>
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 12c21a4e5..755d6a14c 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -116,9 +116,6 @@ export class SearchBox extends React.Component {
             this._results = results;
             this._openNoResults = true;
         });
-
-        //clears searchstring after search - may not be preferred
-        this._searchString = "";
     }
 
     @action
@@ -238,10 +235,16 @@ export class SearchBox extends React.Component {
     }
 
     //if true, any keywords can be used. if false, all keywords are required.
+    @action.bound
     handleWordQueryChange = () => {
         this._basicWordStatus = !this._basicWordStatus;
     }
 
+    @action
+    getBasicWordStatus() {
+        return this._basicWordStatus;
+    }
+
     @action.bound
     updateIcon(newArray: string[]) {
         this._icons = newArray;
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index b12ef4429..0fee81e20 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -19,7 +19,6 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
     @observable forwardTimeline: anime.AnimeTimelineInstance;
     @observable _toggleButton: React.RefObject<HTMLDivElement>;
     @observable _originalStatus: boolean = this.props.originalStatus;
-    @observable _curStatus: boolean = this.props.originalStatus;
 
     constructor(props: ToggleBarProps) {
         super(props);
@@ -71,7 +70,6 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
 
     @action.bound
     onclick() {
-        this._curStatus = !this._curStatus;
         this.forwardTimeline.play();
         this.forwardTimeline.reverse();
         SearchBox.Instance.handleWordQueryChange();
@@ -79,11 +77,10 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
 
     @action.bound
     public resetToggle = () => {
-        if (!this._curStatus) {
+        if (!SearchBox.Instance.getBasicWordStatus()) {
             this.forwardTimeline.play()
             this.forwardTimeline.reverse();
             SearchBox.Instance.handleWordQueryChange();
-            this._curStatus = true;
         }
     }
 
@@ -91,8 +88,8 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
         return (
             <div>
                 <div className="toggle-title">
-                    <div className="toggle-option" style={{ opacity: (this._curStatus ? 1 : .4) }}>{this.props.optionOne}</div>
-                    <div className="toggle-option" style={{ opacity: (this._curStatus ? .4 : 1) }}>{this.props.optionTwo}</div>
+                    <div className="toggle-option" style={{ opacity: (SearchBox.Instance.getBasicWordStatus() ? 1 : .4) }}>{this.props.optionOne}</div>
+                    <div className="toggle-option" style={{ opacity: (SearchBox.Instance.getBasicWordStatus() ? .4 : 1) }}>{this.props.optionTwo}</div>
                 </div>
                 <div className="toggle-bar" id="toggle-bar" style={{ flexDirection: (this._originalStatus ? "row" : "row-reverse") }}>
                     <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} />