I am doing a CountdownTimer. So I am showing the time left in a Text component. But then I want to h...

# compose

[codeslubber]

I am doing a CountdownTimer. So I am showing the time left in a Text component. But then I want to have a field that you can edit, and upon editing it, it will save some changes. I have used TextField before, but with a TextFieldInput that was in a state var, e.g. state { TextFieldInput("") }) But I already have a state so I wanted to put the TextFieldInput into that instance, so, something like state { TimerState() } where TimerState has the TextFieldInput in it, but not having much success with that.

The other possibility (part of why I am posting) is way back during early MVC days there was another pattern called PAC. One of the main distinctions is PAC had hierarchies of components, and each component might have its own Abstraction (model) and controller. Should I do that? Make the text input a component? and if so, how do I bubble the edit result up to the enclosing component?

[Leland Richardson [G]]

But I already have a state so I wanted to put the TextFieldInput into that instance, so, something like state { TimerState() } where TimerState has the TextFieldInput in it, but not having much success with that.

What was unsuccessful about this?

[Leland Richardson [G]]

i’m not super clear on what you’re asking, but in general if you wanted to create a component that “wrapped” a TextField, you would want to have the value / onValueChange parameters be passed through to the lower level component

[Leland Richardson [G]]

@Composable fun FancyTextField(value: String, onValueChange: (String) -> Unit) {
  TextField(value, onValueChange)
}

[codeslubber]

What happens is the editing just does not work if the outer state has a MutableState<TextFieldInput> . Not sure why .If I have a composable function, it all works, but then when I click submit, how should I get the value back into the outer view? I saw examples that have you pass the var you want it assigned to into the submethod?

[Leland Richardson [G]]

have a code snippet? sorry i’m having trouble understanding what you mean here

[codeslubber]

So I have this:

class TimerState(hours:TimeDigit = TimeDigit(0), minutes:TimeDigit = TimeDigit(0), seconds:TimeDigit = TimeDigit(0)) {
    var currentStatus:String = {
        "$hours:$minutes:$seconds"
    }()

    var amountOfSkinInput = TextFieldValue("")
    var amountOfSkin:Int = 50
}

and this does not work. I think because the input field is not a `MutableState<TextFieldValue>`right? but I can’t nest state {} so?

[codeslubber]

what does work is this:

@Composable
fun numberInput(startAt:Int, range: IntRange, units: String){
    val state = state { TextFieldValue(text = "") }
    TextField(
        value = state.value,
        //modifier = Border(Dp.Hairline, Color.Gray),
        onValueChange = {
            state.value = it
        },
        keyboardType = KeyboardType.Number,
        textStyle = TextStyle(fontSize = 64.sp)
    )
    Button(onClick = {
        if (!range.contains(state.value.text.toInt())){
            Log.d("VALIDATOR", "Out of range!")
        } else {

        }
    }){
        Text("Submit")
    }
}

but then on submit, I would have to assign this value back to the field in the outer view state.

[codeslubber]

Does that make sense?

[Leland Richardson [G]]

yeah

[Leland Richardson [G]]

so there’s a few things to think about here

[Leland Richardson [G]]

one is that i would suggest you make numberInput what we call a “controlled” composable

[Leland Richardson [G]]

there’s a lot of literature on this already on the web from react ecosystem if you search for “react controlled components”

[Leland Richardson [G]]

same concept

[Leland Richardson [G]]

but i would have number input behave more similarly to this:

@Composable
fun numberInput(
  value: Int, 
  onValueChange: (Int) -> Unit, 
  startAt:Int, 
  range: IntRange, 
  units: String
) {
  TextField(
    value = value.toString(),
    onValueChange= {
      // TODO: validation here
      onValueChange(it.toInt())
    }
  )
}

[Leland Richardson [G]]

but this is kind of skirting around the other part of your question, so i’ll try to ignore the numberInput and explain what to do here more generally

[Leland Richardson [G]]

state will only invalidate the composition when the value itself is set

[codeslubber]

yeah lemme change to that, I have done that approach before…

[codeslubber]

right so nesting a bunch of things and expecting subfields to trigger rerenders is delusional

[Leland Richardson [G]]

so if you have state { TimerState() } and you mutate a property on the TimerState instance itself, there is no way compose will recognize that and recompose

[Leland Richardson [G]]

one option you have is to use @Model

