Screens for the App

RecipeCard.kt

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.NavGraph.Companion.findStartDestination
import coil.compose.AsyncImage
import com.paul.recipeApp.navigation.NavRoutes
import com.paul.recipeApp.remote.data.Recipe
import com.paul.recipeApp.ui.theme.Purple200

@Composable
fun RecipeCard(recipe: Recipe, modifier: Modifier,navController: NavController?=null){
    Surface(shape = RoundedCornerShape(8.dp),
        elevation = 8.dp,
        modifier = modifier
            .clickable(onClick = {
                navController
                    ?.navigate("${NavRoutes.SingleRecipe.name}/${recipe.recipeId!!}"){
                        popUpTo(navController.graph.findStartDestination().id)
                        launchSingleTop = true
                    }
            })

    ) {
        Column(modifier = Modifier
                            .fillMaxWidth()
                            .background(color = Purple200)) {
            AsyncImage(model = recipe.recipeImage, contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(144.dp))
            Column(
                modifier = Modifier
                .padding(16.dp)
            ) {
                Text(recipe.recipeName!!,
                     modifier= Modifier,
                    style= MaterialTheme.typography.h4)
                Text("${recipe.recipeInstructions}")
            }
        }
    }
}

RecipeList.kt

import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.Composable
import androidx.compose.runtime.produceState
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.paul.recipeApp.remote.RecipeServiceSDK
import com.paul.recipeApp.remote.data.Recipe
import com.paul.recipeApp.util.Indicator

private val recipeServiceSDK = RecipeServiceSDK()

@Composable
fun RecipeList( navController: NavController?=null) {
    val recipe = produceState<List<Recipe>>(
        initialValue = emptyList(),
        producer = {
            value = recipeServiceSDK.fetchAllRecipeList()
        })

    if(recipe.value.isEmpty()) {
        Indicator()
    }else {
        LazyColumn {
            items(recipe.value) { recipe ->
                RecipeCard(recipe = recipe, Modifier.padding(16.dp), navController)
            }
        }
    }
}

SingleRecipe.kt

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.produceState
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import coil.compose.AsyncImage
import com.paul.recipeApp.remote.RecipeServiceSDK
import com.paul.recipeApp.remote.data.Ingredients
import com.paul.recipeApp.remote.data.Instructions
import com.paul.recipeApp.remote.data.Recipe
import com.paul.recipeApp.util.Indicator
import com.paul.recipeApp.util.RecipeUtils

private val recipeServiceSDK = RecipeServiceSDK()

@Composable
fun SingleRecipe(recipeId: Int,navController: NavController?=null){
    val scrollState = rememberScrollState()

    val recipes = produceState(
        initialValue = Recipe(0,"","","","", emptyList(), emptyList()),
        producer = {
            value = recipeServiceSDK.fetchAllRecipeById(recipeId)
        })

    if (recipes.value.recipeId == 0){
        Indicator()
    }else{
        val recipe = recipes.value

        Column(
            modifier = Modifier
                .fillMaxWidth()
               ,
            ) {
            AsyncImage(model = recipe.recipeImage, contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(144.dp))
            Column(modifier = Modifier.padding(8.dp)
            ){
                Text(text = "Posted At: ${RecipeUtils.formatDate(recipe.createdAt!!)}")
                Text(recipe.recipeName!!, style= MaterialTheme.typography.h4)
                Text("${recipe.recipeInstructions}")
                IngredientsList(recipe = recipe)
                InstructionsList(recipe = recipe)
            }


        }
    }

}

@Composable
fun IngredientsList(recipe: Recipe){
    if (recipe.ingredientsEntity.isNotEmpty()){
        Text(text = "Ingredients",
            modifier = Modifier.padding(top = 8.dp, bottom = 8.dp),
            style = MaterialTheme.typography.subtitle1)
        LazyColumn{items(recipe.ingredientsEntity) { ingredients ->
            Text(text = "👉🏾 ${ingredients.ingredientsDetail}")
        }
        }
    }
}

@Composable
fun InstructionsList(recipe: Recipe){
    if(recipe.instructionsEntity.isNotEmpty()){
        Text(text = "Instructions",
            modifier = Modifier.padding(top = 8.dp, bottom = 8.dp),
            style = MaterialTheme.typography.subtitle1)
        LazyColumn{items(recipe.instructionsEntity) { instructions ->
            Text(text = "👉🏾 ${instructions.instructionDetails}")
        }
        }
    }

}