Прикладное программирование. Web-приложения

Данные

data class Course(
    val name: String,
    val students: List<Student>,
    val marked: List<Boolean> = students.map { false }
)

val courseList =
    listOf(
        "Math",
        "Phys",
        "Story"
    ).map {
        Course(it, studentList)
    }

Компонент `studentList`

external interface StudentListProps : Props {
    var list: List<Student>
    var marked: List<Boolean>
    var clickItem: (Int) -> Unit }
val CStudentList = FC<StudentListProps>("StudentList") {props ->
    ol {
        props.list.mapIndexed { index, _student ->
            li {
                CStudent {
                    student = _student
                }
                if (props.marked[index])
                    css {
                        fontWeight = FontWeight.bold
                    }
                onClick = {
                    props.clickItem(index)
                } } } } }

Компонент `course`

external interface CourseProps : Props {
    var course: Course
    var setCourse: StateSetter<Course>
}
val CCourse = FC<CourseProps>("course") { props ->
    div {
        h3 { +props.course.name }
        CStudentList {
            list = props.course.students
            marked = props.course.marked
            clickItem = { clickIndex ->
                props.setCourse(
                    props.course.copy(
                        marked = props.course.marked
                            .mapIndexed { index, mark ->
                                if (index == clickIndex) 
                                    !mark else mark })
                )
            } } } }

Компонент `app`. Ссылки

val app = FC<Props>("App") {
    val (mode, setMode) = useState("Full")
    val courses = courseList.map { useState(it) }
    CModePicker { ...  }
    shortOutput.Provider(mode) {
        HashRouter {
            div {
                css { display = Display.flex }
                courses.map {(_course, _) ->
                    val name = _course.name
                    Link {
                        css { flex = Flex.minContent }
                        +name
                        to = name
                    }
                }
            }

Компонент `app`. Маршруты

Routes {
    courses.map {(_course, _setCourse) ->
        Route {
            path = _course.name
            element = CCourse.create {
                course = _course
                setCourse = _setCourse
            }
        }
    }
}

Параметры маршрута

Routes {
    Route {
        path = ":name"
        element = CCoursePicker.create {
            this.courses = courses
        }
    }
}

Информация о маршруте

external interface CoursePickerProps : Props {
    var courses: List<StateInstance<Course>> }

val CCoursePicker = FC<CoursePickerProps>("CoursePicker") 
{ props ->
    val params: Record<String, String> = useParams()
    val courseName = params["name"]
    val courseStateInstance = props.courses.firstOrNull {
        it.component1().name == courseName
    }
    if (courseStateInstance == null) {
        div {
            +"No course with name $courseName"
        }
    } else {
        CCourse {
            course = courseStateInstance.component1()
            setCourse = courseStateInstance.component2()
        }
    }
}

Данные data class Course ( val name: String, val students: List<Student>, val marked: List< Boolean > = students.map { false } ) val courseList = listOf( "Math" , "Phys" , "Story" ).map { Course(it, studentList) }