Building a subscription tracker Desktop and iOS app with compose multiplatform - Configuring Notion

// composeApp/src/commonMain/kotlin/api/APIClient.kt

package api

import io.ktor.client.*
import io.ktor.client.engine.*
import io.ktor.client.plugins.*
import io.ktor.client.plugins.auth.*
import io.ktor.client.plugins.auth.providers.*
import io.ktor.client.plugins.contentnegotiation.*
import io.ktor.client.plugins.logging.*
import io.ktor.client.request.*
import io.ktor.http.*
import io.ktor.serialization.kotlinx.json.*
import io.ktor.utils.io.core.*
import kotlinx.serialization.json.Json

/**
 * Each platform has its own http client engine
 * I will give more details on this later
 */
expect fun clientEngine(): HttpClientEngine

/**
 * Here we have our main APIClient class.
 * 
 * Closeable is a Ktor interface indicating something
 * that must have a "close" method.
 * 
 * We will need that since we are instantiating an httpClient
 * and need to make sure it can be closed to avoid memory leak or further problems.
 */
class APIClient(
    private val token: String,
) : Closeable {
    /**
     * Here we are defining our Ktor http client
     * It has a delegated "lazy" property, to make sure
     * its value is only computed on first access.
     */
    private val httpClient: HttpClient by lazy {
        HttpClient(clientEngine()) {
            /**
             * Notion API requires you to provide a "Notion-Version" header
             */
            defaultRequest {
                header(NOTION_HEADER, NOTION_HEADER_VERSION)
                contentType(ContentType.Application.Json)
            }
            install(Logging) {
                logger = Logger.SIMPLE
                level = LogLevel.ALL
            }
            install(ContentNegotiation) {
                json(
                    Json {
                        ignoreUnknownKeys = true
                        prettyPrint = true
                    },
                )
            }
            install(Auth) {
                bearer {
                    loadTokens {
                        BearerTokens(accessToken = token, refreshToken = token)
                    }
                }
            }
        }
    }

    init {
        require(token.isNotEmpty()) { "Notion API token is required" }
    }

    companion object {
        const val NOTION_HEADER: String = "Notion-Version"
        const val NOTION_HEADER_VERSION: String = "2022-06-28"
        const val API_BASE_URL: String = "https://api.notion.com/v1"
    }

    override fun close() = httpClient.close()
}

// composeApp/src/desktopMain/kotlin/api/APIClient.jvm.kt

package api

import io.ktor.client.engine.HttpClientEngine
import io.ktor.client.engine.cio.CIO

actual fun clientEngine(): HttpClientEngine = CIO.create()

// composeApp/src/iosMain/kotlin/api/APIClient.ios.kt

package api

import io.ktor.client.engine.HttpClientEngine
import io.ktor.client.engine.darwin.Darwin

actual fun clientEngine(): HttpClientEngine = Darwin.create()

// composeApp/src/commonMain/kotlin/api/APIClient.kt

/**
 * You can think of this like a branded type.
 *
 * This is not required for our use case, feel free to just handle `DatabaseId` as plain `String` if you wish, but I thought it would be interesting to bring this up.
 *
 * More details below.
 */
@Serializable
@JvmInline
value class DatabaseId(private val value: String) {
    override fun toString(): String {
        return value
    }
}

// ...

class APIClient(
    private val token: String,
) : Closeable {
    // ...

    suspend fun queryDatabaseOrThrow(
        databaseId: DatabaseId,
        query: QueryDatabaseRequest = QueryDatabaseRequest(),
    ): QueryDatabaseResponse =
        httpClient
            .post("$API_BASE_URL/databases/$databaseId/query") {
                setBody(query)
            }
            .body<QueryDatabaseResponse>()

    override fun close() = httpClient.close()
}

// composeApp/src/commonMain/kotlin/Model.kt

- typealias ExpenseId = String
+ @Serializable
+ @JvmInline
+ value class ExpenseId(private val value: String) {
+     override fun toString(): String {
+         return value
+     }
+ }

// composeApp/src/commonMain/kotlin/api/QueryDatabaseRequest.kt

package api

import kotlinx.serialization.SerialName
import kotlinx.serialization.Serializable

/**
 * https://developers.notion.com/reference/post-database-query
 */
