From 3f31b50ca92166bc40298df154d0fa20fb0259fc Mon Sep 17 00:00:00 2001
From: wooferzfg <spapushin@gmail.com>
Date: Sun, 23 Feb 2020 12:02:25 -0600
Subject: [PATCH] Extract shared logic for auto refreshing

---
 src/layout/AutoRefreshLayout.tsx     | 34 +++++++++--------------
 src/layout/DragAutoRefreshLayout.tsx | 28 ++++++++-----------
 src/ui/SideBarContent.tsx            | 41 ++++++++++++++--------------
 src/util/AutoRefresh.tsx             | 38 ++++++++++++++++++++++++++
 4 files changed, 83 insertions(+), 58 deletions(-)
 create mode 100644 src/util/AutoRefresh.tsx

diff --git a/src/layout/AutoRefreshLayout.tsx b/src/layout/AutoRefreshLayout.tsx
index 52e62a5..118bae0 100644
--- a/src/layout/AutoRefreshLayout.tsx
+++ b/src/layout/AutoRefreshLayout.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { LayoutStateJson } from "../livesplit-core";
+import AutoRefresh from "../util/AutoRefresh";
 import Layout from "./Layout";
 
 export interface Props {
@@ -14,8 +15,6 @@ export interface State {
 }
 
 export default class AutoRefreshLayout extends React.Component<Props, State> {
-    private reqId: any;
-
     constructor(props: Props) {
         super(props);
 
@@ -24,29 +23,22 @@ export default class AutoRefreshLayout extends React.Component<Props, State> {
         };
     }
 
-    public componentWillMount() {
-        let tick = () => {
-            this.setState({
-                layoutState: this.props.getState(),
-            });
-            this.reqId = requestAnimationFrame(tick)
-        }
-
-        this.reqId = requestAnimationFrame(tick)
-    }
-
-    public componentWillUnmount() {
-        cancelAnimationFrame(this.reqId);
+    public refreshLayout() {
+        this.setState({
+            layoutState: this.props.getState(),
+        });
     }
 
     public render() {
         return (
-            <Layout
-                state={this.state.layoutState}
-                allowResize={this.props.allowResize}
-                width={this.props.width}
-                onResize={this.props.onResize}
-            />
+            <AutoRefresh update={() => this.refreshLayout()} >
+                <Layout
+                    state={this.state.layoutState}
+                    allowResize={this.props.allowResize}
+                    width={this.props.width}
+                    onResize={this.props.onResize}
+                />
+            </AutoRefresh>
         );
     }
 }
diff --git a/src/layout/DragAutoRefreshLayout.tsx b/src/layout/DragAutoRefreshLayout.tsx
index 1640c45..4002ee3 100644
--- a/src/layout/DragAutoRefreshLayout.tsx
+++ b/src/layout/DragAutoRefreshLayout.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { LayoutStateJson } from "../livesplit-core";
+import AutoRefresh from "../util/AutoRefresh";
 import { colorToCss, gradientToCss } from "../util/ColorUtil";
 import { Option } from "../util/OptionUtil";
 import Component from "./Component";
@@ -21,8 +22,6 @@ export interface State {
 }
 
 export default class AutoRefreshLayout extends React.Component<Props, State> {
-    private reqId: any;
-
     constructor(props: Props) {
         super(props);
 
@@ -33,26 +32,17 @@ export default class AutoRefreshLayout extends React.Component<Props, State> {
         };
     }
 
-    public componentWillMount() {
-        let tick = () => {
-            this.setState({
-                layoutState: this.props.getState(),
-            });
-            this.reqId = requestAnimationFrame(tick)
-        }
-
-        this.reqId = requestAnimationFrame(tick)
-    }
-
-    public componentWillUnmount() {
-        cancelAnimationFrame(this.reqId);
+    public refreshLayout() {
+        this.setState({
+            layoutState: this.props.getState(),
+        });
     }
 
     public render() {
         const layoutState = this.state.layoutState;
         const counts = new Map<string, number>();
 
-        return (
+        const dragLayout = (
             <div
                 className="layout"
                 style={{
@@ -128,6 +118,12 @@ export default class AutoRefreshLayout extends React.Component<Props, State> {
                 }
             </div>
         );
+
+        return (
+            <AutoRefresh update={() => this.refreshLayout()}>
+                {dragLayout}
+            </AutoRefresh>
+        );
     }
 }
 
diff --git a/src/ui/SideBarContent.tsx b/src/ui/SideBarContent.tsx
index f912b46..ce29306 100644
--- a/src/ui/SideBarContent.tsx
+++ b/src/ui/SideBarContent.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { SharedTimerRef, TimingMethod } from "../livesplit-core";
+import AutoRefresh from "../util/AutoRefresh";
 import { Option } from "../util/OptionUtil";
 import { MenuKind } from "./LiveSplit";
 
@@ -47,8 +48,6 @@ export interface State {
 }
 
 export class SideBarContent extends React.Component<Props, State> {
-    private reqId: any;
-
     constructor(props: Props) {
         super(props);
 
@@ -58,23 +57,12 @@ export class SideBarContent extends React.Component<Props, State> {
         };
     }
 
-    public componentWillMount() {
-        let tick = () => {
-            this.update();
-            this.reqId = requestAnimationFrame(tick)
-        }
-
-        this.reqId = requestAnimationFrame(tick)
-    }
-
-    public componentWillUnmount() {
-        cancelAnimationFrame(this.reqId);
-    }
-
     public render() {
+        let sidebarContent;
+
         switch (this.props.menu) {
             case MenuKind.Splits: {
-                return (
+                sidebarContent = (
                     <div className="sidebar-buttons">
                         <h2>Splits</h2>
                         <hr />
@@ -105,9 +93,10 @@ export class SideBarContent extends React.Component<Props, State> {
                         </button>
                     </div>
                 );
+                break;
             }
             case MenuKind.RunEditor: {
-                return (
+                sidebarContent = (
                     <div className="sidebar-buttons">
                         <h2>Splits Editor</h2>
                         <hr />
@@ -127,9 +116,10 @@ export class SideBarContent extends React.Component<Props, State> {
                         </div>
                     </div>
                 );
+                break;
             }
             case MenuKind.Layout: {
-                return (
+                sidebarContent = (
                     <div className="sidebar-buttons">
                         <h2>Layout</h2>
                         <hr />
@@ -154,9 +144,10 @@ export class SideBarContent extends React.Component<Props, State> {
                         </button>
                     </div>
                 );
+                break;
             }
             case MenuKind.LayoutEditor: {
-                return (
+                sidebarContent = (
                     <div className="sidebar-buttons">
                         <h2>Layout Editor</h2>
                         <hr />
@@ -176,9 +167,10 @@ export class SideBarContent extends React.Component<Props, State> {
                         </div>
                     </div>
                 );
+                break;
             }
             case MenuKind.SettingsEditor: {
-                return (
+                sidebarContent = (
                     <div className="sidebar-buttons">
                         <h2>Settings</h2>
                         <hr />
@@ -198,9 +190,10 @@ export class SideBarContent extends React.Component<Props, State> {
                         </div>
                     </div>
                 );
+                break;
             }
             case MenuKind.Timer: {
-                return (
+                sidebarContent = (
                     <div className="sidebar-buttons">
                         <div className="livesplit-title">
                             <span className="livesplit-icon">
@@ -285,8 +278,14 @@ export class SideBarContent extends React.Component<Props, State> {
                         </button>
                     </div >
                 );
+                break;
             }
         }
+        return (
+            <AutoRefresh update={() => this.update()}>
+                {sidebarContent}
+            </AutoRefresh>
+        );
     }
 
     private update() {
diff --git a/src/util/AutoRefresh.tsx b/src/util/AutoRefresh.tsx
new file mode 100644
index 0000000..6117979
--- /dev/null
+++ b/src/util/AutoRefresh.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+
+export interface Props {
+    update(): void,
+}
+
+export default class AutoRefresh extends React.Component<Props> {
+    private reqId: number | null;
+
+    constructor(props: Props) {
+        super(props);
+
+        this.reqId = null;
+    }
+
+    public componentWillMount() {
+        this.requestFrame();
+    }
+
+    public componentWillUnmount() {
+        if (this.reqId) {
+            cancelAnimationFrame(this.reqId);
+        }
+    }
+
+    public render() {
+        return this.props.children;
+    }
+
+    private requestFrame() {
+        this.reqId = requestAnimationFrame(() => this.tick());
+    }
+
+    private tick() {
+        this.props.update();
+        this.requestFrame();
+    }
+}