[Leland Richardson [G]]

@Model will cause properties on that class to be observable in this way

[Leland Richardson [G]]

so you could have

@Model
class TimerState(hours:TimeDigit = TimeDigit(0), minutes:TimeDigit = TimeDigit(0), seconds:TimeDigit = TimeDigit(0)) {
    var currentStatus:String = {
        "$hours:$minutes:$seconds"
    }()
    var amountOfSkinInput = TextFieldValue("")
    var amountOfSkin:Int = 50
}

[codeslubber]

I have done that too, sure.

[Leland Richardson [G]]

another way to do this is to not use @Model, and instead use the class as a value type. one way to make this easier is with kotlin’s data class

[codeslubber]

but you prefer the first approach right? (of course will end up with model eventually right)?

[codeslubber]

sure

[codeslubber]

yeah I was thinking also of doing something like Redux at some point: just have each thing like editing a field invoke a reducer, which would then spit out a new version of the whole state value

[Leland Richardson [G]]

data class TimerState(...) and then have var timerState by state { TimerState(…) }

Then when you want to have an invalidation, you can do timerState = timerState.copy(…)

[Leland Richardson [G]]

finally, there is a third option, which is to use mutableStateOf

[codeslubber]

and that would be a good way to tee up the redux approach…

[Leland Richardson [G]]

class TimerState(hours:TimeDigit = TimeDigit(0), minutes:TimeDigit = TimeDigit(0), seconds:TimeDigit = TimeDigit(0)) {
    val currentStatus:String = {
        "$hours:$minutes:$seconds"
    }()
    var amountOfSkinInput by mutableStateOf("...")
    var amountOfSkin:Int = 50
}

[Leland Richardson [G]]

so with this, you can modify amountOfSkinInput and since it is backed by a MutableState instance, it will be observed by compose

[codeslubber]

interesting!

[Leland Richardson [G]]

generally speaking, you could say:

1. “never” mutate a var when using compose unless it is a State property delegate, or a property on a @Model instance

[Leland Richardson [G]]

that is, “never” if you are expecting compose to do anything about it

[codeslubber]

Wow great. Would it be worthwhile to write some of this up on Medium or something? I feel bad that I made you school me on state management, but I was trying to start yet another component and see how far I could get with it. So in my other projects I had proceeded on the model, but was left with the impression that state is still useful in a lot of cases.

[Leland Richardson [G]]

personally, i prefer to push people towards using state and immutable value types only

[Leland Richardson [G]]

it feels easier to track what’s going on to me

[Leland Richardson [G]]

but @Model also has its uses, and others might disagree with me

[Leland Richardson [G]]

the problem with a medium article is that some of these things are still in flux and we are still discussing a lot of it internally

[Leland Richardson [G]]

so we want to hold off on anything official feeling until we have a consensus on what we should recommend

[Leland Richardson [G]]

but definitely i’ve been pining to write my own blog post on state management in compose for some time now

[Leland Richardson [G]]

i am curious about something: why are you using the TextFieldValue overload and not the String overload of TextField?

[codeslubber]

Well, so one of the reasons I was doing this is these 2 guys who do videos in the ios world, they did a stopwatch series. And they introduced the concept of a Lap. Ones they did that they had to restart the timer, etc. They did NOT do Redux, but would make so much sense: the state when it is changed, should really trigger saving the accumulated state (as a lap).

[Leland Richardson [G]]

personally i always try to avoid using this unless there’s a reason i need it

[codeslubber]

I was using that because I had EditorModel in there and then found TextFieldValue was the replacement

[codeslubber]

but I agree. Thanks so much for taking the time @Leland Richardson [G] because everything you are saying underlines what I am trying to do: keep things as spare as possible, and not fall into some of the pits we got used to in other frameworks (shared mutable state)…

[Leland Richardson [G]]

👍

[Leland Richardson [G]]

if you are interested in redux-like patterns, i wrote these up a while ago playing around with some things. you might be interested: https://gist.github.com/lelandrichardson/be118f65f19e3246e6df66d9f114dc47

[codeslubber]

oh yeah I forgot about that!

[codeslubber]

haha I just went and saw on my twitter feed that one of my cranky agile friends is excoriating the use of documentation, as it’s always out of date.. funny… the one thing I do think would have been amazing for Compose would have been to make it testable as unit tests, as much as I hate to agree with judgment billowing agile scolds… 🙂

