Refactor confirmation dialog into new class

src/ConfirmationDialog.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Button from './Button';
+
+export default function ConfirmationDialog(props) {
+	return (
+		<>
+			<div className="overlay" onClick={props.noFunction}></div>
+			<div className="overlay-content confirmation-dialog">
+				<h3>{props.message}</h3>
+				<div className="button-container">
+					<Button
+						onClick={props.noFunction}
+						loading={props.loading}
+						disabled={props.loading}
+					>
+						No
+					</Button>
+					<Button
+						onClick={props.yesFunction}
+						loading={props.loading}
+						disabled={props.loading}
+					>
+						Yes
+					</Button>
+				</div>
+			</div>
+		</>
+	)
+}

src/GroupPage.js

@@ -6,6 +6,7 @@ import Button from "./Button";
 import LinkButton from "./LinkButton";
 import Footer from "./Footer";
 import Error404 from "./Error404";
+import ConfirmationDialog from './ConfirmationDialog';
 
 import "./css/GroupPage.css";
 import "./css/ConfirmationDialog.css";
@@ -599,24 +600,11 @@ export default withRouter(class GroupPage extends Component {
 									}
 									{
 										this.state.showDeleteGroup &&
-										<>
+										<ConfirmationDialog
-											<div className="overlay" onClick={this.hideDeleteGroup}></div>
+											yesFunction={this.deleteGroup}
-											<div className="overlay-content confirmation-dialog">
+											noFunction={this.hideDeleteGroup}
-												<h3>Are you sure you want to delete this group?</h3>
+											message="Are you sure you want to delete this group?"
-												<div className="button-container">
+										/>
-													<Button
-														onClick={this.hideDeleteGroup}
-													>
-														No
-													</Button>
-													<Button
-														onClick={this.deleteGroup}
-													>
-														Yes
-													</Button>
-												</div>
-											</div>
-										</>
 									}
 								</>
 							}

src/SetPage.js

@@ -10,6 +10,7 @@ import TestStart from './TestStart';
 import ClassicTestStart from './ClassicTestStart';
 import LivesTestStart from './LivesTestStart';
 import CountdownTestStart from './CountdownTestStart';
+import ConfirmationDialog from "./ConfirmationDialog";
 
 import "./css/PopUp.css";
 import "./css/SetPage.css";
@@ -453,24 +454,11 @@ export default withRouter(class SetPage extends React.Component {
 							</>
 							:
 							this.state.showDeleteConfirmation &&
-							<>
+							<ConfirmationDialog
-								<div className="overlay" onClick={this.hideDeleteConfirmation}></div>
+								yesFunction={this.deleteSet}
-								<div className="overlay-content confirmation-dialog">
+								noFunction={this.hideDeleteConfirmation}
-									<h3>Are you sure you want to delete this set?</h3>
+								message="Are you sure you want to delete this set?"
-									<div className="button-container">	
+							/>
-										<Button
-											onClick={this.hideDeleteConfirmation}
-										>
-											No
-										</Button>
-										<Button
-											onClick={this.deleteSet}
-										>
-											Yes
-										</Button>
-									</div>
-								</div>
-							</>
 						}
 
 						{