From 5c3580902a63f7321c08065188f42c1874d399ad Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Tue, 11 Jun 2019 15:15:09 -0400
Subject: toggle working

---
 src/client/views/search/ToggleBar.tsx | 55 ++++++++++++-----------------------
 1 file changed, 19 insertions(+), 36 deletions(-)

(limited to 'src')

diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index 6d721b774..f3a1a3171 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -13,13 +13,10 @@ export interface ToggleBarProps {
     optionTwo: string;
 }
 
-//TODO: justify content will align to specific side. Maybe do status passed in and out?
 @observer
 export class ToggleBar extends React.Component<ToggleBarProps>{
 
-    @observable _wordStatus: boolean = true;
     @observable forwardTimeline: anime.AnimeTimelineInstance;
-    @observable reverseTimeline: anime.AnimeTimelineInstance;
     @observable _toggleButton: React.RefObject<HTMLDivElement>;
     @observable _originalStatus: boolean = this.props.originalStatus;
 
@@ -27,14 +24,10 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
         super(props);
         this._toggleButton = React.createRef();
         this.forwardTimeline = anime.timeline({
+            loop: false,
             autoplay: false,
-            direction: "reverse"
-        });
-        this.reverseTimeline = anime.timeline({
-            autoplay: false,
-            direction: "reverse"
+            direction: "reverse",
         });
-
     }
 
     @computed get totalWidth() { return this.getTotalWidth(); }
@@ -56,38 +49,28 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
 
         let totalWidth = this.totalWidth;
 
-        this.forwardTimeline.add({
-            targets: this._toggleButton.current,
-            loop: false,
-            translateX: totalWidth,
-            easing: "easeInOutQuad",
-            duration: 500,
-        });
-
-        this.reverseTimeline.add({
-            targets: this._toggleButton.current,
-            loop: false,
-            translateX: -totalWidth,
-            easing: "easeInOutQuad",
-            duration: 500,
-        });
-
-    }
-
-    @action.bound
-    onclick() {
-        console.log(this._originalStatus)
-
         if (this._originalStatus) {
-            this.forwardTimeline.play();
-            this.forwardTimeline.reverse();
+            this.forwardTimeline.add({
+                targets: this._toggleButton.current,
+                translateX: totalWidth,
+                easing: "easeInOutQuad",
+                duration: 500
+            });
         }
         else {
-            this.reverseTimeline.play();
-            this.reverseTimeline.reverse();
+            this.forwardTimeline.add({
+                targets: this._toggleButton.current,
+                translateX: -totalWidth,
+                easing: "easeInOutQuad",
+                duration: 500
+            })
         }
+    }
 
-        this._wordStatus = !this._wordStatus;
+    @action.bound
+    onclick() {
+        this.forwardTimeline.play();
+        this.forwardTimeline.reverse();
         this.props.changeStatus();
     }
 
-- 
cgit v1.2.3-70-g09d2