@Serializable
data class QueryDatabaseRequest(
    @SerialName("start_cursor")
    val startCursor: String? = null,
    @SerialName("page_size")
    val pageSize: Int? = 100,
) {
    init {
        pageSize?.let {
            require(it in 1..100) { "Illegal property, pageSize must be between 1 and 100" }
        }
    }
}

// composeApp/src/commonMain/kotlin/api/QueryDatabaseResponse.kt

package api

import kotlinx.serialization.SerialName
import kotlinx.serialization.Serializable

@Serializable
data class QueryDatabaseResponse(
    // https://developers.notion.com/reference/page
    val results: List<ExpensePageResponse>,
    @SerialName("next_cursor")
    val nextCursor: String? = null,
    @SerialName("has_more")
    val hasMore: Boolean,
)

// composeApp/src/commonMain/kotlin/api/ExpensePageResponse.kt

package api

import ExpenseId
import api.model.ExpensePageProperties
import api.model.IconProperty
import kotlinx.serialization.Serializable

@Serializable
data class ExpensePageResponse(
    val id: ExpenseId,
    val icon: IconProperty? = null,
    val properties: ExpensePageProperties,
)

// composeApp/src/commonMain/kotlin/api/model/IconProperty.kt

package api.model

import kotlinx.serialization.Serializable

/**
 * https://developers.notion.com/reference/emoji-object
 */
@Serializable
data class IconProperty(
    val emoji: String? = null,
    val type: String? = "emoji",
)

// composeApp/src/commonMain/kotlin/api/model/ExpensePageProperties.kt

package api.model

import api.serializers.MoneySerializer
import kotlinx.serialization.SerialName
import kotlinx.serialization.Serializable

@Serializable
data class ExpensePageProperties(
    @SerialName("Expense")
    val expense: TitleProperty,
    @SerialName("Amount")
    val amount: NumberProperty,
)

@Serializable
class TitleProperty(val id: String, val title: List<Value>) {
    @Serializable
    data class Value(
        @SerialName("plain_text")
        val plainText: String,
    )
}

@Serializable
data class NumberProperty(
    @Serializable(with = MoneySerializer::class)
    val number: Int,
)

// composeApp/src/commonMain/kotlin/api/serializers/MoneySerializer.kt

package api.serializers

import kotlinx.serialization.KSerializer
import kotlinx.serialization.descriptors.PrimitiveKind
import kotlinx.serialization.descriptors.PrimitiveSerialDescriptor
import kotlinx.serialization.descriptors.SerialDescriptor
import kotlinx.serialization.encoding.Decoder
import kotlinx.serialization.encoding.Encoder

object MoneySerializer : KSerializer<Int> {
    override val descriptor: SerialDescriptor = PrimitiveSerialDescriptor("Money", PrimitiveKind.INT)

    override fun serialize(
        encoder: Encoder,
        value: Int,
    ) = encoder.encodeFloat(value.toFloat() / 100)

    override fun deserialize(decoder: Decoder): Int = (decoder.decodeFloat() * 100).toInt()
}

// composeApp/src/commonMain/kotlin/ui/screens/expenses/ExpensesScreenViewModel.kt

