Migrate MedicalHistoryDiagnosisWithTreatment to jetpack compose (#5593)

https://app.shortcut.com/simpledotorg/story/16595/migrate-hypertension-and-diabetes-diagnosis-to-ui-compose

<img width="1198" height="2531" alt="Screenshot_20250908_140009"
src="https://github.com/user-attachments/assets/cd2044cd-411e-40b8-bd2d-e335caa10456"
/>

<img width="1198" height="2531" alt="Screenshot_20250908_141940"
src="https://github.com/user-attachments/assets/f46bfff0-3e7f-4b33-8ada-4ac69329a720"
/>

---------

Co-authored-by: sagarwal <[email protected]>

Author: siddh1004

app/src/main/java/org/simple/clinic/medicalhistory/MedicalHistoryDiagnosisWithTreatment.kt

@@ -4,8 +4,6 @@ import android.content.Context
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
-import android.view.View.GONE
-import android.view.View.VISIBLE
 import android.view.ViewGroup
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.layout.Arrangement
@@ -18,6 +16,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.stringResource
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.jakewharton.rxbinding3.view.clicks
 import com.spotify.mobius.functions.Consumer
@@ -35,7 +34,6 @@ import org.simple.clinic.di.injector
 import org.simple.clinic.feature.Feature
 import org.simple.clinic.feature.Features
 import org.simple.clinic.medicalhistory.Answer
-import org.simple.clinic.medicalhistory.MedicalHistoryQuestion
 import org.simple.clinic.medicalhistory.MedicalHistoryQuestion.DiagnosedWithDiabetes
 import org.simple.clinic.medicalhistory.MedicalHistoryQuestion.DiagnosedWithHypertension
 import org.simple.clinic.medicalhistory.MedicalHistoryQuestion.IsOnDiabetesTreatment
@@ -45,6 +43,7 @@ import org.simple.clinic.medicalhistory.SelectDiagnosisErrorDialog
 import org.simple.clinic.medicalhistory.SelectOngoingDiabetesTreatmentErrorDialog
 import org.simple.clinic.medicalhistory.SelectOngoingHypertensionTreatmentErrorDialog
 import org.simple.clinic.medicalhistory.ui.HistoryContainer
+import org.simple.clinic.medicalhistory.ui.MedicalHistoryDiagnosisWithTreatment
 import org.simple.clinic.medicalhistory.ui.TobaccoQuestion
 import org.simple.clinic.navigation.v2.Router
 import org.simple.clinic.navigation.v2.ScreenKey
@@ -98,15 +97,12 @@ class NewMedicalHistoryScreen : BaseScreen<
   private val nextButton
     get() = binding.nextButton
 
-  private val hypertensionDiagnosis
-    get() = binding.hypertensionDiagnosis
-
-  private val diabetesDiagnosis
-    get() = binding.diabetesDiagnosis
-
   private var showSmokerQuestion by mutableStateOf(false)
   private var showSmokelessTobaccoQuestion by mutableStateOf(false)
   private var showDiabetesQuestion by mutableStateOf(false)
+  private var showHypertensionTreatmentQuestion by mutableStateOf(false)
+  private var showDiabetesTreatmentQuestion by mutableStateOf(false)
+  private var showDiabetesDiagnosis by mutableStateOf(false)
   private var ongoingMedicalHistoryEntry by mutableStateOf<OngoingMedicalHistoryEntry?>(null)
 
   private val composeView
@@ -175,6 +171,28 @@ class NewMedicalHistoryScreen : BaseScreen<
                       .padding(dimensionResource(R.dimen.spacing_8)),
               verticalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.spacing_8))
           ) {
+            MedicalHistoryDiagnosisWithTreatment(
+                diagnosisLabel = stringResource(R.string.medicalhistory_diagnosis_hypertension_required),
+                diagnosisQuestion = DiagnosedWithHypertension,
+                diagnosisAnswer = ongoingMedicalHistoryEntry?.diagnosedWithHypertension,
+                treatmentQuestion = IsOnHypertensionTreatment(country.isoCountryCode),
+                treatmentAnswer = ongoingMedicalHistoryEntry?.isOnHypertensionTreatment,
+                showTreatmentQuestion = showHypertensionTreatmentQuestion
+            ) { question, answer ->
+              hotEvents.onNext(NewMedicalHistoryAnswerToggled(question, answer))
+            }
+            if (showDiabetesDiagnosis) {
+              MedicalHistoryDiagnosisWithTreatment(
+                  diagnosisLabel = stringResource(R.string.medicalhistory_diagnosis_diabetes_required),
+                  diagnosisQuestion = DiagnosedWithDiabetes,
+                  diagnosisAnswer = ongoingMedicalHistoryEntry?.hasDiabetes,
+                  treatmentQuestion = IsOnDiabetesTreatment,
+                  treatmentAnswer = ongoingMedicalHistoryEntry?.isOnDiabetesTreatment,
+                  showTreatmentQuestion = showDiabetesTreatmentQuestion
+              ) { question, answer ->
+                hotEvents.onNext(NewMedicalHistoryAnswerToggled(question, answer))
+              }
+            }
             HistoryContainer(
                 heartAttackAnswer = ongoingMedicalHistoryEntry?.hasHadHeartAttack,
                 strokeAnswer = ongoingMedicalHistoryEntry?.hasHadStroke,
@@ -216,11 +234,11 @@ class NewMedicalHistoryScreen : BaseScreen<
   }
 
   override fun showDiabetesDiagnosisView() {
-    diabetesDiagnosis.visibility = VISIBLE
+    showDiabetesDiagnosis = true
   }
 
   override fun hideDiabetesDiagnosisView() {
-    diabetesDiagnosis.visibility = GONE
+    showDiabetesDiagnosis = false
   }
 
   override fun hideDiabetesHistorySection() {
@@ -231,24 +249,6 @@ class NewMedicalHistoryScreen : BaseScreen<
     showDiabetesQuestion = true
   }
 
-  override fun renderDiagnosisAnswer(question: MedicalHistoryQuestion, answer: Answer) {
-    val view = when (question) {
-      DiagnosedWithHypertension -> hypertensionDiagnosis
-      DiagnosedWithDiabetes -> diabetesDiagnosis
-      else -> null
-    }
-
-    val label = when (question) {
-      DiagnosedWithHypertension -> R.string.medicalhistory_diagnosis_hypertension_required
-      DiagnosedWithDiabetes -> R.string.medicalhistory_diagnosis_diabetes_required
-      else -> question.questionRes
-    }
-
-    view?.renderDiagnosis(label, question, answer) { questionForView, newAnswer ->
-      hotEvents.onNext(NewMedicalHistoryAnswerToggled(questionForView, newAnswer))
-    }
-  }
-
   override fun showNextButtonProgress() {
     nextButton.setButtonState(InProgress)
   }
@@ -258,32 +258,19 @@ class NewMedicalHistoryScreen : BaseScreen<
   }
 
   override fun showHypertensionTreatmentQuestion(answer: Answer) {
-    hypertensionDiagnosis.renderTreatmentQuestion(
-        question = IsOnHypertensionTreatment(country.isoCountryCode),
-        answer = answer
-    ) { questionForView, newAnswer ->
-      hotEvents.onNext(NewMedicalHistoryAnswerToggled(questionForView, newAnswer))
-    }
-
-    hypertensionDiagnosis.showTreatmentQuestion()
+    showHypertensionTreatmentQuestion = true
   }
 
   override fun hideHypertensionTreatmentQuestion() {
-    hypertensionDiagnosis.hideTreatmentQuestion()
-    hypertensionDiagnosis.clearTreatmentChipGroup()
+    showHypertensionTreatmentQuestion = false
   }
 
   override fun showDiabetesTreatmentQuestion(answer: Answer) {
-    diabetesDiagnosis.renderTreatmentQuestion(IsOnDiabetesTreatment, answer) { questionForView, newAnswer ->
-      hotEvents.onNext(NewMedicalHistoryAnswerToggled(questionForView, newAnswer))
-    }
-
-    diabetesDiagnosis.showTreatmentQuestion()
+    showDiabetesTreatmentQuestion = true
   }
 
   override fun hideDiabetesTreatmentQuestion() {
-    diabetesDiagnosis.hideTreatmentQuestion()
-    diabetesDiagnosis.clearTreatmentChipGroup()
+    showDiabetesTreatmentQuestion = false
   }
 
   override fun showCurrentSmokerQuestion() {

app/src/main/java/org/simple/clinic/medicalhistory/newentry/NewMedicalHistoryScreen.kt

@@ -7,7 +7,6 @@ import org.simple.clinic.medicalhistory.OngoingMedicalHistoryEntry
 interface NewMedicalHistoryUi {
   fun setPatientName(patientName: String)
   fun populateOngoingMedicalHistoryEntry(ongoingMedicalHistoryEntry: OngoingMedicalHistoryEntry)
-  fun renderDiagnosisAnswer(question: MedicalHistoryQuestion, answer: Answer)
   fun showDiabetesDiagnosisView()
   fun hideDiabetesDiagnosisView()
   fun showDiabetesHistorySection()

app/src/main/java/org/simple/clinic/medicalhistory/newentry/NewMedicalHistoryUi.kt

@@ -1,7 +1,5 @@
 package org.simple.clinic.medicalhistory.newentry
 
-import org.simple.clinic.medicalhistory.MedicalHistoryQuestion.DiagnosedWithDiabetes
-import org.simple.clinic.medicalhistory.MedicalHistoryQuestion.DiagnosedWithHypertension
 import org.simple.clinic.mobius.ViewRenderer
 
 class NewMedicalHistoryUiRenderer(
@@ -33,7 +31,6 @@ class NewMedicalHistoryUiRenderer(
 
   private fun renderMedicalHistoryQuestions(model: NewMedicalHistoryModel) {
     with(model.ongoingMedicalHistoryEntry) {
-      ui.renderDiagnosisAnswer(DiagnosedWithHypertension, diagnosedWithHypertension)
       renderHypertensionTreatmentQuestion(model)
     }
     ui.populateOngoingMedicalHistoryEntry(model.ongoingMedicalHistoryEntry)
@@ -50,7 +47,6 @@ class NewMedicalHistoryUiRenderer(
   private fun renderDiabetesManagementEnabled(model: NewMedicalHistoryModel) {
     ui.showDiabetesDiagnosisView()
     ui.hideDiabetesHistorySection()
-    ui.renderDiagnosisAnswer(DiagnosedWithDiabetes, model.ongoingMedicalHistoryEntry.hasDiabetes)
     renderDiabetesTreatmentQuestion(model)
   }
 

app/src/main/java/org/simple/clinic/medicalhistory/newentry/NewMedicalHistoryUiRenderer.kt

@@ -0,0 +1,80 @@
+package org.simple.clinic.medicalhistory.ui
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.ChipDefaults
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.FilterChip
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import org.simple.clinic.R
+import org.simple.clinic.medicalhistory.Answer
+
+@Composable
+fun AnswerChipsGroup(
+    modifier: Modifier = Modifier,
+    selectedAnswer: Answer?,
+    onSelectionChange: (Answer) -> Unit
+) {
+  Row(
+      modifier = modifier,
+      horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.spacing_8)),
+      verticalAlignment = Alignment.CenterVertically,
+  ) {
+    MedicalHistoryAnswerChip(
+        label = stringResource(R.string.newmedicalhistory_yes),
+        selected = selectedAnswer == Answer.Yes,
+        onSelectionChange = {
+          onSelectionChange(Answer.Yes)
+        }
+    )
+
+    MedicalHistoryAnswerChip(
+        label = stringResource(R.string.newmedicalhistory_no),
+        selected = selectedAnswer == Answer.No,
+        onSelectionChange = {
+          onSelectionChange(Answer.No)
+        }
+    )
+  }
+}
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun MedicalHistoryAnswerChip(
+    label: String,
+    selected: Boolean,
+    onSelectionChange: () -> Unit
+) {
+  val backgroundColor by animateColorAsState(
+      if (selected) MaterialTheme.colors.primary else MaterialTheme.colors.primaryVariant
+  )
+  val textColor by animateColorAsState(
+      if (selected) MaterialTheme.colors.onPrimary else MaterialTheme.colors.primary
+  )
+
+  FilterChip(
+      selected = selected,
+      colors = ChipDefaults.filterChipColors(
+          backgroundColor = backgroundColor,
+      ),
+      onClick = onSelectionChange,
+  ) {
+    Text(
+        modifier = Modifier.padding(horizontal = dimensionResource(R.dimen.spacing_12)),
+        text = label,
+        style = MaterialTheme.typography.body2,
+        color = textColor,
+        textAlign = TextAlign.Center,
+    )
+  }
+}