Skip to content

Commit 66c78f8

Browse files
dotasekdotasek
committed
Use contexts in Header
1 parent dc04a02 commit 66c78f8

File tree

3 files changed

+114
-116
lines changed

3 files changed

+114
-116
lines changed

‎src/jsMain/kotlin/App.kt‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import styled.styledDiv
1212
import ui.components.footer.footer
1313
import ui.components.header.Header
1414
import ui.components.header.HeaderStyle
15+
import ui.components.header.header
1516
import ui.components.main.sectionTitle
1617
import ui.components.options.OptionsPage
1718
import ui.components.tabs.tabLayout
@@ -34,16 +35,8 @@ class App : RComponent<Props, State>() {
3435
+LandingPageStyle.mainDiv
3536
}
3637

37-
child(Header::class) {
38-
attrs.appScreen = appScreen
39-
attrs.polyglot = polyglot
40-
attrs.selectedLanguage = selectedLanguage
41-
42-
attrs.validationContext = validationContext?.validationContext
43-
?: ValidationContext().setBaseEngine("DEFAULT")
44-
attrs.updateValidationContext = { ctx, resetBaseEngine ->
45-
validationContext?.updateValidationContext?.invoke(ctx, resetBaseEngine)
46-
}
38+
header {
39+
// No attrs needed - component consumes contexts directly
4740
}
4841

4942
styledDiv {

‎src/jsMain/kotlin/ui/components/header/Header.kt‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,30 @@ import Polyglot
44
import api.isPackagesServerUp
55
import api.isTerminologyServerUp
66
import context.AppScreenContext
7+
import context.LocalizationContext
78
import css.const.HEADER_SHADOW
89
import css.const.HIGHLIGHT_GRAY
910
import css.const.WHITE
10-
import web.dom.document
11-
import web.window.window
1211
import kotlinx.coroutines.launch
1312
import kotlinx.css.*
1413
import kotlinx.css.properties.borderBottom
1514
import kotlinx.css.properties.boxShadow
1615
import mainScope
1716
import model.AppScreen
18-
import web.events.Event
1917
import react.*
2018
import styled.StyleSheet
2119
import styled.css
2220
import styled.styledDiv
2321
import styled.styledImg
22+
import ui.components.header.LanguageOption.languageSelect
2423
import ui.components.header.SiteStatus.SiteState
2524
import ui.components.header.SiteStatus.siteStatus
26-
import ui.components.header.LanguageOption.languageSelect
2725
import utils.Language
28-
import model.ValidationContext
26+
import web.dom.document
27+
import web.window.window
2928

3029
external interface HeaderProps : Props {
31-
var appScreen: AppScreen
32-
var selectedLanguage: Language
33-
var polyglot: Polyglot
34-
35-
var validationContext: ValidationContext
36-
var updateValidationContext: (ValidationContext, Boolean) -> Unit
30+
// Empty - all data now from contexts
3731
}
3832

3933
class HeaderState : State {
@@ -68,63 +62,69 @@ class Header (props : HeaderProps): RComponent<HeaderProps, HeaderState>() {
6862
}
6963

7064
override fun RBuilder.render() {
71-
AppScreenContext.Consumer { contextValue ->
72-
styledDiv {
73-
css {
74-
+HeaderStyle.headerContainer
75-
if (state.currentScroll > 0) {
76-
boxShadow(color = HEADER_SHADOW, offsetX = 0.px, offsetY = 10.px, blurRadius = 10.px)
77-
}
78-
}
79-
styledImg(src = "images/fhir-logo.png") {
80-
css {
81-
+HeaderStyle.headerImage
82-
}
83-
}
84-
styledDiv {
85-
css {
86-
+HeaderStyle.headerButtonsContainer
87-
}
88-
AppScreen.values().forEach { screen ->
89-
headerTabButton {
90-
name = screen.name
91-
label = props.polyglot.t(screen.polyglotKey)
92-
selected = props.appScreen == screen
93-
onSelected = { buttonName ->
94-
AppScreen.fromDisplay(buttonName)?.let { screen ->
95-
contextValue?.setAppScreen?.invoke(screen)
96-
}
97-
}
98-
}
99-
}
100-
}
65+
AppScreenContext.Consumer { screenContext ->
66+
LocalizationContext.Consumer { localizationContext ->
67+
context.ValidationContext.Consumer { validationContext ->
68+
// Extract values with null-safety defaults
69+
val appScreen = screenContext?.appScreen ?: AppScreen.VALIDATOR
70+
val polyglot = localizationContext?.polyglot ?: Polyglot()
71+
val selectedLanguage = localizationContext?.selectedLanguage ?: Language.ENGLISH
10172

102-
styledDiv {
103-
css {
104-
+HeaderStyle.sideOptions
105-
}
10673
styledDiv {
10774
css {
108-
+HeaderStyle.languageOptionDiv
109-
}
110-
languageSelect{
111-
polyglot = props.polyglot
112-
selectedLanguage = props.selectedLanguage
113-
validationContext = props.validationContext
114-
updateValidationContext = props.updateValidationContext
75+
+HeaderStyle.headerContainer
76+
if (state.currentScroll > 0) {
77+
boxShadow(color = HEADER_SHADOW, offsetX = 0.px, offsetY = 10.px, blurRadius = 10.px)
78+
}
11579
}
116-
}
117-
styledDiv {
118-
css {
119-
+HeaderStyle.siteStatusDiv
80+
styledImg(src = "images/fhir-logo.png") {
81+
css {
82+
+HeaderStyle.headerImage
83+
}
12084
}
121-
siteStatus {
122-
label = "tx.fhir.org"
123-
status = state.terminologyServerState
85+
styledDiv {
86+
css {
87+
+HeaderStyle.headerButtonsContainer
88+
}
89+
AppScreen.values().forEach { screen ->
90+
headerTabButton {
91+
name = screen.name
92+
label = polyglot.t(screen.polyglotKey)
93+
selected = appScreen == screen
94+
onSelected = { buttonName ->
95+
AppScreen.fromDisplay(buttonName)?.let { screen ->
96+
screenContext?.setAppScreen?.invoke(screen)
97+
}
98+
}
99+
}
100+
}
124101
}
125-
siteStatus {
126-
label = "packages2.fhir.org"
127-
status = state.packageServerState
102+
103+
styledDiv {
104+
css {
105+
+HeaderStyle.sideOptions
106+
}
107+
styledDiv {
108+
css {
109+
+HeaderStyle.languageOptionDiv
110+
}
111+
languageSelect {
112+
// No attrs needed - component consumes contexts directly
113+
}
114+
}
115+
styledDiv {
116+
css {
117+
+HeaderStyle.siteStatusDiv
118+
}
119+
siteStatus {
120+
label = "tx.fhir.org"
121+
status = state.terminologyServerState
122+
}
123+
siteStatus {
124+
label = "packages2.fhir.org"
125+
status = state.packageServerState
126+
}
127+
}
128128
}
129129
}
130130
}

‎src/jsMain/kotlin/ui/components/header/LanguageOption/LanguageSelect.kt‎

Lines changed: 49 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -14,65 +14,70 @@ import utils.Language
1414

1515

1616
external interface LanguageSelectProps : Props {
17-
var polyglot: Polyglot
18-
var selectedLanguage : Language
19-
var validationContext: ValidationContext
20-
var updateValidationContext: (ValidationContext, Boolean) -> Unit
21-
17+
// Empty - all data now from contexts
2218
}
2319

2420
class LanguageSelect(props : LanguageSelectProps) : RComponent<LanguageSelectProps, State>() {
2521
init {
2622
}
2723
override fun RBuilder.render() {
2824
LocalizationContext.Consumer { localizationContext ->
29-
Box {
30-
attrs{
31-
sx{
32-
minWidth = 120.px
33-
}
34-
}
35-
FormControl {
36-
attrs {
37-
fullWidth = true
38-
size = Size.small
39-
}
40-
InputLabel {
41-
+props.polyglot.t("language")
42-
}
43-
Select {
25+
context.ValidationContext.Consumer { validationContext ->
26+
// Extract values with null-safety defaults
27+
val polyglot = localizationContext?.polyglot ?: Polyglot()
28+
val selectedLanguage = localizationContext?.selectedLanguage ?: Language.ENGLISH
29+
val currentValidationContext = validationContext?.validationContext
30+
?: model.ValidationContext().setBaseEngine("DEFAULT")
4431

32+
Box {
33+
attrs{
34+
sx{
35+
minWidth = 120.px
36+
}
37+
}
38+
FormControl {
4539
attrs {
46-
label = ReactNode("Language")
47-
value = props.selectedLanguage.getLanguageCode().unsafeCast<Nothing?>()
48-
onChange = { event, _ ->
49-
val selectedLanguage = Language.getSelectedLanguage(event.target.value)
50-
if (selectedLanguage != null) {
51-
// Call context to update language (handles polyglot fetching)
52-
localizationContext?.setLanguage?.invoke(selectedLanguage)
53-
// Update ValidationContext locale
54-
props.updateValidationContext(props.validationContext.setLocale(selectedLanguage.getLanguageCode()), false)
55-
}
56-
}
40+
fullWidth = true
41+
size = Size.small
42+
}
43+
InputLabel {
44+
+polyglot.t("language")
5745
}
46+
Select {
5847

59-
MenuItem {
6048
attrs {
61-
value = Language.ENGLISH.getLanguageCode()
49+
label = ReactNode("Language")
50+
value = selectedLanguage.getLanguageCode().unsafeCast<Nothing?>()
51+
onChange = { event, _ ->
52+
val selectedLang = Language.getSelectedLanguage(event.target.value)
53+
if (selectedLang != null) {
54+
// Call context to update language (handles polyglot fetching)
55+
localizationContext?.setLanguage?.invoke(selectedLang)
56+
// Update ValidationContext locale
57+
val updatedCtx = currentValidationContext.setLocale(selectedLang.getLanguageCode())
58+
validationContext?.updateValidationContext?.invoke(updatedCtx, false)
59+
}
60+
}
6261
}
63-
+Language.ENGLISH.display
64-
}
65-
MenuItem {
66-
attrs {
67-
value = Language.GERMAN.getLanguageCode()
62+
63+
MenuItem {
64+
attrs {
65+
value = Language.ENGLISH.getLanguageCode()
66+
}
67+
+Language.ENGLISH.display
6868
}
69-
+Language.GERMAN.display
70-
}
71-
MenuItem {
72-
attrs {
73-
value = Language.SPANISH.getLanguageCode()
69+
MenuItem {
70+
attrs {
71+
value = Language.GERMAN.getLanguageCode()
72+
}
73+
+Language.GERMAN.display
74+
}
75+
MenuItem {
76+
attrs {
77+
value = Language.SPANISH.getLanguageCode()
78+
}
79+
+Language.SPANISH.display
7480
}
75-
+Language.SPANISH.display
7681
}
7782
}
7883
}

0 commit comments

Comments
 (0)