add save button and remove asp.net SPA proxy

using the docker compose nginx proxy instead

Kemkas.Web/frontend/src/App.tsx

@@ -10,6 +10,11 @@ function App(props: {faro?: Faro}) {
             path: "/",
             element: <CreateCharacter faro={props.faro} />,
         },
+        {
+            path: "/:id",
+            element: <CreateCharacter faro={props.faro} />,
+            loader: args => fetch(`/Character/${args.params.id}`)
+        }
     ]);
 
     return (

Kemkas.Web/frontend/src/first-edition/components/SaveOverlayTooltip.tsx

@@ -0,0 +1,8 @@
+import {Tooltip} from "react-bootstrap";
+import React from "react";
+
+const SaveOverlayTooltip = <Tooltip id="save-tooltip">
+    A mentéssel egyedi URL-en elérhető lesz a karakter bárkinek, azonban módosítani már nem lehet, csak újat menteni.
+</Tooltip>
+
+export default SaveOverlayTooltip

Kemkas.Web/frontend/src/first-edition/pages/CreateCharacter.tsx

@@ -17,23 +17,29 @@ import {
     SetDefaultTolvajKepzettsegek,
 } from "../domain-models/kepzettsegek";
 import {CreatePDF} from "../pdf/character.pdf";
-import {KarakterDefaults} from "../domain-models/karakter";
+import {KarakterDefaults, KarakterInputs} from "../domain-models/karakter";
 import {CalculateMasodlagosErtekek} from "../domain-models/masodlagos_ertekek";
 import {KarakterInputToPdfView} from "../pdf/karakter_pdf_view";
 import JellemSelector from "../components/JellemSelector";
 import {CanLevelUp, LevelDown, LevelUp} from "../domain-models/level";
-import {Card} from "react-bootstrap";
+import {Card, OverlayTrigger} from "react-bootstrap";
 import LevelUps from "../components/LevelUps";
 import HarcosFegyverSpecializacio from "../components/HarcosFegyverSpecializacio";
 import Felszereles from '../components/Felszereles';
 import { KarakterFelszereles } from '../domain-models/felszereles';
 import {Faro} from "@grafana/faro-web-sdk";
 import {StoreNewCharacter} from "../api/character.api";
+import {useLoaderData} from "react-router-dom";
+import saveOverlayTooltip from "../components/SaveOverlayTooltip";
 
-function CreateCharacterPage(props: {faro?: Faro}) {
+function CreateCharacterPage(props: {
+    faro?: Faro,
+}) {
     const {faro} = props
 
-    let [karakter, changeKarakter] = useState(KarakterDefaults)
+    const initialKarakterInputs = useLoaderData() as KarakterInputs;
+
+    let [karakter, changeKarakter] = useState(initialKarakterInputs ?? KarakterDefaults)
 
     const tulajdonsagokFajjal = TulajdonsagokFajjal(karakter.tulajdonsagok, karakter.faj)
 
@@ -50,7 +56,6 @@ function CreateCharacterPage(props: {faro?: Faro}) {
 
     const canLevelUp = CanLevelUp(karakter)
 
-
     return (
         <div>
             <div className='container-fluid p-5 bg-black text-white text-center'>
@@ -167,19 +172,37 @@ function CreateCharacterPage(props: {faro?: Faro}) {
                     <Felszereles osztaly={karakter.osztaly} felszereles={karakter.felszereles}
                                  changeFelszereles={setFelszereles} harcosSpec={karakter.harcosSpecializaciok}/>
 
-                    <div className='d-grid gap-2 m-5'>
-                        <button className='btn btn-danger btn-lg' type='button' onClick={async () => {
-                            await StoreNewCharacter(karakter)
-                        }}>Mentés
-                        </button>
-                        <button className='btn btn-danger btn-lg' type='button' onClick={async () => {
-                            faro?.api.pushEvent('character_created', {
-                                osztaly: karakter.osztaly,
-                                szint: karakter.szint.toString()
-                            })
-                            await CreatePDF(KarakterInputToPdfView(karakter))
-                        }}>PDF
-                        </button>
+                    <div className="row">
+                        <div className="col-6">
+                            <div className='d-grid gap-2 m-5'>
+                                <OverlayTrigger placement='top' overlay={saveOverlayTooltip} delay={0} defaultShow={false} flip={false}>
+                                <button className='btn btn-danger btn-lg' type='button' onClick={async () => {
+                                    faro?.api.pushEvent('public_character_stored', {
+                                        osztaly: karakter.osztaly,
+                                        szint: karakter.szint.toString()
+                                    })
+                                    let newId = await StoreNewCharacter(karakter)
+                                    const win = window.open(`/${newId}`, '_blank');
+                                    if (win != null) {
+                                        win.focus();
+                                    }
+                                }}>Mentés
+                                </button>
+                                </OverlayTrigger>
+                            </div>
+                        </div>
+                        <div className="col-6">
+                            <div className='d-grid gap-2 m-5'>
+                                <button className='btn btn-danger btn-lg' type='button' onClick={async () => {
+                                    faro?.api.pushEvent('character_created', {
+                                        osztaly: karakter.osztaly,
+                                        szint: karakter.szint.toString()
+                                    })
+                                    await CreatePDF(KarakterInputToPdfView(karakter))
+                                }}>PDF
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </form>
             </div>

Kemkas.Web/frontend/src/setupProxy.js

@@ -1,36 +0,0 @@
-const { createProxyMiddleware } = require('http-proxy-middleware');
-const { env } = require('process');
-
-const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
-  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:40870';
-
-const context = [
-  "/weatherforecast",
-  "/_configuration",
-  "/.well-known",
-  "/Identity",
-  "/connect",
-  "/ApplyDatabaseMigrations",
-  "/_framework"
-];
-
-const onError = (err, req, resp, target) => {
-    console.error(`${err.message}`);
-}
-
-module.exports = function (app) {
-  const appProxy = createProxyMiddleware(context, {
-    target: target,
-    // Handle errors to prevent the proxy middleware from crashing when
-    // the ASP NET Core webserver is unavailable
-    onError: onError,
-    secure: false,
-    // Uncomment this line to add support for proxying websockets
-    //ws: true, 
-    headers: {
-      Connection: 'Keep-Alive'
-    }
-  });
-
-  app.use(appProxy);
-};

Kemkas.Web/frontend/src/setupTests.ts

@@ -1,31 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
-
-const localStorageMock = {
-    getItem: jest.fn(),
-    setItem: jest.fn(),
-    removeItem: jest.fn(),
-    clear: jest.fn(),
-    length: 0,
-    key: jest.fn()
-};
-global.localStorage = localStorageMock;
-
-// Mock the request issued by the react app to get the client configuration parameters.
-window.fetch = () => {
-    return Promise.resolve(
-        {
-            ok: true,
-            json: () => Promise.resolve({
-                "authority": "https://localhost:7251",
-                "client_id": "Kemkas.Web",
-                "redirect_uri": "https://localhost:7251/authentication/login-callback",
-                "post_logout_redirect_uri": "https://localhost:7251/authentication/logout-callback",
-                "response_type": "id_token token",
-                "scope": "Kemkas.WebAPI openid profile"
-            })
-        });
-};