things appear to be working

1 files changed, 163 insertions, 129 deletions

diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 129348b91..71f1b7f0f 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -28,22 +28,23 @@ interface IconButtonProps {
     type: string;
     getList(): string[];
     updateList(list: string[]): void;
-    updateSelectedList(type: string): void;
+    // updateSelectedList(type: string): void;
     active: boolean;
-    getActiveType(): string;
-    changeActiveType(value: string): void;
+    // getActiveType(): string;
+    // changeActiveType(value: string): void;
 }
 
 @observer
 export class IconButton extends React.Component<IconButtonProps>{
 
     @observable isSelected: boolean = this.props.active;
-    @observable removeType = false;
+    // @observable removeType = false;
     @observable hover = false;
-    @observable isRemoved: boolean = (this.props.getActiveType() === "remove");
-    @observable isAdded: boolean = (this.props.getActiveType() === "add");
+    // @observable isRemoved: boolean = (this.props.getActiveType() === "remove");
+    // @observable isAdded: boolean = (this.props.getActiveType() === "add");
 
-    private _reactionDisposer?: IReactionDisposer;
+    private _resetReaction?: IReactionDisposer;
+    private _selectAllReaction?: IReactionDisposer;
 
     static Instance: IconButton;
     constructor(props: IconButtonProps) {
@@ -52,12 +53,11 @@ export class IconButton extends React.Component<IconButtonProps>{
     }
 
     componentDidMount = () => {
-        this._reactionDisposer = reaction(
+        this._resetReaction = reaction(
             () => IconBar.Instance.ResetClicked,
             () => {
                 if (IconBar.Instance.ResetClicked) {
-                    console.log("running")
-                    this.reset()
+                    this.reset();
                     IconBar.Instance.Reset++;
                     if (IconBar.Instance.Reset === 9) {
                         IconBar.Instance.Reset = 0;
@@ -65,39 +65,51 @@ export class IconButton extends React.Component<IconButtonProps>{
                     }
                 }
             },
-            {fireImmediately: true}
+        )
+        this._selectAllReaction = reaction(
+            () => 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;
+                    }
+                }
+            },
         )
     }
 
-    @action
-    downKeyHandler = (e: KeyboardEvent) => {
-        if (e.key !== "Control") return;
-        this.removeType = true;
-        e.preventDefault();
-        e.stopPropagation();
-        document.body.style.cursor = "not-allowed";
-    }
-
-    @action
-    upKeyHandler = (e: KeyboardEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.removeType = false;
-        document.body.style.cursor = "default";
-
-    }
-
-    componentWillMount() {
-        document.removeEventListener("keydown", this.downKeyHandler);
-        document.addEventListener("keydown", this.downKeyHandler);
-        document.removeEventListener("keyup", this.upKeyHandler);
-        document.addEventListener("keyup", this.upKeyHandler);
-    }
-
-    componentWillUnMount() {
-        document.removeEventListener("keyup", this.upKeyHandler);
-        document.removeEventListener("keydown", this.downKeyHandler);
-    }
+    // @action
+    // downKeyHandler = (e: KeyboardEvent) => {
+    //     if (e.key !== "Control") return;
+    //     this.removeType = true;
+    //     e.preventDefault();
+    //     e.stopPropagation();
+    //     document.body.style.cursor = "not-allowed";
+    // }
+
+    // @action
+    // upKeyHandler = (e: KeyboardEvent) => {
+    //     e.preventDefault();
+    //     e.stopPropagation();
+    //     this.removeType = false;
+    //     document.body.style.cursor = "default";
+
+    // }
+
+    // componentWillMount() {
+    //     document.removeEventListener("keydown", this.downKeyHandler);
+    //     document.addEventListener("keydown", this.downKeyHandler);
+    //     document.removeEventListener("keyup", this.upKeyHandler);
+    //     document.addEventListener("keyup", this.upKeyHandler);
+    // }
+
+    // componentWillUnMount() {
+    //     document.removeEventListener("keyup", this.upKeyHandler);
+    //     document.removeEventListener("keydown", this.downKeyHandler);
+    // }
 
     @action.bound
     getIcon() {
@@ -127,96 +139,112 @@ export class IconButton extends React.Component<IconButtonProps>{
         }
     }
 
-    public getType(): string {
-        return this.props.type;
-    }
+    // public getType(): string {
+    //     return this.props.type;
+    // }
 
-    public getIsSelected(): boolean {
-        return this.isSelected;
-    }
+    // public getIsSelected(): boolean {
+    //     return this.isSelected;
+    // }
 
-    public getIsRemoved() {
-        return this.isRemoved;
-    }
+    // public getIsRemoved() {
+    //     return this.isRemoved;
+    // }
 
-    public getIsAdded() {
-        return this.isAdded;
-    }
+    // public getIsAdded() {
+    //     return this.isAdded;
+    // }
 
-    @action
+    @action.bound
     onClick = () => {
         let newList: string[] = this.props.getList();
 
-        if(this.removeType && this.props.getActiveType() !== "remove"){
-            this.props.changeActiveType("remove")
-            // console.log("resetting")
-        }
-        else if(!this.removeType && this.props.getActiveType() !== "add"){
-            this.props.changeActiveType("add");
-            // console.log("resetting")
-        }
-
-        //if it's not already selected
-        if (!this.isSelected) {
+        if(!this.isSelected){
             this.isSelected = true;
-            console.log("changing")
-
-            //if actions pertain to removal
-            if (this.removeType) {
-                this.isAdded = false;
-                if (!this.isRemoved) {
-                    _.pull(newList, this.props.type);
-                    this.isRemoved = true;
-                }
-                else {
-                    newList.push(this.props.type);
-                    this.isRemoved = false;
-                }
-            }
-            // if actions pertain to adding
-            else {
-                this.isRemoved = false;
-                if (!this.isAdded) {
-                    if (newList.length === 9) {
-                        newList = [];
-                        newList.push(this.props.type)
-                    } else {
-                        newList.push(this.props.type);
-                    }
-                    this.isAdded = true;
-                }
-                else {
-                    _.pull(newList, this.props.type);
-                    this.isAdded = false;
-                }
-            }
+            newList.push(this.props.type)
         }
-        //if it is selected already
-        else {
+        else{
             this.isSelected = false;
-            if (this.isAdded) {
-                this.isAdded = false;
-                _.pull(newList, this.props.type);
-            }
-            if (this.isRemoved) {
-                this.isRemoved = false;
-                newList.push(this.props.type)
-            }
-            this.props.changeActiveType("none")
+            _.pull(newList, this.props.type)
         }
-        this.props.updateList(newList)
-        console.log(this);
-        console.log(this.isAdded, this.isSelected)
+
+        this.props.updateList(newList);
     }
 
-    selectedAdded = {
+    // @action
+    // onClick2 = () => {
+    //     let newList: string[] = this.props.getList();
+
+    //     // if(this.removeType && this.props.getActiveType() !== "remove"){
+    //     //     this.props.changeActiveType("remove")
+    //     //     // console.log("resetting")
+    //     // }
+    //     // else if(!this.removeType && this.props.getActiveType() !== "add"){
+    //     //     this.props.changeActiveType("add");
+    //     //     // console.log("resetting")
+    //     // }
+
+    //     //if it's not already selected
+    //     if (!this.isSelected) {
+    //         this.isSelected = true;
+    //         console.log("changing")
+
+    //         //if actions pertain to removal
+    //         if (this.removeType) {
+    //             this.isAdded = false;
+    //             if (!this.isRemoved) {
+    //                 _.pull(newList, this.props.type);
+    //                 this.isRemoved = true;
+    //             }
+    //             else {
+    //                 newList.push(this.props.type);
+    //                 this.isRemoved = false;
+    //             }
+    //         }
+    //         // if actions pertain to adding
+    //         else {
+    //             this.isRemoved = false;
+    //             if (!this.isAdded) {
+    //                 if (newList.length === 9) {
+    //                     newList = [];
+    //                     newList.push(this.props.type)
+    //                 } else {
+    //                     newList.push(this.props.type);
+    //                 }
+    //                 this.isAdded = true;
+    //             }
+    //             else {
+    //                 _.pull(newList, this.props.type);
+    //                 this.isAdded = false;
+    //             }
+    //         }
+    //     }
+    //     //if it is selected already
+    //     else {
+    //         this.isSelected = false;
+    //         if (this.isAdded) {
+    //             this.isAdded = false;
+    //             _.pull(newList, this.props.type);
+    //         }
+    //         if (this.isRemoved) {
+    //             this.isRemoved = false;
+    //             newList.push(this.props.type)
+    //         }
+    //         this.props.changeActiveType("none")
+    //     }
+    //     this.props.updateList(newList)
+    //     console.log(this);
+    //     console.log(this.isAdded, this.isSelected)
+    // }
+
+    selected = {
         opacity: 1,
         backgroundColor: "#c2c2c5" //$alt-accent
     }
 
-    selectedRemoved = {
-        opacity: 0.2,
-    }
+    // selectedRemoved = {
+    //     opacity: 0.2,
+    // }
 
     notSelected = {
         opacity: 0.6,
@@ -224,23 +252,28 @@ export class IconButton extends React.Component<IconButtonProps>{
 
     hoverStyle = {
         opacity: 1,
-        backgroundColor: "#c2c2c5" //$alt-accent
+        backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
     }
 
-    hoverRemoveStyle = {
-        opacity: 0.2,
-        backgroundColor: "transparent",
-    }
+    // hoverRemoveStyle = {
+    //     opacity: 0.2,
+    //     backgroundColor: "transparent",
+    // }
 
-    banStyle = {
-        opacity: 1,
-    }
+    // banStyle = {
+    //     opacity: 1,
+    // }
 
     @action.bound
     public reset() {
         this.isSelected = false;
-        this.isAdded = false;
-        this.isRemoved = false;
+        // this.isAdded = false;
+        // this.isRemoved = false;
+    }
+
+    @action.bound
+    public select() {
+        this.isSelected = true;
     }
 
     @action
@@ -287,16 +320,17 @@ 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.removeType ? this.hoverRemoveStyle : this.hoverStyle :
-                        !this.isSelected ? this.notSelected :
-                            this.isAdded ? this.selectedAdded :
-                                this.isRemoved ? this.selectedRemoved : this.notSelected}
+                    // style={this.hover ? this.removeType ? this.hoverRemoveStyle : this.hoverStyle :
+                    //     !this.isSelected ? this.notSelected :
+                    //         this.isAdded ? this.selectedAdded :
+                    //             this.isRemoved ? this.selectedRemoved : this.notSelected}
+                    style = {this.hover ? this.hoverStyle : this.isSelected ? this.selected : this.notSelected}
                 >
                     {this.getFA()}
                 </div>
-                <div className="ban-icon"
+                {/* <div className="ban-icon"
                     style={this.hover ? (this.removeType ? this.banStyle : { opacity: 0 }) : (this.isSelected ? this.isRemoved ? this.banStyle : { opacity: 0 } : { opacity: 0 })}>
-                    <FontAwesomeIcon className="fontawesome-icon" icon={faBan} /></div>
+                    <FontAwesomeIcon className="fontawesome-icon" icon={faBan} /></div> */}
                 <div className="filter-description">{this.props.type}</div>
             </div>
         );