Add new Cards view, with listing of all cards (#562)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

ark_nova_stats/frontend/src/App.tsx

@@ -7,6 +7,7 @@ import {
 } from "react-router-dom";
 
 import CardView from './views/CardView';
+import CardsView from './views/CardsView';
 import HomeView from './views/HomeView';
 import UserView from './views/UserView';
 
@@ -17,6 +18,7 @@ function App() {
           <Route path="/" element={<Navigate to="/home" replace />} />
           <Route path="home" element={<HomeView />} />
           <Route path="user/:name" element={<UserView />} />
+          <Route path="cards" element={<CardsView />} />
           <Route path="card/:id" element={<CardView />} />
         </Routes>
     </Router>

ark_nova_stats/frontend/src/components/GameLogArchivesTable.tsx

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 
 import {getDate} from '../DateUtils';
 import GameLogArchive from '../types/GameLogArchive';
-import User from '../types/User';
 import Table from './Table';
 
 type GameLogArchivesTableParams = {

ark_nova_stats/frontend/src/components/NavBar.tsx

@@ -17,6 +17,11 @@ const NavBar = (props: NavBarProps) => {
                             <p className="font-bold">Ark Nova Games Database</p>
                         </Link>
                     </div>
+                    <div className="dark:hover:text-slate-300 hover:text-slate-500">
+                        <Link to={'/cards'}>
+                            <p>Cards</p>
+                        </Link>
+                    </div>
                 </div>
             </div>
         </div>

ark_nova_stats/frontend/src/views/CardsView.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import CardsView, { CARDS_VIEW_QUERY } from './CardsView';
+import { MockedProvider } from '@apollo/react-testing';
+import {BrowserRouter} from 'react-router-dom'
+import React from 'react';
+
+it('should render the name of the view', async () => {
+  const testFetchStatsMock = {
+    request: {
+      query: CARDS_VIEW_QUERY
+    },
+    result: {
+      data: {
+        cards: null,
+      }
+    }
+  }
+
+  render(
+      <MockedProvider mocks={[testFetchStatsMock]}>
+        <CardsView />
+      </MockedProvider>,
+      {wrapper: BrowserRouter},
+  );
+  expect(await screen.findByText("Cards")).toBeInTheDocument();
+});
+
+
+it('should render cards when provided', async () => {
+    const testFetchStatsMock = {
+      request: {
+        query: CARDS_VIEW_QUERY
+      },
+      result: {
+        data: {
+          cards: [
+            { bgaId: "testCard", name: "test card", mostPlayedBy: {user: {name: "test user"}, count: 100}}
+          ],
+        }
+      }
+    }
+
+    render(
+        <MockedProvider mocks={[testFetchStatsMock]}>
+          <CardsView />
+        </MockedProvider>,
+        {wrapper: BrowserRouter},
+    );
+    expect(await screen.findByText("test card")).toBeInTheDocument();
+  });

ark_nova_stats/frontend/src/views/CardsView.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { gql } from '@apollo/client/core';
+import { useQuery } from '@apollo/client/react/hooks';
+import { Link } from 'react-router-dom';
+
+import PageContainer from '../components/PageContainer';
+import PageTitle from "../components/PageTitle";
+import Card from '../types/Card';
+import User from '../types/User';
+import Table from '../components/Table';
+
+export const CARDS_VIEW_QUERY = gql`
+    query FetchCards() {
+        cards {
+            bgaId
+            name
+            mostPlayedBy {
+                user {
+                    name
+                }
+                count
+            }
+        }
+    }
+`;
+
+
+
+const CardsView = () => {
+    const { loading, error, data } = useQuery(
+        CARDS_VIEW_QUERY,
+    );
+
+
+    let innerContent = <p></p>;
+    if (loading) innerContent = <p>Loading...</p>;
+    else if (error) innerContent = <p>Error: {error.message}</p>;
+    else {
+        const cards: Card[] = data.cards;
+        const tableColumns = ["Name", "Most played by"];
+        const cardRows = cards.map((card: Card) => {
+            const mostPlayedUser: User = data.cards.find((c: any) => {return c.bgaId === card.bgaId}).mostPlayedBy[0];
+            return {
+                "Name": <Link to={`/card/${card.bgaId}`}>{card.name}</Link>,
+                "Most played by": <Link to={`user/${mostPlayedUser.name}`}>{mostPlayedUser.name}</Link>
+            }
+        });
+        innerContent = (
+            <div>
+                <PageTitle>Cards</PageTitle>
+                <div className={"py-2"}>
+                    <Table
+                        cols={tableColumns}
+                        rows={cardRows}
+                        key="cards"
+                        showFilters={false}
+                    />
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <PageContainer>
+            {innerContent}
+        </PageContainer>
+    )
+}
+
+export default CardsView;

ark_nova_stats/frontend/src/views/HomeView.tsx

@@ -57,9 +57,6 @@ export const HOME_VIEW_QUERY = gql`
 
 
 
-type HomeViewParams = {
-}
-
 const HomeView = () => {
     const { loading, error, data } = useQuery(
         HOME_VIEW_QUERY,