Урок 10: Коллбэки (callback). Внедрение логики регистрации

Введение

Подготовка нового экрана

setContent {
    ComposePreviewTheme {
        Scaffold(
            content = { innerPadding ->
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .padding(innerPadding)
                        .fillMaxSize(),
                ) {
                    RegistrationScreen()
                }
            }
        )
    }
}

@Composable
fun RegistrationScreen() {

    Spacer(Modifier.height(70.dp))
    StudyAppHeader(
        title = "Регистрация",
        subtitle = "Введите почту"
    )
    Spacer(Modifier.height(200.dp))
    CheckEmailField()
    Spacer(Modifier.height(30.dp))
    CheckEmailButton()

}

@Composable
@Preview
fun PrimaryButton() {
    Button(
        shape = RoundedCornerShape(13.dp),
        onClick = {},
        modifier = Modifier
            .height(56.dp)
            .padding(40.dp, 0.dp)
            .fillMaxWidth()
    ) {
        Text(
            "Зарегистрироваться",
            style = MaterialTheme.typography.labelMedium
        )

    }
}

@Composable
@Preview(showBackground = true)
fun CheckEmailField() {

    var textState by remember { mutableStateOf("") }
    var errorState by remember { mutableStateOf("") }

    OutlinedTextField(
        modifier = Modifier
            .height(56.dp)
            .padding(40.dp, 0.dp)
            .fillMaxWidth(),
        value = textState,
        onValueChange = {
            textState = it
            errorState = if (EMAIL_ADDRESS.matcher(it).matches()) "" else "Некорректный email"
        },
        isError = errorState.isNotEmpty(),
        label = {
            Text(
                text = if (errorState.isEmpty()) "Электропочта" else errorState,
                style = MaterialTheme.typography.headlineSmall,
            )
        },
        shape = RoundedCornerShape(13.dp),
        textStyle = MaterialTheme.typography.headlineMedium,
        placeholder = {
            Text(
                text = "ex*****@***********nt.ru",
                style = MaterialTheme.typography.headlineMedium,
                color = Color.Gray
            )
        },
        singleLine = true,
        trailingIcon = {
            IconButton(
                onClick = {
                    textState = ""
                    errorState = ""
                }
            ) {
                Icon(
                    imageVector = Icons.Filled.Clear,
                    contentDescription = "Иконка очистки поля"
                )
            }
        }

    )
}

Добавление коллбэка на кнопку / callback

onClick = {
    Log.i("!!!", "PrimaryButton: нажата кнопка Зарегистрироваться")
},

Что такое коллбэк / callback

• Добавляем новый параметр в функцию с кнопкой onRegisterClick: () -> Unit,. Это обычный параметр, но не примитивного типа, а который является лямбда-функцией. Эта лямбда ничего не принимает и ничего не возвращает.
• Далее в месте вызова функции дописываю недостающий параметр onRegisterClick и в фигурные скобки (потому, что это фактически лямбда) переношу логику создания лога. Предполагаем, что там какая-то логика приложения и мы не хотим, чтобы кнопка о ней знала.

PrimaryButton(
    text = "Зарегистрироваться",
    onRegisterClick = {
        Log.i("!!!", "PrimaryButton: нажата кнопка Зарегистрироваться")
    }
)

• Наконец, просто добавляю вызов созданного парамета onRegisterClick() в параметр onClick. Сначала убедимся, что все работает. И расскажу еще раз, что мы сделали.

PrimaryButton(
    text = "Зарегистрироваться",
    onRegisterClick = { it: String ->
        Log.i("!!!", "PrimaryButton: нажата кнопка $it")
    }
)

Вынос параметров

• Пользователь вводит почту, нажимает кнопку и отображается сообщение “Регистрация успешно пройдена”. То есть нам понадобится функция Text.
• Если форма пустая или введен любой текст, отличный от почты – отображаем сообщение “Некорректный email".
• Если введенная почта совпадает с некой сохраненной тестовой почтой – отображаем сообщение "Такая почта уже существует".

• email: String, – строка с почтой. Нужно для отрисовки компонента, потому, что логика валидации будет вынесена за пределы метода.
• isEmailValid: Boolean, – флаг, получаемый из стейта с ошибкой, сделаем более понятное название у него и у стейта чуть позже. Нужен для передачи статуса в параметр isError.
• onEmailChange: (String) -> Unit, – коллбэк ввода, который принимает строку и передает ее при каждом вводе символа пользователя. Нужно для передачи строки на валидацию.
• onClearClicked: () -> Unit, – коллбэк для очистки ввода. Нужен, чтобы передавать событие клика за пределы функции, так как очищать будем теперь общие для экрана стейты.

• email присваиваем value для визуального отображения.
• Валидацию буду использовать в условии отображения состояния ошибки. Если почта не валидна !isEmailValid && email.*isNotBlank*(),. В label добавляю только проверку валидности. Вместо текста из errorState теперь показываем строку с текстом ошибки.
• Коллбэк строки используем для отправки сигналов с текстом при вводе каждого символа. Вся логика будет вынесена, поэтому просто оставляем коллбэк и отправляем в него строку.
• Коллбэк очистки текстового поля используем в одном единственном месте, где в функции иконки у нас очищаются стейты. Если вы задаетесь вопросом как где же корректнее хранить стейт – обратимся к все той же документации с рекомендациями. Вот что там говорится практически дословно:

Общее состояние экрана

var userEmail by remember { mutableStateOf("") }
var isEmailFormatValid by remember { mutableStateOf(true) }
var validationMessage by remember { mutableStateOf("") }

Реализация логики CheckEmailField

• В параметр почты отправляем стейт, который будет хранить строку с почтой.
• В параметр с флагом валидации аналогично.
• Далее в лямбде с изменениями вэлью проводим схожие со старой логикой действия, а именно при каждом изменении события (ввода символа) присваиваем строку стейту со строкой. Далее проводим валидацию этой строки и записываем результат в соответствующий стейт. Тут же мы будем инициализировать в первый раз validationMessage. Если стейт с валидацией хранит false – будем записывать предупреждающее сообщение. Которое ранее мы показывали в label. В ином случае записывается пустая строка.
  • Наконец, последний параметр функции – onClearClicked. Этот коллбэк вызывает очистку всех текстовых стейтов, а стейта с валидацией – в исходное состояние true.

Реализация логики PrimaryButton

• Если почта пустая или невалидна – выводим "Некорректный email".
• Также если почта совпадает с некой тестовой почтой – выводим "Такая почта уже существует". Добавлю какую-нибудь отладочную почту в начало документа в отдельную переменную.
• Иначе выводим "Регистрация успешно пройдена".

PrimaryButton(
    text = "Зарегистрироваться",
    onRegisterClick = { it: String ->
        validationMessage =
            if (userEmail.isEmpty() || !isEmailFormatValid) {
                "Некорректный email"
            } else if (userEmail == testEmail) {
                "Такая почта уже существует"
            } else {
                "Регистрация успешно пройдена"
            }

        Log.i("!!!", "PrimaryButton: нажата кнопка $it")
    }
)

Отображение результатов регистрации

Spacer(Modifier.height(30.dp))
Text(
    text = validationMessage,
    style = MaterialTheme.typography.bodyLarge,
    color = if (validationMessage.contains("успешно")) Color.DarkGray else Color.Red,
    modifier = Modifier.alpha(if (validationMessage.isNotEmpty() && isEmailFormatValid) 1f else 0f)
)