diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/RootComponent.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/RootComponent.kt index 7a11ff6c3d..181b2f71b4 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/RootComponent.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/RootComponent.kt @@ -4,7 +4,6 @@ import com.zegreatrob.coupling.client.SessionConfig.animationsDisabled import com.zegreatrob.coupling.client.components.external.auth0.react.Auth0Provider import com.zegreatrob.coupling.client.components.external.w3c.WindowFunctions.Companion.window import com.zegreatrob.coupling.client.routing.CouplingRouter -import com.zegreatrob.minreact.add import com.zegreatrob.minreact.nfc import js.core.jso import react.Props @@ -27,7 +26,7 @@ val RootComponent by nfc { props -> skipRedirectCallback = isCallbackFromOtherProvider() useRefreshTokens = true - add(CouplingRouter(animationsDisabled, config)) + CouplingRouter(animationsDisabled, config) } } diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/incubating/Incubating.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/incubating/Incubating.kt index e50cfd1099..e625d7b526 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/incubating/Incubating.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/incubating/Incubating.kt @@ -14,11 +14,7 @@ val IncubatingPage by nfc { props -> CouplingQuery( commander = props.commander, query = graphQuery { addToSlackUrl() }, - build = { _, _, result -> - IncubatingContent( - addToSlackUrl = result.addToSlackUrl ?: return@CouplingQuery, - ) - }, + toNode = { _, _, result -> result.addToSlackUrl?.let(IncubatingContent::create) }, ) } diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/party/PartyListPage.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/party/PartyListPage.kt index e8d287e5bc..99e710e883 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/party/PartyListPage.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/party/PartyListPage.kt @@ -11,6 +11,6 @@ val PartyListPage by nfc { props -> CouplingQuery( commander = props.commander, query = graphQuery { partyList() }, - build = { _, _, result -> PartyList(result.partyList?.map(Record::data) ?: emptyList()) }, + toNode = { _, _, result -> PartyList.create(result.partyList?.map(Record::data) ?: emptyList()) }, ) } diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/routing/CouplingDataLoadWrapper.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/routing/CouplingDataLoadWrapper.kt index 9ff6586c05..6e1aa77659 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/routing/CouplingDataLoadWrapper.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/routing/CouplingDataLoadWrapper.kt @@ -3,8 +3,6 @@ package com.zegreatrob.coupling.client.routing import com.zegreatrob.coupling.client.CommandDispatcher import com.zegreatrob.coupling.client.DecoratedDispatchFunc import com.zegreatrob.coupling.client.components.DispatchFunc -import com.zegreatrob.coupling.client.create -import com.zegreatrob.minreact.DataProps import com.zegreatrob.minreact.ReactFunc import com.zegreatrob.minreact.add import com.zegreatrob.minreact.nfc @@ -18,33 +16,8 @@ import com.zegreatrob.testmints.action.async.execute import react.ChildrenBuilder import react.Props import react.ReactNode -import react.create import react.useCallback -fun

