From 0fbb4879a921f7ac9695c87a1f1171d914531aa8 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Mon, 9 Sep 2024 23:35:18 -0400
Subject: [PATCH] Set button appearance based on state

Avoid manually editing the DOM elements. Let the Render function update the appearance based on state.
---
 shared/naturalcrit/splitPane/splitPane.jsx | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx
index 67f60db6e..665fe416b 100644
--- a/shared/naturalcrit/splitPane/splitPane.jsx
+++ b/shared/naturalcrit/splitPane/splitPane.jsx
@@ -107,19 +107,9 @@ const SplitPane = createClass({
 		});
 	},
 
-	liveScrollToggle : function(e) {
-		const flipLiveScroll = !this.state.liveScroll;
-		const toggle = e.target;
-		const toggleDiv = toggle.parentElement;
-		if(flipLiveScroll) {
-			toggle.className = 'fas fa-lock';
-			toggleDiv.className = 'arrow lock';
-		} else {
-			toggle.className = 'fas fa-unlock';
-			toggleDiv.className = 'arrow unlock';
-		}
-		window.localStorage.setItem('liveScroll', String(flipLiveScroll));
-		this.setState({ liveScroll: flipLiveScroll });
+	liveScrollToggle : function() {
+		window.localStorage.setItem('liveScroll', String(!this.state.liveScroll));
+		this.setState({ liveScroll: !this.state.liveScroll });
 	},
 	/*
 	unFocus : function() {
@@ -152,10 +142,10 @@ const SplitPane = createClass({
 					onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} >
 					<i className='fas fa-arrow-right' />
 				</div>
-				<div id='scrollToggleDiv' className={`arrow lock`}
+				<div id='scrollToggleDiv' className={this.state.liveScroll ? 'arrow lock' : 'arrow unlock'}
 					style={{ left: this.state.currentDividerPos-4 }} 
 					onClick={this.liveScrollToggle} >
-					<i id='scrollToggle' className='fas fa-lock' />
+					<i id='scrollToggle' className={this.state.liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
 				</div>
 			</>;
 		}