more use of new functionality - smooth transitions so far

robertfmurdock · Jul 5, 2023 · 5228aa7 · 5228aa7
1 parent 991369b
commit 5228aa7
Show file tree

Hide file tree

Showing 19 changed files with 99 additions and 96 deletions.
diff --git a/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/ConfigHeader.kt b/client/components/src/main/kotlin/com/zegreatrob/coupling/client/components/ConfigHeader.kt
@@ -8,7 +8,6 @@ import com.zegreatrob.coupling.client.components.player.addPlayerButton
 import com.zegreatrob.coupling.client.components.player.viewRetireesButton
 import com.zegreatrob.coupling.client.components.stats.statisticsButton
 import com.zegreatrob.coupling.model.party.PartyDetails
-import com.zegreatrob.minreact.add
 import com.zegreatrob.minreact.nfc
 import emotion.react.css
 import react.PropsWithChildren
@@ -60,7 +59,7 @@ val ConfigHeader by nfc<ConfigHeaderProps> { props ->
                     gridRowStart = integer(1)
                     gridRowEnd = integer(3)
                 }
-                add(PartyCard(party, 75))
+                PartyCard(party, 75)
             }
             div {
                 css {

diff --git a/.../main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignments.kt b/.../main/kotlin/com/zegreatrob/coupling/client/components/pairassignments/PairAssignments.kt
@@ -54,7 +54,7 @@ private val pairAssignments by ntmFC<PairAssignments> { props ->
         div {
             className = pairAssignmentsClassName
             div {
-                add(PartyBrowser(party))
+                PartyBrowser(party)
                 add(PairSection(party, players, pairAssignments, allowSave, setPairs, controls))
             }
             add(ControlPanel(party))

diff --git a/...omponents/src/main/kotlin/com/zegreatrob/coupling/client/components/party/CouplingLogo.kt b/...omponents/src/main/kotlin/com/zegreatrob/coupling/client/components/party/CouplingLogo.kt
@@ -1,6 +1,7 @@
 package com.zegreatrob.coupling.client.components.party
 
 import com.zegreatrob.coupling.client.components.svgPath
+import com.zegreatrob.minreact.ReactFunc
 import com.zegreatrob.minreact.nfc
 import react.Props
 import react.dom.svg.ReactSVG
@@ -11,12 +12,13 @@ external interface CouplingLogoProps : Props {
     var height: Double
 }
 
-val CouplingLogo by nfc<CouplingLogoProps> { props ->
+@ReactFunc
+val CouplingLogo by nfc<CouplingLogoProps> { (width, height) ->
     svg {
         fill = "none"
         viewBox = "0 0 36 24"
-        this.width = props.width
-        this.height = props.height
+        this.width = width
+        this.height = height
         ReactSVG.image {
             this.href = svgPath("logo")
         }

diff --git a/...ents/src/main/kotlin/com/zegreatrob/coupling/client/components/party/GeneralControlBar.kt b/...ents/src/main/kotlin/com/zegreatrob/coupling/client/components/party/GeneralControlBar.kt
@@ -1,5 +1,6 @@
 package com.zegreatrob.coupling.client.components.party
 
+import com.zegreatrob.minreact.ReactFunc
 import com.zegreatrob.minreact.nfc
 import emotion.react.css
 import react.PropsWithChildren
@@ -21,6 +22,7 @@ external interface GeneralControlBarProps : PropsWithChildren {
     var splashComponent: ReactNode
 }
 
+@ReactFunc
 val GeneralControlBar by nfc<GeneralControlBarProps> { props ->
     div {
         css {

diff --git a/...omponents/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartyBrowser.kt b/...omponents/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartyBrowser.kt
@@ -2,18 +2,23 @@ package com.zegreatrob.coupling.client.components.party
 
 import com.zegreatrob.coupling.client.components.ConfigHeader
 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.react.css
+import react.Props
 import react.dom.html.ReactHTML.div
+import web.authn.AuthenticatorTransport.Companion.nfc
 import web.cssom.Display
 import web.cssom.TextAlign
 import web.cssom.WhiteSpace
 import web.cssom.px
 
-data class PartyBrowser(val party: PartyDetails) : DataPropsBind<PartyBrowser>(partyBrowser)
+external interface PartyBrowserProps : Props {
+    var party: PartyDetails
+}
 
-val partyBrowser by ntmFC<PartyBrowser> { (party) ->
+@ReactFunc
+val PartyBrowser by nfc<PartyBrowserProps> { (party) ->
     div {
         css {
             whiteSpace = WhiteSpace.normal

diff --git a/...t/components/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartyCard.kt b/...t/components/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartyCard.kt
@@ -5,13 +5,13 @@ import com.zegreatrob.coupling.client.components.gravatar.gravatarImage
 import com.zegreatrob.coupling.client.components.pngPath
 import com.zegreatrob.coupling.client.components.visuallyHidden
 import com.zegreatrob.coupling.model.party.PartyDetails
-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 csstype.PropertiesBuilder
 import emotion.react.css
 import js.core.jso
 import react.ChildrenBuilder
+import react.Props
 import react.dom.aria.ariaHidden
 import react.dom.html.ReactHTML
 import react.dom.html.ReactHTML.div
@@ -32,9 +32,15 @@ import web.cssom.number
 import web.cssom.px
 import web.cssom.rgb
 
-data class PartyCard(val party: PartyDetails, val size: Int = 150) : DataPropsBind<PartyCard>(partyCard)
+external interface PartyCardProps : Props {
+    var party: PartyDetails
+    var size: Int?
+}
 
-val partyCard by ntmFC<PartyCard> { (party, size) ->
+@ReactFunc
+val PartyCard by nfc<PartyCardProps> { props ->
+    val (party) = props
+    val size = props.size ?: 150
     Link {
         to = party.id.currentPairsPage()
         visuallyHidden { +"Party Home Page" }
@@ -48,7 +54,7 @@ val partyCard by ntmFC<PartyCard> { (party, size) ->
 
             div {
                 css { margin = ((size * 0.02).px) }
-                add(PartyCardHeader(party, size))
+                PartyCardHeader(party, size)
                 partyGravatar(party, size)
             }
         }

diff --git a/...onents/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartyCardHeader.kt b/...onents/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartyCardHeader.kt
@@ -2,15 +2,20 @@ package com.zegreatrob.coupling.client.components.party
 
 import com.zegreatrob.coupling.client.components.CardHeader
 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.react.css
+import react.Props
 import web.cssom.Globals
 import web.cssom.None
 
-data class PartyCardHeader(val party: PartyDetails, val size: Int) : DataPropsBind<PartyCardHeader>(partyCardHeader)
+external interface PartyCardHeaderProps : Props {
+    var party: PartyDetails
+    var size: Int
+}
 
-val partyCardHeader by ntmFC<PartyCardHeader> { (party, size) ->
+@ReactFunc
+val PartyCardHeader by nfc<PartyCardHeaderProps> { (party, size) ->
     CardHeader {
         this.size = size
         css {

diff --git a/...components/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartyConfig.kt b/...components/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartyConfig.kt
@@ -13,21 +13,21 @@ import com.zegreatrob.coupling.json.toModel
 import com.zegreatrob.coupling.json.toSerializable
 import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.party.PartyId
-import com.zegreatrob.minreact.DataPropsBind
-import com.zegreatrob.minreact.TMFC
-import com.zegreatrob.minreact.add
-import com.zegreatrob.minreact.ntmFC
+import com.zegreatrob.minreact.ReactFunc
+import com.zegreatrob.minreact.nfc
+import react.Props
 import react.router.Navigate
 import react.useState
 import kotlin.js.Json
 
-data class PartyConfig<D>(val party: PartyDetails, val dispatchFunc: DispatchFunc<out D>) :
-    DataPropsBind<PartyConfig<D>>(partyConfig.unsafeCast<TMFC>())
-    where D : SavePartyCommand.Dispatcher, D : DeletePartyCommand.Dispatcher
-
-private interface PartyConfigDispatcher : SavePartyCommand.Dispatcher, DeletePartyCommand.Dispatcher
+external interface PartyConfigProps<D> : Props
+    where D : SavePartyCommand.Dispatcher, D : DeletePartyCommand.Dispatcher {
+    var party: PartyDetails
+    var dispatchFunc: DispatchFunc<out D>
+}
 
-private val partyConfig by ntmFC { (party, commandFunc): PartyConfig<PartyConfigDispatcher> ->
+@ReactFunc
+val PartyConfig by nfc<PartyConfigProps<*>> { (party, commandFunc) ->
     val isNew = party.id.value == ""
     val (values, onChange) = useForm(party.withDefaultPartyId().toSerializable().toJsonDynamic().unsafeCast<Json>())
     val updatedParty = values.correctTypes().fromJsonDynamic<JsonPartyDetails>().toModel()
@@ -39,7 +39,7 @@ private val partyConfig by ntmFC { (party, commandFunc): PartyConfig<PartyConfig
     if (redirectUrl != null) {
         Navigate { to = redirectUrl }
     } else {
-        add(PartyConfigContent(updatedParty, isNew, onChange, onSave, onDelete))
+        PartyConfigContent(updatedParty, isNew, onChange, onSave, onDelete)
     }
 }
 

diff --git a/...nts/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartyConfigContent.kt b/...nts/src/main/kotlin/com/zegreatrob/coupling/client/components/party/PartyConfigContent.kt
@@ -8,11 +8,11 @@ import com.zegreatrob.coupling.client.components.configInput
 import com.zegreatrob.coupling.client.components.gravatarLink
 import com.zegreatrob.coupling.model.party.PairingRule
 import com.zegreatrob.coupling.model.party.PartyDetails
-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.ChildrenBuilder
+import react.Props
 import react.dom.aria.ariaLabel
 import react.dom.events.ChangeEvent
 import react.dom.events.ChangeEventHandler
@@ -28,22 +28,20 @@ import web.cssom.Display
 import web.cssom.number
 import web.html.InputType
 
-data class PartyConfigContent(
-    var party: PartyDetails,
-    var isNew: Boolean?,
-    var onChange: (ChangeEvent<*>) -> Unit,
-    var onSave: () -> Unit,
-    var onDelete: (() -> Unit)?,
-) : DataPropsBind<PartyConfigContent>(partyConfigContent) {
-
-    companion object {
-        val className get() = ClassName("party-config-content")
-    }
+external interface PartyConfigContentProps : Props {
+    var party: PartyDetails
+    var isNew: Boolean?
+    var onChange: (ChangeEvent<*>) -> Unit
+    var onSave: () -> Unit
+    var onDelete: (() -> Unit)?
 }
 
-val partyConfigContent by ntmFC<PartyConfigContent> { (party, isNew, onChange, onSave, onDelete) ->
+val partyConfigContentClassName = ClassName("party-config-content")
+
+@ReactFunc
+val PartyConfigContent by nfc<PartyConfigContentProps> { (party, isNew, onChange, onSave, onDelete) ->
     ConfigFrame {
-        className = PartyConfigContent.className
+        className = partyConfigContentClassName
         backgroundColor = Color("hsla(45, 80%, 96%, 1)")
         borderColor = Color("#ff8c00")
 
@@ -54,7 +52,7 @@ val partyConfigContent by ntmFC<PartyConfigContent> { (party, isNew, onChange, o
         div {
             css { display = Display.flex }
             partyConfigEditor(party, isNew ?: false, onChange, onSave, onDelete)
-            add(PartyCard(party))
+            PartyCard(party)
         }
     }
 }
@@ -201,15 +199,16 @@ private fun ChildrenBuilder.enableBadgesInput(party: PartyDetails, onChange: (Ch
     checked = party.badgesEnabled,
 )
 
-private fun ChildrenBuilder.enableAnimationsInput(party: PartyDetails, onChange: (ChangeEvent<*>) -> Unit) = configInput(
-    labelText = "Enable Animations",
-    id = "animations-checkbox",
-    name = "animationsEnabled",
-    value = party.id.value,
-    type = InputType.checkbox,
-    onChange = onChange,
-    checked = party.animationEnabled,
-)
+private fun ChildrenBuilder.enableAnimationsInput(party: PartyDetails, onChange: (ChangeEvent<*>) -> Unit) =
+    configInput(
+        labelText = "Enable Animations",
+        id = "animations-checkbox",
+        name = "animationsEnabled",
+        value = party.id.value,
+        type = InputType.checkbox,
+        onChange = onChange,
+        checked = party.animationEnabled,
+    )
 
 private fun ChildrenBuilder.enableCallSignsInput(party: PartyDetails, onChange: (ChangeEvent<*>) -> Unit) = configInput(
     labelText = "Enable Call Signs",

diff --git a/...ents/src/main/kotlin/com/zegreatrob/coupling/client/components/spin/PrepareSpinContent.kt b/...ents/src/main/kotlin/com/zegreatrob/coupling/client/components/spin/PrepareSpinContent.kt
@@ -57,7 +57,7 @@ val prepareSpinContent by ntmFC<PrepareSpinContent> { props ->
 
     div {
         PageFrame(Color("#ff8c00"), backgroundColor = Color("#faf0d2")) {
-            div { add(PartyBrowser(party)) }
+            div { PartyBrowser(party) }
             div {
                 div {
                     spinButton(onSpin, enabled = enabled)

diff --git a/...onents/src/test/kotlin/com/zegreatrob/coupling/client/components/party/PartyConfigTest.kt b/...onents/src/test/kotlin/com/zegreatrob/coupling/client/components/party/PartyConfigTest.kt
@@ -10,7 +10,6 @@ import com.zegreatrob.coupling.model.party.PartyDetails
 import com.zegreatrob.coupling.model.party.PartyId
 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.RoleOptions
 import com.zegreatrob.wrapper.testinglibrary.react.TestingLibraryReact.act
@@ -22,6 +21,7 @@ import com.zegreatrob.wrapper.testinglibrary.react.TestingLibraryReact.within
 import js.core.jso
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.HTMLOptionElement
+import react.Fragment
 import react.ReactNode
 import react.create
 import react.router.MemoryRouter
@@ -35,13 +35,9 @@ class PartyConfigTest {
     fun willDefaultPartyThatIsMissingData() = asyncSetup(object {
         val party = PartyDetails(PartyId("1"), name = "1")
     }) exercise {
-        render(
-            PartyConfig(
-                party,
-                StubDispatchFunc(),
-            ).create(),
-            jso { wrapper = MemoryRouter },
-        )
+        render(jso { wrapper = MemoryRouter }) {
+            PartyConfig(party, StubDispatchFunc())
+        }
     } verify {
         within(screen.getByLabelText("Pairing Rule"))
             .getByRole("option", RoleOptions(selected = true))
@@ -79,8 +75,7 @@ class PartyConfigTest {
                     }
                     PathRoute {
                         path = "*"
-                        element =
-                            PartyConfig(party, stubDispatcher.func()).create()
+                        element = Fragment.create { PartyConfig(party, stubDispatcher.func()) }
                     }
                 }
             },
@@ -102,10 +97,9 @@ class PartyConfigTest {
         val party = PartyDetails(PartyId(""))
         val stubDispatcher = StubDispatcher()
     }) {
-        render(
-            PartyConfig(party, stubDispatcher.func()).create(),
-            jso { wrapper = MemoryRouter },
-        )
+        render(jso { wrapper = MemoryRouter }) {
+            PartyConfig(party, stubDispatcher.func())
+        }
     } exercise {
         screen.getByLabelText("Unique Id").let { it as? HTMLInputElement }?.value
             .also { fireEvent.submit(screen.getByRole("form")) }

diff --git a/client/src/main/kotlin/com/zegreatrob/coupling/client/demo/DemoAnimationState.kt b/client/src/main/kotlin/com/zegreatrob/coupling/client/demo/DemoAnimationState.kt
@@ -4,7 +4,7 @@ import com.benasher44.uuid.uuid4
 import com.zegreatrob.coupling.client.components.Frame
 import com.zegreatrob.coupling.client.components.pairassignments.pairAssignmentsClassName
 import com.zegreatrob.coupling.client.components.pairassignments.prepareToSpinButtonClassName
-import com.zegreatrob.coupling.client.components.party.PartyConfigContent
+import com.zegreatrob.coupling.client.components.party.partyConfigContentClassName
 import com.zegreatrob.coupling.client.components.pin.pinConfigContentClassName
 import com.zegreatrob.coupling.client.components.player.playerConfigContentClassName
 import com.zegreatrob.coupling.client.components.spin.playerSelectorClass
@@ -143,7 +143,7 @@ fun makePinSequence() = pins.flatMapIndexed { pinIndex, pin ->
 private fun String?.rangeOfStringLength() = (0..(this ?: "").length)
 
 data class MakeParty(val party: PartyDetails) : DemoAnimationState() {
-    override val descriptionSelector = ".${PartyConfigContent.className} input[name=name]"
+    override val descriptionSelector = ".$partyConfigContentClassName input[name=name]"
     override val placement = Placement.bottomStart
     override val description = """
 

diff --git a/client/src/main/kotlin/com/zegreatrob/coupling/client/demo/DemoPageFrame.kt b/client/src/main/kotlin/com/zegreatrob/coupling/client/demo/DemoPageFrame.kt
@@ -185,7 +185,7 @@ private fun ChildrenBuilder.popperDiv(
 }
 
 private fun ChildrenBuilder.partyConfigFrame(state: MakeParty) {
-    add(PartyConfigContent(state.party, true, {}, {}, {}))
+    PartyConfigContent(state.party, true, {}, {}, {})
 }
 
 private fun ChildrenBuilder.prepareSpinFrame(state: PrepareToSpin) {

diff --git a/client/src/main/kotlin/com/zegreatrob/coupling/client/party/AboutButton.kt b/client/src/main/kotlin/com/zegreatrob/coupling/client/party/AboutButton.kt
@@ -22,10 +22,7 @@ val AboutButton by nfc<Props> {
             span { +"About" }
             span {
                 css { margin = 2.px }
-                CouplingLogo {
-                    width = 27.0
-                    height = 18.0
-                }
+                CouplingLogo(width = 27.0, height = 18.0)
             }
         }
     }