From 8e8113733c40a211808d01caf10a85b461b117ea Mon Sep 17 00:00:00 2001
From: Eliaz Bobadilla <eliaz.bobadilladev@gmail.com>
Date: Sun, 29 May 2022 13:11:19 -0500
Subject: [PATCH 1/3] :recycle: Move to Functional Component

---
 src/components/audio-analyser.tsx | 90 +++++++++++++------------------
 1 file changed, 38 insertions(+), 52 deletions(-)

diff --git a/src/components/audio-analyser.tsx b/src/components/audio-analyser.tsx
index 7cb0e22..ad313ce 100644
--- a/src/components/audio-analyser.tsx
+++ b/src/components/audio-analyser.tsx
@@ -1,4 +1,4 @@
-import {Component} from 'preact';
+import {useEffect, useState} from 'preact/hooks';
 import {AudioVisualiser} from './audio-visualiser';
 
 export interface AudioAnalyserProps {
@@ -7,55 +7,41 @@ export interface AudioAnalyserProps {
 	width?: number;
 	height?: number;
 }
-
-export interface AudioAnalyserState {
-	audioData: Uint8Array;
-}
-
-export class AudioAnalyser extends Component<AudioAnalyserProps, AudioAnalyserState> {
-	public audioContext?: AudioContext;
-	public analyser?: AnalyserNode;
-	public dataArray?: Uint8Array;
-	public source?: MediaStreamAudioSourceNode;
-	public rafId?: number;
-
-	constructor(props: AudioAnalyserProps) {
-		super(props);
-
-		this.state = {audioData: new Uint8Array(0)};
-
-		this.tick = this.tick.bind(this);
-	}
-
-	componentDidMount() {
-		this.audioContext = new AudioContext();
-		this.analyser = this.audioContext.createAnalyser();
-		this.dataArray = new Uint8Array(this.analyser.frequencyBinCount);
-		this.source = this.audioContext.createMediaStreamSource(this.props.audio);
-		this.source.connect(this.analyser);
-		this.rafId = requestAnimationFrame(this.tick);
-	}
-
-	tick() {
-		this.analyser!.getByteTimeDomainData(this.dataArray!);
-		this.setState({audioData: this.dataArray});
-		this.rafId = requestAnimationFrame(this.tick);
-	}
-
-	componentWillUnmount() {
-		cancelAnimationFrame(this.rafId!);
-		this.analyser!.disconnect();
-		this.source!.disconnect();
-	}
-
-	render() {
-		return (
-			<AudioVisualiser
-				width={this.props.width}
-				height={this.props.height}
-				classes={this.props.classses}
-				audioData={this.state.audioData}
-			/>
-		);
-	}
+export function AudioAnalysera({
+	width,
+	height,
+	classses,
+	audio,
+}: AudioAnalyserProps) {
+	const [audioData, setAudioData] = useState(new Uint8Array(0));
+
+	useEffect(() => {
+		const audioContext = new AudioContext();
+		const analyser = audioContext.createAnalyser();
+		const dataArray = new Uint8Array(analyser.frequencyBinCount);
+		const source = audioContext.createMediaStreamSource(audio);
+
+		source.connect(analyser);
+
+		let rafID = requestAnimationFrame(function tick() {
+			analyser.getByteTimeDomainData(dataArray);
+			setAudioData(dataArray);
+			rafID = requestAnimationFrame(tick);
+		});
+
+		return () => {
+			cancelAnimationFrame(rafID);
+			analyser.disconnect();
+			source.disconnect();
+		};
+	}, [audioData]);
+
+	return (
+		<AudioVisualiser
+			width={width}
+			height={height}
+			classes={classses}
+			audioData={audioData}
+		/>
+	);
 }

From f62a0f707782e6e76ba7ebf8bbcf2c9469f89a48 Mon Sep 17 00:00:00 2001
From: Eliaz Bobadilla <eliaz.bobadilladev@gmail.com>
Date: Sun, 29 May 2022 13:11:56 -0500
Subject: [PATCH 2/3] :bug: Typo

---
 src/components/audio-analyser.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/audio-analyser.tsx b/src/components/audio-analyser.tsx
index ad313ce..679255e 100644
--- a/src/components/audio-analyser.tsx
+++ b/src/components/audio-analyser.tsx
@@ -7,7 +7,7 @@ export interface AudioAnalyserProps {
 	width?: number;
 	height?: number;
 }
-export function AudioAnalysera({
+export function AudioAnalyser({
 	width,
 	height,
 	classses,

From ccc6a7b92c93ff4f91df84cac315f8ef34bf80be Mon Sep 17 00:00:00 2001
From: Eliaz Bobadilla <eliaz.bobadilladev@gmail.com>
Date: Sun, 29 May 2022 13:13:13 -0500
Subject: [PATCH 3/3] :rotating_light: Fix Lints

---
 src/components/audio-analyser.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/audio-analyser.tsx b/src/components/audio-analyser.tsx
index 679255e..c9d9f7e 100644
--- a/src/components/audio-analyser.tsx
+++ b/src/components/audio-analyser.tsx
@@ -23,14 +23,14 @@ export function AudioAnalyser({
 
 		source.connect(analyser);
 
-		let rafID = requestAnimationFrame(function tick() {
+		let rafId = requestAnimationFrame(function tick() {
 			analyser.getByteTimeDomainData(dataArray);
 			setAudioData(dataArray);
-			rafID = requestAnimationFrame(tick);
+			rafId = requestAnimationFrame(tick);
 		});
 
 		return () => {
-			cancelAnimationFrame(rafID);
+			cancelAnimationFrame(rafId);
 			analyser.disconnect();
 			source.disconnect();
 		};