From 9a6127a9198e18acd1bab60b9f330af62bc9dc4f Mon Sep 17 00:00:00 2001 From: RoB Murdock Date: Wed, 5 Jul 2023 15:50:28 -0400 Subject: [PATCH] more conversions --- .../components/stats/PairReportTable.kt | 25 +++++++------- .../components/stats/PartyStatistics.kt | 33 +++++++++---------- .../client/components/stats/PlayerHeatmap.kt | 17 ++++++---- .../client/components/stats/TeamStatistics.kt | 18 +++++----- .../components/stats/PartyStatisticsTest.kt | 29 +++++++--------- .../stats/PlayerHeatmapBuilderTest.kt | 5 ++- .../coupling/client/stats/StatisticsPage.kt | 2 +- 7 files changed, 65 insertions(+), 64 deletions(-) diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PairReportTable.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PairReportTable.kt index 6e33a4ba06..e41c489a70 100644 --- a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PairReportTable.kt +++ b/client/components/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,11 +27,12 @@ import web.cssom.deg import web.cssom.px import kotlin.random.Random -data class PairReportTable(val pairReports: List) : DataPropsBind( - pairReportTable, -) +external interface PairReportTableProps : Props { + var pairReports: List +} -val pairReportTable by ntmFC { (pairReports) -> +@ReactFunc +val PairReportTable by nfc { (pairReports) -> div { css { display = Display.inlineBlock @@ -38,16 +40,17 @@ val pairReportTable by ntmFC { (pairReports) -> whiteSpace = WhiteSpace.normal } pairReports.mapIndexed { index, pairReport -> - add(PairReportView(pairReport), key = "$index") + PairReportView(pairReport, key = "$index") } } } -data class PairReportView(val pairReport: PairReport) : DataPropsBind( - pairReportView, -) +external interface PairReportViewProps : Props { + var pairReport: PairReport +} -private val pairReportView by ntmFC { (pairReport) -> +@ReactFunc +val PairReportView by nfc { (pairReport) -> val tweak = useMemo { Random.nextInt(8).toDouble() } div { css { diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PartyStatistics.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PartyStatistics.kt index c42d8c048a..1788fe4d5d 100644 --- a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PartyStatistics.kt +++ b/client/components/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, -) +external interface PartyStatisticsProps : Props { + var queryResults: StatisticsQuery.Results +} -val partyStatistics by ntmFC { props -> +@ReactFunc +val PartyStatistics by nfc { props -> val (party, players, _, allStats, heatmapData) = props.queryResults val (spinsUntilFullRotation, pairReports, medianSpinDuration) = allStats div { @@ -48,19 +49,17 @@ val partyStatistics by ntmFC { 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/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmap.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmap.kt index e2929bf7b6..01b04fa837 100644 --- a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmap.kt +++ b/client/components/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,12 +22,6 @@ import web.cssom.number import web.cssom.px import kotlin.random.Random -data class PlayerHeatmap( - val players: List, - val heatmapData: List>, -) : - DataPropsBind(playerHeatmap) - val heatmapTopRowClass = ClassName { } @@ -32,7 +29,13 @@ val heatmapSideRow = ClassName { display = Display.inlineBlock } -val playerHeatmap by ntmFC { (players, heatmapData) -> +external interface PlayerHeatmapProps : Props { + var players: List + var heatmapData: List> +} + +@ReactFunc +val PlayerHeatmap by nfc { (players, heatmapData) -> div { css { display = Display.inlineBlock diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/TeamStatistics.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/TeamStatistics.kt index daad49e83e..7bfc8f0fa8 100644 --- a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/stats/TeamStatistics.kt +++ b/client/components/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) +external interface TeamStatisticsProps : Props { + var spinsUntilFullRotation: Int + var activePlayerCount: Int + var medianSpinDuration: String +} -val teamStatistics by ntmFC { (spinsUntilFullRotation, activePlayerCount, medianSpinDuration) -> +@ReactFunc +val TeamStatistics by nfc { (spinsUntilFullRotation, activePlayerCount, medianSpinDuration) -> div { css { display = Display.inlineBlock diff --git a/client/components/src/test/kotlin/com/zegreatrob/coupling/client/components/stats/PartyStatisticsTest.kt b/client/components/src/test/kotlin/com/zegreatrob/coupling/client/components/stats/PartyStatisticsTest.kt index 31f1969b04..4221196f12 100644 --- a/client/components/src/test/kotlin/com/zegreatrob/coupling/client/components/stats/PartyStatisticsTest.kt +++ b/client/components/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/client/components/src/test/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmapBuilderTest.kt b/client/components/src/test/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmapBuilderTest.kt index 28984df030..c8b2b83f80 100644 --- a/client/components/src/test/kotlin/com/zegreatrob/coupling/client/components/stats/PlayerHeatmapBuilderTest.kt +++ b/client/components/src/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 index 3eec515376..9d03e991b1 100644 --- 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) }