porting a few more components into the new style

robertfmurdock · Jul 9, 2023 · 9b57290 · 9b57290
1 parent 89b2352
commit 9b57290
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 64 deletions.
diff --git a/...t/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/ServerMessage.kt b/...t/components/src/jsMain/kotlin/com/zegreatrob/coupling/client/components/ServerMessage.kt
@@ -2,16 +2,19 @@ package com.zegreatrob.coupling.client.components
 
 import com.zegreatrob.coupling.client.components.player.PlayerCard
 import com.zegreatrob.coupling.model.CouplingSocketMessage
-import com.zegreatrob.minreact.DataPropsBind
+import com.zegreatrob.minreact.ReactFunc
 import com.zegreatrob.minreact.add
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.nfc
+import react.Props
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.span
 
-data class ServerMessage(val message: CouplingSocketMessage) :
-    DataPropsBind<ServerMessage>(serverMessage)
+external interface ServerMessageProps : Props {
+    var message: CouplingSocketMessage
+}
 
-val serverMessage by ntmFC<ServerMessage> { (message) ->
+@ReactFunc
+val ServerMessage by nfc<ServerMessageProps> { (message) ->
     div {
         span { +message.text }
         div {

diff --git a/...c/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/AssignedPair.kt b/...c/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/AssignedPair.kt
@@ -13,11 +13,12 @@ import com.zegreatrob.coupling.model.pairassignmentdocument.callSign
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.coupling.model.player.callsign.CallSign
-import com.zegreatrob.minreact.DataPropsBind
+import com.zegreatrob.minreact.ReactFunc
 import com.zegreatrob.minreact.create
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.nfc
 import emotion.react.css
 import react.ChildrenBuilder
+import react.Props
 import react.ReactNode
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.span
@@ -43,20 +44,21 @@ import web.cssom.rotatex
 import web.cssom.url
 import web.html.HTMLElement
 
-data class AssignedPair(
-    val party: PartyDetails,
-    val pair: PinnedCouplingPair,
-    val canDrag: Boolean,
-    val swapPlayersFunc: (PinnedPlayer, String) -> Unit = { _, _ -> },
-    val pinDropFunc: PinMoveCallback = {},
-) : DataPropsBind<AssignedPair>(assignedPair)
-
 typealias PinMoveCallback = (String) -> Unit
 
 val tiltLeft = (-8).deg
 val tiltRight = 8.deg
 
-val assignedPair by ntmFC<AssignedPair> { (party, pair, canDrag, swapCallback, pinMoveCallback) ->
+external interface AssignedPairProps : Props {
+    var party: PartyDetails
+    var pair: PinnedCouplingPair
+    var canDrag: Boolean
+    var swapPlayersFunc: ((PinnedPlayer, String) -> Unit)?
+    var pinDropFunc: PinMoveCallback?
+}
+
+@ReactFunc
+val AssignedPair by nfc<AssignedPairProps> { (party, pair, canDrag, swapCallback, pinMoveCallback) ->
     val callSign = pair.callSign()
 
     val (isOver, drop) = usePinDrop(pinMoveCallback)
@@ -134,19 +136,19 @@ private fun ChildrenBuilder.callSign(callSign: CallSign) {
     }
 }
 
-private fun usePinDrop(pinMoveCallback: PinMoveCallback) = useDrop(
+private fun usePinDrop(pinMoveCallback: PinMoveCallback?) = useDrop(
     acceptItemType = pinDragItemType,
-    drop = { item -> pinMoveCallback(item["id"].unsafeCast<String>()) },
+    drop = { item -> pinMoveCallback?.invoke(item["id"].unsafeCast<String>()) },
     collect = { monitor -> monitor.isOver() },
 )
 
 private fun playerCardComponent(
     canDrag: Boolean,
-    swap: (PinnedPlayer, String) -> Unit,
+    swap: ((PinnedPlayer, String) -> Unit)?,
 ): ChildrenBuilder.(PinnedPlayer, Angle) -> Unit = if (canDrag) {
     { player, tilt ->
         playerFlipped(player.player) {
-            swappablePlayer(player, canDrag, tilt) { droppedPlayerId: String -> swap(player, droppedPlayerId) }
+            swappablePlayer(player, canDrag, tilt) { droppedPlayerId: String -> swap?.invoke(player, droppedPlayerId) }
                 .create()
         }
     }

diff --git a/...c/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/ControlPanel.kt b/...c/jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/ControlPanel.kt
@@ -1,10 +1,11 @@
 package com.zegreatrob.coupling.client.components.pairassignments
 
 import com.zegreatrob.coupling.model.party.PartyDetails
-import com.zegreatrob.minreact.DataPropsBind
+import com.zegreatrob.minreact.ReactFunc
 import com.zegreatrob.minreact.add
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.nfc
 import emotion.react.css
+import react.Props
 import react.dom.html.ReactHTML.div
 import web.cssom.BoxShadow
 import web.cssom.Color
@@ -13,9 +14,12 @@ import web.cssom.Margin
 import web.cssom.px
 import web.cssom.rgb
 
-data class ControlPanel(val party: PartyDetails) : DataPropsBind<ControlPanel>(controlPanel)
+external interface ControlPanelProps : Props {
+    var party: PartyDetails
+}
 
-val controlPanel by ntmFC<ControlPanel> { (party) ->
+@ReactFunc
+val ControlPanel by nfc<ControlPanelProps> { (party) ->
     div {
         div {
             css {

diff --git a/.../com/zegreatrob/coupling/client/components/pairassignments/CurrentPairAssignmentsPanel.kt b/.../com/zegreatrob/coupling/client/components/pairassignments/CurrentPairAssignmentsPanel.kt
@@ -13,28 +13,30 @@ import com.zegreatrob.coupling.model.pairassignmentdocument.PinnedCouplingPair
 import com.zegreatrob.coupling.model.pairassignmentdocument.PinnedPlayer
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.pin.Pin
-import com.zegreatrob.minreact.DataPropsBind
+import com.zegreatrob.minreact.ReactFunc
 import com.zegreatrob.minreact.add
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.nfc
 import csstype.PropertiesBuilder
 import emotion.react.css
 import react.ChildrenBuilder
+import react.Props
 import react.dom.html.ReactHTML.div
 import react.router.Navigate
 import react.useState
 import web.cssom.ClassName
 import web.cssom.WhiteSpace
 import web.cssom.px
 
-data class CurrentPairAssignmentsPanel(
-    val party: PartyDetails,
-    val pairAssignments: PairAssignmentDocument,
-    val setPairAssignments: (PairAssignmentDocument) -> Unit,
-    val allowSave: Boolean,
-    val dispatchFunc: DispatchFunc<out DeletePairAssignmentsCommand.Dispatcher>,
-) : DataPropsBind<CurrentPairAssignmentsPanel>(currentPairAssignmentsPanel)
+external interface CurrentPairAssignmentsPanelProps : Props {
+    var party: PartyDetails
+    var pairAssignments: PairAssignmentDocument
+    var setPairAssignments: (PairAssignmentDocument) -> Unit
+    var allowSave: Boolean
+    var dispatchFunc: DispatchFunc<out DeletePairAssignmentsCommand.Dispatcher>
+}
 
-val currentPairAssignmentsPanel by ntmFC<CurrentPairAssignmentsPanel> { props ->
+@ReactFunc
+val CurrentPairAssignmentsPanel by nfc<CurrentPairAssignmentsPanelProps> { props ->
     val (party, pairAssignments, setPairAssignments, allowSave, dispatchFunc) = props
     val (redirectUrl, setRedirectUrl) = useState<String?>(null)
     val redirectToCurrentFunc = { setRedirectUrl(party.id.currentPairsPage()) }
@@ -75,16 +77,14 @@ private fun ChildrenBuilder.pairAssignmentList(
         whiteSpace = WhiteSpace.preLine
     }
     pairAssignments.pairs.mapIndexed { index, pair ->
-        add(
-            AssignedPair(
-                party,
-                pair,
-                canDrag = allowSave,
-                swapPlayersFunc = { player: PinnedPlayer, droppedPlayerId: String ->
-                    setPairAssignments(pairAssignments.copyWithSwappedPlayers(droppedPlayerId, player, pair))
-                },
-                pinDropFunc = { pinId: String -> setPairAssignments(pairAssignments.copyWithDroppedPin(pinId, pair)) },
-            ),
+        AssignedPair(
+            party = party,
+            pair = pair,
+            canDrag = allowSave,
+            swapPlayersFunc = { player: PinnedPlayer, droppedPlayerId: String ->
+                setPairAssignments(pairAssignments.copyWithSwappedPlayers(droppedPlayerId, player, pair))
+            },
+            pinDropFunc = { pinId: String -> setPairAssignments(pairAssignments.copyWithDroppedPin(pinId, pair)) },
             key = "$index",
         )
     }

diff --git a/...sMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignments.kt b/...sMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignments.kt
@@ -57,9 +57,9 @@ private val pairAssignments by ntmFC<PairAssignments> { props ->
                 PartyBrowser(party)
                 add(PairSection(party, players, pairAssignments, allowSave, setPairs, controls))
             }
-            add(ControlPanel(party))
+            ControlPanel(party)
             add(PlayerRoster(label = "Unpaired players", partyId = party.id, players = notPairedPlayers))
-            add(ServerMessage(message), key = "${message.text} ${message.players.size}")
+            ServerMessage(message, key = "${message.text} ${message.players.size}")
         }
     }
 }

diff --git a/...Main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSectionPanel.kt b/...Main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairSectionPanel.kt
@@ -48,14 +48,12 @@ val pairSectionPanel by ntmFC<PairSectionPanel> { props ->
                     pairAssignments = pairAssignments,
                     enabled = party.animationEnabled && allowSave,
                 ) {
-                    add(
-                        CurrentPairAssignmentsPanel(
-                            party = party,
-                            pairAssignments = pairAssignments,
-                            setPairAssignments = setPairs,
-                            allowSave = allowSave,
-                            dispatchFunc = controls.dispatchFunc,
-                        ),
+                    CurrentPairAssignmentsPanel(
+                        party = party,
+                        pairAssignments = pairAssignments,
+                        setPairAssignments = setPairs,
+                        allowSave = allowSave,
+                        dispatchFunc = controls.dispatchFunc,
                     )
                 },
             )

diff --git a/...tlin/com/zegreatrob/coupling/client/components/pairassignments/spin/SpinAnimationPanel.kt b/...tlin/com/zegreatrob/coupling/client/components/pairassignments/spin/SpinAnimationPanel.kt
@@ -42,7 +42,7 @@ val spinAnimationPanel by ntmFC<SpinAnimationPanel> { (party, rosteredPairAssign
 
 private fun ChildrenBuilder.assignedPairs(party: PartyDetails, revealedPairs: List<PinnedCouplingPair>) = div {
     asDynamic()["data-testid"] = "assigned-pairs"
-    revealedPairs.forEachIndexed { index, it -> add(AssignedPair(party, it, false), key = "$index") }
+    revealedPairs.forEachIndexed { index, it -> AssignedPair(party, it, false, key = "$index") }
 }
 
 val playerSpotlightStyles = ClassName {

diff --git a/...mponents/src/jsTest/kotlin/com/zegreatrob/coupling/client/components/ServerMessageTest.kt b/...mponents/src/jsTest/kotlin/com/zegreatrob/coupling/client/components/ServerMessageTest.kt
@@ -2,7 +2,6 @@ package com.zegreatrob.coupling.client.components
 
 import com.zegreatrob.coupling.model.CouplingSocketMessage
 import com.zegreatrob.minassert.assertIsEqualTo
-import com.zegreatrob.minreact.create
 import com.zegreatrob.testmints.setup
 import com.zegreatrob.wrapper.testinglibrary.react.TestingLibraryReact.render
 import org.w3c.dom.HTMLElement
@@ -14,9 +13,7 @@ class ServerMessageTest {
     fun displaysServerMessage(): Unit = setup(object {
         val expectedMessage = "Hi it me"
     }) exercise {
-        render(
-            ServerMessage(CouplingSocketMessage(expectedMessage, emptySet(), null)).create(),
-        )
+        render(ServerMessage.create(CouplingSocketMessage(expectedMessage, emptySet(), null)))
     } verify { wrapper ->
         wrapper.baseElement.getElementsByTagName("span").item(0)
             .let { it as? HTMLElement }

diff --git a/.../zegreatrob/coupling/client/components/pairassignments/CurrentPairAssignmentsPanelTest.kt b/.../zegreatrob/coupling/client/components/pairassignments/CurrentPairAssignmentsPanelTest.kt
@@ -11,7 +11,6 @@ import com.zegreatrob.coupling.stubmodel.stubPairAssignmentDoc
 import com.zegreatrob.coupling.stubmodel.stubPartyDetails
 import com.zegreatrob.minassert.assertIsEqualTo
 import com.zegreatrob.minassert.assertIsNotEqualTo
-import com.zegreatrob.minreact.create
 import com.zegreatrob.testmints.async.asyncSetup
 import com.zegreatrob.wrapper.testinglibrary.react.TestingLibraryReact.act
 import com.zegreatrob.wrapper.testinglibrary.react.TestingLibraryReact.render
@@ -49,13 +48,13 @@ class CurrentPairAssignmentsPanelTest {
                         },
                         jso {
                             path = "*"
-                            element = CurrentPairAssignmentsPanel(
+                            element = CurrentPairAssignmentsPanel.create(
                                 party,
                                 pairAssignments,
                                 setPairAssignments = { },
                                 allowSave = true,
                                 dispatchFunc = stubDispatcher.func(),
-                            ).create()
+                            )
                         },
                     ),
                 )
@@ -90,13 +89,13 @@ class CurrentPairAssignmentsPanelTest {
                             },
                             jso {
                                 path = "*"
-                                element = CurrentPairAssignmentsPanel(
+                                element = CurrentPairAssignmentsPanel.create(
                                     party,
                                     pairAssignments,
                                     setPairAssignments = { },
                                     allowSave = true,
                                     dispatchFunc = stubDispatcher.func(),
-                                ).create()
+                                )
                             },
                         ),
                     )