refactor: split page into smaller components part 3

everything is nice and small now

src/components/FajSelector.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import {Faj, FajLabel} from "../domain-models/faj";
+import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj";
 import {UseFormRegisterReturn} from "react-hook-form";
 
-function FajSelector(props: {register: () => UseFormRegisterReturn}) {
+function FajSelector(props: { register: () => UseFormRegisterReturn, currentFaj: () => Faj }) {
-    const {register} = props
+    const {register, currentFaj} = props
-    return <div className='row m-2'>
+    return <>
+        <div className='row m-2'>
             <label className='col-lg-1 col-sm-2 col-form-label'>Faj</label>
             <select className='col form-select' defaultValue={Faj.Ember} {...register()}>
                 <option key={Faj.Ember} value={Faj.Ember}>{FajLabel(Faj.Ember)}</option>
@@ -26,6 +27,18 @@ function FajSelector(props: {register: () => UseFormRegisterReturn}) {
                 </optgroup>
             </select>
         </div>
+        <div className='row m-2'>
+            <label className='col-lg-1 col-sm-2 form-label'></label>
+            <div className='col'>
+                <p className='row pt-2'>
+                    {FajDescription(currentFaj())}
+                </p>
+                <ul>
+                    {FajSpecials(currentFaj()).map(((special, i) => (<li key={currentFaj() + i}>{special}</li>)))}
+                </ul>
+            </div>
+        </div>
+    </>
 }
 
 export default FajSelector

src/components/OsztalySelector.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import {
+    Osztaly,
+    OsztalyDescription,
+    OsztalyLabel,
+    OsztalyProperties,
+    OsztalySpecialSkills
+} from "../domain-models/osztaly";
+import {Faj} from "../domain-models/faj";
+import {UseFormRegisterReturn} from "react-hook-form";
+
+function OsztalySelector(props: {currentFaj: () => Faj, currentOsztaly: () => Osztaly, register: () => UseFormRegisterReturn}) {
+    const {currentFaj, currentOsztaly, register} = props;
+
+    return <>
+        <div className='row m-2'>
+            <label className='col-lg-1 col-sm-2 col-form-label'>Osztály</label>
+            <select className="col form-select" defaultValue={Osztaly.Harcos} {...register()}>
+                <optgroup label='Harcos'>
+                    <option value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option>
+                    {currentFaj() === Faj.Amazon && (
+                        <option value={Osztaly.Amazon}>{OsztalyLabel(Osztaly.Amazon)}</option>) }
+                    <option value={Osztaly.Barbar}>{OsztalyLabel(Osztaly.Barbar)}</option>
+                    <option value={Osztaly.Ijasz}>{OsztalyLabel(Osztaly.Ijasz)}</option>
+                    <option value={Osztaly.Kaloz}>{OsztalyLabel(Osztaly.Kaloz)}</option>
+                </optgroup>
+                <option value={Osztaly.Pap}>{OsztalyLabel(Osztaly.Pap)}</option>
+                {currentFaj() !== Faj.Amazon && (<option value={Osztaly.Tolvaj}>{OsztalyLabel(Osztaly.Tolvaj)}</option>)}
+                {![Faj.Osember, Faj.Amazon].includes(currentFaj()) && (
+                    <optgroup label='Varázsló'>
+                        <option value={Osztaly.Varazslo}>{OsztalyLabel(Osztaly.Varazslo)}</option>
+                        <option value={Osztaly.Illuzionista}>{OsztalyLabel(Osztaly.Illuzionista)}</option>
+                    </optgroup>
+                )}
+            </select>
+        </div>
+        <div className='row m-2'>
+            <label className='col-lg-1 col-sm-2 form-label'></label>
+            <div className='col' >
+                <p className='row pt-2'>
+                    {OsztalyDescription(currentOsztaly())}
+                </p>
+                <ul>
+                    {OsztalyProperties(currentOsztaly()).map(((special, i) => (<li key={currentOsztaly() + i}>{special}</li>)))}
+                </ul>
+                <p className='d-inline-flex gap-1'>
+                    {OsztalySpecialSkills(currentOsztaly()).map(skill => (
+                        <button
+                            key={'btn' + skill.Id}
+                            className='btn btn-outline-dark'
+                            type='button'
+                            data-bs-toggle="collapse"
+                            data-bs-target={"#collapse-"+skill.Id}
+                            aria-expanded="false"
+                            aria-controls="collapseExample"
+                        >
+                            {skill.Name}
+                        </button>
+                    ))}
+                </p>
+                {OsztalySpecialSkills(currentOsztaly()).map(skill => (
+                    <div key={'collapse'+skill.Id} className="collapse" id={'collapse-' + skill.Id}>
+                        <div className="card card-body">
+                            {skill.Description}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    </>
+}
+
+export default OsztalySelector;

src/pages/CreateCharacter.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import './CreateCharacter.css'
 import {useForm} from "react-hook-form";
-import {Faj, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj";
+import {Faj} from "../domain-models/faj";
-import {
+import {Osztaly} from "../domain-models/osztaly"
-    Osztaly,
-    OsztalyDescription,
-    OsztalyLabel,
-    OsztalyProperties,
-    OsztalySpecialSkills
-} from "../domain-models/osztaly"
 import FajSelector from "../components/FajSelector";
 import Tulajdonsagok from "../components/Tulajdonsagok";
+import OsztalySelector from "../components/OsztalySelector";
+
+const FAJ_FIELD_NAME = 'faj'
+const OSZTALY_FIELD_NAME = 'osztaly'
 
 function CreateCharacterPage() {
     const {
@@ -22,9 +20,9 @@ function CreateCharacterPage() {
     } = useForm()
     const sendForm = (data: any) => console.log(data)
 
-    const currentFaj = () => watch().faj || Faj.Ember
+    const currentFaj = () => watch(FAJ_FIELD_NAME, Faj.Ember)
 
-    const currentOsztaly = () => watch().osztaly || Osztaly.Harcos
+    const currentOsztaly = () => watch(OSZTALY_FIELD_NAME, Osztaly.Harcos)
 
     return (
         <div className='row'>
@@ -42,78 +40,26 @@ function CreateCharacterPage() {
                                defaultValue='Névtelen Kalandozó' {...register('nev', {required: true})} />
                         {errors.nev && <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>}
                     </div>
-                    <FajSelector register={() => register('faj', {required: true})} />
+                    <FajSelector
-                    <div className='row m-2'>
+                        register={() => register(FAJ_FIELD_NAME, {required: true})}
-                        <label className='col-lg-1 col-sm-2 form-label'></label>
+                        currentFaj={currentFaj}
-                        <div className='col'>
+                    />
-                            <p className='row pt-2'>
-                                {FajDescription(currentFaj())}
-                            </p>
-                            <ul>
-                                {FajSpecials(currentFaj()).map(((special, i) => (<li key={currentFaj()+i}>{special}</li>)))}
-                            </ul>
-                        </div>
-                    </div>
                     <hr/>
-                    <Tulajdonsagok currentFaj={currentFaj} watch={watch} setValue={setValue} register={register} />
+                    <Tulajdonsagok
+                        currentFaj={currentFaj}
+                        watch={watch}
+                        setValue={setValue}
+                        register={register}
+                    />
                     <hr />
                     <div className='row'>
                         <h5 className='col-lg-2 col-sm-4 align-self-center'>Tanult</h5>
                     </div>
-                    <div className='row m-2'>
+                    <OsztalySelector
-                        <label className='col-lg-1 col-sm-2 col-form-label'>Osztály</label>
+                        currentFaj={currentFaj}
-                        <select className="col form-select" defaultValue={Osztaly.Harcos} {...register('osztaly', {required: true})}>
+                        currentOsztaly={currentOsztaly}
-                            <optgroup label='Harcos'>
+                        register={() => register(OSZTALY_FIELD_NAME, {required: true})}
-                                <option value={Osztaly.Harcos}>{OsztalyLabel(Osztaly.Harcos)}</option>
+                    />
-                                {currentFaj() === Faj.Amazon && (
-                                    <option value={Osztaly.Amazon}>{OsztalyLabel(Osztaly.Amazon)}</option>) }
-                                <option value={Osztaly.Barbar}>{OsztalyLabel(Osztaly.Barbar)}</option>
-                                <option value={Osztaly.Ijasz}>{OsztalyLabel(Osztaly.Ijasz)}</option>
-                                <option value={Osztaly.Kaloz}>{OsztalyLabel(Osztaly.Kaloz)}</option>
-                            </optgroup>
-                            <option value={Osztaly.Pap}>{OsztalyLabel(Osztaly.Pap)}</option>
-                            {currentFaj() !== Faj.Amazon && (<option value={Osztaly.Tolvaj}>{OsztalyLabel(Osztaly.Tolvaj)}</option>)}
-                            {![Faj.Osember, Faj.Amazon].includes(currentFaj()) && (
-                                <optgroup label='Varázsló'>
-                                    <option value={Osztaly.Varazslo}>{OsztalyLabel(Osztaly.Varazslo)}</option>
-                                    <option value={Osztaly.Illuzionista}>{OsztalyLabel(Osztaly.Illuzionista)}</option>
-                                </optgroup>
-                            )}
-                        </select>
-                    </div>
-                    <div className='row m-2'>
-                        <label className='col-lg-1 col-sm-2 form-label'></label>
-                        <div className='col' >
-                            <p className='row pt-2'>
-                                {OsztalyDescription(currentOsztaly())}
-                            </p>
-                            <ul>
-                                {OsztalyProperties(currentOsztaly()).map(((special, i) => (<li key={currentOsztaly() + i}>{special}</li>)))}
-                            </ul>
-                            <p className='d-inline-flex gap-1'>
-                            {OsztalySpecialSkills(currentOsztaly()).map(skill => (
-                                <button
-                                    key={'btn' + skill.Id}
-                                    className='btn btn-outline-dark'
-                                    type='button'
-                                    data-bs-toggle="collapse"
-                                    data-bs-target={"#collapse-"+skill.Id}
-                                    aria-expanded="false"
-                                    aria-controls="collapseExample"
-                                >
-                                    {skill.Name}
-                                </button>
-                            ))}
-                            </p>
-                            {OsztalySpecialSkills(currentOsztaly()).map(skill => (
-                                <div key={'collapse'+skill.Id} className="collapse" id={'collapse-' + skill.Id}>
-                                    <div className="card card-body">
-                                        {skill.Description}
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
 
                     <div className='d-grid gap-2'>
                         <button className='btn btn-danger btn-lg' type='submit'>Létrehozás</button>