WIP to get repository working

Reviewed-on: #1

.idea/deploymentTargetDropDown.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="deploymentTargetDropDown">
+    <targetSelectedWithDropDown>
+      <Target>
+        <type value="QUICK_BOOT_TARGET" />
+        <deviceKey>
+          <Key>
+            <type value="VIRTUAL_DEVICE_PATH" />
+            <value value="$USER_HOME$/.android/avd/Pixel_4_XL_API_31.avd" />
+          </Key>
+        </deviceKey>
+      </Target>
+    </targetSelectedWithDropDown>
+    <timeTargetWasSelectedWithDropDown value="2022-11-06T10:26:15.426480Z" />
+  </component>
+</project>

app/build.gradle

@@ -47,23 +47,36 @@ android {
 }
 
 dependencies {
+    //Network
     implementation 'com.squareup.retrofit2:retrofit:2.9.0'
     implementation 'com.google.code.gson:gson:2.9.0'
     implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
-    implementation("io.coil-kt:coil-compose:2.2.2")
 
-    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07"
+    // Display images from the internet
+    implementation "io.coil-kt:coil-compose:2.2.2"
 
-    implementation 'androidx.core:core-ktx:1.8.0'
+    // Database
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.1'
+    implementation "androidx.room:room-runtime:2.4.3"
-    implementation 'androidx.activity:activity-compose:1.5.1'
+    annotationProcessor("androidx.room:room-compiler:2.4.3")
-    implementation "androidx.compose.ui:ui:$compose_ui_version"
+
-    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
+    // Navigation
-    implementation "androidx.compose.material:material:$compose_ui_version"
+    implementation "androidx.navigation:navigation-compose:2.5.3"
+
+    // ViewModel and livedata
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
+    implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.5.1'
+    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1"
+    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:2.5.1"
+
+    implementation 'androidx.core:core-ktx:1.7.0'
+    implementation 'androidx.activity:activity-compose:1.3.1'
+    implementation "androidx.compose.ui:ui:$compose_version"
+    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
+    implementation 'androidx.compose.material3:material3:1.0.0-alpha02'
     testImplementation 'junit:junit:4.13.2'
     androidTestImplementation 'androidx.test.ext:junit:1.1.3'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
-    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
+    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
-    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
+    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
-    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"
+    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
 }

app/src/main/AndroidManifest.xml

@@ -18,7 +18,6 @@
         <activity
             android:name=".MainActivity"
             android:exported="true"
-            android:label="@string/app_name"
             android:theme="@style/Theme.Thuis">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

app/src/main/java/com/mitchelbv/thuis_c/MainActivity.kt

@@ -1,16 +1,30 @@
 package com.mitchelbv.thuis_c
 
