1 files changed, 9 insertions, 23 deletions

diff --git a/frontend/src/components/GameEntry.tsx b/frontend/src/components/GameEntry.tsx
index 8e58ce9..ced40ee 100644
--- a/frontend/src/components/GameEntry.tsx
+++ b/frontend/src/components/GameEntry.tsx
@@ -1,38 +1,21 @@
 import React from 'react';
 import { Link } from "react-router-dom";
 
-import { Game } from '../types/Game';
+import { Game, GameCategoryPortals } from '../types/Game';
 import "../css/Games.css"
 
+import GameCategory from './GameCategory';
+
 interface GameEntryProps {
   game: Game;
 }
 
 const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
+  const [catInfo, setCatInfo] = React.useState<GameCategoryPortals[]>([]);
 
   React.useEffect(() => {
-    game.category_portals.forEach(catInfo => {
-      const itemBody = document.createElement("div");
-      const itemTitle = document.createElement("span");
-      const spacing = document.createElement("br");
-      const itemNum = document.createElement("span");
-
-      itemTitle.innerText = catInfo.category.name;
-      itemNum.innerText = catInfo.portal_count as any as string;
-      itemTitle.classList.add("games-page-item-body-item-title");
-      itemNum.classList.add("games-page-item-body-item-num");
-      itemBody.appendChild(itemTitle);
-      itemBody.appendChild(spacing);
-      itemBody.appendChild(itemNum);
-      itemBody.className = "games-page-item-body-item";
-
-      // itemBody.innerHTML = `
-      //             <span className='games-page-item-body-item-title'>${catInfo.category.name}</span><br />
-      //             <span className='games-page-item-body-item-num'>${catInfo.portal_count}</span>`
-
-      document.getElementById(`${game.id}`)!.appendChild(itemBody);
-    });
-  }, []);
+    setCatInfo(game.category_portals);
+  }, [game.category_portals]);
 
   return (
     <Link to={"/games/" + game.id}><div className='games-page-item'>
@@ -41,6 +24,9 @@ const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
         <span><b>{game.name}</b></span>
       </div>
       <div id={game.id as any as string} className='games-page-item-body'>
+        {catInfo.map((cat, index) => {
+          return <GameCategory cat={cat} game={game} key={index}></GameCategory>
+        })}
       </div>
     </div></Link>
   );