[#189 + #193] Games page fix

2 files changed, 33 insertions, 23 deletions

diff --git a/frontend/src/components/GameCategory.tsx b/frontend/src/components/GameCategory.tsx
new file mode 100644
index 0000000..3291e09
--- /dev/null
+++ b/frontend/src/components/GameCategory.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+
+import { Game, GameCategoryPortals } from '../types/Game';
+import "../css/Games.css"
+
+interface GameCategoryProps {
+    game: Game;
+    cat: GameCategoryPortals;
+}
+
+const GameCategory: React.FC<GameCategoryProps> = ({cat, game}) => {
+    return (
+        <Link className="games-page-item-body-item" to={"/games/" + game.id + "?cat=" + cat.category.id}>
+        <div>
+              <span className='games-page-item-body-item-title'>{cat.category.name}</span>
+              <br />
+              <span className='games-page-item-body-item-num'>{cat.portal_count}</span>
+        </div>
+        </Link>
+    )
+}
+
+export default GameCategory;
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>
   );