From cb5ed7a89a767540b94422b74f4cf1cf44d63079 Mon Sep 17 00:00:00 2001
From: Matthew Grove <me@mgrove.uk>
Date: Tue, 22 Feb 2022 16:07:56 +0000
Subject: [PATCH] More encapsulation

---
 src/App.js         |  1 -
 src/GroupPage.js   | 18 +++++++-----------
 src/OverlayList.js | 20 ++++++++++++++++++++
 3 files changed, 27 insertions(+), 12 deletions(-)
 create mode 100644 src/OverlayList.js

diff --git a/src/App.js b/src/App.js
index 1bf78ee..34b6787 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,7 +10,6 @@ import GroupStats from "./GroupStats";
 import UserGroups from "./UserGroups";
 import Settings from "./Settings";
 import Progress from "./Progress";
-import CreateSet from "./CreateSet";
 import UserSets from "./UserSets";
 import EditSet from "./EditSet";
 import Error404 from "./Error404";
diff --git a/src/GroupPage.js b/src/GroupPage.js
index 63fa0d1..7a9acc2 100644
--- a/src/GroupPage.js
+++ b/src/GroupPage.js
@@ -14,10 +14,10 @@ import LinkButton from "./LinkButton";
 import Footer from "./Footer";
 import Error404 from "./Error404";
 import ConfirmationDialog from './ConfirmationDialog';
+import OverlayList from './OverlayList';
 
 import "./css/GroupPage.css";
 import "./css/ConfirmationDialog.css";
-import "./css/OptionsListOverlay.css";
 
 export default withRouter(
   class GroupPage extends Component {
@@ -290,6 +290,7 @@ export default withRouter(
     };
 
     editUserRole = (role) => {
+      role = role.toLowerCase();
       if (role === this.state.editingUser.role) {
         this.setState({
           editingUser: null,
@@ -637,16 +638,11 @@ export default withRouter(
                     </div>
                     {this.state.editingUser && (
                       <>
-                        <div className="overlay" onClick={this.hideEditUserRole}></div>
-                        <div className="overlay-content options-list-overlay-content">
-                          {["Owner", "Contributor", "Member", "Remove"].map((role) => (
-                            <h3 key={role} onClick={() => this.editUserRole(role.toLowerCase())}>
-                              {role}
-                            </h3>
-                          ))}
-
-                          <div onClick={this.hideEditUserRole}>Cancel</div>
-                        </div>
+                        <OverlayList
+                          closeOverlay={this.hideEditUserRole}
+                          selectOption={this.editUserRole}
+                          options={["Owner", "Contributor", "Member", "Remove"]}
+                        />
                       </>
                     )}
                     {this.state.showDeleteGroup && (
diff --git a/src/OverlayList.js b/src/OverlayList.js
new file mode 100644
index 0000000..c0cc133
--- /dev/null
+++ b/src/OverlayList.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import "./css/PopUp.css";
+import "./css/OptionsListOverlay.css";
+
+export default function OverlayList(props) {
+  return (
+	<>
+		<div className="overlay" onClick={props.closeOverlay}></div>
+		<div className="overlay-content options-list-overlay-content">
+			{props.options.map((option) => (
+			<h3 key={option} onClick={() => props.selectOption(option)}>
+				{option}
+			</h3>
+			))}
+
+			<div onClick={props.closeOverlay}>Cancel</div>
+		</div>
+	</>
+  );
+}