From 3207d0ee3767d90ee12f4fc0f0c48bf95817524b Mon Sep 17 00:00:00 2001
From: Matthew Grove <me@mgrove.uk>
Date: Tue, 26 Oct 2021 16:30:21 +0100
Subject: [PATCH] Refactor component to be functional

---
 src/SettingsContent.js | 92 +++++++++++++++++++++---------------------
 1 file changed, 45 insertions(+), 47 deletions(-)

diff --git a/src/SettingsContent.js b/src/SettingsContent.js
index 9fe143e..ac62080 100644
--- a/src/SettingsContent.js
+++ b/src/SettingsContent.js
@@ -1,55 +1,53 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 import { CheckRounded as CheckRoundedIcon } from "@material-ui/icons";
 import Button from "./Button";
 
 import "./css/SettingsContent.css";
 
-export default class SettingsContent extends Component {
-	render() {
-		return (
-			<>
-				<h1 className="settings-header">Settings</h1>
-				<div className="settings-options-container">
-					<label>
-						<Checkbox
-							checked={this.props.soundInput}
-							onChange={this.props.handleSoundInputChange}
-							inputProps={{ 'aria-label': 'checkbox' }}
-						/>
-						<span>Sound</span>
-					</label>
-					<label>
-						<Checkbox
-							checked={this.props.coloredEdgesInput}
-							onChange={this.props.handleColoredEdgesInputChange}
-							inputProps={{ 'aria-label': 'checkbox' }}
-						/>
-						<span>Coloured edges</span>
-					</label>
-				</div>
+export default function SettingsContent (props) {
+	return (
+		<>
+			<h1 className="settings-header">Settings</h1>
+			<div className="settings-options-container">
+				<label>
+					<Checkbox
+						checked={props.soundInput}
+						onChange={props.handleSoundInputChange}
+						inputProps={{ 'aria-label': 'checkbox' }}
+					/>
+					<span>Sound</span>
+				</label>
+				<label>
+					<Checkbox
+						checked={props.coloredEdgesInput}
+						onChange={props.handleColoredEdgesInputChange}
+						inputProps={{ 'aria-label': 'checkbox' }}
+					/>
+					<span>Coloured edges</span>
+				</label>
+			</div>
 
-				<h2 className="settings-theme-header">Theme</h2>
-				<div className="settings-options-container">
-					{
-						this.props.themes.map((theme) =>
-							<Button
-								onClick={() => this.props.handleThemeInputChange(theme)}
-								icon={this.props.themeInput === theme && <CheckRoundedIcon />}
-								className={`background--${theme}`}
-								key={theme}
-							>
-								{
-									theme.split("-")
-										.map((word) =>
-											word[0].toUpperCase() + word.substring(1)
-										).join(" ")
-								}
-							</Button>
-						)
-					}
-				</div>
-			</>
-		)
-	}
+			<h2 className="settings-theme-header">Theme</h2>
+			<div className="settings-options-container">
+				{
+					props.themes.map((theme) =>
+						<Button
+							onClick={() => props.handleThemeInputChange(theme)}
+							icon={props.themeInput === theme && <CheckRoundedIcon />}
+							className={`background--${theme}`}
+							key={theme}
+						>
+							{
+								theme.split("-")
+									.map((word) =>
+										word[0].toUpperCase() + word.substring(1)
+									).join(" ")
+							}
+						</Button>
+					)
+				}
+			</div>
+		</>
+	)
 }