[Leland Richardson [G]]

testing compose as unit tests will work. there’s no fundamental mismatch here, we just need to provide some utilities to do this easily

[codeslubber]

Love your reduce code @Leland Richardson [G], very nice, and clean… have you used it? or are you aware of anyone who used it in a project?

[Leland Richardson [G]]

i’ve only played around with it or some variant of it as a concept, not used it in a realistic situation

[Leland Richardson [G]]

not sure what the right names for these things ought to be, but some of them are interesting ot think about

[Leland Richardson [G]]

the history one has some interesting use cases i think

[codeslubber]

yeah, when Redux first broke, that was much discussed but then almost never see it in the wild

[codeslubber]

so for implementing audit trails, undoes, etc.

[codeslubber]

I will try and use these classes for what I am doing

[codeslubber]

@Leland Richardson [G] surprise your pest of the day has another question: do you see any value to the idea of writing some state classes and then some unit tests that use your classes?

[Leland Richardson [G]]

what do you mean by state classes?

[codeslubber]

Well one of the great things about redux is you can make state classes, like my TimerState

[codeslubber]

and then you define the changes that you allow as reducers

[codeslubber]

and then write a bunch of unit tests that prove that the reducer logic all works, so when I change the amount of skin, I want it to take the running total (with the old amount of skin) and add that to your History list, and start running a new timer with the new value

[codeslubber]

when you click stop, I will take those individual sessions and combine them into a CompoundSession… and that’s the whole thing

[codeslubber]

make sense?

[Leland Richardson [G]]

i mean if you are trying to go for something like redux, i would say that the state is just a piece of data. there’s not really anything to test. the thing you want to test is the reducer

[codeslubber]

well yeah of course

[codeslubber]

I guess I wasn’t very clear

[codeslubber]

even that for what I want to do is kind of silly, because all I am doing is basically versioning with values, but if there are ways that values might interact with each other, that logic would exist in the reducers and the proof that the chain of logical implications of an action worked would be proven by the test

[codeslubber]

I am also just thinking it would be more fun to learn the classes you wrote in some tests, or a sample project..

[codeslubber]

seriously stupid question: do the reducer classes compile for you

[codeslubber]

?

[Leland Richardson [G]]

sorry what do you mean?

[codeslubber]

I just put the reducers code you had in the gist into the project

[codeslubber]

but it does not compile.. there are clearly a few things I have to add of my own code, but there are other things that just look like compile issues

[Leland Richardson [G]]

looks like some parens got removed somewhere along the line

[Leland Richardson [G]]

is that what you meant?

[Leland Richardson [G]]

i’m copy/pasting these from a google doc so sometimes there is some… lost in translation issues

[codeslubber]

[codeslubber]

there were more fixed a lot of them…

[Leland Richardson [G]]

oh and currentComposer doesn’t exist for you 🙂

[codeslubber]

yeah

[codeslubber]

and then there’s this:

[Leland Richardson [G]]

currentComposerNonNull is the equivalent

[codeslubber]

[Leland Richardson [G]]

for dev05

[codeslubber]

ok

[Leland Richardson [G]]

currentComposer will be a public composable in dev06

[codeslubber]

nice!

[Leland Richardson [G]]

that was just some a stub i had there to explain to people before .current existed

[Leland Richardson [G]]

🙂

[Leland Richardson [G]]

half of the code i write is in google docs and not IDEs 😛 sometimes my internal compiler isn’t as good as the real thing

[codeslubber]

so am I just being a 👶🏻 ?

[codeslubber]

doesn’t like Ref either, it’s solution to import it from java.sql is of course wrong…

[Leland Richardson [G]]

class Ref<T>(var value: T)

[Leland Richardson [G]]

that is Ref’s very complicated implementation

[Leland Richardson [G]]

lol

[Leland Richardson [G]]

(potentially add a private to the front of it)

[Leland Richardson [G]]

FYI, this is a “safer” version of reduce

[Leland Richardson [G]]

@Composable fun <T> reduce(value: T, reducer: (T, T) -> T): T = {
  var result = value
  var first = false
  val ref = remember { first = true; Ref(value) }
  if (!first) {
    result = reducer(ref.value, value)
  }
  onCommit { ref.value = result }
  return result
}

[Leland Richardson [G]]

