a bunch more fixes to making things observable. fixed calling super.componentDidUpdate on subsclasses

14 files changed, 2 insertions, 779 deletions

diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss
deleted file mode 100644
index 4892facbc..000000000
--- a/src/client/views/search/CheckBox.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import '../global/globalCssVariables.module.scss';
-
-.checkboxfilter {
-    display: flex;
-    margin-top: 0px;
-    padding: 3px;
-
-    .outer {
-        display: flex;
-        position: relative;
-        justify-content: center;
-        align-items: center;
-        margin-top: 0px;
-
-        .check-container:hover ~ .check-box {
-            background-color: $medium-blue;
-        }
-
-        .check-container {
-            width: 40px;
-            height: 40px;
-            position: absolute;
-            z-index: 1000;
-
-            .checkmark {
-                z-index: 1000;
-                position: absolute;
-                fill-opacity: 0;
-                stroke-width: 4px;
-                // stroke: white;
-                stroke: gray;
-            }
-        }
-
-        .check-box {
-            z-index: 900;
-            position: relative;
-            height: 20px;
-            width: 20px;
-            overflow: visible;
-            background-color: transparent;
-            border-style: solid;
-            border-color: $medium-gray;
-            border-width: 2px;
-            -webkit-transition: all 0.2s ease-in-out;
-            -moz-transition: all 0.2s ease-in-out;
-            -o-transition: all 0.2s ease-in-out;
-            transition: all 0.2s ease-in-out;
-        }
-    }
-
-    .checkbox-title {
-        display: flex;
-        align-items: center;
-        text-transform: capitalize;
-        margin-left: 15px;
-    }
-}
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
deleted file mode 100644
index 0a1e551ec..000000000
--- a/src/client/views/search/CheckBox.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx';
-import "./CheckBox.scss";
-
-interface CheckBoxProps {
-    originalStatus: boolean;
-    updateStatus(newStatus: boolean): void;
-    title: string;
-    parent: any;
-    numCount: number;
-    default: boolean;
-}
-
-@observer
-export class CheckBox extends React.Component<CheckBoxProps>{
-    // true = checked, false = unchecked
-    @observable private _status: boolean;
-    // @observable private uncheckTimeline: anime.AnimeTimelineInstance;
-    // @observable private checkTimeline: anime.AnimeTimelineInstance;
-    @observable private checkRef: any;
-    @observable private _resetReaction?: IReactionDisposer;
-
-
-    constructor(props: CheckBoxProps) {
-        super(props);
-        this._status = this.props.originalStatus;
-        this.checkRef = React.createRef();
-
-        // this.checkTimeline = anime.timeline({
-        //     loop: false,
-        //     autoplay: false,
-        //     direction: "normal",
-        // }); this.uncheckTimeline = anime.timeline({
-        //     loop: false,
-        //     autoplay: false,
-        //     direction: "normal",
-        // });
-    }
-
-    // componentDidMount = () => {
-    //     this.uncheckTimeline.add({
-    //         targets: this.checkRef.current,
-    //         easing: "easeInOutQuad",
-    //         duration: 500,
-    //         opacity: 0,
-    //     });
-    //     this.checkTimeline.add({
-    //         targets: this.checkRef.current,
-    //         easing: "easeInOutQuad",
-    //         duration: 500,
-    //         strokeDashoffset: [anime.setDashoffset, 0],
-    //         opacity: 1
-    //     });
-
-    //     if (this.props.originalStatus) {
-    //         this.checkTimeline.play();
-    //         this.checkTimeline.restart();
-    //     }
-
-    //     this._resetReaction = reaction(
-    //         () => this.props.parent._resetBoolean,
-    //         () => {
-    //             if (this.props.parent._resetBoolean) {
-    //                 runInAction(() => {
-    //                     this.reset();
-    //                     this.props.parent._resetCounter++;
-    //                     if (this.props.parent._resetCounter === this.props.numCount) {
-    //                         this.props.parent._resetCounter = 0;
-    //                         this.props.parent._resetBoolean = false;
-    //                     }
-    //                 });
-    //             }
-    //         },
-    //     );
-    // }
-
-    // @action.bound
-    // reset() {
-    //     if (this.props.default) {
-    //         if (!this._status) {
-    //             this._status = true;
-    //             this.checkTimeline.play();
-    //             this.checkTimeline.restart();
-    //         }
-    //     }
-    //     else {
-    //         if (this._status) {
-    //             this._status = false;
-    //             this.uncheckTimeline.play();
-    //             this.uncheckTimeline.restart();
-    //         }
-    //     }
-
-    //     this.props.updateStatus(this.props.default);
-    // }
-
-    @action.bound
-    onClick = () => {
-        // if (this._status) {
-        //     this.uncheckTimeline.play();
-        //     this.uncheckTimeline.restart();
-        // }
-        // else {
-        //     this.checkTimeline.play();
-        //     this.checkTimeline.restart();
-
-        // }
-        // this._status = !this._status;
-        // this.props.updateStatus(this._status);
-
-    }
-
-    render() {
-        return (
-            <div className="checkboxfilter" onClick={this.onClick}>
-                <div className="outer">
-                    <div className="check-container">
-                        <svg viewBox="0 12 40 40">
-                            <path ref={this.checkRef} className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-18" />
-                        </svg>
-                    </div>
-                    <div className="check-box" />
-                </div>
-                <div className="checkbox-title">{this.props.title}</div>
-            </div>
-        );
-    }
-
-}
\ No newline at end of file
diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss
deleted file mode 100644
index 6105df570..000000000
--- a/src/client/views/search/CollectionFilters.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import '../global/globalCssVariables.module.scss';
-
-.collection-filters {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-
-    &.main {
-        width: 47%;
-        float: left;
-    }
-
-    &.optional {
-        width: 60%;
-        display: grid;
-        grid-template-columns: 50% 50%;
-        float: right;
-        opacity: 0;
-    }
-}
diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx
deleted file mode 100644
index 48d0b2ddb..000000000
--- a/src/client/views/search/CollectionFilters.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as React from 'react';
-import { observable, action } from 'mobx';
-import { CheckBox } from './CheckBox';
-import "./CollectionFilters.scss";
-import * as anime from 'animejs';
-
-interface CollectionFilterProps {
-    collectionStatus: boolean;
-    updateCollectionStatus(val: boolean): void;
-    collectionSelfStatus: boolean;
-    updateSelfCollectionStatus(val: boolean): void;
-    collectionParentStatus: boolean;
-    updateParentCollectionStatus(val: boolean): void;
-}
-
-export class CollectionFilters extends React.Component<CollectionFilterProps> {
-
-    static Instance: CollectionFilters;
-
-    @observable public _resetBoolean = false;
-    @observable public _resetCounter: number = 0;
-    
-    @observable private _collectionsSelected = this.props.collectionStatus;
-    @observable private _timeline: anime.AnimeTimelineInstance;
-    @observable private _ref: any;
-
-    constructor(props: CollectionFilterProps) {
-        super(props);
-        CollectionFilters.Instance = this;
-        this._ref = React.createRef();
-
-        this._timeline = anime.timeline({
-            loop: false,
-            autoplay: false,
-            direction: "reverse",
-        });
-    }
-
-    componentDidMount = () => {
-        this._timeline.add({
-            targets: this._ref.current,
-            easing: "easeInOutQuad",
-            duration: 500,
-            opacity: 1,
-        });
-
-        if (this._collectionsSelected) {
-            this._timeline.play();
-            this._timeline.reverse();
-        }
-    }
-
-    @action.bound
-    resetCollectionFilters() { this._resetBoolean = true; }
-
-    @action.bound
-    updateColStat(val: boolean) {
-        this.props.updateCollectionStatus(val);
-
-        if (this._collectionsSelected !== val) {
-            this._timeline.play();
-            this._timeline.reverse();
-        }
-
-        this._collectionsSelected = val;
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="collection-filters">
-                    <div className="collection-filters main">
-                        <CheckBox default={false} title={"limit to current collection"} parent={this} numCount={3} updateStatus={this.updateColStat} originalStatus={this.props.collectionStatus} />
-                    </div>
-                    <div className="collection-filters optional" ref={this._ref}>
-                        <CheckBox default={true} title={"Search in self"} parent={this} numCount={3} updateStatus={this.props.updateSelfCollectionStatus} originalStatus={this.props.collectionSelfStatus} />
-                        <CheckBox default={true} title={"Search in parent"} parent={this} numCount={3} updateStatus={this.props.updateParentCollectionStatus} originalStatus={this.props.collectionParentStatus} />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
deleted file mode 100644
index 05aa099f7..000000000
--- a/src/client/views/search/IconBar.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import '../global/globalCssVariables.module.scss';
-
-.icon-bar {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    height: auto;
-    width: 100%;
-    flex-direction: row-reverse;
-}
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
deleted file mode 100644
index 540c1b5e1..000000000
--- a/src/client/views/search/IconBar.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { action, observable } from 'mobx';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { DocumentType } from '../../documents/DocumentTypes';
-import './IconBar.scss';
-import { IconButton } from './IconButton';
-import './IconButton.scss';
-
-export interface IconBarProps {
-    setIcons: (icons: string[]) => void;
-}
-
-@observer
-export class IconBar extends React.Component<IconBarProps> {
-    public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.RTF, DocumentType.VID, DocumentType.WEB, DocumentType.MAP];
-
-    @observable private _icons: string[] = this._allIcons;
-
-    static Instance: IconBar;
-
-    @observable public _resetClicked: boolean = false;
-    @observable public _selectAllClicked: boolean = false;
-    @observable public _reset: number = 0;
-    @observable public _select: number = 0;
-
-    @action.bound
-    updateIcon(newArray: string[]) {
-        this._icons = newArray;
-        this.props.setIcons?.(this._icons);
-    }
-
-    @action.bound
-    getIcons(): string[] {
-        return this._icons;
-    }
-
-    constructor(props: any) {
-        super(props);
-        IconBar.Instance = this;
-    }
-
-    @action.bound
-    getList(): string[] {
-        return this.getIcons();
-    }
-
-    @action.bound
-    updateList(newList: string[]) {
-        this.updateIcon(newList);
-    }
-
-    @action.bound
-    resetSelf = () => {
-        this._resetClicked = true;
-        this.updateList([]);
-    };
-
-    @action.bound
-    selectAll = () => {
-        this._selectAllClicked = true;
-        this.updateList(this._allIcons);
-    };
-
-    render() {
-        return (
-            <div className="icon-bar">
-                {this._allIcons.map((type: string) => (
-                    <IconButton key={type.toString()} type={type} />
-                ))}
-            </div>
-        );
-    }
-}
diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss
deleted file mode 100644
index d2a2ea369..000000000
--- a/src/client/views/search/IconButton.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@import '../global/globalCssVariables.module.scss';
-
-.type-outer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 30px;
-
-    .type-icon {
-        height: 30px;
-        width: 30px;
-        color: $white;
-        // background-color: rgb(194, 194, 197);
-        background-color: gray;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        -webkit-transition: all 0.2s ease-in-out;
-        -moz-transition: all 0.2s ease-in-out;
-        -o-transition: all 0.2s ease-in-out;
-        transition: all 0.2s ease-in-out;
-        font-size: 2em;
-
-        .fontawesome-icon {
-            height: 15px;
-            width: 15px;
-        }
-    }
-
-    .filter-description {
-        text-transform: capitalize;
-        font-size: 10;
-        text-align: center;
-        height: 15px;
-        margin-top: 5px;
-        opacity: 1;
-        -webkit-transition: all 0.2s ease-in-out;
-        -moz-transition: all 0.2s ease-in-out;
-        -o-transition: all 0.2s ease-in-out;
-        transition: all 0.2s ease-in-out;
-    }
-
-    .type-icon:hover {
-        transform: scale(1.1);
-        background-color: $medium-blue;
-        opacity: 1;
-
-        + .filter-description {
-            opacity: 1;
-        }
-    }
-}
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
deleted file mode 100644
index 20084b64d..000000000
--- a/src/client/views/search/IconButton.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as _ from 'lodash';
-import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { DocumentType } from '../../documents/DocumentTypes';
-import '../global/globalCssVariables.module.scss';
-import { IconBar } from './IconBar';
-import './IconButton.scss';
-import './SearchBox.scss';
-
-interface iconButtonProps {
-    type: string;
-}
-
-@observer
-export class IconButton extends React.Component<iconButtonProps> {
-    @observable private _isSelected: boolean = IconBar.Instance.getIcons().indexOf(this.props.type) !== -1;
-    @observable private _hover = false;
-    private _resetReaction?: IReactionDisposer;
-    private _selectAllReaction?: IReactionDisposer;
-
-    static Instance: IconButton;
-    constructor(props: iconButtonProps) {
-        super(props);
-        IconButton.Instance = this;
-    }
-
-    componentDidMount = () => {
-        this._resetReaction = reaction(
-            () => IconBar.Instance._resetClicked,
-            action(() => {
-                if (IconBar.Instance._resetClicked) {
-                    this._isSelected = false;
-                    IconBar.Instance._reset++;
-                    if (IconBar.Instance._reset === 9) {
-                        IconBar.Instance._reset = 0;
-                        IconBar.Instance._resetClicked = false;
-                    }
-                }
-            })
-        );
-
-        this._selectAllReaction = reaction(
-            () => IconBar.Instance._selectAllClicked,
-            action(() => {
-                if (IconBar.Instance._selectAllClicked) {
-                    this._isSelected = true;
-                    IconBar.Instance._select++;
-                    if (IconBar.Instance._select === 9) {
-                        IconBar.Instance._select = 0;
-                        IconBar.Instance._selectAllClicked = false;
-                    }
-                }
-            })
-        );
-    };
-
-    @action.bound
-    getIcon() {
-        switch (this.props.type) {
-            case DocumentType.NONE:  return 'ban';
-            case DocumentType.AUDIO: return 'music';
-            case DocumentType.COL:   return 'object-group';
-            case DocumentType.IMG:   return 'image';
-            case DocumentType.LINK:  return 'link';
-            case DocumentType.PDF:   return 'file-pdf';
-            case DocumentType.RTF:   return 'sticky-note';
-            case DocumentType.VID:   return 'video';
-            case DocumentType.WEB:   return 'globe-asia';
-            case DocumentType.MAP:   return 'map-marker-alt';
-            default:                 return 'caret-down';
-        } // prettier-ignore
-    }
-
-    @action.bound
-    onClick = () => {
-        const newList: string[] = IconBar.Instance.getIcons();
-
-        if (!this._isSelected) {
-            this._isSelected = true;
-            newList.push(this.props.type);
-        } else {
-            this._isSelected = false;
-            _.pull(newList, this.props.type);
-        }
-
-        IconBar.Instance.updateIcon(newList);
-    };
-
-    selected = {
-        opacity: 1,
-        backgroundColor: '#121721',
-        //backgroundColor: "rgb(128, 128, 128)"
-    };
-
-    notSelected = {
-        opacity: 0.2,
-        backgroundColor: '#121721',
-    };
-
-    hoverStyle = {
-        opacity: 1,
-        backgroundColor: 'rgb(128, 128, 128)',
-        //backgroundColor: "rgb(178, 206, 248)" //$medium-blue
-    };
-
-    render() {
-        return (
-            <div className="type-outer" id={this.props.type + '-filter'} onMouseEnter={() => (this._hover = true)} onMouseLeave={() => (this._hover = false)} onClick={this.onClick}>
-                <div className="type-icon" id={this.props.type + '-icon'} style={this._hover ? this.hoverStyle : this._isSelected ? this.selected : this.notSelected}>
-                    <FontAwesomeIcon className="fontawesome-icon" icon={this.getIcon()} />
-                </div>
-                {/* <div className="filter-description">{this.props.type}</div> */}
-            </div>
-        );
-    }
-}
diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss
deleted file mode 100644
index 917635c0b..000000000
--- a/src/client/views/search/NaviconButton.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@import '../global/globalCssVariables.module.scss';
-
-$height-icon: 15px;
-$width-line: 30px;
-$height-line: 4px;
-
-$transition-time: 0.4s;
-$rotation: 45deg;
-$translateY: calc($height-icon / 2);
-$translateX: 0;
-
-#hamburger-icon {
-    width: $width-line;
-    height: $height-icon;
-    position: relative;
-    display: block;
-    transition: all $transition-time;
-    -webkit-transition: all $transition-time;
-    -moz-transition: all $transition-time;
-
-    .line {
-        display: block;
-        background: $medium-gray;
-        width: $width-line;
-        height: $height-line;
-        position: absolute;
-        left: 0;
-        border-radius: calc($height-line / 2);
-        transition: all $transition-time;
-        -webkit-transition: all $transition-time;
-        -moz-transition: all $transition-time;
-
-        &.line-1 {
-            top: 0;
-        }
-
-        &.line-2 {
-            top: 50%;
-        }
-
-        &.line-3 {
-            top: 100%;
-        }
-    }
-}
-
-.filter-header.active {
-    .line-1 {
-        transform: translateY($translateY) translateX($translateX) rotate($rotation);
-        -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
-        -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
-    }
-
-    .line-2 {
-        opacity: 0;
-    }
-
-    .line-3 {
-        transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-        -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-        -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-    }
-}
-
-.filter-header:hover #hamburger-icon {
-    transform: scale(1.1);
-    -webkit-transform: scale(1.1);
-    -moz-transform: scale(1.1);
-}
diff --git a/src/client/views/search/NaviconButton.tsx b/src/client/views/search/NaviconButton.tsx
deleted file mode 100644
index 0fa4a0fca..000000000
--- a/src/client/views/search/NaviconButton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import "./NaviconButton.scss";
-import * as $ from 'jquery';
-import { observable } from 'mobx';
-
-export interface NaviconProps {
-    onClick(): void;
-}
-
-export class NaviconButton extends React.Component<NaviconProps> {
-
-    @observable private _ref: React.RefObject<HTMLAnchorElement> = React.createRef();
-
-    componentDidMount = () => {
-        const that = this;
-        if (this._ref.current) {
-            this._ref.current.addEventListener("click", function (e) {
-                e.preventDefault();
-                if (that._ref.current) {
-                    that._ref.current.classList.toggle('active');
-                    return false;
-                }
-            });
-        }
-    }
-
-    render() {
-        return (
-            <a id="hamburger-icon" href="#" ref={this._ref} title="Menu">
-                <span className="line line-1"></span>
-                <span className="line line-2"></span>
-                <span className="line line-3"></span>
-            </a>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index a3c4bd2ed..09e459f7d 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -1,5 +1,4 @@
 @import '../global/globalCssVariables.module.scss';
-@import './NaviconButton.scss';
 
 .searchBox-container {
     width: 100%;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 3172ff9c0..ccfccb771 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from '@mui/material';
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, DocListCastAsync, Field, Opt } from '../../../fields/Doc';
@@ -61,6 +61,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
      */
     constructor(props: any) {
         super(props);
+        makeObservable(this);
         SearchBox.Instance = this;
     }
 
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
deleted file mode 100644
index 9e27db2bc..000000000
--- a/src/client/views/search/ToggleBar.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../global/globalCssVariables.module.scss';
-
-.toggle-title {
-    display: flex;
-    align-items: center;
-    color: $white;
-    text-transform: uppercase;
-    flex-direction: row;
-    justify-content: space-around;
-    padding: 5px;
-
-    .toggle-option {
-        width: 50%;
-        text-align: center;
-        -webkit-transition: all 0.2s ease-in-out;
-        -moz-transition: all 0.2s ease-in-out;
-        -o-transition: all 0.2s ease-in-out;
-        transition: all 0.2s ease-in-out;
-        color: gray;
-        font-size: 13;
-    }
-}
-
-.toggle-bar {
-    // height: 50px;
-    height: 30px;
-    width: 100px;
-    background-color: $medium-gray;
-    border-radius: 10px;
-    padding: 5px;
-    display: flex;
-    align-items: center;
-
-    .toggle-button {
-        // width: 275px;
-        width: 40px;
-        height: 100%;
-        border-radius: 10px;
-        background-color: $white;
-    }
-}
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
deleted file mode 100644
index 466822eba..000000000
--- a/src/client/views/search/ToggleBar.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import { observable, action, runInAction, computed } from 'mobx';
-import "./SearchBox.scss";
-import "./ToggleBar.scss";
-import * as anime from 'animejs';
-
-export interface ToggleBarProps {
-    originalStatus: boolean;
-    optionOne: string;
-    optionTwo: string;
-    handleChange(): void;
-    getStatus(): boolean;
-}
-
-@observer
-export class ToggleBar extends React.Component<ToggleBarProps>{
-    static Instance: ToggleBar;
-
-    @observable private _forwardTimeline: anime.AnimeTimelineInstance;
-    @observable private _toggleButton: React.RefObject<HTMLDivElement>;
-    @observable private _originalStatus: boolean = this.props.originalStatus;
-
-    constructor(props: ToggleBarProps) {
-        super(props);
-        ToggleBar.Instance = this;
-        this._toggleButton = React.createRef();
-        this._forwardTimeline = anime.timeline({
-            loop: false,
-            autoplay: false,
-            direction: "reverse",
-        });
-    }
-
-    componentDidMount = () => {
-        const totalWidth = 265;
-
-        if (this._originalStatus) {
-            this._forwardTimeline.add({
-                targets: this._toggleButton.current,
-                translateX: totalWidth,
-                easing: "easeInOutQuad",
-                duration: 500
-            });
-        }
-        else {
-            this._forwardTimeline.add({
-                targets: this._toggleButton.current,
-                translateX: -totalWidth,
-                easing: "easeInOutQuad",
-                duration: 500
-            });
-        }
-    }
-
-    @action.bound
-    onclick() {
-        this._forwardTimeline.play();
-        this._forwardTimeline.reverse();
-        this.props.handleChange();
-    }
-
-    @action.bound
-    public resetToggle = () => {
-        if (!this.props.getStatus()) {
-            this._forwardTimeline.play();
-            this._forwardTimeline.reverse();
-            this.props.handleChange();
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="toggle-title">
-                    <div className="toggle-option" style={{ opacity: (this.props.getStatus() ? 1 : .4) }}>{this.props.optionOne}</div>
-                    <div className="toggle-option" style={{ opacity: (this.props.getStatus() ? .4 : 1) }}>{this.props.optionTwo}</div>
-                </div>
-                <div className="toggle-bar" id="toggle-bar" onClick={this.onclick} style={{ flexDirection: (this._originalStatus ? "row" : "row-reverse") }}>
-                    <div className="toggle-button" id="toggle-button" ref={this._toggleButton} />
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file