Finished refactoring augmentations page UI to use react

src/Augmentation/ui/InstalledAugmentationsAndSourceFiles.tsx

@@ -7,18 +7,22 @@
  */
 import * as React from "react";
 
+import { InstalledAugmentations } from "./InstalledAugmentations";
+import { ListConfiguration } from "./ListConfiguration";
+import { OwnedSourceFiles } from "./OwnedSourceFiles";
+
 import { Settings } from "../../Settings/Settings";
 import { OwnedAugmentationsOrderSetting } from "../../Settings/SettingEnums";
 
-type IProps = {
-
-}
+type IProps = {}
 
 type IState = {
     rerenderFlag: boolean;
 }
 
 export class InstalledAugmentationsAndSourceFiles extends React.Component<IProps, IState> {
+    listRef: React.RefObject<HTMLUListElement>;
+
     constructor(props: IProps) {
         super(props);
 
@@ -26,8 +30,44 @@ export class InstalledAugmentationsAndSourceFiles extends React.Component<IProps
             rerenderFlag: false,
         }
 
+        this.collapseAllHeaders = this.collapseAllHeaders.bind(this);
+        this.expandAllHeaders = this.expandAllHeaders.bind(this);
         this.sortByAcquirementTime = this.sortByAcquirementTime.bind(this);
         this.sortInOrder = this.sortInOrder.bind(this);
+
+        this.listRef = React.createRef();
+    }
+
+    collapseAllHeaders() {
+        const ul = this.listRef.current;
+        if (ul == null) { return; }
+        const tickers = ul.getElementsByClassName("accordion-header");
+        for (let i = 0; i < tickers.length; ++i) {
+            const ticker = tickers[i];
+            if (!(ticker instanceof HTMLButtonElement)) {
+                continue;
+            }
+
+            if (ticker.classList.contains("active")) {
+                ticker.click();
+            }
+        }
+    }
+
+    expandAllHeaders() {
+        const ul = this.listRef.current;
+        if (ul == null) { return; }
+        const tickers = ul.getElementsByClassName("accordion-header");
+        for (let i = 0; i < tickers.length; ++i) {
+            const ticker = tickers[i];
+            if (!(ticker instanceof HTMLButtonElement)) {
+                continue;
+            }
+
+            if (!ticker.classList.contains("active")) {
+                ticker.click();
+            }
+        }
     }
 
     rerender() {
@@ -50,7 +90,18 @@ export class InstalledAugmentationsAndSourceFiles extends React.Component<IProps
 
     render() {
         return (
-
+            <>
+            <ListConfiguration
+                collapseAllButtonsFn={this.collapseAllHeaders}
+                expandAllButtonsFn={this.expandAllHeaders}
+                sortByAcquirementTimeFn={this.sortByAcquirementTime}
+                sortInOrderFn={this.sortInOrder}
+            />
+            <ul className="augmentations-list" ref={this.listRef}>
+                <OwnedSourceFiles />
+                <InstalledAugmentations />
+            </ul>
+            </>
         )
     }
 }