- class ExpensesScreenViewModel : StateScreenModel<ExpensesScreenState>(
+ class ExpensesScreenViewModel(apiClient: APIClient) : StateScreenModel<ExpensesScreenState>(
    ExpensesScreenState(
        data = listOf(),
    ),
) {

// composeApp/build/buildkonfig/commonMain/org/expense/tracker/BuildKonfig.kt

package org.expense.tracker

import kotlin.String

internal object BuildKonfig {
  public val NOTION_TOKEN: String = "MY_TOKEN"

  public val NOTION_DATABASE_ID: String = "MY_DB_ID"
}

// composeApp/src/commonMain/kotlin/utils/Env.kt

package utils

import api.DatabaseId
import org.expense.tracker.BuildKonfig

object Env {
    val NOTION_TOKEN: String
        get() {
            val notionToken = BuildKonfig.NOTION_TOKEN
            require(notionToken.isNotBlank()) { "You must provide a NOTION_TOKEN env variable" }
            return notionToken
        }

    val NOTION_DATABASE_ID: DatabaseId // hey, this is our branded type =D
        get() {
            val notionDatabaseId = BuildKonfig.NOTION_DATABASE_ID
            require(notionDatabaseId.isNotBlank()) { "You must provide a NOTION_DATABASE_ID env variable" }
            return notionDatabaseId
        }
}

// .gitignore

!*.xcworkspace/contents.xcworkspacedata
**/xcshareddata/WorkspaceSettings.xcsettings
+.env

# .env.sample
NOTION_TOKEN=
NOTION_DATABASE_ID=

# .env
NOTION_TOKEN=secret_YOUR_SECRET
NOTION_DATABASE_ID=your_DB_ID

// composeApp/src/commonMain/kotlin/Koin.kt

import api.APIClient
import org.koin.dsl.module
import ui.screens.expenses.ExpensesScreenViewModel
import utils.Env

object Koin {
    val appModule =
        module {
            /**
             * Here we are creating a Koin module and asking
             * > Hey Koin, when someone asks for you an `ApiClient`, please provide the return of this function, and make it a singleton.
             */
            single<APIClient> { APIClient(Env.NOTION_TOKEN) }

            /**
             * Our list screen ViewModel won't be a singleton, we will always re-create it once the user navigates to the screen
             * So in this case we are asking Koin to instantiate a `ExpensesScreenViewModel` every time someone asks Koin for it.
             * The interesting bit here is that `apiClient` parameter will be resolved from the singleton we defined.
             * Koin relies on the type and identifies which thing to inject.
             */
            factory { ExpensesScreenViewModel(apiClient = get()) }
        }
}

<?php

namespace App\Providers;

// ...imports

class MyServiceProvider extends ServiceProvider
{
    public function register(): void    
    {
        $this->app->singleton(
            APIClient::class, 
            fn (Application $app) => new APIClient(env('NOTION_TOKEN')
        );

        // Adds a singleton `Connection`
        $this->app->bind(
            ExpensesScreenViewModel::class, 
            fn (ContainerInterface $container) => new ExpensesScreenViewModel($container->get(APIClient::class));
        );
    }
}

// composeApp/src/commonMain/kotlin/App.kt

@Composable
fun App() {
+    KoinApplication(
+        application = {
+            modules(Koin.appModule)
+        },
+    ) {
        AppTheme {
            Surface(
                modifier = Modifier.fillMaxSize(),
                color = MaterialTheme.colorScheme.background,
            ) {
                Scaffold {
                    Navigator(ExpensesScreen) { navigator ->
                        SlideTransition(navigator)
                    }
                }
            }
        }
    }
+}

// composeApp/src/commonMain/kotlin/ui/screens/expenses/ExpensesScreen.kt

- import cafe.adriel.voyager.core.model.rememberScreenModel
+ import cafe.adriel.voyager.koin.getScreenModel

object ExpensesScreen : Screen {
    @Composable
    override fun Content() {
-        val viewModel = rememberScreenModel { ExpensesScreenViewModel() }    
+        val viewModel = getScreenModel<ExpensesScreenViewModel>()
        val state by viewModel.state.collectAsState()

package ui.screens.expenses

import Expense
import api.APIClient
import cafe.adriel.voyager.core.model.StateScreenModel
import cafe.adriel.voyager.core.model.screenModelScope
import io.github.oshai.kotlinlogging.KotlinLogging
import kotlinx.coroutines.launch
import utils.Env

private val logger = KotlinLogging.logger {}

data class ExpensesScreenState(
    val data: List<Expense>,
) {
    val avgExpenses: String
        get() = data.map { it.price }.average().toString()
}

class ExpensesScreenViewModel(apiClient: APIClient) : StateScreenModel<ExpensesScreenState>(
    ExpensesScreenState(
        data = listOf(),
    ),
) {
    init {
        screenModelScope.launch {
            logger.info { "Fetching expenses" }
            val database = apiClient.queryDatabaseOrThrow(Env.NOTION_DATABASE_ID)
            val expenses = database.results.map {
                Expense(
                    id = it.id,
                    name = it.properties.expense.title.firstOrNull()?.plainText ?: "-",
                    icon = it.icon?.emoji,
                    price = it.properties.amount.number,
                )
            }
            mutableState.value = ExpensesScreenState(
                data = expenses
            )
        }
    }
}