porting a few more components into the new style

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

Hide file tree

Showing 6 changed files with 85 additions and 89 deletions.
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
@@ -148,8 +148,12 @@ private fun playerCardComponent(
 ): ChildrenBuilder.(PinnedPlayer, Angle) -> Unit = if (canDrag) {
     { player, tilt ->
         playerFlipped(player.player) {
-            swappablePlayer(player, canDrag, tilt) { droppedPlayerId: String -> swap?.invoke(player, droppedPlayerId) }
-                .create()
+            DraggablePlayer.create(
+                pinnedPlayer = player,
+                zoomOnHover = canDrag,
+                tilt = tilt,
+                onPlayerDrop = { droppedPlayerId: String -> swap?.invoke(player, droppedPlayerId) },
+            )
         }
     }
 } else {
@@ -176,10 +180,3 @@ private fun ChildrenBuilder.playerFlipped(player: Player, handler: () -> ReactNo
 }
 
 private fun notSwappablePlayer(player: Player, tilt: Angle) = PlayerCard(player, tilt = tilt)
-
-private fun swappablePlayer(
-    pinnedPlayer: PinnedPlayer,
-    zoomOnHover: Boolean,
-    tilt: Angle,
-    onDropSwap: (String) -> Unit,
-) = DraggablePlayer(pinnedPlayer, zoomOnHover, tilt, onDropSwap)
diff --git a/...sMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/DraggablePlayer.kt b/...sMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/DraggablePlayer.kt
@@ -2,10 +2,11 @@ package com.zegreatrob.coupling.client.components.pairassignments
 
 import com.zegreatrob.coupling.client.components.player.PlayerCard
 import com.zegreatrob.coupling.model.pairassignmentdocument.PinnedPlayer
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.add
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.create
+import com.zegreatrob.minreact.nfc
 import emotion.css.ClassName
+import react.Props
 import web.cssom.Angle
 import web.cssom.AnimationIterationCount
 import web.cssom.NamedColor
@@ -16,50 +17,47 @@ import web.cssom.ident
 import web.cssom.rotate
 import web.cssom.s
 
-data class DraggablePlayer(
-    val pinnedPlayer: PinnedPlayer,
-    val zoomOnHover: Boolean,
-    val tilt: Angle,
-    val onPlayerDrop: (String) -> Unit,
-) : DataPropsBind<DraggablePlayer>(draggablePlayer)
-
 const val playerDragItemType = "PLAYER"
 
-val draggablePlayer by ntmFC<DraggablePlayer> { (pinnedPlayer, zoomOnHover, tilt, onPlayerDrop) ->
-    add(
-        DraggableThing(
-            itemType = playerDragItemType,
-            itemId = pinnedPlayer.player.id,
-            dropCallback = onPlayerDrop,
-        ) { isOver ->
-            add(
-                PlayerCard(
-                    player = pinnedPlayer.player,
-                    tilt = tilt,
-                    className = ClassName {
-                        if (zoomOnHover) {
-                            hover {
-                                transitionProperty = TransitionProperty.all
-                                transitionTimingFunction = TransitionTimingFunction.easeIn
-                                transitionDuration = 0.2.s
-                                transform = rotate(0.deg)
-                                animationDuration = 0.5.s
-                                animationName = ident("twitch")
-                                animationDelay = 0.2.s
-                                animationIterationCount = AnimationIterationCount.infinite
-                            }
-                        }
+external interface DraggablePlayerProps : Props {
+    var pinnedPlayer: PinnedPlayer
+    var zoomOnHover: Boolean
+    var tilt: Angle
+    var onPlayerDrop: (String) -> Unit
+}
 
-                        if (isOver) {
-                            backgroundColor = NamedColor.orange
-                            animationDuration = 0.25.s
-                            animationName = ident("wiggle")
+@ReactFunc
+val DraggablePlayer by nfc<DraggablePlayerProps> { (pinnedPlayer, zoomOnHover, tilt, onPlayerDrop) ->
+    DraggableThing(
+        itemType = playerDragItemType,
+        itemId = pinnedPlayer.player.id,
+        dropCallback = onPlayerDrop,
+        handler = { isOver: Boolean ->
+            PlayerCard(
+                player = pinnedPlayer.player,
+                tilt = tilt,
+                className = ClassName {
+                    if (zoomOnHover) {
+                        hover {
+                            transitionProperty = TransitionProperty.all
+                            transitionTimingFunction = TransitionTimingFunction.easeIn
+                            transitionDuration = 0.2.s
+                            transform = rotate(0.deg)
+                            animationDuration = 0.5.s
+                            animationName = ident("twitch")
+                            animationDelay = 0.2.s
                             animationIterationCount = AnimationIterationCount.infinite
                         }
-                    },
-                ),
-                key = pinnedPlayer.player.id,
-            )
+                    }
+
+                    if (isOver) {
+                        backgroundColor = NamedColor.orange
+                        animationDuration = 0.25.s
+                        animationName = ident("wiggle")
+                        animationIterationCount = AnimationIterationCount.infinite
+                    }
+                },
+            ).create(key = pinnedPlayer.player.id)
         },
     )
 }
diff --git a/...jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/DraggableThing.kt b/...jsMain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/DraggableThing.kt
@@ -2,23 +2,25 @@ package com.zegreatrob.coupling.client.components.pairassignments
 
 import com.zegreatrob.coupling.client.components.external.reactdnd.useDrag
 import com.zegreatrob.coupling.client.components.external.reactdnd.useDrop
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+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.useRef
 import web.cssom.Display
 import web.html.HTMLElement
 
-data class DraggableThing(
-    val itemType: String,
-    val itemId: String,
-    val dropCallback: (String) -> Unit,
-    val handler: ChildrenBuilder.(isOver: Boolean) -> Unit,
-) : DataPropsBind<DraggableThing>(draggableThing)
+external interface DraggableThingProps : Props {
+    var itemType: String
+    var itemId: String
+    var dropCallback: (String) -> Unit
+    var handler: (isOver: Boolean) -> ReactNode
+}
 
-val draggableThing by ntmFC<DraggableThing> { (itemType, itemId, dropCallback, handler) ->
+@ReactFunc
+val DraggableThing by nfc<DraggableThingProps> { (itemType, itemId, dropCallback, handler) ->
     val draggableRef = useRef<HTMLElement>(null)
 
     val (_, drag) = useDrag<Unit>(itemType = itemType, itemId = itemId)
@@ -32,6 +34,6 @@ val draggableThing by ntmFC<DraggableThing> { (itemType, itemId, dropCallback, h
     div {
         css { display = Display.inlineBlock }
         ref = draggableRef
-        handler(isOver)
+        child(handler(isOver))
     }
 }
diff --git a/...ain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRow.kt b/...ain/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRow.kt
@@ -12,13 +12,14 @@ import com.zegreatrob.coupling.client.components.small
 import com.zegreatrob.coupling.model.pairassignmentdocument.PairAssignmentDocument
 import com.zegreatrob.coupling.model.pairassignmentdocument.PinnedPlayer
 import com.zegreatrob.coupling.model.party.PartyDetails
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import emotion.css.ClassName
 import emotion.react.css
 import korlibs.time.DateFormat
 import korlibs.time.DateTimeTz
 import react.ChildrenBuilder
+import react.Props
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.span
 import react.useCallback
@@ -41,16 +42,17 @@ import web.cssom.px
 import web.cssom.rgb
 import web.cssom.url
 
-data class PairAssignmentRow(
-    val party: PartyDetails,
-    val document: PairAssignmentDocument,
-    val controls: Controls<DeletePairAssignmentsCommand.Dispatcher>,
-    val windowFunctions: WindowFunctions = WindowFunctions,
-
-) :
-    DataPropsBind<PairAssignmentRow>(pairAssignmentRow)
+external interface PairAssignmentRowProps : Props {
+    var party: PartyDetails
+    var document: PairAssignmentDocument
+    var controls: Controls<DeletePairAssignmentsCommand.Dispatcher>
+    var windowFunctions: WindowFunctions?
+}
 
-private val pairAssignmentRow by ntmFC<PairAssignmentRow> { (party, document, controls, windowFuncs) ->
+@ReactFunc
+val PairAssignmentRow by nfc<PairAssignmentRowProps> { props ->
+    val (party, document, controls) = props
+    val windowFuncs = props.windowFunctions ?: WindowFunctions
     val (dispatchFunc, reload) = controls
     val onDeleteClick: () -> Unit = useCallback {
         val deleteFunc = dispatchFunc({ DeletePairAssignmentsCommand(party.id, document.id) }, { reload() })

diff --git a/...kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRowTest.kt b/...kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignmentRowTest.kt
@@ -10,7 +10,6 @@ import com.zegreatrob.coupling.model.pairassignmentdocument.PairAssignmentDocume
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.party.PartyId
 import com.zegreatrob.minassert.assertIsEqualTo
-import com.zegreatrob.minreact.create
 import com.zegreatrob.minspy.SpyData
 import com.zegreatrob.minspy.spyFunction
 import com.zegreatrob.testmints.async.asyncSetup
@@ -36,17 +35,16 @@ class PairAssignmentRowTest {
         val actor = UserEvent.setup()
     }) {
         render(
-            PairAssignmentRow(
-                party,
-                document,
-                Controls(stubDispatcher.func(), reloadSpy::spyFunction),
-                this,
-            ).create {},
+            PairAssignmentRow.create(
+                party = party,
+                document = document,
+                controls = Controls(stubDispatcher.func(), reloadSpy::spyFunction),
+                windowFunctions = this,
+            ),
             jso { wrapper = MemoryRouter },
         )
     } exercise {
         actor.click(screen.getByText("DELETE"))
-
         stubDispatcher.sendResult<DeletePairAssignmentsCommand, _>(VoidResult.Accepted)
     } verify {
         stubDispatcher.commandsDispatched<DeletePairAssignmentsCommand>()
@@ -68,12 +66,12 @@ class PairAssignmentRowTest {
         val actor = UserEvent.setup()
     }) {
         render(
-            PairAssignmentRow(
-                party,
-                document,
-                Controls(stubDispatcher.func(), reloadSpy::spyFunction),
-                this,
-            ).create {},
+            PairAssignmentRow.create(
+                party = party,
+                document = document,
+                controls = Controls(stubDispatcher.func(), reloadSpy::spyFunction),
+                windowFunctions = this,
+            ),
             jso { wrapper = MemoryRouter },
         )
     } exercise {

diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/pairassignments/list/History.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/pairassignments/list/History.kt
@@ -8,7 +8,6 @@ import com.zegreatrob.coupling.client.components.pairassignments.PairAssignmentR
 import com.zegreatrob.coupling.model.pairassignmentdocument.PairAssignmentDocument
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.ntmFC
 import emotion.react.css
 import react.dom.html.ReactHTML.div
@@ -49,7 +48,7 @@ private val history by ntmFC<History> { (party, history, controls, windowFuncs)
                 display = Display.inlineBlock
             }
             history.forEach {
-                add(PairAssignmentRow(party, it, controls, windowFuncs))
+                PairAssignmentRow(party, it, controls, windowFuncs)
             }
         }
     }