Converting score page to use hooks

ui/src/components/player-scores.component.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState,useEffect } from 'react';
 import { gameInfo } from '../services/ggsh.service';
 import Loading from './loading.component';
 
@@ -7,16 +7,17 @@ import Loading from './loading.component';
 
 const PlayerScores = ({ scores }) => (
   <div style={{
-    display: "flex", 
-    flexFlow: "row wrap", 
-    justifyContent: "space-around", 
-    alignItems: "center", 
-    alignContent: "space-around"}}>
+    display: "flex",
+    flexFlow: "row wrap",
+    justifyContent: "space-around",
+    alignItems: "center",
+    alignContent: "space-around"
+  }}>
     {
       scores
         .filter(({ currentRound }) => currentRound === null)
         .sort((p1, p2) => p1.totalScore > p2.totalScore ? -1 : (p1.totalScore < p2.totalScore ? 1 : 0))
-        .map(({ name, guesses, totalScore }) => 
+        .map(({ name, guesses, totalScore }) =>
           <div style={{flex: 1}}>
             <p>{name}</p>
             <p>Score: {totalScore}</p>
@@ -33,36 +34,28 @@ const PlayerScores = ({ scores }) => (
   </div>
 );
 
-class PlayerScoresContainer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { scores: null }
-  }
-
-  async componentDidMount() {
-    const { gameId } = this.props;
-    const { players } = await gameInfo(gameId);
-    this.setState({ scores: players });
-  }
+const PlayerScoresContainer = ({ gameId, onReturnToStart }) => {
+  const [scores, setScores] = useState(null);
 
-  render() {
-    const { scores } = this.state;
-    if (!scores) {
-      return <Loading/>
-    }
+  useEffect(() => {
+    const fetchInfo = async () => {
+      const { players } = await gameInfo(gameId);
+      setScores(players);
+    };
+    fetchInfo();
+  }, [gameId]);
 
-    const { onReturnToStart } = this.props;
-    return (
-      <div>
-        <p>Previous Game:</p>
-        <PlayerScores scores={scores} />
-        <button onClick={onReturnToStart}>
-          Return to Start
-        </button>
-      </div>
-    );
+  if (!scores) {
+    return <Loading/>
   }
 
+  return (
+    <div>
+      <p>Previous Game:</p>
+      <PlayerScores scores={scores} />
+      <button onClick={onReturnToStart} >Return to Start</button>
+    </div>
+  );
 }
 
 export default PlayerScoresContainer;