more conversions

robertfmurdock · Jul 5, 2023 · 9a6127a · 9a6127a
1 parent c52bd72
commit 9a6127a
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 64 deletions.
diff --git a/...onents/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PairReportTable.kt b/...onents/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PairReportTable.kt
@@ -6,11 +6,12 @@ import com.zegreatrob.coupling.model.pairassignmentdocument.NeverPaired
 import com.zegreatrob.coupling.model.pairassignmentdocument.TimeResult
 import com.zegreatrob.coupling.model.pairassignmentdocument.TimeResultValue
 import com.zegreatrob.coupling.model.player.Player
-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.ChildrenBuilder
+import react.Props
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.span
 import react.useMemo
@@ -26,28 +27,30 @@ import web.cssom.deg
 import web.cssom.px
 import kotlin.random.Random
 
-data class PairReportTable(val pairReports: List<PairReport>) : DataPropsBind<PairReportTable>(
-    pairReportTable,
-)
+external interface PairReportTableProps : Props {
+    var pairReports: List<PairReport>
+}
 
-val pairReportTable by ntmFC<PairReportTable> { (pairReports) ->
+@ReactFunc
+val PairReportTable by nfc<PairReportTableProps> { (pairReports) ->
     div {
         css {
             display = Display.inlineBlock
             textAlign = TextAlign.left
             whiteSpace = WhiteSpace.normal
         }
         pairReports.mapIndexed { index, pairReport ->
-            add(PairReportView(pairReport), key = "$index")
+            PairReportView(pairReport, key = "$index")
         }
     }
 }
 
-data class PairReportView(val pairReport: PairReport) : DataPropsBind<PairReportView>(
-    pairReportView,
-)
+external interface PairReportViewProps : Props {
+    var pairReport: PairReport
+}
 
-private val pairReportView by ntmFC<PairReportView> { (pairReport) ->
+@ReactFunc
+val PairReportView by nfc<PairReportViewProps> { (pairReport) ->
     val tweak = useMemo { Random.nextInt(8).toDouble() }
     div {
         css {

diff --git a/...onents/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PartyStatistics.kt b/...onents/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PartyStatistics.kt
@@ -3,10 +3,10 @@ package com.zegreatrob.coupling.client.components.stats
 import com.zegreatrob.coupling.action.stats.StatisticsQuery
 import com.zegreatrob.coupling.client.components.ConfigHeader
 import com.zegreatrob.coupling.client.components.PageFrame
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.add
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
 import emotion.react.css
+import react.Props
 import react.dom.html.ReactHTML.div
 import web.cssom.Color
 import web.cssom.Display
@@ -23,11 +23,12 @@ val formatDistance: (Int?, Int) -> String = if (formatDistanceModule.default !=
     formatDistanceModule.unsafeCast<(Int?, Int) -> String>()
 }
 
-data class PartyStatistics(val queryResults: StatisticsQuery.Results) : DataPropsBind<PartyStatistics>(
-    partyStatistics,
-)
+external interface PartyStatisticsProps : Props {
+    var queryResults: StatisticsQuery.Results
+}
 
-val partyStatistics by ntmFC<PartyStatistics> { props ->
+@ReactFunc
+val PartyStatistics by nfc<PartyStatisticsProps> { props ->
     val (party, players, _, allStats, heatmapData) = props.queryResults
     val (spinsUntilFullRotation, pairReports, medianSpinDuration) = allStats
     div {
@@ -48,19 +49,17 @@ val partyStatistics by ntmFC<PartyStatistics> { props ->
                         flexGrow = number(0.0)
                     }
                     div {
-                        add(
-                            TeamStatistics(
-                                spinsUntilFullRotation = spinsUntilFullRotation,
-                                activePlayerCount = players.size,
-                                medianSpinDuration = medianSpinDuration?.let {
-                                    formatDistance(medianSpinDuration.millisecondsInt, 0)
-                                } ?: "",
-                            ),
+                        TeamStatistics(
+                            spinsUntilFullRotation = spinsUntilFullRotation,
+                            activePlayerCount = players.size,
+                            medianSpinDuration = medianSpinDuration?.let {
+                                formatDistance(medianSpinDuration.millisecondsInt, 0)
+                            } ?: "",
                         )
                     }
-                    add(PairReportTable(pairReports))
+                    PairReportTable(pairReports)
                 }
-                add(PlayerHeatmap(players, heatmapData))
+                PlayerHeatmap(players, heatmapData)
             }
         }
     }

diff --git a/...mponents/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmap.kt b/...mponents/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmap.kt
@@ -4,10 +4,13 @@ import com.zegreatrob.coupling.client.components.player.PlayerCard
 import com.zegreatrob.coupling.client.components.stats.heatmap.Heatmap
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.minreact.DataPropsBind
+import com.zegreatrob.minreact.ReactFunc
 import com.zegreatrob.minreact.add
+import com.zegreatrob.minreact.nfc
 import com.zegreatrob.minreact.ntmFC
 import emotion.css.ClassName
 import emotion.react.css
+import react.Props
 import react.dom.html.ReactHTML.div
 import react.useMemo
 import web.cssom.Display
@@ -19,20 +22,20 @@ import web.cssom.number
 import web.cssom.px
 import kotlin.random.Random
 
-data class PlayerHeatmap(
-    val players: List<Player>,
-    val heatmapData: List<List<Double?>>,
-) :
-    DataPropsBind<PlayerHeatmap>(playerHeatmap)
-
 val heatmapTopRowClass = ClassName {
 }
 
 val heatmapSideRow = ClassName {
     display = Display.inlineBlock
 }
 
-val playerHeatmap by ntmFC<PlayerHeatmap> { (players, heatmapData) ->
+external interface PlayerHeatmapProps : Props {
+    var players: List<Player>
+    var heatmapData: List<List<Double?>>
+}
+
+@ReactFunc
+val PlayerHeatmap by nfc<PlayerHeatmapProps> { (players, heatmapData) ->
     div {
         css {
             display = Display.inlineBlock

diff --git a/...ponents/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/TeamStatistics.kt b/...ponents/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/TeamStatistics.kt
@@ -1,8 +1,9 @@
 package com.zegreatrob.coupling.client.components.stats
 
-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.Props
 import react.dom.html.ReactHTML.div
 import react.dom.html.ReactHTML.span
 import web.cssom.Color
@@ -11,13 +12,14 @@ import web.cssom.LineStyle
 import web.cssom.VerticalAlign
 import web.cssom.px
 
-data class TeamStatistics(
-    val spinsUntilFullRotation: Int,
-    val activePlayerCount: Int,
-    val medianSpinDuration: String,
-) : DataPropsBind<TeamStatistics>(teamStatistics)
+external interface TeamStatisticsProps : Props {
+    var spinsUntilFullRotation: Int
+    var activePlayerCount: Int
+    var medianSpinDuration: String
+}
 
-val teamStatistics by ntmFC<TeamStatistics> { (spinsUntilFullRotation, activePlayerCount, medianSpinDuration) ->
+@ReactFunc
+val TeamStatistics by nfc<TeamStatisticsProps> { (spinsUntilFullRotation, activePlayerCount, medianSpinDuration) ->
     div {
         css {
             display = Display.inlineBlock

diff --git a/...ts/src/test/kotlin/com/zegreatrob/coupling/client/components/stats/PartyStatisticsTest.kt b/...ts/src/test/kotlin/com/zegreatrob/coupling/client/components/stats/PartyStatisticsTest.kt
@@ -14,7 +14,6 @@ import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.party.PartyId
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.minassert.assertIsEqualTo
-import com.zegreatrob.minreact.create
 import com.zegreatrob.testmints.setup
 import com.zegreatrob.wrapper.testinglibrary.react.TestingLibraryReact.render
 import com.zegreatrob.wrapper.testinglibrary.react.TestingLibraryReact.screen
@@ -51,10 +50,9 @@ class PartyStatisticsTest :
         )
         val report = perform(ComposeStatisticsAction(party, players, history))
     }) exercise {
-        render(
-            PartyStatistics(StatisticsQuery.Results(party, players, history, report, emptyList())).create(),
-            jso { wrapper = MemoryRouter },
-        )
+        render(jso { wrapper = MemoryRouter }) {
+            PartyStatistics(StatisticsQuery.Results(party, players, history, report, emptyList()))
+        }
     } verify { result ->
         result.baseElement.querySelectorAll("[data-pair-report]")
             .asList()
@@ -108,10 +106,9 @@ class PartyStatisticsTest :
         val report = perform(ComposeStatisticsAction(party, players, history))
         val heatmapData = perform(CalculateHeatMapAction(players, history, report.spinsUntilFullRotation))
     }) exercise {
-        render(
-            PartyStatistics(StatisticsQuery.Results(party, players, history, report, heatmapData)).create(),
-            jso { wrapper = MemoryRouter },
-        )
+        render(jso { wrapper = MemoryRouter }) {
+            PartyStatistics(StatisticsQuery.Results(party, players, history, report, heatmapData))
+        }
     } verify { wrapper ->
         wrapper.baseElement.querySelector("[data-heatmap]")
             .let { it as HTMLElement }
@@ -139,10 +136,9 @@ class PartyStatisticsTest :
         val party = PartyDetails(PartyId("2"), name = "Mathematica")
         val report = perform(ComposeStatisticsAction(party, players, emptyList()))
     }) exercise {
-        render(
-            PartyStatistics(StatisticsQuery.Results(party, players, emptyList(), report, emptyList())).create(),
-            jso { wrapper = MemoryRouter },
-        )
+        render(jso { wrapper = MemoryRouter }) {
+            PartyStatistics(StatisticsQuery.Results(party, players, emptyList(), report, emptyList()))
+        }
     } verify {
         within(screen.getByText("Spins Until Full Rotation:").parentElement)
             .getByText("3")
@@ -179,10 +175,9 @@ class PartyStatisticsTest :
         )
         val report = perform(ComposeStatisticsAction(party, players, history))
     }) exercise {
-        render(
-            PartyStatistics(StatisticsQuery.Results(party, players, history, report, emptyList())).create(),
-            jso { wrapper = MemoryRouter },
-        )
+        render(jso { wrapper = MemoryRouter }) {
+            PartyStatistics(StatisticsQuery.Results(party, players, history, report, emptyList()))
+        }
     } verify {
         within(screen.getByText("Median Spin Duration:").parentElement)
             .getByText("2 days")

diff --git a/...c/test/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmapBuilderTest.kt b/...c/test/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmapBuilderTest.kt
@@ -2,7 +2,6 @@ package com.zegreatrob.coupling.client.components.stats
 
 import com.zegreatrob.coupling.model.player.Player
 import com.zegreatrob.minassert.assertIsEqualTo
-import com.zegreatrob.minreact.create
 import com.zegreatrob.testmints.async.ScopeMint
 import com.zegreatrob.testmints.async.asyncSetup
 import com.zegreatrob.wrapper.testinglibrary.react.TestingLibraryReact.render
@@ -20,7 +19,7 @@ class PlayerHeatmapBuilderTest {
             Player(name = "moe", avatarType = null),
         )
     }) exercise {
-        render(PlayerHeatmap(players = players, heatmapData = emptyList()).create())
+        render { PlayerHeatmap(players = players, heatmapData = emptyList()) }
     } verify { wrapper ->
         wrapper.baseElement
             .querySelector(".$heatmapSideRow")!!
@@ -39,7 +38,7 @@ class PlayerHeatmapBuilderTest {
             Player(name = "moe", avatarType = null),
         )
     }) exercise {
-        render(PlayerHeatmap(players = players, heatmapData = emptyList()).create())
+        render { PlayerHeatmap(players = players, heatmapData = emptyList()) }
     } verify { wrapper ->
         wrapper.baseElement
             .querySelector(".$heatmapTopRowClass")!!

diff --git a/client/src/main/kotlin/com/zegreatrob/coupling/client/stats/StatisticsPage.kt b/client/src/main/kotlin/com/zegreatrob/coupling/client/stats/StatisticsPage.kt
@@ -10,6 +10,6 @@ val StatisticsPage = partyPageFunction { props, partyId ->
     +CouplingQuery(
         commander = props.commander,
         query = StatisticsQuery(partyId),
-        toDataprops = { _, _, queryResult -> PartyStatistics(queryResult) },
+        build = { _, _, queryResult -> PartyStatistics(queryResult) },
     ).create(key = partyId.value)
 }