Playerlist promotion wip

src/components/PlayerlistFaction.js

 import React from "react";
+import PlayerlistPlayerCard from "./PlayerlistPlayerCard";
 
 export default class PlayerlistFaction extends React.Component {
   state = {
@@ -26,9 +27,11 @@ export default class PlayerlistFaction extends React.Component {
 
     let members = this.state.factionMembers.map(member => {
       return (
-        <div key={member.gamepersonId}>
-          {member.person.name} : {member.role}
-        </div>
+        <PlayerlistPlayerCard
+          key={member.gamepersonId}
+          player={member}
+          role={this.props.role}
+        />
       );
     });
 

src/components/PlayerlistPlayerCard.js

+import React, { Fragment } from "react";
+
+export default class PlayerlistPlayerCard extends React.Component {
+  state = {
+    edit: false
+  };
+
+  render() {
+    console.log(this.props.player);
+    return (
+      <div>
+        {this.props.player.person.name} :{" "}
+        {this.state.edit && (
+          <select>
+            <option value="soldier">Soldier</option>
+            <option value="factionleader">Faction Leader</option>
+            <option value="admin">Admin</option>
+          </select>
+        )}
+        {!this.state.edit && this.props.player.role}
+        {this.props.role === "admin" && !this.state.edit && (
+          <button onClick={() => this.setState({ edit: !this.state.edit })}>
+            Edit
+          </button>
+        )}
+        {this.state.edit && (
+          <Fragment>
+            <button>Save</button>
+            <button>Cancel</button>
+          </Fragment>
+        )}
+      </div>
+    );
+  }
+}

src/components/PlayerlistView.js

@@ -46,7 +46,13 @@ export default class PlayerlistView extends React.Component {
     }
 
     let factionlistItems = this.state.factions.map(faction => {
-      return <PlayerlistFaction faction={faction} />;
+      return (
+        <PlayerlistFaction
+          key={faction.factionId}
+          faction={faction}
+          role={this.props.role}
+        />
+      );
     });
 
     return <div className="fade-main">{factionlistItems}</div>;