, R> ChildrenBuilder.CouplingQuery( - query: SuspendAction, - toDataprops: (ReloadFunc, DispatchFunc, R) -> P?, - commander: Commander, -) = CouplingQuery( - query = query, - toNode = { r: ReloadFunc, d: DispatchFunc, result: R -> - toDataprops(r, d, result)?.create() - }, - commander = commander, -) - -fun ChildrenBuilder.CouplingQuery( - query: SuspendAction, - build: ChildrenBuilder.(ReloadFunc, DispatchFunc, R) -> Unit, - commander: Commander, -) = CouplingQuery( - query = query, - toNode = { r: ReloadFunc, d: DispatchFunc, result: R -> - react.Fragment.create { build(r, d, result) } - }, - commander = commander, -) - external interface CouplingQueryProps : Props { var query: SuspendAction var toNode: (ReloadFunc, DispatchFunc, R) -> ReactNode? @@ -53,14 +26,14 @@ external interface CouplingQueryProps : Props { @ReactFunc val CouplingQuery by nfc> { props -> - val (query, toDataprops, commander) = props + val (query, toNode, commander) = props val getDataAsync: suspend (DataLoaderTools) -> ReactNode? = useCallback { tools -> val dispatchFunc = DecoratedDispatchFunc(commander::tracingDispatcher, tools) commander.tracingDispatcher() .execute(query) ?.let { value -> - toDataprops(tools.reloadData, dispatchFunc, value) + toNode(tools.reloadData, dispatchFunc, value) } } add( @@ -70,7 +43,7 @@ val CouplingQuery by nfc> { props -> ) } -private fun

> ChildrenBuilder.animationFrame(state: DataLoadState) = +private fun ChildrenBuilder.animationFrame(state: DataLoadState) = animationFrame { this.state = state if (state is ResolvedState) { diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/routing/CouplingRouter.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/routing/CouplingRouter.kt index bca6175350..7e50cdf4ea 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/routing/CouplingRouter.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/routing/CouplingRouter.kt @@ -26,9 +26,10 @@ import com.zegreatrob.coupling.client.stats.StatisticsPage import com.zegreatrob.coupling.client.user.Logout import com.zegreatrob.coupling.client.user.UserPage import com.zegreatrob.coupling.client.welcome.WelcomePage -import com.zegreatrob.minreact.DataPropsBind -import com.zegreatrob.minreact.ntmFC +import com.zegreatrob.minreact.ReactFunc +import com.zegreatrob.minreact.nfc import js.core.jso +import react.Props import react.create import react.router.Navigate import react.router.RouteObject @@ -37,10 +38,13 @@ import react.router.dom.createBrowserRouter import react.router.useParams import react.useMemo -data class CouplingRouter(val animationsDisabled: Boolean, val config: ClientConfig) : - DataPropsBind(couplingRouter) +external interface CouplingRouterProps : Props { + var animationsDisabled: Boolean + var config: ClientConfig +} -val couplingRouter by ntmFC { (animationsDisabled, config) -> +@ReactFunc +val CouplingRouter by nfc { (animationsDisabled, config) -> val (_, isSignedIn, isLoading) = useAuth0Data() val browserRouter = useMemo(isSignedIn, config) { createBrowserRouter( diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/slack/SlackConnectPage.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/slack/SlackConnectPage.kt index df0b457d7a..fd17de56dd 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/slack/SlackConnectPage.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/slack/SlackConnectPage.kt @@ -1,6 +1,7 @@ package com.zegreatrob.coupling.client.slack import com.zegreatrob.coupling.client.components.slack.SlackConnectPageContent +import com.zegreatrob.coupling.client.components.slack.create import com.zegreatrob.coupling.client.routing.CouplingQuery import com.zegreatrob.coupling.client.routing.PageProps import com.zegreatrob.coupling.model.Record @@ -15,8 +16,8 @@ val SlackConnectPage by nfc { props -> CouplingQuery( commander = props.commander, query = graphQuery { partyList() }, - build = { _, dispatch, result -> - SlackConnectPageContent( + toNode = { _, dispatch, result -> + SlackConnectPageContent.create( parties = result.partyList?.map(Record::data) ?: emptyList(), slackTeam = slackTeam, slackChannel = slackChannel, diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/user/UserConfig.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/user/UserConfig.kt index 08d237b4e1..aada3984a5 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/user/UserConfig.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/user/UserConfig.kt @@ -8,16 +8,18 @@ import com.zegreatrob.coupling.client.components.PageFrame import com.zegreatrob.coupling.client.components.party.GeneralControlBar import com.zegreatrob.coupling.client.party.AboutButton import com.zegreatrob.coupling.model.user.User -import com.zegreatrob.minreact.DataProps -import com.zegreatrob.minreact.ntmFC +import com.zegreatrob.minreact.ReactFunc +import com.zegreatrob.minreact.nfc +import react.Props import react.dom.html.ReactHTML.div import web.cssom.Color -data class UserConfig(val user: User?) : DataProps { - override val component = userConfig +external interface UserConfigProps : Props { + var user: User? } -private val userConfig by ntmFC { (user) -> +@ReactFunc +val UserConfig by nfc { (user) -> PageFrame( borderColor = Color("rgb(94, 84, 102)"), backgroundColor = Color("floralwhite"), diff --git a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/user/UserPage.kt b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/user/UserPage.kt index d4497dc6a5..fbb18e5be7 100644 --- a/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/user/UserPage.kt +++ b/client/src/jsMain/kotlin/com/zegreatrob/coupling/client/user/UserPage.kt @@ -9,6 +9,6 @@ val UserPage by nfc { CouplingQuery( commander = it.commander, query = graphQuery { user() }, - toDataprops = { _, _, result -> UserConfig(result.user) }, + toNode = { _, _, result -> UserConfig.create(result.user) }, ) }