the first one wouldn’t be safe to use if compose becomes multithreaded

[codeslubber]

arguments were reversed here:

ref.value = reducer(ref.value, value)

[codeslubber]

isn’t it telling you use { or equals but not both?

[codeslubber]

(scala flashback here?…)

[Leland Richardson [G]]

where does it say that?

[codeslubber]

sorry lemme get

[codeslubber]

on reduce: the definition has an = {

[codeslubber]

just removing the = makes it compile 🙂

[Leland Richardson [G]]

oh

[Leland Richardson [G]]

yeah, also an error

[Leland Richardson [G]]

i should compile these things more

[Leland Richardson [G]]

part of the problem is i wrote them so long ago that none of these APIs were the same, and so i initially wrote them in an IDE but i “upgraded” them in a doc 🙂

[codeslubber]

down to 12 errors!

[codeslubber]

how would this compile?

// in the case of the first run, does this return null.... or do we just pass the value that came in???
@Composable
fun prev(value: T): T? {

[codeslubber]

of course it’s saying it doesn’t know what T is?

[codeslubber]

and this is not compiling:

@Composable val Ambient<T>.current: T

[codeslubber]

and this is not going:

[codeslubber]

(meaning the next and update calls…)

[Leland Richardson [G]]

sigh, one sec

[codeslubber]

sorry no rush on this if you wanna just leave me to piece out the solutions.. don’t mean to demand counter service!

[Leland Richardson [G]]

no worries

[Leland Richardson [G]]

i updated the gist

[Leland Richardson [G]]

https://gist.github.com/lelandrichardson/be118f65f19e3246e6df66d9f114dc47

[Leland Richardson [G]]

should compile now, and only uses public API

[codeslubber]

omg so it compiles

[codeslubber]

but now it’s showing me that same code generation error that the typography made appear….

[codeslubber]

😞

[codeslubber]

[codeslubber]

with the whole file commented out, it compiles and runs

[Leland Richardson [G]]

can you hover over the IllegalStateException and copy/paste it somewhere else?

[Leland Richardson [G]]

it should contain the whole stack trace

[codeslubber]

I tried so many ways?? ugh lemme try again

[Leland Richardson [G]]

i think also if you go up to the top line where it says “Build failed”, that renders the full thing on the right hand side then

[codeslubber]

e: java.lang.IllegalStateException: Backend Internal error: Exception during code generation
Element is unknownThe root cause java.util.NoSuchElementException was thrown at: androidx.compose.plugins.kotlin.compiler.lower.ComposableCallTransformer.irComposableExpr(ComposableCallTransformer.kt:1362)
	at org.jetbrains.kotlin.codegen.CompilationErrorHandler.lambda$static$0(CompilationErrorHandler.java:35)
	at org.jetbrains.kotlin.backend.jvm.JvmBackendFacade.doGenerateFilesInternal$backend_jvm(JvmBackendFacade.kt:93)
	at org.jetbrains.kotlin.backend.jvm.JvmBackendFacade.doGenerateFilesInternal$backend_jvm$default(JvmBackendFacade.kt:64)
	at org.jetbrains.kotlin.backend.jvm.JvmBackendFacade.doGenerateFilesInternal$backend_jvm(JvmBackendFacade.kt:52)
	at org.jetbrains.kotlin.backend.jvm.JvmIrCodegenFactory.generateModule(JvmIrCodegenFactory.kt:36)
	at org.jetbrains.kotlin.codegen.KotlinCodegenFacade.doGenerateFiles(KotlinCodegenFacade.java:47)
	at org.jetbrains.kotlin.codegen.KotlinCodegenFacade.compileCorrectFiles(KotlinCodegenFacade.java:39)
	at org.jetbrains.kotlin.cli.jvm.compiler.KotlinToJVMBytecodeCompiler.generate(KotlinToJVMBytecodeCompiler.kt:638)
	at org.jetbrains.kotlin.cli.jvm.compiler.KotlinToJVMBytecodeCompiler.compileModules$cli(KotlinToJVMBytecodeCompiler.kt:198)
	at org.jetbrains.kotlin.cli.jvm.K2JVMCompiler.doExecute(K2JVMCompiler.kt:172)
	at org.jetbrains.kotlin.cli.jvm.K2JVMCompiler.doExecute(K2JVMCompiler.kt:56)
	at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:85)
	at org.jetbrains.kotlin.cli.common.CLICompiler.execImpl(CLICompiler.kt:43)
	at org.jetbrains.kotlin.cli.common.CLITool.exec(CLITool.kt:104)
	at org.jetbrains.kotlin.incremental.IncrementalJvmCompilerRunner.runCompiler(IncrementalJvmCompilerRunner.kt:349)
	at org.jetbrains.kotlin.incremental.IncrementalJvmCompilerRunner.runCompiler(IncrementalJvmCompilerRunner.kt:105)
	at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compileIncrementally(IncrementalCompilerRunner.kt:237)
	at org.jetbrains.kotlin.incremental.IncrementalCompilerRunner.compile(IncrementalCompilerRunner.kt:88)
	at org.jetbrains.kotlin.daemon.CompileServiceImplBase.execIncrementalCompiler(CompileServiceImpl.kt:606)
	at org.jetbrains.kotlin.daemon.CompileServiceImplBase.access$execIncrementalCompiler(CompileServiceImpl.kt:99)
	at org.jetbrains.kotlin.daemon.CompileServiceImpl.compile(CompileServiceImpl.kt:1645)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:498)
	at sun.rmi.server.UnicastServerRef.dispatch(UnicastServerRef.java:357)
	at sun.rmi.transport.Transport$1.run(Transport.java:200)
	at sun.rmi.transport.Transport$1.run(Transport.java:197)
	at java.security.AccessController.doPrivileged(Native Method)
	at sun.rmi.transport.Transport.serviceCall(Transport.java:196)
	at sun.rmi.transport.tcp.TCPTransport.handleMessages(TCPTransport.java:573)
	at sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run0(TCPTransport.java:834)
	at sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.lambda$run$0(TCPTransport.java:688)
	at java.security.AccessController.doPrivileged(Native Method)
	at sun.rmi.transport.tcp.TCPTransport$ConnectionHandler.run(TCPTransport.java:687)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
	at java.lang.Thread.run(Thread.java:748)
Caused by: java.util.NoSuchElementException: Collection contains no element matching the predicate.
	at androidx.compose.plugins.kotlin.compiler.lower.ComposableCallTransformer.irComposableExpr(ComposableCallTransformer.kt:1362)
	at androidx.compose.plugins.kotlin.compiler.lower.ComposableCallTransformer.visitBlock(ComposableCallTransformer.kt:252)
	at org.jetbrains.kotlin.ir.visitors.IrElementTransformerVoid.visitBlock(IrElementTransformerVoid.kt:128)
	at org.jetbrains.kotlin.ir.visitors.IrElementTransformerVoid.visitBlock(IrElementTransformerVoid.kt:24)
	at org.jetbrains.kotlin.ir.expressions.impl.IrBlockImpl.accept(IrBlockImpl.kt:52)

[codeslubber]

omg, the split window was collapsed for some reason…

[Leland Richardson [G]]

java.util.NoSuchElementException was thrown at: androidx.compose.plugins.kotlin.compiler.lower.ComposableCallTransformer.irComposableExpr(ComposableCallTransformer.kt:1362)

This exception happens when the compose runtime module can’t be found on the classpath, or the newer compiler has an older version of compose runtime on the classpath (like dev03).

I’m not sure if this is the reason for your issue or not, but can you paste your build.gradle file?

[codeslubber]

sure sorry I did not get a notification about this message

[codeslubber]

I made this project using the Compose template and then updated only the gradle plugin, did see that it was using dev05 of course…

[codeslubber]

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 29

    defaultConfig {
        applicationId "com.ontometrics.dminder.suntimer"
        minSdkVersion 21
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), '<http://proguard-rules.pro|proguard-rules.pro>'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.2.0'
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.ui:ui-framework:0.1.0-dev05'
    implementation 'androidx.ui:ui-layout:0.1.0-dev05'
    implementation 'androidx.ui:ui-material:0.1.0-dev05'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev05'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

}

[codeslubber]

Looks like it does not have the compose options setting?

[codeslubber]

lemme try to add that

[codeslubber]

jesus that fixed it.. 👏🏻

[codeslubber]

thanks @Leland Richardson [G] I thought it was probably a build issue but figured if that was required the template would have it (stupid), I did add it to my other project..

[Leland Richardson [G]]

No worries. This stuff is kind of a mess right now!