refactor WIP

src/components/KarakterKepzettsegek.tsx

@@ -1,34 +1,32 @@
 import React from "react";
 import KepzettsegSelector from "./KepzettsegSelector";
 import {Osztaly} from "../domain-models/osztaly";
-import {UseFormRegisterReturn} from "react-hook-form";
 import {
     AvailableKezpettsegList,
     Kepzettseg,
     Kepzettsegek,
     KepzettsegId,
-    KepzettsegLista
 } from "../domain-models/kepzettsegek";
 import {Modifier} from "../domain-models/tulajdonsag";
 import {Faj} from "../domain-models/faj";
 
 
-function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: number, getKepzettsegListaN: (n: number) => Kepzettseg[], register: (n: number) => UseFormRegisterReturn, availableKepzettsegList: Kepzettseg[], getKepzettsegN: (n: number) => Kepzettseg}) {
-    const {title, numberOfKepzettseg, getKepzettsegListaN, register, availableKepzettsegList, getKepzettsegN} = props
+function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: number, getKepzettsegListaN: (n: number) => Kepzettseg[], kepzettsegek: KepzettsegId[], changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void}) {
+    const {title, numberOfKepzettseg, getKepzettsegListaN, kepzettsegek, changeKepzettsegek} = props
 
     const klist = Array.from(new Array(numberOfKepzettseg).keys())
 
     const preCalculated: {
         kepzettsegek: Kepzettseg[],
-        registration: UseFormRegisterReturn,
+        changeKepzettseg: (newKepzettseg: KepzettsegId) => void,
         selected: Kepzettseg,
     }[] = [];
 
     for (let i = 0; i < numberOfKepzettseg; i++) {
         preCalculated.push({
             kepzettsegek: getKepzettsegListaN(i),
-            registration: register(i),
-            selected: getKepzettsegN(i)
+            selected: Kepzettsegek[kepzettsegek[i]],
+            changeKepzettseg: (newKepzettseg: KepzettsegId) => { changeKepzettsegek([...kepzettsegek.slice(0, i), newKepzettseg, ...kepzettsegek.slice(i+1)]) }
         })
     }
 
@@ -44,8 +42,8 @@ function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg:
                     <KepzettsegSelector
                         key={title+idx}
                         kepzettsegek={preCalculated[idx].kepzettsegek}
-                        fieldRegistration={preCalculated[idx].registration}
                         selected={preCalculated[idx].selected}
+                        changeKepzettseg={preCalculated[idx].changeKepzettseg}
                     />)
                 }
             </div>
@@ -58,10 +56,10 @@ function KarakterKepzettsegek (props: {
     faj: Faj
     osztaly: Osztaly,
     t_int: number,
-    register: (fieldName: string) => UseFormRegisterReturn,
-    watch: (fieldName: string, defaultValue: KepzettsegId) => string
+    kepzettsegek: KepzettsegId[],
+    changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
 }) {
-    const { faj, osztaly, t_int, register, watch } = props
+    const { faj, osztaly, t_int, kepzettsegek, changeKepzettsegek} = props
 
     const availableKepzettsegList = AvailableKezpettsegList(osztaly)
 
@@ -76,33 +74,10 @@ function KarakterKepzettsegek (props: {
     }
     console.log('Adjusted Number of Kepzetsegek = ', numberOfKepzettseg)
 
-    const getKepzettsegN = (n: number) => Kepzettsegek[watch('kepzettseg.'+n, availableKepzettsegList[n].Id) as KepzettsegId]
-
     const getKepzettsegListaN = (n: number) => {
         let response = availableKepzettsegList;
         for (let i = 0; i < numberOfKepzettseg; i++) {
-            response = response.filter(x => i === n || x.Id !== getKepzettsegN(i).Id)
-        }
-        if (osztaly === Osztaly.Tolvaj) {
-            for (let i = 0; i < 4; i++) {
-                response = response.filter(x => x.Id !== getTolvajKepzettsegN(i).Id)
-            }
-        }
-        return response
-    }
-
-    const tolvajKepzettsegek =  KepzettsegLista.filter(k => k.Osztalyok != null && k.Osztalyok.includes(Osztaly.Tolvaj))
-    const getTolvajKepzettsegN = (n: number) => Kepzettsegek[watch('tolvaj_kepzettseg.'+n, tolvajKepzettsegek[n].Id) as KepzettsegId]
-
-    const getTolvajKepzettsegListaN = (n: number) => {
-        let response = tolvajKepzettsegek;
-        // filter out selected kepzettsegek
-        for (let i = 0; i < numberOfKepzettseg; i++) {
-            response = response.filter(x => x.Id !== getKepzettsegN(i).Id)
-        }
-        // filter out selected tolvaj kepzettsegek
-        for (let i = 0; i < 4; i++) {
-            response = response.filter(x => i === n || x.Id !== getTolvajKepzettsegN(i).Id)
+            response = response.filter(x => i === n || x.Id !== kepzettsegek[i])
         }
         return response
     }
@@ -111,18 +86,9 @@ function KarakterKepzettsegek (props: {
         <InternalKepzettsegekSelector
             title="Képzettségek"
             numberOfKepzettseg={numberOfKepzettseg}
-            availableKepzettsegList={availableKepzettsegList}
             getKepzettsegListaN={getKepzettsegListaN}
-            register={(n: number) => register('kepzettseg.' + n)}
-            getKepzettsegN={getKepzettsegN} />
-        {osztaly === Osztaly.Tolvaj &&
-            <InternalKepzettsegekSelector
-                title="Tolvaj Képzettségek"
-                numberOfKepzettseg={4}
-                availableKepzettsegList={tolvajKepzettsegek}
-                getKepzettsegListaN={getTolvajKepzettsegListaN}
-                register={(n: number) => register('tolvaj_kepzettseg.' + n)}
-                getKepzettsegN={getTolvajKepzettsegN} />}
+            changeKepzettsegek={changeKepzettsegek}
+            kepzettsegek={kepzettsegek} />
     </>
 }