From 165107c0bd2ce4da61bbac24a8e25db993d6e141 Mon Sep 17 00:00:00 2001 From: notaphplover Date: Tue, 24 Sep 2024 13:24:04 +0200 Subject: [PATCH 1/3] refactor(web-ui): update Register page without Grid2 deprecations --- .../web-ui/src/auth/pages/Register.tsx | 94 ++++++++----------- 1 file changed, 41 insertions(+), 53 deletions(-) diff --git a/packages/frontend/web-ui/src/auth/pages/Register.tsx b/packages/frontend/web-ui/src/auth/pages/Register.tsx index b6ac1cb44..d63209f3a 100644 --- a/packages/frontend/web-ui/src/auth/pages/Register.tsx +++ b/packages/frontend/web-ui/src/auth/pages/Register.tsx @@ -4,7 +4,7 @@ import { AlertTitle, Box, Button, - Grid, + Grid2, IconButton, InputAdornment, Link, @@ -49,7 +49,7 @@ export const Register = () => { <> - { alignItems="center" justifyContent="center" > - + { CORNIE - + - + - Create an account + Create account
- - + + { error={form.validation.name !== undefined} helperText={form.validation.name} /> - - + + { error={form.validation.email !== undefined} helperText={form.validation.email} /> - - + + { error={form.validation.password !== undefined} helperText={form.validation.password} /> - - + + { error={form.validation.confirmPassword !== undefined} helperText={form.validation.confirmPassword} /> - - - - - - + + + Error Unexpected error occured. Please try again later. - - - - - - + + + Success User created! We sent an email, please, check your inbox. - - - - - + + - - - - - - {"Do you have a Cornie's account?"} - - - + + + + Do you have an account?{' '} { > Sign in - - - + + +
- - + + ); From 6372b836fc16bf736467eea46de86a3fe609acbb Mon Sep 17 00:00:00 2001 From: notaphplover Date: Tue, 24 Sep 2024 17:42:23 +0200 Subject: [PATCH 2/3] fix(frontend-api-rtk-query): update default errors with serializable ones --- .../src/auth/mutations/createAuthV2.ts | 7 +++++-- .../src/games/mutations/createGamesV1.ts | 7 +++++-- .../src/games/mutations/createGamesV1Slots.ts | 7 +++++-- .../src/games/queries/getGamesSpecsV1.ts | 7 +++++-- .../frontend-api-rtk-query/src/games/queries/getGamesV1.ts | 7 +++++-- .../src/games/queries/getGamesV1GameId.ts | 7 +++++-- .../src/games/queries/getGamesV1GameIdSlotsSlotIdCards.ts | 7 +++++-- .../src/games/queries/getGamesV1Mine.ts | 7 +++++-- .../src/users/mutations/updateUsersV1Me.ts | 7 +++++-- .../src/users/queries/getUsersV1Me.ts | 7 +++++-- .../src/users/queries/getUsersV1MeDetail.ts | 7 +++++-- 11 files changed, 55 insertions(+), 22 deletions(-) diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/auth/mutations/createAuthV2.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/auth/mutations/createAuthV2.ts index d03efcfe3..2cc07785f 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/auth/mutations/createAuthV2.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/auth/mutations/createAuthV2.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; import { HttpApiParams } from '../../foundation/http/models/HttpApiParams'; @@ -70,7 +70,10 @@ export function createAuthV2( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/games/mutations/createGamesV1.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/games/mutations/createGamesV1.ts index 00e3c1740..c826e602c 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/games/mutations/createGamesV1.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/games/mutations/createGamesV1.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { BaseQueryApi } from '@reduxjs/toolkit/query'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; @@ -68,7 +68,10 @@ export function createGamesV1( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/games/mutations/createGamesV1Slots.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/games/mutations/createGamesV1Slots.ts index bad3edcaf..da3c40073 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/games/mutations/createGamesV1Slots.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/games/mutations/createGamesV1Slots.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { BaseQueryApi } from '@reduxjs/toolkit/query'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; @@ -88,7 +88,10 @@ export function createGamesV1Slots( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesSpecsV1.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesSpecsV1.ts index 48f211914..4072a6356 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesSpecsV1.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesSpecsV1.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { BaseQueryApi } from '@reduxjs/toolkit/query'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; @@ -60,7 +60,10 @@ export function getGamesSpecsV1( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1.ts index 8c0ac0c3d..ea8f3208a 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { BaseQueryApi } from '@reduxjs/toolkit/query'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; @@ -67,7 +67,10 @@ export function getGamesV1( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1GameId.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1GameId.ts index f8e3e6e0e..20afa9e7f 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1GameId.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1GameId.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { BaseQueryApi } from '@reduxjs/toolkit/query'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; @@ -65,7 +65,10 @@ export function getGamesV1GameId( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1GameIdSlotsSlotIdCards.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1GameIdSlotsSlotIdCards.ts index 9e9b9a938..05c4426c5 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1GameIdSlotsSlotIdCards.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1GameIdSlotsSlotIdCards.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { BaseQueryApi } from '@reduxjs/toolkit/query'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; @@ -68,7 +68,10 @@ export function getGamesV1GameIdSlotsSlotIdCards( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1Mine.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1Mine.ts index 571a2fcbd..d3d226f04 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1Mine.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/games/queries/getGamesV1Mine.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { BaseQueryApi } from '@reduxjs/toolkit/query'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; @@ -60,7 +60,10 @@ export function getGamesV1Mine( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/users/mutations/updateUsersV1Me.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/users/mutations/updateUsersV1Me.ts index fd1774c1b..5fea006e5 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/users/mutations/updateUsersV1Me.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/users/mutations/updateUsersV1Me.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { BaseQueryApi } from '@reduxjs/toolkit/query'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; @@ -58,7 +58,10 @@ export function updateUsersV1Me( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/users/queries/getUsersV1Me.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/users/queries/getUsersV1Me.ts index 02a71e069..0ce0aa1cc 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/users/queries/getUsersV1Me.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/users/queries/getUsersV1Me.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { BaseQueryApi } from '@reduxjs/toolkit/query'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; @@ -58,7 +58,10 @@ export function getUsersV1Me( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; diff --git a/packages/frontend/libraries/frontend-api-rtk-query/src/users/queries/getUsersV1MeDetail.ts b/packages/frontend/libraries/frontend-api-rtk-query/src/users/queries/getUsersV1MeDetail.ts index d14ee24e7..ad44b4466 100644 --- a/packages/frontend/libraries/frontend-api-rtk-query/src/users/queries/getUsersV1MeDetail.ts +++ b/packages/frontend/libraries/frontend-api-rtk-query/src/users/queries/getUsersV1MeDetail.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@cornie-js/api-http-client'; import { models as apiModels } from '@cornie-js/api-models'; -import { AppError, AppErrorKind } from '@cornie-js/frontend-common'; +import { AppErrorKind } from '@cornie-js/frontend-common'; import { BaseQueryApi } from '@reduxjs/toolkit/query'; import { SerializableAppError } from '../../foundation/error/SerializableAppError'; @@ -60,7 +60,10 @@ export function getUsersV1MeDetail( }; default: return { - error: new AppError(AppErrorKind.unknown), + error: { + kind: AppErrorKind.unknown, + message: '', + }, }; } }; From 44f58b6a2a3fa2f2e8fa331b73196cd239d8e8f5 Mon Sep 17 00:00:00 2001 From: notaphplover Date: Tue, 24 Sep 2024 17:43:34 +0200 Subject: [PATCH 3/3] refactor(web-ui): update JoinExistingGame page with Grid2 --- .../src/game/pages/JoinExistingGame.spec.tsx | 28 ++-- .../src/game/pages/JoinExistingGame.tsx | 156 +++++++++--------- .../src/scss/auth/pages/register/_page.scss | 80 ++++----- 3 files changed, 126 insertions(+), 138 deletions(-) diff --git a/packages/frontend/web-ui/src/game/pages/JoinExistingGame.spec.tsx b/packages/frontend/web-ui/src/game/pages/JoinExistingGame.spec.tsx index 3314da38e..2d68aae97 100644 --- a/packages/frontend/web-ui/src/game/pages/JoinExistingGame.spec.tsx +++ b/packages/frontend/web-ui/src/game/pages/JoinExistingGame.spec.tsx @@ -13,7 +13,7 @@ import { JoinExistingGame } from './JoinExistingGame'; describe(JoinExistingGame.name, () => { describe('when called, and useJoinExistingGame returns a fulfilled status', () => { - let joinExistingGameOkGridDisplayValue: string; + let successElement: HTMLElement | null; beforeAll(async () => { ( @@ -29,13 +29,9 @@ describe(JoinExistingGame.name, () => { , ); - const joinGameOkGrid: HTMLElement = renderResult.container.querySelector( - '.join-existing-game-ok', - ) as HTMLElement; - - joinExistingGameOkGridDisplayValue = window - .getComputedStyle(joinGameOkGrid) - .getPropertyValue('display'); + successElement = renderResult.container.querySelector( + '.join-existing-game-success', + ); }); afterAll(() => { @@ -48,12 +44,12 @@ describe(JoinExistingGame.name, () => { }); it('should show the success grid', () => { - expect(joinExistingGameOkGridDisplayValue).not.toBe('none'); + expect(successElement).not.toBeNull(); }); }); - describe('when called, and useJoinExistingGame returns a fulfilled rejected', () => { - let joinExistingGameKoGridDisplayValue: string; + describe('when called, and useJoinExistingGame returns a rejected result', () => { + let failureElement: HTMLElement | null; beforeAll(async () => { ( @@ -69,13 +65,9 @@ describe(JoinExistingGame.name, () => { , ); - const joinGameKoGrid: HTMLElement = renderResult.container.querySelector( + failureElement = renderResult.container.querySelector( '.join-existing-game-error', - ) as HTMLElement; - - joinExistingGameKoGridDisplayValue = window - .getComputedStyle(joinGameKoGrid) - .getPropertyValue('display'); + ); }); afterAll(() => { @@ -88,7 +80,7 @@ describe(JoinExistingGame.name, () => { }); it('should show the rejected grid', () => { - expect(joinExistingGameKoGridDisplayValue).not.toBe('none'); + expect(failureElement).not.toBeNull(); }); }); }); diff --git a/packages/frontend/web-ui/src/game/pages/JoinExistingGame.tsx b/packages/frontend/web-ui/src/game/pages/JoinExistingGame.tsx index e8aa9fcf4..2bbf9a6d1 100644 --- a/packages/frontend/web-ui/src/game/pages/JoinExistingGame.tsx +++ b/packages/frontend/web-ui/src/game/pages/JoinExistingGame.tsx @@ -4,11 +4,11 @@ import { AlertTitle, Box, Button, - Grid, + Grid2, Link, Typography, } from '@mui/material'; -import React from 'react'; +import React, { useEffect } from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { CircularProgressModal } from '../../common/components/CircularProgressModal'; @@ -24,22 +24,82 @@ export const JoinExistingGame = (): React.JSX.Element => { const { status, errorMessage } = useJoinExistingGame(); - const getJoinExistinGameOkDisplay = (): string => { - return status === JoinExistingGameStatus.fulfilled ? '' : 'none'; - }; + const isPending: () => boolean = (): boolean => + status === JoinExistingGameStatus.pending; - const getJoinExistinGameErrorDisplay = (): string => { - return status === JoinExistingGameStatus.rejected ? '' : 'none'; + const JoinExistingGamePanel = ({ + children, + }: { + children: React.JSX.Element | React.JSX.Element[]; + }) => { + return ( + + {children} + + + + + + + ); }; - const isPending: () => boolean = (): boolean => - status === JoinExistingGameStatus.pending; + let joinExistingGamePanel: React.JSX.Element | undefined = undefined; + + switch (status) { + case JoinExistingGameStatus.fulfilled: + joinExistingGamePanel = ( + + + + Game joined + + + + + Success + + + + ); + break; + case JoinExistingGameStatus.rejected: + joinExistingGamePanel = ( + + + + Game not joined + + + + + Error + {errorMessage} + + + + ); + break; + default: + joinExistingGamePanel = undefined; + } return ( <> - { alignItems="center" justifyContent="center" > - + { CORNIE - - - - - - - - - {'Game joined'} - - - - - - Success - - - - + - - - - {'Game not joined'} - - - - - - Error - {errorMessage} - - - - - - - - - - - - - - - - + {joinExistingGamePanel} + ); diff --git a/packages/frontend/web-ui/src/scss/auth/pages/register/_page.scss b/packages/frontend/web-ui/src/scss/auth/pages/register/_page.scss index a8d40ee8a..6fb691ee3 100644 --- a/packages/frontend/web-ui/src/scss/auth/pages/register/_page.scss +++ b/packages/frontend/web-ui/src/scss/auth/pages/register/_page.scss @@ -2,52 +2,56 @@ .register-page-container { min-height: 100vh; -} -.register-form-grid { - background-color: var(--cg-text-primary); - border-radius: 10px; - text-align: center; - color: var(--cg-bkg-primary-light); - padding: 3rem; - margin: 0rem 2rem; -} + .register-error-container { + margin-top: 1rem; + } -@media (min-width: variables.$sm) { .register-form-grid { - margin: 0; - max-width: 450px; + background-color: var(--cg-text-primary); + border-radius: 10px; + text-align: center; + color: var(--cg-bkg-primary-light); + padding: 1rem; + margin: 0rem 1rem; + + .form-text-fieldset { + margin-top: 1rem; + + &:hover { + border-radius: 5px; + box-shadow: 0px 0px 10px 10px var(--cg-bkg-secondary-light); + } + } + + .return-cornie-button { + margin-top: 1rem; + } } -} - -.register-form-title { - padding-bottom: 1.5rem; -} -.form-register-error { - margin-top: 1.5rem; - text-align: left; -} - -.form-register-success { - margin-top: 1.5rem; - text-align: left; -} + .register-form-button { + margin-top: 1rem; + margin-bottom: 1rem; + } -.register-form-grid .form-text-fieldset { - margin-top: 1.5rem; -} + .register-form-title { + padding-bottom: 1rem; + } -.register-form-grid .form-text-fieldset:hover { - border-radius: 5px; - box-shadow: 0px 0px 10px 10px var(--cg-bkg-secondary-light); -} + .form-register-error { + margin-top: 1.5rem; + text-align: left; + } -.register-form-button { - margin-top: 2rem; - margin-bottom: 2rem; + .form-register-success { + margin-top: 1rem; + text-align: left; + } } -.register-form-grid .return-cornie-button { - margin-top: 2rem; +@media (min-width: variables.$sm) { + .register-form-grid { + margin: 0; + max-width: 450px; + } }