-import android.annotation.SuppressLint
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material.*
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.DateRange
-import androidx.compose.runtime.*
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.List
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.navigation.NavDestination.Companion.hierarchy
+import androidx.navigation.NavGraph.Companion.findStartDestination
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
+import com.mitchelbv.thuis_c.ui.feyenoord.FeyenoordScreen
+import com.mitchelbv.thuis_c.ui.home.HomeScreen
+import com.mitchelbv.thuis_c.ui.recipe.RecipeScreen
 import com.mitchelbv.thuis_c.ui.theme.ThuisTheme
 
 class MainActivity : ComponentActivity() {
@@ -21,7 +35,7 @@ class MainActivity : ComponentActivity() {
                 // A surface container using the 'background' color from the theme
                 Surface(
                     modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colors.background
+                    color = MaterialTheme.colorScheme.background
                 ) {
                     ThuisApp()
                 }
@@ -30,25 +44,52 @@ class MainActivity : ComponentActivity() {
     }
 }
 
-@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
+sealed class Screen(val route: String, @StringRes val resourceId: Int, val icon: ImageVector) {
+    object Feyenoord : Screen("feyenoord", R.string.nav_feyenoord, Icons.Default.DateRange)
+    object Recipes : Screen("recipes", R.string.nav_recipes, Icons.Default.List)
+    object Home : Screen("home", R.string.nav_home, Icons.Default.Home)
+}
+
+val screenItems = listOf(
+    Screen.Home,
+    Screen.Recipes,
+    Screen.Feyenoord,
+)
+
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ThuisApp() {
-    var currentScreen: ThuisDestination by remember { mutableStateOf(Home) }
+    val navController = rememberNavController()
-    return Scaffold(bottomBar = {
+    Scaffold(
-        BottomNavigation() {
+        topBar = {
-            destinations.forEachIndexed { index, item ->
+            SmallTopAppBar(title = { Text(stringResource(id = R.string.app_name))})
-                BottomNavigationItem(
+        },
-                    selected = currentScreen.route == destinations[index].route,
+        bottomBar = {
-                    onClick = { currentScreen = destinations[index] },
+            NavigationBar {
-                    icon = {
+                val navBackStackEntry by navController.currentBackStackEntryAsState()
-                        Icon(
+                val currentDestination = navBackStackEntry?.destination
-                            destinations[index].icon,
+                screenItems.forEach { screen ->
-                            contentDescription = null
+                    NavigationBarItem(
-                        )
+                        icon = { Icon(screen.icon, contentDescription = stringResource(id = screen.resourceId))},
+                        label = { Text(stringResource(id = screen.resourceId))},
+                        selected = currentDestination?.hierarchy?.any {it.route == screen.route} == true,
+                        onClick = {
+                            navController.navigate(screen.route) {
+                                popUpTo(navController.graph.findStartDestination().id) {
+                                    saveState = true
+                                }
+                                launchSingleTop = true
+                                restoreState = true
+                            }
                         })
                 }
             }
-    }) {
+        }
-        currentScreen.screen()
+    ) { innerPadding ->
+        NavHost(navController = navController, startDestination = "home", Modifier.padding(innerPadding)) {
+            composable("home") { HomeScreen(navController) }
+            composable("feyenoord") { FeyenoordScreen(navHostController = navController) }
+            composable("recipes") { RecipeScreen(navHostController = navController)}
+        }
     }
 }

app/src/main/java/com/mitchelbv/thuis_c/ThuisDestinations.kt

@@ -1,45 +0,0 @@
-package com.mitchelbv.thuis_c
-
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.DateRange
-import androidx.compose.material.icons.filled.Home
-import androidx.compose.material.icons.filled.List
-import androidx.compose.material.icons.filled.ShoppingCart
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.vector.ImageVector
-import com.mitchelbv.thuis_c.ui.card.CardsScreen
-import com.mitchelbv.thuis_c.ui.feyenoord.FeyenoordScreen
-import com.mitchelbv.thuis_c.ui.home.HomeScreen
-import com.mitchelbv.thuis_c.ui.recipe.RecipeScreen
-
-interface ThuisDestination {
-    val route: String
-    val screen: @Composable () -> Unit
-    val icon: ImageVector
-}
-
-object Home : ThuisDestination {
-    override val icon = Icons.Filled.Home
-    override val route = "home"
-    override val screen: @Composable () -> Unit = { HomeScreen() }
-}
-
-object FeyenoordMatches : ThuisDestination {
-    override val icon = Icons.Filled.DateRange
-    override val route: String = "matches"
-    override val screen: @Composable () -> Unit = { FeyenoordScreen() }
-}
-
-object Card : ThuisDestination {
-    override val icon = Icons.Filled.ShoppingCart
-    override val route = "card"
-    override val screen: @Composable () -> Unit = { CardsScreen() }
-}
-
-object Recipe : ThuisDestination {
-    override val icon = Icons.Filled.List
-    override val route = "recipe"
-    override val screen: @Composable () -> Unit = { RecipeScreen() }
-}
-
-val destinations = listOf(Home, Recipe, FeyenoordMatches)

app/src/main/java/com/mitchelbv/thuis_c/database/DatabaseEntities.kt

@@ -0,0 +1,32 @@
+package com.mitchelbv.thuis_c.database
+
+import androidx.room.Entity
+import androidx.room.PrimaryKey
+import com.mitchelbv.thuis_c.ui.feyenoord.Match
+
+@Entity
+data class DatabaseMatches constructor(
+    @PrimaryKey(autoGenerate = true)
+    val id: Int,
+    val home_team: String,
+    val away_team: String,
+    val date: String,
+    val begin_time: String,
+    val end_time: String,
+    val home_image: String,
+    val away_image: String
+)
+
+fun List<DatabaseMatches>.asDomainModel(): List<Match>   {
+    return map {
+        Match(
+            home_team = it.home_team,
+            away_team = it.away_team,
+            date = it.date,
+            begin_time = it.begin_time,
+            end_time = it.end_time,
+            home_image = it.home_image,
+            away_image = it.away_image
+        )
+    }
+}

app/src/main/java/com/mitchelbv/thuis_c/database/Room.kt

@@ -0,0 +1,42 @@
+package com.mitchelbv.thuis_c.database
+
+import android.content.Context
+import androidx.lifecycle.LiveData
+import androidx.room.*
+import kotlinx.coroutines.withContext
+
+@Dao
+interface MatchDao {
+    @Query("select * from databasematches")
+    fun getMatches(): LiveData<List<DatabaseMatches>>
+
+    @Query("select * from databasematches order by id ASC")
+    fun getUpcomingMatch(): LiveData<DatabaseMatches>
+
+    @Insert(onConflict = OnConflictStrategy.REPLACE)
+    fun insertAll(matches: List<DatabaseMatches>)
+}
+
+@Database(entities = [DatabaseMatches::class], version = 1)
+abstract class MatchesDatabase : RoomDatabase() {
+    abstract val matchDao: MatchDao
+
+    companion object {
+        @Volatile
+        private lateinit var INSTANCE: MatchesDatabase
+
+        fun getDatabase(context: Context): MatchesDatabase {
+            synchronized(MatchesDatabase::class.java) {
+                if (!::INSTANCE.isInitialized) {
+                    INSTANCE = Room.databaseBuilder(
+                        context.applicationContext,
+                        MatchesDatabase::class.java,
+                        "matches"
+                    ).build()
+                }
+            }
+            return INSTANCE
+        }
+    }
+}
+

app/src/main/java/com/mitchelbv/thuis_c/network/feyenoord/FeyenoordRetrofitHelper.kt

@@ -6,10 +6,10 @@ import retrofit2.converter.gson.GsonConverterFactory
 object FeyenoordRetrofitHelper {
     val baseUrl = "https://tickets-api.feyenoord.nl/api/"
 
-    fun getInstance(): Retrofit {
+    private val retrofit = Retrofit.Builder()
-        return Retrofit.Builder()
         .baseUrl(baseUrl)
         .addConverterFactory(GsonConverterFactory.create())
         .build()
-    }
+
+    val feyenoord = retrofit.create(FeyenoordService::class.java)
 }

app/src/main/java/com/mitchelbv/thuis_c/network/feyenoord/FeyenoordService.kt

@@ -1,7 +1,6 @@
 package com.mitchelbv.thuis_c.network.feyenoord
 
 import com.mitchelbv.thuis_c.network.feyenoord.responses.FeyenoordEventResponse
-import retrofit2.Call
 import retrofit2.http.GET
 
 interface FeyenoordService {

app/src/main/java/com/mitchelbv/thuis_c/network/feyenoord/responses/FeyenoordEventResponse.kt

@@ -1,12 +1,62 @@
 package com.mitchelbv.thuis_c.network.feyenoord.responses
 
 import com.google.gson.annotations.SerializedName
+import com.mitchelbv.thuis_c.database.DatabaseMatches
+import com.mitchelbv.thuis_c.ui.feyenoord.Match
 
 
 data class FeyenoordEventResponse(
-
     @SerializedName("HeaderItem") var HeaderItem: HeaderItem? = HeaderItem(),
     @SerializedName("TabItems") var TabItems: ArrayList<TabItems> = arrayListOf(),
     @SerializedName("CrossSellInfo") var CrossSellInfo: String? = null
-
 )
+
+fun notNullHandler(test: String?): String {
+    if (!test.isNullOrEmpty()) {
+        return test;
+    }
+    return ""
+}
+
+fun FeyenoordEventResponse.asDomainModel(): List<Match> {
+    val tempMatches = mutableListOf<Match>()
+    val test2 = TabItems.filter { it.CategoryId == 2 }
+    test2.forEach { items ->
+        for (item in items.Items) {
+            tempMatches.add(
+                Match(
+                    home_team = notNullHandler(item.NameHomeTeam),
+                    away_team = notNullHandler(item.NameAwayTeam),
+                    date = notNullHandler(item.EventStartDateTimeFormatted?.Full),
+                    begin_time = notNullHandler(item.EventStartDateTimeFormatted?.Time),
+                    end_time = notNullHandler(item.EventEndDateTimeFormatted?.Time),
+                    away_image = notNullHandler(item.AwayImageUrl),
+                    home_image = notNullHandler(item.HomeImageUrl)
+                )
+            )
+        }
+    }
+    return tempMatches
+}
+
+fun FeyenoordEventResponse.asDatabaseModel(): List<DatabaseMatches> {
+    val tempMatches = mutableListOf<DatabaseMatches>()
+    val test2 = TabItems.filter { it.CategoryId == 2 }
+    test2.forEach { items ->
+        for (item in items.Items) {
+            tempMatches.add(
+                DatabaseMatches(
+                    id = item.EventId!!,
+                    home_team = notNullHandler(item.NameHomeTeam),
+                    away_team = notNullHandler(item.NameAwayTeam),
+                    date = notNullHandler(item.EventStartDateTimeFormatted?.Full),
+                    begin_time = notNullHandler(item.EventStartDateTimeFormatted?.Time),
+                    end_time = notNullHandler(item.EventEndDateTimeFormatted?.Time),
+                    away_image = notNullHandler(item.AwayImageUrl),
+                    home_image = notNullHandler(item.HomeImageUrl)
+                )
+            )
+        }
+    }
+    return tempMatches
+}

app/src/main/java/com/mitchelbv/thuis_c/repository/FeyenoordRepository.kt

@@ -0,0 +1,25 @@
+package com.mitchelbv.thuis_c.repository
+
+import androidx.lifecycle.LiveData
+import androidx.lifecycle.Transformations
+import com.mitchelbv.thuis_c.database.MatchesDatabase
+import com.mitchelbv.thuis_c.database.asDomainModel
+import com.mitchelbv.thuis_c.network.feyenoord.FeyenoordRetrofitHelper
+import com.mitchelbv.thuis_c.network.feyenoord.responses.asDatabaseModel
+import com.mitchelbv.thuis_c.ui.feyenoord.Match
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+
+
+class FeyenoordRepository(private val database: MatchesDatabase)    {
+    val matches: LiveData<List<Match>> = Transformations.map(database.matchDao.getMatches())    {
+        it.asDomainModel()
+    }
+
+    suspend fun refreshMatches()    {
+        withContext(Dispatchers.IO) {
+            val matches = FeyenoordRetrofitHelper.feyenoord.getEvents()
+            database.matchDao.insertAll(matches.asDatabaseModel())
+        }
+    }
+}

app/src/main/java/com/mitchelbv/thuis_c/ui/card/CardsView.kt

@@ -1,7 +1,7 @@
 package com.mitchelbv.thuis_c.ui.card
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.material.Text
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue

app/src/main/java/com/mitchelbv/thuis_c/ui/feyenoord/FeyenoordView.kt

@@ -3,7 +3,7 @@ package com.mitchelbv.thuis_c.ui.feyenoord
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Text
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -15,11 +15,12 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import androidx.navigation.NavHostController
 import coil.compose.AsyncImage
 import com.mitchelbv.thuis_c.R
 
 @Composable
-fun FeyenoordScreen(feyenoordViewModel: FeyenoordViewModel = viewModel()) {
+fun FeyenoordScreen(feyenoordViewModel: FeyenoordViewModel = viewModel(), navHostController: NavHostController) {
     val feyenoordUiState by feyenoordViewModel.uiState.collectAsState()
     Column(
         modifier = Modifier
@@ -41,7 +42,9 @@ fun MatchList(matches: List<Match>, modifier: Modifier) {
 
 @Composable
 fun TeamNameWithLogo(team_name: String, team_logo_url: String, modifier: Modifier) {
-    Column(modifier = modifier.size(128.dp).fillMaxWidth(), Arrangement.Center, Alignment.CenterHorizontally) {
+    Column(modifier = modifier
+        .size(128.dp)
+        .fillMaxWidth(), Arrangement.Center, Alignment.CenterHorizontally) {
         AsyncImage(
             model = team_logo_url,
             contentDescription = team_name,
@@ -49,7 +52,9 @@ fun TeamNameWithLogo(team_name: String, team_logo_url: String, modifier: Modifie
             contentScale = ContentScale.Fit,
             modifier = modifier.size(64.dp)
         )
-        Text(text = team_name, modifier = modifier.fillMaxWidth().wrapContentWidth(Alignment.CenterHorizontally))
+        Text(text = team_name, modifier = modifier
+            .fillMaxWidth()
+            .wrapContentWidth(Alignment.CenterHorizontally))
     }
 
 }

app/src/main/java/com/mitchelbv/thuis_c/ui/feyenoord/FeyenoordViewModel.kt

@@ -1,57 +1,61 @@
 package com.mitchelbv.thuis_c.ui.feyenoord
 
-import android.util.Log
+import android.app.Application
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
-import com.mitchelbv.thuis_c.network.feyenoord.FeyenoordRetrofitHelper
+import com.mitchelbv.thuis_c.database.MatchesDatabase.Companion.getDatabase
-import com.mitchelbv.thuis_c.network.feyenoord.FeyenoordService
+import com.mitchelbv.thuis_c.repository.FeyenoordRepository
-import com.mitchelbv.thuis_c.network.feyenoord.responses.FeyenoordEventResponse
-import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.launch
-import okhttp3.ResponseBody
-import retrofit2.Call
-import retrofit2.Callback
-import retrofit2.Response
 
 data class FeyenoordUiState(
     val matches: List<Match> = listOf()
 )
 
-class FeyenoordViewModel : ViewModel() {
+class FeyenoordViewModel(application: Application) : ViewModel() {
     private val _uiState = MutableStateFlow(FeyenoordUiState())
     val uiState: StateFlow<FeyenoordUiState> = _uiState.asStateFlow()
 
+    private val feyenoordRepository = FeyenoordRepository(getDatabase(application))
+    val matches = feyenoordRepository.matches
+
     init {
-        fillMatches()
+        refreshMatchesFromRepository()
     }
 
-    private fun fillMatches() {
+    private fun refreshMatchesFromRepository() {
-        // TODO Get data from the internet
+        viewModelScope.launch {
-        val tempMatches = mutableListOf<Match>()
+            feyenoordRepository.refreshMatches()
-        viewModelScope.launch(Dispatchers.IO) {
+            _uiState.value = FeyenoordUiState(matches = matches.value!!)
-            val fApiClient =
-                FeyenoordRetrofitHelper.getInstance().create(FeyenoordService::class.java)
-            val apiResponse = fApiClient.getEvents()
-            for (tabItem in apiResponse.TabItems) {
-                val test = arrayOf(tabItem).filter { it.CategoryId == 2 }
-                test.forEach {
-                    for (item in it.Items)  {
-                        tempMatches.add(Match(
-                            home_team = item.NameHomeTeam!!,
-                            away_team = item.NameAwayTeam!!,
-                            date = item.EventStartDateTimeFormatted?.Full!!,
-                            begin_time = item.EventStartDateTimeFormatted?.Time!!,
-                            end_time = item.EventEndDateTimeFormatted?.Time!!,
-                            away_image = item.AwayImageUrl!!,
-                            home_image = item.HomeImageUrl!!
-                        ))
-                    }
-                }
-            }
-            _uiState.value = FeyenoordUiState(matches = tempMatches)
         }
     }
+
+//    private fun fillMatches() {
+//        // TODO Get data from the internet
+//        val tempMatches = mutableListOf<Match>()
+//        viewModelScope.launch(Dispatchers.IO) {
+//            val fApiClient =
+//                FeyenoordRetrofitHelper.getInstance().create(FeyenoordService::class.java)
+//            val apiResponse = fApiClient.getEvents()
+//            for (tabItem in apiResponse.TabItems) {
+//                val test = arrayOf(tabItem).filter { it.CategoryId == 2 }
+//                test.forEach {
+//                    for (item in it.Items)  {
+//                        tempMatches.add(Match(
+//                            home_team = item.NameHomeTeam!!,
+//                            away_team = item.NameAwayTeam!!,
+//                            date = item.EventStartDateTimeFormatted?.Full!!,
+//                            begin_time = item.EventStartDateTimeFormatted?.Time!!,
+//                            end_time = item.EventEndDateTimeFormatted?.Time!!,
+//                            away_image = item.AwayImageUrl!!,
+//                            home_image = item.HomeImageUrl!!
+//                        ))
+//                    }
+//                }
+//            }
+//            _uiState.value = FeyenoordUiState(matches = tempMatches)
+//        }
+//    }
 }

app/src/main/java/com/mitchelbv/thuis_c/ui/home/Home.kt

@@ -2,22 +2,16 @@ package com.mitchelbv.thuis_c.ui.home
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.material.Text
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.navigation.NavHostController
 import com.mitchelbv.thuis_c.ui.theme.Typography
 
 @Composable
-fun HomeScreen()    {
+fun HomeScreen(navController: NavHostController) {
     Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center)    {
-        Text("De thuis app!", style = Typography.body1)
+        Text("De thuis app!", style = Typography.bodySmall)
-        
     }
 }
-
-@Preview(showBackground = true)
-@Composable
-fun HomeScreenPreview() {
-    HomeScreen()
-}

app/src/main/java/com/mitchelbv/thuis_c/ui/recipe/RecipeView.kt

@@ -1,8 +1,6 @@
 package com.mitchelbv.thuis_c.ui.recipe
 
 import android.annotation.SuppressLint
-import android.graphics.Bitmap
-import android.util.Log
 import android.view.ViewGroup
 import android.webkit.WebView
 import android.webkit.WebViewClient
@@ -11,10 +9,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.viewinterop.AndroidView
+import androidx.navigation.NavHostController
 
 @SuppressLint("SetJavaScriptEnabled")
 @Composable
-fun RecipeScreen()  {
+fun RecipeScreen(navHostController: NavHostController) {
     var backEnabled by remember { mutableStateOf(true)}
     var webView: WebView? = null
     AndroidView(modifier = Modifier.fillMaxSize(),

app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Color.kt

@@ -2,7 +2,10 @@ package com.mitchelbv.thuis_c.ui.theme
 
 import androidx.compose.ui.graphics.Color
 
-val Purple200 = Color(0xFFBB86FC)
+val Purple80 = Color(0xFFD0BCFF)
-val Purple500 = Color(0xFF6200EE)
+val PurpleGrey80 = Color(0xFFCCC2DC)
-val Purple700 = Color(0xFF3700B3)
+val Pink80 = Color(0xFFEFB8C8)
-val Teal200 = Color(0xFF03DAC5)
+
+val Purple40 = Color(0xFF6650a4)
+val PurpleGrey40 = Color(0xFF625b71)
+val Pink40 = Color(0xFF7D5260)

app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Shape.kt

@@ -1,11 +0,0 @@
-package com.mitchelbv.thuis_c.ui.theme
-
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Shapes
-import androidx.compose.ui.unit.dp
-
-val Shapes = Shapes(
-    small = RoundedCornerShape(4.dp),
-    medium = RoundedCornerShape(4.dp),
-    large = RoundedCornerShape(0.dp)
-)

app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Theme.kt

@@ -1,44 +1,44 @@
 package com.mitchelbv.thuis_c.ui.theme
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.MaterialTheme
-import androidx.compose.material.darkColors
+import androidx.compose.material3.darkColorScheme
-import androidx.compose.material.lightColors
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 
-private val DarkColorPalette = darkColors(
+private val DarkColorScheme = darkColorScheme(
-    primary = Purple200,
+    primary = Purple80,
-    primaryVariant = Purple700,
+    secondary = PurpleGrey80,
-    secondary = Teal200
+    tertiary = Pink80
 )
 
-private val LightColorPalette = lightColors(
+private val LightColorScheme = lightColorScheme(
-    primary = Purple500,
+    primary = Purple40,
-    primaryVariant = Purple700,
+    secondary = PurpleGrey40,
-    secondary = Teal200
+    tertiary = Pink40
 
     /* Other default colors to override
-    background = Color.White,
+    background = Color(0xFFFFFBFE),
-    surface = Color.White,
+    surface = Color(0xFFFFFBFE),
     onPrimary = Color.White,
-    onSecondary = Color.Black,
+    onSecondary = Color.White,
-    onBackground = Color.Black,
+    onTertiary = Color.White,
-    onSurface = Color.Black,
+    onBackground = Color(0xFF1C1B1F),
+    onSurface = Color(0xFF1C1B1F),
     */
 )
 
 @Composable
 fun ThuisTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
     val colors = if (darkTheme) {
-        DarkColorPalette
+        DarkColorScheme
     } else {
-        LightColorPalette
+        LightColorScheme
     }
 
     MaterialTheme(
-        colors = colors,
+        colorScheme = colors,
         typography = Typography,
-        shapes = Shapes,
         content = content
     )
 }

app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Type.kt

@@ -1,6 +1,6 @@
 package com.mitchelbv.thuis_c.ui.theme
 
-import androidx.compose.material.Typography
+import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -8,21 +8,27 @@ import androidx.compose.ui.unit.sp
 
 // Set of Material typography styles to start with
 val Typography = Typography(
-    body1 = TextStyle(
+    bodyLarge = TextStyle(
         fontFamily = FontFamily.Default,
         fontWeight = FontWeight.Normal,
-        fontSize = 16.sp
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp
     )
     /* Other default text styles to override
-    button = TextStyle(
+    titleLarge = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.W500,
-        fontSize = 14.sp
-    ),
-    caption = TextStyle(
         fontFamily = FontFamily.Default,
         fontWeight = FontWeight.Normal,
-        fontSize = 12.sp
+        fontSize = 22.sp,
+        lineHeight = 28.sp,
+        letterSpacing = 0.sp
+    ),
+    labelSmall = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Medium,
+        fontSize = 11.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp
     )
     */
 )

app/src/main/res/values/strings.xml

@@ -1,3 +1,7 @@
 <resources>
     <string name="app_name">Thuis</string>
+
+    <string name="nav_feyenoord">Feyenoord</string>
+    <string name="nav_recipes">Recepten</string>
+    <string name="nav_home">Home</string>
 </resources>

build.gradle

@@ -1,6 +1,6 @@
 buildscript {
     ext {
-        compose_ui_version = '1.2.1'
+        compose_version = '1.1.1'
     }
 }// Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {