Merge pull request #91 from HarrisSte/results-fix

working on results page rendering

client/src/components/Results.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 const Results = (props) => {
 
+  const { gameId } = useParams();
+
   return (
     <div className="results-container">
       <ul>
@@ -11,7 +14,7 @@ const Results = (props) => {
           <li key={game.id}>
 
             <Link to={{
-              pathname: `/game/${game.name}`,
+              pathname: `/game/${gameId}`,
               gameProps:{
                 game: game
               }
@@ -28,4 +31,48 @@ const Results = (props) => {
   );
 }
 
-export default Results;
+export default Results;
+
+// import { useParams } from 'react-router-dom';
+// import { useEffect, useState } from 'react';
+// import ResultsPage from '../pages/Results/ResultsPage'
+// import ResultsBackground from '../assets/results-background.png'
+
+// const Results = () => {
+
+//   const { gameId } = useParams();
+
+//   useEffect(() => {
+//     fetchGame();
+//   }, []);
+
+//   const [game, setGame] = useState([]);
+
+//   const fetchGame = async () => {
+//     await fetch(
+//       `https://api.rawg.io/api/games/${gameId}?key=bf22dc51e531456db8bc42a19dac9897`
+//     )
+//       .then((resp) => resp.json())
+//       .then((results) => setGame(results));
+//   };
+
+//   return (
+//     <div
+//       className='results'
+//       style={{
+//         width: '100%',
+//         minHeight: '100vh',
+//         backgroundImage: `url(${ResultsBackground})`,
+//         backgroundSize: 'cover',
+//         backgroundPosition: 'center',
+//         overflow: 'hidden',
+//       }}
+//     >
+//       <div className='results-info'>
+//         <ResultsPage game={game} />
+//       </div>
+//     </div>
+//   );
+// }
+
+// export default Results;

client/src/components/Search.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import Results from './Results';
 import { BsSearchHeart } from "react-icons/bs";
 

client/src/components/SingleGame/GameDetails.jsx

@@ -1,4 +1,3 @@
-
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
@@ -65,4 +64,4 @@ const GamePage = (props) => {
   );
 };
 
-export default GamePage;
+export default GamePage;

client/src/pages/Results/ResultsPage.jsx

@@ -0,0 +1,42 @@
+import Results from '../../components/Results';
+import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import ResultsBackground from '../../assets/results-background.png';
+
+const GameResults = () => {
+    const { gameId } = useParams();
+
+    useEffect(() => {
+      fetchGame();
+    }, []);
+
+    const [game, setGame] = useState([]);
+
+    const fetchGame = async () => {
+      await fetch(
+        `https://api.rawg.io/api/games/${gameId}?key=bf22dc51e531456db8bc42a19dac9897`
+      )
+        .then((resp) => resp.json())
+        .then((results) => setGame(results));
+    };
+
+    return (
+      <div
+        className='results'
+        style={{
+          width: '100%',
+          minHeight: '100vh',
+          backgroundImage: `url(${ResultsBackground})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          overflow: 'hidden',
+        }}
+      >
+       <div className='game-info'>
+        <Results game={game} />
+      </div>
+      </div>
+    );
+  };
+
+  export default GameResults;

client/src/pages/SingleGame.jsx

@@ -39,4 +39,4 @@ const SingleGame = () => {
   );
 };
 
-export default SingleGame;
+export default SingleGame;