added emptyPage

bounswe · Dec 25, 2023 · 5d88b5d · 5d88b5d
1 parent a180139
commit 5d88b5d
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 62 deletions.
diff --git a/ludos/frontend/src/App.js b/ludos/frontend/src/App.js
@@ -23,6 +23,7 @@ import CreateEntityPage from "./pages/CreateEntityPage.js";
 import GroupPage from "./pages/GroupPage.js";
 import GroupsPage from "./pages/GroupsPage.js";
 import CreateGroupPage from "./pages/CreateGroupPage.js";
+import EmptyPage from "./pages/EmptyPage.js";
 
 function App() {
   const [games, setGames] = useState([]);
@@ -525,6 +526,14 @@ function App() {
               </Layout>
             }
           />
+          <Route
+            path="*"
+            element={
+              <Layout>
+                <EmptyPage />
+              </Layout>
+            }
+          />
         </Routes>
       </div>
     </Router>

diff --git a/ludos/frontend/src/components/GameCard.js b/ludos/frontend/src/components/GameCard.js
@@ -26,9 +26,6 @@ export default function GameCard({ game }) {
     window.location.reload(false);
   };
 
-  const [averageRating, setAverageRating] = useState(0);
-  const [tags, setTags] = useState([]);
-
   const axiosInstance = axios.create({
     baseURL: `http://${process.env.REACT_APP_API_URL}`,
     headers: {
@@ -45,20 +42,6 @@ export default function GameCard({ game }) {
     }).format(date);
   };
 
-  useEffect(() => {
-    axiosInstance
-      .get(`/game/${game.id}`)
-      .then((response) => {
-        if (response.data.averageRating) {
-          setAverageRating(response.data.averageRating.toFixed(1));
-          setTags(response.data.tags);
-        }
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  }, []);
-
   const replaceImage = (error) => {
     error.target.src =
       "https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Video-Game-Controller-Icon-D-Edit.svg/2048px-Video-Game-Controller-Icon-D-Edit.svg.png";
@@ -129,8 +112,12 @@ export default function GameCard({ game }) {
         <Grid
           item
           xs={12}
-          sm={6}
-          sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "stretch",
+            flexGrow: 1,
+          }}
         >
           <Box sx={{ marginRight: "16px", borderRadius: "20px" }}>
             <img
@@ -149,13 +136,15 @@ export default function GameCard({ game }) {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
+              width: "100%",
             }}
           >
-            <Typography sx={{ width: "500px", color: "white" }}>
+            <Typography sx={{ color: "white", width: "100%" }}>
               {game.gameBio.slice(0, 300)}...
             </Typography>
           </Box>
         </Grid>
+
         <Grid
           item
           xs={12}
@@ -167,7 +156,7 @@ export default function GameCard({ game }) {
           }}
         >
           <div>
-            {tags.map((tag, index) => (
+            {game?.tags.map((tag, index) => (
               <Chip
                 key={index}
                 label={tag}
@@ -180,28 +169,6 @@ export default function GameCard({ game }) {
               />
             ))}
           </div>
-          <Typography
-            variant="h5"
-            component="div"
-            sx={{
-              color: "#003049",
-              backgroundColor: "#63B0CD",
-              borderRadius: "20px",
-              padding: "12px",
-              display: "flex",
-              alignItems: "center",
-            }}
-          >
-            {averageRating}
-            <StarRateRoundedIcon
-              sx={{
-                marginLeft: "5px",
-                color: "#F77F00",
-                width: "35px",
-                height: "35px",
-              }}
-            />
-          </Typography>
         </Grid>
       </Grid>
     </Card>

diff --git a/ludos/frontend/src/components/RelatedGamesTab.js b/ludos/frontend/src/components/RelatedGamesTab.js
@@ -1,21 +1,21 @@
 import React, { useEffect } from "react";
-import { Typography, Grid, Box, Link } from "@mui/material";
+import { Typography, Grid, Box } from "@mui/material";
 import axios from "axios";
 import { useState } from "react";
 import GameCard from "./GameCard";
+import { Link } from "react-router-dom";
 
 function Description(data) {
-  const [suggestedGames, setSuggestedGames] = useState([]);
-
   const convertToSlug = (text) => {
     return text
-      ?.toString()
+      .toString()
       .toLowerCase()
       .trim()
       .replace(/[\s_]/g, "-") // Replace spaces or underscores with dashes
       .replace(/[^\w-]+/g, "") // Remove non-word characters except dashes
       .replace(/--+/g, "-"); // Replace multiple dashes with single dash
   };
+  const [suggestedGames, setSuggestedGames] = useState([]);
 
   const axiosInstance = axios.create({
     baseURL: `http://${process.env.REACT_APP_API_URL}`,
@@ -42,7 +42,7 @@ function Description(data) {
   return (
     <Grid
       container
-      xs={8}
+      xs={12}
       style={{
         display: "flex",
         flexDirection: "row",
@@ -63,18 +63,22 @@ function Description(data) {
           }}
         >
           {data.predecessors.map((predecessor, index1) => (
-            <Link to={`/game/${convertToSlug(predecessor)}`} key={index1}>
-              <Typography
-                variant="body1"
-                color="white"
-                align="center"
-                style={{
-                  fontFamily: "Trebuchet MS, sans-serif",
-                }}
+            <Typography
+              variant="body1"
+              color="white"
+              align="center"
+              style={{
+                fontFamily: "Trebuchet MS, sans-serif",
+              }}
+              key={index1}
+            >
+              <Link
+                style={{ color: "white", textDecoration: "none" }}
+                to={`/game/${convertToSlug(predecessor)}`}
               >
-                {predecessor}
-              </Typography>
-            </Link>
+                {predecessor}{" "}
+              </Link>
+            </Typography>
           ))}
         </Typography>
       </Grid>
@@ -102,7 +106,12 @@ function Description(data) {
               }}
               key={index1}
             >
-              {successor}
+              <Link
+                style={{ color: "white", textDecoration: "none" }}
+                to={`/game/${convertToSlug(successor)}`}
+              >
+                {successor}{" "}
+              </Link>
             </Typography>
           ))}
         </Typography>

diff --git a/ludos/frontend/src/pages/EmptyPage.js b/ludos/frontend/src/pages/EmptyPage.js
@@ -0,0 +1,45 @@
+import { Box, Container, Grid, Typography } from "@mui/material";
+import React from "react";
+
+function EmptyGamePage() {
+  return (
+    <>
+      <Container
+        style={{
+          maxWidth: "1200px",
+          margin: "162px auto",
+          maxHeight: "300px",
+        }}
+      >
+        <Grid container spacing={1}>
+          <Box
+            p={0}
+            style={{
+              width: "100%",
+              marginTop: "3%",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              display: "flex",
+              height: "10px",
+            }}
+          >
+            <Typography
+              style={{
+                fontSize: "25px",
+                color: "white",
+                fontFamily: "Trebuchet MS, sans-serif",
+              }}
+            >
+              {
+                "The content you are looking for does not exist. You can create the content by clicking on the 'Create' button on the sidebar."
+              }
+            </Typography>
+          </Box>
+        </Grid>
+      </Container>
+    </>
+  );
+}
+
+export default EmptyGamePage;
diff --git a/ludos/frontend/src/pages/GamePage.js b/ludos/frontend/src/pages/GamePage.js
@@ -576,7 +576,7 @@ function GamePage(id) {
               component="div"
               style={{ fontFamily: "Trebuchet MS, sans-serif" }}
             >
-              {game.averageRating}/5
+              {averageRating.toFixed(2)}/5
             </Typography>
           </Grid>
           <Grid item xs={12} sm={12} md={12} lg={12} style={smallBoxStyle}>
@@ -606,7 +606,7 @@ function GamePage(id) {
               component="div"
               style={{ fontFamily: "Trebuchet MS, sans-serif" }}
             >
-              {game.averageCompletionDuration}
+              {game.averageCompletionDuration.toFixed(2)} Hours
             </Typography>
           </Grid>
         </Grid>