Supported org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:1.0.0-pre.0.635

gradle/libs.versions.toml

@@ -7,7 +7,7 @@ okio = "3.3.0"
 serialization = "1.6.0"
 kotlinx-datetime = "0.4.1"
 kotlinx-coroutines = "1.7.3"
-kotlin-wrappers = "1.0.0-pre.634"
+kotlin-wrappers = "1.0.0-pre.635"
 spring-boot = "2.7.17"
 spring-cloud = "3.1.8"
 spring-cloud-kubernetes = "2.1.8"

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/App.kt

@@ -4,21 +4,26 @@
 
 package com.saveourtool.save.frontend
 
-import com.saveourtool.save.frontend.components.*
 import com.saveourtool.save.frontend.components.basic.cookieBanner
 import com.saveourtool.save.frontend.components.basic.scrollToTopButton
+import com.saveourtool.save.frontend.components.errorView
+import com.saveourtool.save.frontend.components.footer
+import com.saveourtool.save.frontend.components.requestModalHandler
 import com.saveourtool.save.frontend.components.topbar.topBarComponent
 import com.saveourtool.save.frontend.externals.i18next.initI18n
 import com.saveourtool.save.frontend.externals.modal.ReactModal
-import com.saveourtool.save.frontend.routing.basicRouting
+import com.saveourtool.save.frontend.routing.createBasicRoutes
 import com.saveourtool.save.frontend.utils.*
 import com.saveourtool.save.info.UserInfo
 import com.saveourtool.save.validation.FrontendRoutes
 
+import js.core.jso
 import react.*
 import react.dom.client.createRoot
 import react.dom.html.ReactHTML.div
-import react.router.dom.BrowserRouter
+import react.router.Outlet
+import react.router.dom.RouterProvider
+import react.router.dom.createBrowserRouter
 import web.cssom.ClassName
 import web.dom.document
 import web.html.HTMLElement
@@ -48,32 +53,43 @@ val App: FC<Props> = FC {
             }
         }
     }
-    BrowserRouter {
-        basename = "/"
+
+    val root = FC {
         requestModalHandler {
             this.userInfo = userInfo
             div {
                 className = ClassName("d-flex flex-column")
                 id = "content-wrapper"
-                ErrorBoundary::class.react {
-                    topBarComponent { this.userInfo = userInfo }
-                    div {
-                        className = ClassName("container-fluid")
-                        id = "common-save-container"
-                        basicRouting {
-                            this.userInfo = userInfo
-                            this.userInfoSetter = setUserInfo
-                        }
-                    }
-                    if (kotlinx.browser.window.location.pathname != "/${FrontendRoutes.COOKIE}") {
-                        cookieBanner { }
-                    }
-                    footer { }
+                topBarComponent { this.userInfo = userInfo }
+                div {
+                    className = ClassName("container-fluid")
+                    id = "common-save-container"
+                    Outlet()
+                }
+                if (window.location.pathname != "/${FrontendRoutes.COOKIE}") {
+                    cookieBanner { }
                 }
+                footer { }
             }
         }
         scrollToTopButton()
     }
+
+    RouterProvider {
+        router = createBrowserRouter(
+            routes = arrayOf(
+                jso {
+                    path = "/"
+                    element = root.create()
+                    errorElement = errorView.create()
+                    children = createBasicRoutes(userInfo, setUserInfo)
+                }
+            ),
+            opts = jso {
+                basename = "/"
+            }
+        )
+    }
 }
 
 fun main() {

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/ErrorView.kt

@@ -0,0 +1,28 @@
+/**
+ * A page for errors
+ */
+
+package com.saveourtool.save.frontend.components
+
+import com.saveourtool.save.frontend.components.topbar.topBarComponent
+import com.saveourtool.save.frontend.components.views.FallbackView
+import js.errors.JsError
+import react.FC
+import react.dom.html.ReactHTML.div
+import react.react
+import react.router.useRouteError
+import web.cssom.ClassName
+
+val errorView = FC {
+    val errorMessage = useRouteError().unsafeCast<JsError>().message
+    div {
+        className = ClassName("container-fluid")
+        topBarComponent()
+        FallbackView::class.react {
+            bigText = "Error"
+            smallText = "Something went wrong: $errorMessage"
+        }
+        @Suppress("EMPTY_BLOCK_STRUCTURE_ERROR")
+        footer { }
+    }
+}

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/topbar/TopBarUserField.kt

@@ -87,7 +87,7 @@ val topBarUserField: FC<UserInfoAwareProps> = FC { props ->
                         img {
                             className =
                                     ClassName("ml-2 align-self-center avatar avatar-user width-full border color-bg-default rounded-circle fas mr-2")
-                            src = props.userInfo?.avatar?.avatarRenderer() ?: AVATAR_PROFILE_PLACEHOLDER
+                            src = userInfo.avatar?.avatarRenderer() ?: AVATAR_PROFILE_PLACEHOLDER
                             style = logoSize
                         }
                     } ?: fontAwesomeIcon(icon = faUser) {

save-frontend/src/main/kotlin/com/saveourtool/save/frontend/components/views/usersettings/SettingsViewLeftColumn.kt

@@ -28,7 +28,6 @@ import web.cssom.rem
 internal const val AVATAR_TITLE = "Upload avatar"
 
 val leftSettingsColumn: FC<SettingsProps> = FC { props ->
-    val (avatarImgLink, setAvatarImgLink) = useState<String?>(null)
     val (t) = useTranslation("profile")
 
     div {
@@ -50,8 +49,7 @@ val leftSettingsColumn: FC<SettingsProps> = FC { props ->
                                 className = ClassName("row justify-content-center")
                                 img {
                                     className = ClassName("avatar avatar-user width-full border color-bg-default rounded-circle")
-                                    src = avatarImgLink
-                                        ?: props.userInfo?.avatar?.avatarRenderer()
+                                    src = props.userInfo?.avatar?.avatarRenderer()
                                         ?: AVATAR_PROFILE_PLACEHOLDER
                                     style = jso {
                                         height = 12.rem