feat(frontend): Add create league form

web/app/src/components/Alert/index.tsx

@@ -6,12 +6,16 @@ export type AlertData = {
   detail: string;
 }
 
-export default function Alert(props: AlertData) {
+type AlertProps = {
+  alert: AlertData
+}
+
+export default function Alert(props: AlertProps) {
   return (
-    <ChakraAlert status={props.status}>
+    <ChakraAlert status={props.alert.status}>
       <AlertIcon/>
-      <AlertTitle>{props.title}</AlertTitle>
-      <AlertDescription>{props.detail}</AlertDescription>
+      <AlertTitle>{props.alert.title}</AlertTitle>
+      <AlertDescription>{props.alert.detail}</AlertDescription>
     </ChakraAlert>
   )
 }

web/app/src/index.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import reportWebVitals from './reportWebVitals';
-import {BrowserRouter, Route, Routes} from "react-router-dom";
+import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
 import {ChakraProvider, ColorModeScript} from "@chakra-ui/react";
 import Login from "./pages/Login";
 import theme from "./theme"
 import AuthTest from "./pages/AuthTest";
 import SignUpPage from "./pages/SignUp";
-import LeagueListPage from "./pages/LeagueList";
+import LeagueListPage from "./pages/Leagues";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -23,10 +23,13 @@ root.render(
 );
 
 function Router() {
+
   return (
     <BrowserRouter basename={'/app'}>
       <Routes>
-        <Route path="/" element={<LeagueListPage/>}/>
+        <Route path="/" element={<Navigate to={'/leagues'}/>}/>
+        <Route path="/leagues" element={<LeagueListPage/>}/>
+        <Route path={"/leagues/create"} element={<LeagueListPage createFormOpen={true} />}/>
         <Route path={"/login"} element={<Login/>}/>
         <Route path={"/signup"} element={<SignUpPage/>}/>
         <Route path={"/authenticated"} element={<AuthTest/>}/>

web/app/src/layouts/auth/index.tsx

@@ -30,7 +30,7 @@ export default function AuthLayout(props: AuthLayoutProps) {
         }
 
         {props.alert &&
-          <Alert status={props.alert.status} title={props.alert.title} detail={props.alert.detail}/>
+          <Alert alert={props.alert}/>
         }
 
         <Box

web/app/src/pages/Leagues/Form.test.tsx

@@ -0,0 +1,100 @@
+import {act, render, RenderResult} from "@testing-library/react";
+import LeagueForm from "./Form";
+import {faker} from "@faker-js/faker";
+import {Simulate} from "react-dom/test-utils";
+import {randomInt} from "crypto";
+import * as helpers from '../../helpers'
+import {Api, LeaguesApi} from "../../api";
+import {fake} from "../../test";
+
+jest.mock('../../api')
+const mockApi = jest.mocked(Api)
+
+const mockedNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom') as any,
+  useNavigate: () => mockedNavigate,
+}));
+
+beforeEach(() => {
+  mockedNavigate.mockReset()
+  mockApi.prototype.leaguesApi.mockReset()
+  mockApi.prototype.parseError.mockReset()
+})
+
+describe('LeagueForm', function () {
+  it('should render', function () {
+    render(
+      <LeagueForm mode={'create'}/>
+    )
+  });
+  it('redirects to /leagues if successful', async function () {
+    jest.mocked(LeaguesApi).prototype.leaguesPost.mockResolvedValue({
+      config: {},
+      data: {
+        league: fake.league()
+      },
+      headers: {},
+      request: {},
+      status: 201,
+      statusText: "",
+    })
+    mockApi.prototype.leaguesApi.mockReturnValue(new LeaguesApi())
+
+    const result = render(
+      <LeagueForm mode={'create'}/>
+    )
+    await typeLeagueInfo(result)
+
+    const submitButton = await result.findByText("Create")
+    await act(() => {
+      Simulate.click(submitButton)
+    })
+
+    expect(mockedNavigate).toHaveBeenCalledWith('/leagues')
+  })
+
+  it('renders error from API', async () => {
+    const mockError = fake.errorResponse()
+    mockApi.prototype.parseError.mockReturnValue(mockError)
+
+    jest.mocked(LeaguesApi).prototype.leaguesPost.mockRejectedValue(false)
+    mockApi.prototype.leaguesApi.mockReturnValue(new LeaguesApi())
+
+    const result = render(
+      <LeagueForm mode={'create'}/>
+    )
+    await typeLeagueInfo(result)
+
+    const submitButton = await result.findByText("Create")
+    await act(() => {
+      Simulate.click(submitButton)
+    })
+
+    expect(mockApi.prototype.parseError).toBeCalled()
+    expect(result.getByText(mockError.title)).toBeInTheDocument()
+  })
+});
+
+
+async function typeLeagueInfo(result: RenderResult) {
+  const name = faker.random.words(randomInt(3, 10))
+
+  const nameField = await result.findByPlaceholderText("name")
+  nameField.setAttribute("value", faker.name.fullName())
+  await act(() => {
+    Simulate.change(nameField)
+  })
+
+  const slugField = await result.findByPlaceholderText("slug")
+  slugField.setAttribute("value", helpers.slugify(name))
+  await act(() => {
+    Simulate.change(slugField)
+  })
+
+  const locationField = await result.findByPlaceholderText("location")
+  locationField.setAttribute("value", faker.random.words(4))
+  await act(() => {
+    Simulate.change(locationField)
+  })
+}