Refactor PlayerList

3 files changed, 24 insertions, 24 deletions

diff --git a/frontend/src/components/PlayerList.jsx b/frontend/src/components/PlayerList.jsx
new file mode 100644
index 00000000..8584502b
--- /dev/null
+++ b/frontend/src/components/PlayerList.jsx
@@ -0,0 +1,23 @@
+//@flow
+import { Text } from '@blueprintjs/core';
+import { List } from 'immutable';
+import React from 'react';
+import { Flex } from 'reflexbox';
+import { Player } from '../models/players';
+
+export type PlayerListProps = {
+  players: List<Player>;
+};
+
+const PlayerItem = ({player}) => (
+  <Flex>
+    <Text>{player.displayName}</Text>
+    <Text>({player.username})</Text>
+  </Flex>
+);
+
+export const PlayerList = ({players}: PlayerListProps) => (
+  <div>
+    {players.map(player => <PlayerItem key={player.username} player={player}/>)}
+  </div>
+);
diff --git a/frontend/src/components/playerList.js b/frontend/src/components/playerList.js
deleted file mode 100644
index bbdbc83b..00000000
--- a/frontend/src/components/playerList.js
+++ /dev/null
@@ -1,23 +0,0 @@
-//@flow
-import { Text } from '@blueprintjs/core';
-import { List } from 'immutable';
-import React from 'react';
-import { Flex } from 'reflexbox';
-import { Player } from '../models/players';
-
-export type PlayerListProps = {
-  players: List<Player>;
-};
-
-export const PlayerList = ({ players }: PlayerListProps) => (
-  <div>
-    {players.map(player => {
-      return (
-        <Flex key={player.index}>
-          <Text>{player.displayName}</Text>
-          <Text>({player.username})</Text>
-        </Flex>
-      );
-    })}
-  </div>
-);
diff --git a/frontend/src/scenes/Lobby/index.js b/frontend/src/scenes/Lobby/index.js
index 0a427805..b0b9adac 100644
--- a/frontend/src/scenes/Lobby/index.js
+++ b/frontend/src/scenes/Lobby/index.js
@@ -3,7 +3,7 @@ import { Button } from '@blueprintjs/core';
 import { List } from 'immutable';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { PlayerList } from '../../components/playerList';
+import { PlayerList } from '../../components/PlayerList';
 import type { Game } from '../../models/games';
 import type { Player } from '../../models/players';
 import { actions, getCurrentGame } from '../../redux/games';