Minified the Images fetched from the API

team16/src/components/Game.js

@@ -6,21 +6,22 @@ import { Link } from "react-router-dom";
 
 import {useDispatch} from 'react-redux';
 import {loadDetail} from '../actions/detailAction';
+import {smallImage} from '../util';
 
 const Game = ({name, released, image, id}) => {
     //Load Detail handlers
     const dispatch = useDispatch();
     const loadDetailHandler = () => {
         document.body.style.overflow = 'hidden';
         dispatch(loadDetail(id));
-    }
+    };
 
     return(
         <StyledGame onClick={loadDetailHandler}>
             <Link to={`/game/${id}`}>
                 <h3>{name}</h3>
                 <p>{released}</p>
-                <img src={image} alt={name} />
+                <img loading='lazy' src={smallImage(image,640)} alt={name} />
             </Link>
         </StyledGame>
     );

team16/src/components/GameDetail.js

@@ -5,6 +5,7 @@ import { motion } from "framer-motion";
 //Redux
 import { useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
+import {smallImage} from '../util';
 
 const GameDetail = () => {
   const history = useHistory();
@@ -32,21 +33,30 @@ const GameDetail = () => {
             <Info>
               <h3>Platforms</h3>
               <Platforms>
-                {game.platform && game.platforms.map((data) => (
+                {game.platforms && game.platforms.map((data) => (
                   <h3 key={data.platform.id}>{data.platform.name}</h3>
                 ))}
               </Platforms>
             </Info>
           </Stats>
           <Media>
-            <img src={game.background_image} alt={game.background_image} />
+            <img
+              loading='lazy'
+              src={smallImage(game.background_image, 1280)}
+              alt={game.background_image}
+            />
           </Media>
           <Description>
             <p>{game.description_raw}</p>
           </Description>
           <div className="gallery">
-            {screen.result && screen.results.map((screen) => (
-              <img src={screen.image} key={screen.id} alt={screen.image} />
+            {screen.results && screen.results.map((screen) => (
+              <img
+                loading='lazy'
+                src={smallImage(screen.image, 1280)}
+                key={screen.id}
+                alt={screen.image}
+              />
             ))}
           </div>
         </Detail>

team16/src/pages/Home.js

@@ -1,84 +1,88 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
+import GameDetail from "../components/GameDetail";
+
+//Redux
 import { useDispatch, useSelector } from "react-redux";
 import { loadGames } from "../actions/gamesAction";
+
 //Components
-import Game from '../components/Game';
-import GameDetail from '../components/GameDetail';
-//Styling and animations
-import styled from 'styled-components';
-import {motion} from 'framer-motion';
+import Game from "../components/Game";
+
+//Styling and Animation
+import styled from "styled-components";
+import { motion } from "framer-motion";
 import { useLocation } from "react-router-dom";
 
 const Home = () => {
-    
+
     //get the current location
-    const location = useLocation();
-    const pathId = location.pathname.split("/")[2];
-    
-    // Fetch Games
-    const dispatch = useDispatch();
-    useEffect(() => {
-        dispatch(loadGames());
-    },[dispatch]);
-    
-    // Extract the data
-    const { popular, newGames, upcoming } = useSelector((state) => state.games);
-    return(
-        <Gamelist>
-            { pathId && <GameDetail /> }
-            <h2>Upcoming Games</h2>
-            <Games>
-                {upcoming.map(game => (
-                    <Game 
-                        name={game.name} 
-                        released={game.released} 
-                        id={game.id}
-                        image={game.background_image}
-                        key={game.id}
-                    />
-                ))}
-            </Games>
-            <h2>Popular Games</h2>
-            <Games>
-                {popular.map((game) => (
-                <Game
-                    name={game.name}
-                    released={game.released}
-                    id={game.id}
-                    image={game.background_image}
-                    key={game.id}
-                />
-                ))}
-            </Games>
-            <h2>New Games</h2>
-            <Games>
-                {newGames.map((game) => (
-                <Game
-                    name={game.name}
-                    released={game.released}
-                    id={game.id}
-                    image={game.background_image}
-                    key={game.id}
-                />
-                ))}
-            </Games>
-        </Gamelist>
-    );
-}
+  const location = useLocation();
+  const pathId = location.pathname.split("/")[2];
+
+  //FETCH GAMES
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(loadGames());
+  }, [dispatch]);
+
+  //Get that data back
+  const { popular, newGames, upcoming } = useSelector((state) => state.games);
+  return (
+    <GameList>
+      {pathId && <GameDetail />}
+      <h2>Upcoming Games</h2>
+      <Games>
+        {upcoming.map((game) => (
+          <Game
+            name={game.name}
+            released={game.released}
+            id={game.id}
+            image={game.background_image}
+            key={game.id}
+          />
+        ))}
+      </Games>
+      <h2>Popular Games</h2>
+      <Games>
+        {popular.map((game) => (
+          <Game
+            name={game.name}
+            released={game.released}
+            id={game.id}
+            image={game.background_image}
+            key={game.id}
+          />
+        ))}
+      </Games>
+      <h2>New Games</h2>
+      <Games>
+        {newGames.map((game) => (
+          <Game
+            name={game.name}
+            released={game.released}
+            id={game.id}
+            image={game.background_image}
+            key={game.id}
+          />
+        ))}
+      </Games>
+    </GameList>
+  );
+};
 
-const Gamelist = styled(motion.div)`
-    padding: 0rem 5rem;
-    h2{
-        padding: 5rem 0rem;
-    }
+const GameList = styled(motion.div)`
+  padding: 0rem 5rem;
+  h2 {
+    padding: 5rem 0rem;
+  }
 `;
 
 const Games = styled(motion.div)`
-    min-height: 80vh;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-    grid-column-gap: 3rem;
-    grid-row-gap: 5rem;
+  min-height: 80vh;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  grid-column-gap: 3rem;
+  grid-row-gap: 5rem;
 `;
 
 export default Home;

team16/src/reducers/detailReducer.js

@@ -1,4 +1,8 @@
-const initialState = { game: { platforms:[] } , screen: { results:[], isLoading:true }};
+const initialState = { 
+    game: { platforms:[] } , 
+    screen: { results:[] }, 
+    isLoading:true, 
+};
 
 const detailReducer = ( state=initialState, action ) => {
     switch(action.type){
@@ -15,7 +19,7 @@ const detailReducer = ( state=initialState, action ) => {
                 isLoading: true,
             }
         default:
-            return{ ...state}
+            return { ...state};
     };
 };
 

team16/src/util.js

@@ -0,0 +1,17 @@
+// Resizing images
+export const smallImage = (imagePath, size) => {
+    let image;
+    if (imagePath) {
+    image = imagePath.match(/media\/screenshots/)
+      ? imagePath.replace(
+          "media/screenshots",
+          `media/resize/${size}/-/screenshots`
+        )
+      : imagePath.replace("/media/games", `/media/resize/${size}/-/games`);
+    } 
+    else {
+        image = imagePath;
+    }
+
+  return image;
+  };