Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reactive model #35

Merged
merged 4 commits into from
Jun 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,8 @@ import org.imaginativeworld.whynotcompose.ui.screens.tutorial.navdatapass.NavDat
import org.imaginativeworld.whynotcompose.ui.screens.tutorial.navdatapass.NavDataPassTwoScreen
import org.imaginativeworld.whynotcompose.ui.screens.tutorial.onesignalandbroadcast.OneSignalAndBroadcastScreen
import org.imaginativeworld.whynotcompose.ui.screens.tutorial.permission.PermissionScreen
import org.imaginativeworld.whynotcompose.ui.screens.tutorial.reactivemodel.ReactiveModelScreen
import org.imaginativeworld.whynotcompose.ui.screens.tutorial.reactivemodel.ReactiveModelViewModel
import org.imaginativeworld.whynotcompose.ui.screens.tutorial.selectimageandcrop.SelectImageAndCropScreen
import org.imaginativeworld.whynotcompose.ui.screens.tutorial.selectimageandcrop.SelectImageAndCropViewModel
import org.imaginativeworld.whynotcompose.ui.screens.ui.index.UiIndexScreen
Expand Down Expand Up @@ -240,6 +242,8 @@ sealed class TutorialsScreen(val route: String) {
.replace("{$PARAM_ID}", "$id")
.replace("{$PARAM_NAME}", name)
}

data object TutorialReactiveModel : TutorialsScreen("tutorial/reactive-model")
}

// ================================================================
Expand Down Expand Up @@ -1027,6 +1031,21 @@ private fun NavGraphBuilder.addTutorialIndexScreen(
}
)
}

// ================================================================
// Reactive model
// ================================================================

composable(TutorialsScreen.TutorialReactiveModel.route) {
val viewModel: ReactiveModelViewModel = hiltViewModel()

ReactiveModelScreen(
viewModel = viewModel,
goBack = {
navController.popBackStack()
}
)
}
}

// ================================================================
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ package org.imaginativeworld.whynotcompose.ui.screens.home.index

import android.Manifest
import android.content.pm.PackageManager
import android.content.res.Configuration.UI_MODE_NIGHT_YES
import android.os.Build
import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.activity.result.contract.ActivityResultContracts
Expand Down Expand Up @@ -89,7 +88,7 @@ import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.core.app.ActivityCompat.shouldShowRequestPermissionRationale
Expand Down Expand Up @@ -473,22 +472,14 @@ fun ModuleButton(
}
}

@Preview
@PreviewLightDark
@Composable
fun HomeIndexScreenPreview() {
AppTheme {
HomeIndexScreen()
}
}

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun HomeIndexScreenPreviewDark() {
AppTheme {
HomeIndexScreen()
}
}

data class MenuItem(
val name: String,
@DrawableRes val icon: Int,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,12 @@ data class Tutorial(
description = "Example of data passing in `Navigation Component`.",
route = TutorialsScreen.TutorialNavDataPassHome,
level = TutorialLevel.Intermediate
),
Tutorial(
name = "Reactive Model",
description = "Example of reactive model in `MVVM`.",
route = TutorialsScreen.TutorialReactiveModel,
level = TutorialLevel.Beginner
)
)
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
/*
* Copyright 2021 Md. Mahmudul Hasan Shohag
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* ------------------------------------------------------------------------
*
* Project: Why Not Compose!
* Developed by: @ImaginativeShohag
*
* Md. Mahmudul Hasan Shohag
* [email protected]
*
* Source: https://github.com/ImaginativeShohag/Why-Not-Compose
*/

package org.imaginativeworld.whynotcompose.ui.screens.tutorial.reactivemodel

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Button
import androidx.compose.material.Card
import androidx.compose.material.Divider
import androidx.compose.material.Icon
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Add
import androidx.compose.material.icons.rounded.Remove
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import org.imaginativeworld.whynotcompose.common.compose.compositions.AppComponent
import org.imaginativeworld.whynotcompose.common.compose.theme.AppTheme

/**
* Resource: https://developer.android.com/codelabs/jetpack-compose-state#11
*/

@Composable
fun ReactiveModelScreen(
viewModel: ReactiveModelViewModel,
goBack: () -> Unit
) {
val counter = viewModel.products.collectAsState()

CounterWithVMScreenSkeleton(
goBack = goBack,
products = counter.value,
increaseQuantity = viewModel::incrementQuantity,
decreaseQuantity = viewModel::decreaseQuantity
)
}

@PreviewLightDark
@Composable
fun CounterWithVMScreenSkeletonPreview() {
val products by remember {
mutableStateOf(
ProductReactiveModelMock.items
)
}

AppTheme {
CounterWithVMScreenSkeleton(
products = products,
increaseQuantity = { product ->
product.increaseQuantity()
},
decreaseQuantity = { product ->
product.decreaseQuantity()
}
)
}
}

@Composable
fun CounterWithVMScreenSkeleton(
goBack: () -> Unit = {},
products: List<ProductReactiveModel>,
increaseQuantity: (ProductReactiveModel) -> Unit = {},
decreaseQuantity: (ProductReactiveModel) -> Unit = {}
) {
Scaffold(
Modifier
.navigationBarsPadding()
.imePadding()
.statusBarsPadding()
) { innerPadding ->
Column(
Modifier
.padding(innerPadding)
.fillMaxSize()
) {
AppComponent.Header(
"Reactive Model",
goBack = goBack
)

Divider()

Column(
Modifier
.weight(1f)
.fillMaxWidth()
.padding(start = 16.dp, end = 16.dp)
) {
LazyColumn(
Modifier.fillMaxSize(),
contentPadding = PaddingValues(vertical = 4.dp)
) {
items(products) { product ->
ProductItemView(
modifier = Modifier.padding(vertical = 8.dp),
name = product.name,
price = product.price,
quantity = product.quantity,
totalPrice = product.totalPrice,
increase = { increaseQuantity(product) },
decrease = { decreaseQuantity(product) }
)
}
}
}
}
}
}

@Composable
private fun ProductItemView(
modifier: Modifier = Modifier,
name: String,
price: Double,
quantity: Int,
totalPrice: Double,
increase: () -> Unit,
decrease: () -> Unit
) {
Card(modifier, elevation = 4.dp) {
Column(Modifier.padding(8.dp)) {
Text(
name,
style = MaterialTheme.typography.h6
)

Row {
Text(
"Price: $price $",
style = MaterialTheme.typography.subtitle2
)

Spacer(modifier.weight(1f))

Text(
"Quantity: $quantity",
style = MaterialTheme.typography.subtitle2
)
}

Card(
Modifier.padding(top = 8.dp),
border = BorderStroke(1.dp, MaterialTheme.colors.onBackground.copy(0.2f))
) {
Row(
Modifier
.padding(horizontal = 8.dp, vertical = 4.dp)
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Button(
modifier = Modifier,
onClick = { increase() },
shape = CircleShape
) {
Icon(imageVector = Icons.Rounded.Add, contentDescription = "Add")
}

Spacer(Modifier.width(16.dp))

Button(
modifier = Modifier,
onClick = { decrease() },
shape = CircleShape
) {
Icon(imageVector = Icons.Rounded.Remove, contentDescription = "Add")
}

Spacer(Modifier.weight(1f))

Text(
"Total: $totalPrice $",
style = MaterialTheme.typography.subtitle1
)
}
}
}
}
}
Loading
Loading