From aea40be34e84bfb3d18f65f3f5525b157bb5c8f2 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Tue, 31 May 2022 02:26:04 +0200
Subject: [PATCH] fix methods namings

---
 packages/app/src/layout/header/index.jsx      | 36 ++++++++++---------
 packages/app/src/layout/sidebar/index.jsx     | 29 +++++++--------
 packages/app/src/pages/main/index.jsx         |  4 +--
 .../app/src/pages/streams/viewer/index.jsx    |  6 ++--
 4 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/packages/app/src/layout/header/index.jsx b/packages/app/src/layout/header/index.jsx
index 760c4373..a28178bd 100644
--- a/packages/app/src/layout/header/index.jsx
+++ b/packages/app/src/layout/header/index.jsx
@@ -7,25 +7,29 @@ import classnames from "classnames"
 import "./index.less"
 
 export default class Header extends React.Component {
-	constructor(props) {
-		super(props)
+	controller = window.app["HeaderController"] = {
+		toggleVisibility: (to) => {
+			if (window.isMobile) {
+				to = true
+			}
 
-		this.state = {
-			visible: true,
-		}
+			this.setState({ visible: to ?? !this.state.visible })
+		},
+		isVisible: () => this.state.visible,
+	}
 
-		this.HeaderController = {
-			toogleVisible: (to) => {
-				if (window.isMobile) {
-					to = true
-				}
+	state = {
+		visible: false, // set by default to create an animation
+	}
 
-				this.setState({ visible: to ?? !this.state.visible })
-			},
-			isVisible: () => this.state.visible,
-		}
-
-		window.app["HeaderController"] = this.HeaderController
+	componentDidMount = async () => {
+		// wait to app finish of load
+		app.eventBus.on(`app.initialization.finish`, () => {
+			// create an fade in animation
+			setTimeout(() => {
+				this.controller.toggleVisibility(true)
+			}, 400)
+		})
 	}
 
 	render() {
diff --git a/packages/app/src/layout/sidebar/index.jsx b/packages/app/src/layout/sidebar/index.jsx
index abc2c988..f2d10565 100644
--- a/packages/app/src/layout/sidebar/index.jsx
+++ b/packages/app/src/layout/sidebar/index.jsx
@@ -23,6 +23,14 @@ export default class Sidebar extends React.Component {
 	constructor(props) {
 		super(props)
 
+		this.controller = window.app["SidebarController"] = {
+			toggleVisibility: this.toggleVisibility,
+			toggleEdit: this.toggleEditMode,
+			isVisible: () => this.state.visible,
+			isEditMode: () => this.state.visible,
+			isCollapsed: () => this.state.collapsed,
+		}
+
 		this.state = {
 			editMode: false,
 			visible: false,
@@ -36,16 +44,6 @@ export default class Sidebar extends React.Component {
 			},
 		}
 
-		this.SidebarController = {
-			toggleVisibility: this.toggleVisibility,
-			toggleEdit: this.toggleEditMode,
-			isVisible: () => this.state.visible,
-			isEditMode: () => this.state.visible,
-			isCollapsed: () => this.state.collapsed,
-		}
-
-		window.app["SidebarController"] = this.SidebarController
-
 		window.app.eventBus.on("edit_sidebar", () => this.toggleEditMode())
 
 		window.app.eventBus.on("settingChanged.sidebar_collapse", (value) => {
@@ -58,10 +56,13 @@ export default class Sidebar extends React.Component {
 	componentDidMount = async () => {
 		await this.loadSidebarItems()
 
-		// create a cool debounced animation
-		setTimeout(() => {
-			this.toggleVisibility(true)
-		}, 400)
+		// wait to app finish of load
+		app.eventBus.on(`app.initialization.finish`, () => {
+			// create an fade in animation
+			setTimeout(() => {
+				this.controller.toggleVisibility(true)
+			}, 400)
+		})
 	}
 
 	getStoragedKeys = () => {
diff --git a/packages/app/src/pages/main/index.jsx b/packages/app/src/pages/main/index.jsx
index 62e4a297..0588e877 100644
--- a/packages/app/src/pages/main/index.jsx
+++ b/packages/app/src/pages/main/index.jsx
@@ -11,13 +11,13 @@ import "./index.less"
 export default class Main extends React.Component {
 	componentDidMount = async () => {
 		if (!window.isMobile && window.app?.HeaderController?.isVisible()) {
-			window.app.HeaderController.toogleVisible(false)
+			window.app.HeaderController.toggleVisibility(false)
 		}
 	}
 
 	componentWillUnmount() {
 		if (!window.isMobile && !window.app?.HeaderController?.isVisible()) {
-			window.app.HeaderController.toogleVisible(true)
+			window.app.HeaderController.toggleVisibility(true)
 		}
 	}
 
diff --git a/packages/app/src/pages/streams/viewer/index.jsx b/packages/app/src/pages/streams/viewer/index.jsx
index 3e5f8835..c258c1b6 100644
--- a/packages/app/src/pages/streams/viewer/index.jsx
+++ b/packages/app/src/pages/streams/viewer/index.jsx
@@ -62,7 +62,7 @@ export default class StreamViewer extends React.Component {
         app.ThemeController.applyVariant("dark")
         app.eventBus.emit("toogleCompactMode", true)
         app.SidebarController.tooggleVisibility(false)
-        app.HeaderController.toogleVisible(false)
+        app.HeaderController.toggleVisibility(false)
 
         // fetch user info in the background
         this.gatherUserInfo()
@@ -81,8 +81,8 @@ export default class StreamViewer extends React.Component {
         app.ThemeController.applyVariant(app.settings.get("themeVariant"))
         app.eventBus.emit("toogleCompactMode", false)
         app.SidebarController.toggleVisibility(true)
-        app.HeaderController.toogleVisible(true)
-        app.HeaderController.toogleVisible(true)
+        app.HeaderController.toggleVisibility(true)
+        app.HeaderController.toggleVisibility(true)
 
         if (this.timerCounterInterval) {
             this.timerCounterInterval = clearInterval(this.timerCounterInterval)