Improve ui when there is no content

backend/bracket/routes/users.py

@@ -34,8 +34,13 @@
 router = APIRouter()
 
 
+@router.get("/users/me", response_model=UserPublicResponse)
+async def get_user(user_public: UserPublic = Depends(user_authenticated)) -> UserPublicResponse:
+    return UserPublicResponse(data=user_public)
+
+
 @router.get("/users/{user_id}", response_model=UserPublicResponse)
-async def get_user(
+async def get_me(
     user_id: int, user_public: UserPublic = Depends(user_authenticated)
 ) -> UserPublicResponse:
     if user_public.id != user_id:

backend/tests/integration_tests/api/users_test.py

@@ -13,9 +13,7 @@
 async def test_users_endpoint(
     startup_and_shutdown_uvicorn_server: None, auth_context: AuthContext
 ) -> None:
-    assert await send_auth_request(
-        HTTPMethod.GET, f"users/{auth_context.user.id}", auth_context, {}
-    ) == {
+    expected_data = {
         "data": {
             "email": auth_context.user.email,
             "created": "2000-01-01T00:00:00Z",
@@ -25,6 +23,13 @@ async def test_users_endpoint(
         },
     }
 
+    assert (
+        await send_auth_request(HTTPMethod.GET, f"users/{auth_context.user.id}", auth_context, {})
+        == expected_data
+    )
+
+    assert await send_auth_request(HTTPMethod.GET, "users/me", auth_context, {}) == expected_data
+
 
 async def test_create_user(
     startup_and_shutdown_uvicorn_server: None, auth_context: AuthContext

frontend/src/components/brackets/brackets.tsx

@@ -1,7 +1,6 @@
 import { Alert, Button, Container, Grid, Group, Skeleton } from '@mantine/core';
 import { GoPlus } from '@react-icons/all-files/go/GoPlus';
 import { IconAlertCircle } from '@tabler/icons-react';
-import { TFunction } from 'i18next';
 import { useTranslation } from 'next-i18next';
 import React from 'react';
 import { SWRResponse } from 'swr';
@@ -13,11 +12,12 @@ import { StageItemWithRounds, stageItemIsHandledAutomatically } from '../../inte
 import { TournamentMinimal } from '../../interfaces/tournament';
 import { createRound } from '../../services/round';
 import ActivateNextRoundModal from '../modals/activate_next_round_modal';
+import { Translator } from '../utils/types';
 import { responseIsValid } from '../utils/util';
 import Round from './round';
 
 function getRoundsGridCols(
-  t: TFunction<'translation', undefined>,
+  t: Translator,
   stageItem: StageItemWithRounds,
   tournamentData: TournamentMinimal,
   swrStagesResponse: SWRResponse,

frontend/src/components/buttons/create_stage.tsx

@@ -32,3 +32,29 @@ export default function CreateStageButton({
     </Button>
   );
 }
+
+export function CreateStageButtonLarge({
+  tournament,
+  swrStagesResponse,
+}: {
+  tournament: Tournament;
+  swrStagesResponse: SWRResponse;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Button
+      variant="outline"
+      color="green"
+      size="lg"
+      style={{ marginRight: 10, width: '25%' }}
+      onClick={async () => {
+        await createStage(tournament.id);
+        await swrStagesResponse.mutate(null);
+      }}
+      leftSection={<GoPlus size={24} />}
+    >
+      {t('add_stage_button')}
+    </Button>
+  );
+}

frontend/src/components/info/player_score.tsx

@@ -13,7 +13,7 @@ export function PlayerScore({ score, min_score, max_score, decimals }: ScoreProp
   return (
     <Progress.Root size={20}>
       <Progress.Section value={percentageScale * (score - min_score)} color="indigo">
-        <Progress.Label>{score.toFixed(decimals)}</Progress.Label>
+        <Progress.Label>{Number(score).toFixed(decimals)}</Progress.Label>
       </Progress.Section>
     </Progress.Root>
   );

frontend/src/components/modals/create_stage_item.tsx

@@ -120,6 +120,7 @@ export function CreateStageItemModal({
     },
   });
 
+  // TODO: Refactor lookups into one request.
   const teamsMap = getTeamsLookup(tournament != null ? tournament.id : -1);
   const stageItemMap = getStageItemLookup(swrStagesResponse);
 

frontend/src/components/no_content/empty_table_info.module.css

@@ -0,0 +1,40 @@
+.root {
+  padding-top: rem(80px);
+  padding-bottom: rem(120px);
+  background-color: var(--mantine-color-blue-filled);
+}
+
+.label {
+  text-align: center;
+  font-weight: 900;
+  font-size: rem(220px);
+  line-height: 1;
+  margin-bottom: calc(var(--mantine-spacing-xl) * 1.5);
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(120px);
+  }
+}
+
+.title {
+  font-family:
+    Greycliff CF,
+    var(--mantine-font-family);
+  text-align: center;
+  font-weight: 900;
+  font-size: rem(38px);
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(32px);
+  }
+}
+
+.description {
+  max-width: rem(540px);
+  margin: auto;
+  margin-top: var(--mantine-spacing-xl);
+  margin-bottom: calc(var(--mantine-spacing-xl) * 1.5);
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+}

frontend/src/components/no_content/empty_table_info.tsx

@@ -0,0 +1,44 @@
+import { Alert, Container, Group, Text, Title } from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons-react';
+import { useTranslation } from 'next-i18next';
+import React from 'react';
+import { MdOutlineConstruction } from 'react-icons/md';
+
+import classes from './empty_table_info.module.css';
+
+export function EmptyTableInfo({
+  entity_name,
+  message = '',
+}: {
+  entity_name: string;
+  message?: string;
+}) {
+  const { t } = useTranslation();
+  return (
+    <Alert
+      icon={<IconAlertCircle size={16} />}
+      title={`No ${entity_name} found`}
+      color="blue"
+      radius="lg"
+      mt={8}
+    >
+      {t('could_not_find_any_alert')} {entity_name}
+      {message}
+    </Alert>
+  );
+}
+
+export function NoContent({ title, description }: { title: string; description?: string }) {
+  return (
+    <Container>
+      <div className={classes.label}>
+        <MdOutlineConstruction />
+      </div>
+      <Title className={classes.title}>{title}</Title>
+      <Text size="lg" ta="center" className={classes.description}>
+        {description}
+      </Text>
+      <Group justify="center"></Group>
+    </Container>
+  );
+}

frontend/src/components/tables/clubs.tsx

@@ -7,8 +7,9 @@ import { Club } from '../../interfaces/club';
 import { deleteClub } from '../../services/club';
 import DeleteButton from '../buttons/delete';
 import ClubModal from '../modals/club_modal';
-import { EmptyTableInfo } from '../utils/empty_table_info';
+import { EmptyTableInfo } from '../no_content/empty_table_info';
 import RequestErrorAlert from '../utils/error_alert';
+import { TableSkeletonSingleColumn } from '../utils/skeletons';
 import TableLayout, { ThNotSortable, ThSortable, getTableState, sortTableEntries } from './table';
 
 export default function ClubsTable({ swrClubsResponse }: { swrClubsResponse: SWRResponse }) {
@@ -17,6 +18,9 @@ export default function ClubsTable({ swrClubsResponse }: { swrClubsResponse: SWR
   const { t } = useTranslation();
 
   if (swrClubsResponse.error) return <RequestErrorAlert error={swrClubsResponse.error} />;
+  if (swrClubsResponse.isLoading || swrClubsResponse.isValidating) {
+    return <TableSkeletonSingleColumn />;
+  }
 
   const rows = clubs
     .sort((p1: Club, p2: Club) => sortTableEntries(p1, p2, tableState))

frontend/src/components/tables/courts.tsx

@@ -1,27 +1,33 @@
 import { Table } from '@mantine/core';
-import { useTranslation } from 'next-i18next';
 import React from 'react';
 import { SWRResponse } from 'swr';
 
 import { Court } from '../../interfaces/court';
 import { Tournament } from '../../interfaces/tournament';
 import { deleteCourt } from '../../services/court';
 import DeleteButton from '../buttons/delete';
-import { EmptyTableInfo } from '../utils/empty_table_info';
+import { EmptyTableInfo } from '../no_content/empty_table_info';
 import RequestErrorAlert from '../utils/error_alert';
+import { TableSkeletonSingleColumn } from '../utils/skeletons';
+import { Translator } from '../utils/types';
 import TableLayout, { ThNotSortable, getTableState, sortTableEntries } from './table';
 
 export default function CourtsTable({
+  t,
   tournament,
   swrCourtsResponse,
 }: {
+  t: Translator;
   tournament: Tournament;
   swrCourtsResponse: SWRResponse;
 }) {
-  const { t } = useTranslation();
   const courts: Court[] = swrCourtsResponse.data != null ? swrCourtsResponse.data.data : [];
   const tableState = getTableState('id');
 
+  if (swrCourtsResponse.isLoading || swrCourtsResponse.isValidating) {
+    return <TableSkeletonSingleColumn />;
+  }
+
   if (swrCourtsResponse.error) return <RequestErrorAlert error={swrCourtsResponse.error} />;
 
   const rows = courts

frontend/src/components/tables/players.tsx

@@ -10,9 +10,10 @@ import DeleteButton from '../buttons/delete';
 import { PlayerScore } from '../info/player_score';
 import { WinDistribution } from '../info/player_statistics';
 import PlayerUpdateModal from '../modals/player_update_modal';
+import { EmptyTableInfo } from '../no_content/empty_table_info';
 import { DateTime } from '../utils/datetime';
-import { EmptyTableInfo } from '../utils/empty_table_info';
 import RequestErrorAlert from '../utils/error_alert';
+import { TableSkeletonSingleColumn } from '../utils/skeletons';
 import TableLayout, { ThNotSortable, ThSortable, getTableState, sortTableEntries } from './table';
 
 export function WinDistributionTitle() {
@@ -52,6 +53,10 @@ export default function PlayersTable({
 
   if (swrPlayersResponse.error) return <RequestErrorAlert error={swrPlayersResponse.error} />;
 
+  if (swrPlayersResponse.isLoading || swrPlayersResponse.isValidating) {
+    return <TableSkeletonSingleColumn />;
+  }
+
   const rows = players
     .sort((p1: Player, p2: Player) => sortTableEntries(p1, p2, tableState))
     .map((player) => (

frontend/src/components/tables/standings.tsx

@@ -7,7 +7,7 @@ import { TeamInterface } from '../../interfaces/team';
 import PlayerList from '../info/player_list';
 import { PlayerScore } from '../info/player_score';
 import { WinDistribution } from '../info/player_statistics';
-import { EmptyTableInfo } from '../utils/empty_table_info';
+import { EmptyTableInfo } from '../no_content/empty_table_info';
 import RequestErrorAlert from '../utils/error_alert';
 import { WinDistributionTitle } from './players';
 import { ThNotSortable, ThSortable, getTableState, sortTableEntries } from './table';

frontend/src/components/tables/teams.tsx

@@ -9,9 +9,10 @@ import { deleteTeam } from '../../services/team';
 import DeleteButton from '../buttons/delete';
 import PlayerList from '../info/player_list';
 import TeamUpdateModal from '../modals/team_update_modal';
+import { EmptyTableInfo } from '../no_content/empty_table_info';
 import { DateTime } from '../utils/datetime';
-import { EmptyTableInfo } from '../utils/empty_table_info';
 import RequestErrorAlert from '../utils/error_alert';
+import { TableSkeletonSingleColumn } from '../utils/skeletons';
 import TableLayout, { ThNotSortable, ThSortable, getTableState, sortTableEntries } from './table';
 
 export default function TeamsTable({
@@ -27,6 +28,10 @@ export default function TeamsTable({
   const tableState = getTableState('name');
   if (swrTeamsResponse.error) return <RequestErrorAlert error={swrTeamsResponse.error} />;
 
+  if (swrTeamsResponse.isLoading || swrTeamsResponse.isValidating) {
+    return <TableSkeletonSingleColumn />;
+  }
+
   const rows = teams
     .sort((p1: TeamInterface, p2: TeamInterface) => sortTableEntries(p1, p2, tableState))
     .map((team) => (

frontend/src/components/tables/tournaments.tsx

@@ -9,9 +9,10 @@ import { SWRResponse } from 'swr';
 import { Tournament } from '../../interfaces/tournament';
 import { deleteTournament } from '../../services/tournament';
 import DeleteButton from '../buttons/delete';
+import { EmptyTableInfo } from '../no_content/empty_table_info';
 import { DateTime } from '../utils/datetime';
-import { EmptyTableInfo } from '../utils/empty_table_info';
 import RequestErrorAlert from '../utils/error_alert';
+import { TableSkeletonSingleColumn } from '../utils/skeletons';
 import TableLayout, { ThNotSortable, ThSortable, getTableState, sortTableEntries } from './table';
 
 export default function TournamentsTable({
@@ -26,6 +27,9 @@ export default function TournamentsTable({
   if (swrTournamentsResponse.error) {
     return <RequestErrorAlert error={swrTournamentsResponse.error} />;
   }
+  if (swrTournamentsResponse.isLoading || swrTournamentsResponse.isValidating) {
+    return <TableSkeletonSingleColumn />;
+  }
 
   const tournaments: Tournament[] =
     swrTournamentsResponse.data != null ? swrTournamentsResponse.data.data : [];

frontend/src/components/tables/upcoming_matches.tsx

@@ -9,7 +9,7 @@ import { MatchCreateBodyInterface, UpcomingMatchInterface } from '../../interfac
 import { Tournament } from '../../interfaces/tournament';
 import { createMatch } from '../../services/match';
 import PlayerList from '../info/player_list';
-import { EmptyTableInfo } from '../utils/empty_table_info';
+import { EmptyTableInfo } from '../no_content/empty_table_info';
 import RequestErrorAlert from '../utils/error_alert';
 import TableLayout, { ThNotSortable, ThSortable, getTableState, sortTableEntries } from './table';