filter lookin CUTE

5 files changed, 27 insertions, 88 deletions

diff --git a/package.json b/package.json
index 1376f0a85..1dd8f65ec 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,6 @@
         "body-parser": "^1.18.3",
         "bootstrap": "^4.3.1",
         "class-transformer": "^0.2.0",
-        "classnames": "^2.2.6",
         "connect-flash": "^0.1.1",
         "connect-mongo": "^2.0.3",
         "cookie-parser": "^1.4.4",
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
index d8625e95b..eb7b45754 100644
--- a/src/client/views/search/IconBar.scss
+++ b/src/client/views/search/IconBar.scss
@@ -25,9 +25,9 @@
 .type-icon.selected{
     background-color: $alt-accent;
 }
-    
+
 .type-icon.not-selected{
-    background-color: red;
+    background-color: transparent;
 }
 
 .fontawesome-icon{
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index 0c2624715..bf98e1ef3 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -24,21 +24,13 @@ library.add(faGlobeAsia);
 library.add(faBan);
 
 export interface IconBarProps {
-    updateIcon(newIcons: string[]): void;
+    updateIcon(icons: string[]): void;
     getIcons(): string[];
 }
 
 @observer
 export class IconBar extends React.Component<IconBarProps> {
 
-    @observable newIcons: string[] = [];
-    // @observable selectedStyle = {
-    //     backgroundColor: "#121721"
-    // }
-    // @observable unselectedStyle = {
-    //     backgroundColor: "#c2c2c5"
-    // }
-
     @observable noneRef = React.createRef<HTMLDivElement>();
     @observable colRef = React.createRef<HTMLDivElement>();
     @observable imgRef = React.createRef<HTMLDivElement>();
@@ -51,23 +43,6 @@ export class IconBar extends React.Component<IconBarProps> {
     @observable webRef = React.createRef<HTMLDivElement>();
     @observable allRefs: React.RefObject<HTMLDivElement>[] = [this.colRef, this.imgRef, this.textRef, this.pdfRef, this.vidRef, this.audioRef, this.linkRef, this.histRef, this.webRef];
 
-    //changes colors of buttons on click - not sure if this is the best method (it probably isn't)
-    //but i spent a ton of time on it and this is the only thing i could get to work
-    // componentDidMount = () => {
-
-    //     let buttons = document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node =>
-    //         node.addEventListener('click', function () {
-    //             if (this.style.backgroundColor === "rgb(194, 194, 197)") {
-    //                 this.style.backgroundColor = "#121721";
-    //             }
-    //             else {
-    //                 this.style.backgroundColor = "#c2c2c5"
-    //             }
-    //         })
-    //     );
-
-    // }
-
     //gets ref associated with given string
     @action.bound
     getRef = (value: string) => {
@@ -108,7 +83,6 @@ export class IconBar extends React.Component<IconBarProps> {
                 break;
         }
 
-        // console.log(toReturn)
         return toReturn;
     }
 
@@ -123,78 +97,41 @@ export class IconBar extends React.Component<IconBarProps> {
 
     @action.bound
     alternateRef(ref: any) {
-        // console.log("alternating")
-        // console.log("before")
-        // console.log(ref.getAttribute("data-selected"));
-        // console.log(ref.getAttribute("class"));
-        // console.log(ref)
         if (ref.getAttribute("data-selected") === "true") {
-            // console.log("is true")
             ref.setAttribute("data-selected", "false")
         }
         else {
-            // console.log("is false")
             ref.setAttribute("data-selected", "true")
         }
-        // console.log("after")
-        // console.log(ref.getAttribute("data-selected"));
-        // console.log(ref.getAttribute("class"));
-        // console.log(ref)
     }
 
     @action.bound
     onClick = (value: string) => {
-        // console.log("clicking")
-        let oldIcons = this.props.getIcons()
+        let icons: string[] = this.props.getIcons()
         let ref = this.getRef(value);
         this.alternateRef(ref);
         if (value === DocTypes.NONE) {
-            this.newIcons = [value];
-            this.unselectAllRefs();
-
+            icons = [];
             // if its none, change the color of all the other circles
-            // document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node => {
-            //     if (node.id === "none") {
-            //         node.style.backgroundColor = "#c2c2c5";
-            //     }
-            //     else {
-            //         node.style.backgroundColor = "#121721";
-            //     }
-            // }
-            // );
+            this.unselectAllRefs();
         }
         else {
-            //turns "none" button off
-            // let noneDoc = document.getElementById(DocTypes.NONE)
-            // if (noneDoc) {
-            //     noneDoc.style.backgroundColor = "#121721";
-            // }
-            if (oldIcons.includes(value)) {
-                this.newIcons = _.remove(oldIcons, value);
-                if (this.newIcons.length === 0) {
-                    this.newIcons = [DocTypes.NONE];
-                    if (this.noneRef.current) {
-                        this.noneRef.current.setAttribute("data-selected", "true");
-                    }
-                }
+            //if it's already selected, unselect it
+            if (icons.includes(value)) {
+                icons = _.without(icons, value);
             }
+            //if it's not yet selected, select it
             else {
-                if (this.noneRef.current) {
-                    this.noneRef.current.setAttribute("data-selected", "false");
-                }
-                this.newIcons = oldIcons;
-                if (this.newIcons.length === 1 && this.newIcons[0] === DocTypes.NONE) {
-                    this.newIcons = [value]
-                }
-                else { this.newIcons.push(value); }
+                icons.push(value);
             }
         }
-        this.props.updateIcon(this.newIcons);
+        this.props.updateIcon(icons);
         //ok i know that this is bad but i dont know how else to get it to rerender and change the classname,
         //any help here is greatly appreciated thanks frens
         this.forceUpdate();
     }
 
+    //checks if option is selected based on the attribute data-selected
     @action.bound
     isRefSelected(ref: React.RefObject<HTMLDivElement>) {
         if (ref.current) {
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 589dd58c9..4ce40614f 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -57,9 +57,9 @@
     height: 40px;
 }
 
-#option {
-    height: 20px;
-}
+// #option {
+//     height: 20px;
+// }
 
 .searchBox-results {
     top: 300px;
@@ -69,11 +69,14 @@
 }
 
 .type-of-node{
-    height: 50px;
+    height: 60px;
 }
 
 .required-words{
     height: 110px;
+}
+
+.filter-div{
     margin-top: 5px;
     margin-bottom: 5px;
 }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 4c4a223cc..329643464 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -28,7 +28,7 @@ import { IconBar } from './IconBar';
 export class SearchBox extends React.Component {
     @observable _searchString: string = "";
     @observable _wordStatus: boolean = true;
-    @observable _icons: string[] = ["none"];
+    @observable _icons: string[] = [];
     @observable private _open: boolean = false;
     @observable private _resultsOpen: boolean = false;
     @observable private _results: Doc[] = [];
@@ -224,18 +224,18 @@ export class SearchBox extends React.Component {
                 {/* these all need class names in order to find ancestor - please do not delete */}
                 {this._open ? (
                     <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
-                        <div className="filter-form" id="header">Filter Search Results</div>
-                        <div className="filter-form" id="option">
-                            <div className="required-words">
+                        <div className="filter-form filter-div" id="header">Filter Search Results</div>
+                        <div className="filter-form " id="option">
+                            <div className="required-words filter-div">
                                 <ToggleBar optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} changeStatus={this.handleWordQueryChange} />
                             </div>
-                            <div className="type-of-node">
+                            <div className="type-of-node filter-div">
                                <IconBar updateIcon={this.updateIcon} getIcons={this.getIcons}/>
                             </div>
-                            <div className="filter-collection">
+                            <div className="filter-collection filter-div">
                                 temp for filtering by collection
                             </div>
-                            <div className="where-in-doc">
+                            <div className="where-in-doc filter-div">
                                 temp for filtering where in doc the keywords are found
                             </div>
                         </div>