Adds filtering to avoid unpublished games to be counted as available games in the homepage search

cypress/integration/homepage.spec.js

@@ -1,6 +1,5 @@
 describe("Homepage", () => {
   beforeEach(() => {
-    cy.viewport(1000, 600);
     cy.visit("/games");
   });
 
@@ -12,7 +11,7 @@ describe("Homepage", () => {
   });
 
   it("should show both default games if searching for 'test' string", () => {
-    cy.get('input[name="game-search"').type('test');
+    cy.get('input[name="game-search"').type("test");
     cy.contains("0 Test game").should("be.visible");
     cy.contains("1 Performance game to test strange things and other").should(
       "be.visible"
@@ -20,7 +19,7 @@ describe("Homepage", () => {
   });
 
   it("should show only game 1 if searching for 'Performance' string", () => {
-    cy.get('input[name="game-search"').type('Performance');
+    cy.get('input[name="game-search"').type("Performance");
     cy.contains("0 Test game").should("not.exist");
     cy.contains("1 Performance game to test strange things and other").should(
       "be.visible"
@@ -28,10 +27,14 @@ describe("Homepage", () => {
   });
 
   it("should not show any game for 'thisisafancystring' string", () => {
-    cy.get('input[name="game-search"').type('thisisafancystring');
+    cy.get('input[name="game-search"').type("thisisafancystring");
     cy.contains("0 Test game").should("not.exist");
     cy.contains("1 Performance game to test strange things and other").should(
       "not.exist"
     );
   });
+
+  it("should not show unpublished game by default", () => {
+    cy.contains("2 Unpublished game").should("not.exist");
+  });
 });

src/games/unpublishedGame.js

@@ -0,0 +1,51 @@
+import { nanoid } from "nanoid";
+
+const genGame = () => {
+  const items = [...Array(2000)].map((e, index) => ({
+    type: "rect",
+    x: 10 + index,
+    y: 10 + index,
+    width: 100,
+    height: 100,
+    id: nanoid(),
+  }));
+  return {
+    items,
+    availableItems: [
+      {
+        groupId: "Group",
+        label: "Rect",
+        type: "rect",
+        color: "#00D022",
+        width: 80,
+        height: 80,
+      },
+    ],
+    board: {
+      size: 4000,
+      scale: 0.5,
+      name: "Unpublished Game",
+      published: false,
+      translations: [
+        {
+          language: "fr",
+          name: "2 Jeu non-publie",
+          description: "Un jeu non-publie pour tester",
+        },
+      ],
+      playerCount: [1, 9],
+      defaultName: "2 Unpublished Game",
+      defaultLanguage: "en",
+      defaultDescription: "A non-published game",
+      materialLanguage: "Multi-lang",
+      minAge: "10",
+      duration: [30, 90],
+      imageUrl: "/game_assets/testgame.png",
+      gridSize: 1,
+    },
+  };
+};
+
+export const unpublishedGame = genGame();
+
+export default unpublishedGame;

src/utils/api.js

@@ -3,6 +3,7 @@ import { API_ENDPOINT, IS_PRODUCTION } from "./settings";
 
 import testGame from "../games/testGame";
 import perfGame from "../games/perfGame";
+import unpublishedGame from "../games/unpublishedGame";
 import { nanoid } from "nanoid";
 
 const uploadURI = `${API_ENDPOINT}/file`;
@@ -97,6 +98,14 @@ export const getGames = async () => {
         published: true,
         ...perfGame.board,
       },
+      {
+        ...unpublishedGame,
+        name: "Unpublished Game",
+        data: unpublishedGame,
+        id: "unpublished",
+        published: false,
+        ...unpublishedGame.board,
+      },
       ...gameList,
     ];
   }

src/views/GameListView.jsx

@@ -99,12 +99,11 @@ const GameListView = () => {
   };
 
   const filteredGameList = React.useMemo(() => {
-    return gameList.filter((game) => {
-      return (
+    return gameList.filter(
+      (game) =>
         searchTerm === NULL_SEARCH_TERM ||
         cleanWord(game.defaultName).includes(cleanWord(searchTerm))
-      );
-    });
+    );
   }, [gameList, searchTerm]);
 
   React.useEffect(() => {
@@ -115,19 +114,21 @@ const GameListView = () => {
       if (!mounted) return;
 
       setGameList(
-        content.sort((a, b) => {
-          const [nameA, nameB] = [
-            a.board.defaultName || a.board.name,
-            b.board.defaultName || b.board.name,
-          ];
-          if (nameA < nameB) {
-            return -1;
-          }
-          if (nameA > nameB) {
-            return 1;
-          }
-          return 0;
-        })
+        content
+          .filter((game) => game.published)
+          .sort((a, b) => {
+            const [nameA, nameB] = [
+              a.board.defaultName || a.board.name,
+              b.board.defaultName || b.board.name,
+            ];
+            if (nameA < nameB) {
+              return -1;
+            }
+            if (nameA > nameB) {
+              return 1;
+            }
+            return 0;
+          })
       );
     };
 
@@ -175,11 +176,9 @@ const GameListView = () => {
           </StyledGameResultNumber>
         </Filter>
         <StyledGameList>
-          {filteredGameList
-            .filter(({ published }) => published)
-            .map((game) => (
-              <GameListItem key={game.id} game={game} />
-            ))}
+          {filteredGameList.map((game) => (
+            <GameListItem key={game.id} game={game} />
+          ))}
         </StyledGameList>
       </Content>
     </>