Skip to content

Commit dc769c0

Browse files
gordoneySiarhei Balonikau
gordoney
and
Siarhei Balonikau
authored
Refactor/epmgcip 160/refactor languages and css theming (#21)
* refactor/EPMGCIP-160/refactor-languages-and-css-theming * refactor/EPMGCIP-160/refactor-languages-and-css-theming --------- Co-authored-by: Siarhei Balonikau <[email protected]>
1 parent db8f979 commit dc769c0

File tree

18 files changed

+128
-173
lines changed

18 files changed

+128
-173
lines changed

‎src/@types/i18n.d.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import translationEN from '../../locales/en.json'
2+
import EnFlag from './assets/images/EN.png'
3+
4+
declare module 'i18next' {
5+
interface CustomTypeOptions {
6+
resources: {
7+
translation: typeof translationEN
8+
flag: typeof EnFlag
9+
}
10+
}
11+
}
12+
13+
export {}

‎src/components/atoms/Dropdown/Dropdown.module.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
text-transform: uppercase;
1616

1717
&:hover {
18-
background-color: $colorLightGray;
18+
background-color: $secondaryBackgroundColor;
1919
}
2020
}
2121

@@ -50,7 +50,7 @@
5050
width: 100%;
5151
padding: 8px 0;
5252
margin: 4px 0;
53-
background-color: $colorLightGray;
53+
background-color: $secondaryBackgroundColor;
5454
box-shadow: 0px 1px 4px 0px #ababab;
5555
border-radius: 4px;
5656
}
@@ -73,6 +73,6 @@
7373
text-transform: uppercase;
7474

7575
&:hover {
76-
background-color: $colorWhite;
76+
background-color: $mainBackgroundColor;
7777
}
7878
}

‎src/components/atoms/PlayerButton/PlayerButton.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
display: flex;
77
align-items: center;
88
box-sizing: border-box;
9-
color: $colorBlack;
9+
color: $mainFontColor;
1010
}
1111

1212
.icon {

‎src/components/molecules/LanguageSwitcher/LanguageSwitcher.test.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@ jest.mock('react-i18next', () => ({
88
i18n: {
99
language: 'en',
1010
changeLanguage: jest.fn(),
11+
store: {
12+
data: {
13+
en: {
14+
flag: '',
15+
},
16+
ru: {
17+
flag: '',
18+
},
19+
},
20+
},
1121
},
1222
}),
1323
}))

‎src/components/molecules/LanguageSwitcher/LanguageSwitcher.tsx‎

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
import { useTranslation } from 'react-i18next'
2-
import EnFlag from '../../../assets/images/EN.png'
3-
import RuFlag from '../../../assets/images/RU.png'
4-
import UzFlag from '../../../assets/images/UZ.png'
5-
import KaFlag from '../../../assets/images/KA.png'
62
import Dropdown from '../../atoms/Dropdown/Dropdown.tsx'
7-
import {
8-
ENGLISH_LANGUAGE_CODE,
9-
KARAKALPAK_LANGUAGE_CODE,
10-
RUSSIAN_LANGUAGE_CODE,
11-
UZBEK_LANGUAGE_CODE,
12-
} from '../../../constants/languages.ts'
133

144
export default function LanguageSwitcher() {
155
const { i18n } = useTranslation()
@@ -19,26 +9,15 @@ export default function LanguageSwitcher() {
199
localStorage.setItem('i18nextLng', lng)
2010
}
2111

12+
const options = Object.entries(i18n.store.data).map(([lang, data]) => ({
13+
id: lang,
14+
text: lang,
15+
image: data.flag as string,
16+
}))
17+
2218
return (
2319
<Dropdown
24-
options={[
25-
{
26-
id: ENGLISH_LANGUAGE_CODE,
27-
text: ENGLISH_LANGUAGE_CODE,
28-
image: EnFlag,
29-
},
30-
{ id: UZBEK_LANGUAGE_CODE, text: UZBEK_LANGUAGE_CODE, image: UzFlag },
31-
{
32-
id: RUSSIAN_LANGUAGE_CODE,
33-
text: RUSSIAN_LANGUAGE_CODE,
34-
image: RuFlag,
35-
},
36-
{
37-
id: KARAKALPAK_LANGUAGE_CODE,
38-
text: KARAKALPAK_LANGUAGE_CODE,
39-
image: KaFlag,
40-
},
41-
]}
20+
options={options}
4221
defaultOptionId={i18n.language}
4322
onChange={(optionId) => changeLanguage(optionId)}
4423
/>

‎src/components/organisms/Header/Header.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
position: relative;
55
z-index: 10;
66
padding: 8px $indentMobilePageBorder;
7-
border-bottom: 1px solid $colorBlack;
7+
border-bottom: 1px solid $mainBorderColor;
88
display: flex;
99
justify-content: space-between;
1010
align-items: center;

‎src/components/organisms/Header/Header.test.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,16 @@ jest.mock('react-i18next', () => ({
77
t: (str: string) => str,
88
i18n: {
99
changeLanguage: () => new Promise(() => {}),
10+
store: {
11+
data: {
12+
en: {
13+
flag: '',
14+
},
15+
ru: {
16+
flag: '',
17+
},
18+
},
19+
},
1020
},
1121
}),
1222
}))

‎src/components/organisms/Player/Player.scss‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
@import '../../../variables.scss';
22

3-
$colorAudioMain: $colorOrange;
4-
$colorAudioSecondary: $colorPink;
5-
63
.rhap_progress-filled {
74
background-color: $colorAudioMain;
85
}
@@ -24,7 +21,7 @@ $colorAudioSecondary: $colorPink;
2421
.rhap_play-pause-button {
2522
width: auto;
2623
height: auto;
27-
border: 1px solid $colorBlack;
24+
border: 1px solid $mainBorderColor;
2825
font-family: $fontFamilyMain;
2926
font-size: 14px;
3027
font-weight: normal;
@@ -37,7 +34,7 @@ $colorAudioSecondary: $colorPink;
3734
}
3835

3936
.rhap_main-controls-button:active {
40-
background-color: $colorLightGray;
37+
background-color: $secondaryBackgroundColor;
4138
}
4239

4340
.rhap_main-controls {

‎src/components/pages/Exhibit/Exhibit.module.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22

33
.exhibit {
44
padding: 40px 0;
5-
font-size: $fontSizeDefault;
5+
font-size: $mainFontSize;
66
}
77

88
.title {
99
margin: 0 0 12px 0;
1010
padding: 0 $indentMobilePageBorder;
1111
text-align: center;
1212
font-weight: bold;
13-
font-size: $fontSizeXXLarge;
13+
font-size: $titleFontSize;
1414

1515
@media (min-width: $breakpointTablet) {
1616
padding: 0 $indentTabletPageBorder;
@@ -20,7 +20,7 @@
2020
.author {
2121
padding: 0 $indentMobilePageBorder 32px $indentMobilePageBorder;
2222
text-align: center;
23-
font-size: $fontSizeDefault;
23+
font-size: $mainFontSize;
2424

2525
@media (min-width: $breakpointTablet) {
2626
padding: 0 $indentTabletPageBorder 32px $indentTabletPageBorder;
@@ -37,7 +37,7 @@
3737

3838
.descriptionName {
3939
padding-bottom: 8px;
40-
font-size: $fontSizeSmall;
40+
font-size: $sectionTitleFontSize;
4141
font-weight: bold;
4242
}
4343

@@ -49,7 +49,7 @@
4949
table,
5050
td,
5151
th {
52-
border: 1px solid $colorBlack;
52+
border: 1px solid $mainBorderColor;
5353
}
5454

5555
table {

‎src/components/pages/Exhibit/Exhibit.tsx‎

Lines changed: 16 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -8,49 +8,9 @@ import styles from './Exhibit.module.scss'
88
import Loading from '../../atoms/Loading/Loading.tsx'
99
import ImageGallery from '../../organisms/ImageGallery/ImageGallery.tsx'
1010
import Player from '../../organisms/Player/Player.tsx'
11-
import capitalizeFirstLetter from '../../../utils/capitalizeFirstLetter.ts'
12-
import {
13-
ENGLISH_LANGUAGE_CODE,
14-
KARAKALPAK_LANGUAGE_CODE,
15-
RUSSIAN_LANGUAGE_CODE,
16-
UZBEK_LANGUAGE_CODE,
17-
} from '../../../constants/languages.ts'
18-
import {
19-
NameLanguageField,
20-
AuthorLanguageField,
21-
AudioLanguageField,
22-
DescriptionLanguageField,
23-
LanguageField,
24-
} from '../../../types/languages.ts'
2511
import triggerGtagVisit from '../../../gtag/visit.ts'
2612
import useImageGalleryStore from '../../../stores/useImageGalleryStore.ts'
27-
28-
const languageFields: Record<string, Record<string, LanguageField>> = {
29-
[ENGLISH_LANGUAGE_CODE]: {
30-
name: 'nameEn',
31-
author: 'authorEn',
32-
audioFile: 'audioFileEn',
33-
description: 'descriptionEn',
34-
},
35-
[RUSSIAN_LANGUAGE_CODE]: {
36-
name: 'nameRu',
37-
author: 'authorRu',
38-
audioFile: 'audioFileRu',
39-
description: 'descriptionRu',
40-
},
41-
[UZBEK_LANGUAGE_CODE]: {
42-
name: 'nameUz',
43-
author: 'authorUz',
44-
audioFile: 'audioFileUz',
45-
description: 'descriptionUz',
46-
},
47-
[KARAKALPAK_LANGUAGE_CODE]: {
48-
name: 'nameKa',
49-
author: 'authorKa',
50-
audioFile: 'audioFileKa',
51-
description: 'descriptionKa',
52-
},
53-
}
13+
import { LanguageCode, languages } from '../../../i18n.ts'
5414

5515
interface Props {
5616
slug: string
@@ -73,7 +33,11 @@ export default function ExhibitPage({ slug }: Props) {
7333
const { data, loading, error } = useGetExhibitQuery({
7434
variables: { slug },
7535
})
76-
const { i18n, t } = useTranslation()
36+
const {
37+
i18n: { language },
38+
t,
39+
} = useTranslation()
40+
const currentLanguage = language as LanguageCode
7741
const exhibit = data?.exhibitCollection?.items[0]
7842

7943
const images =
@@ -83,36 +47,28 @@ export default function ExhibitPage({ slug }: Props) {
8347
})) || []
8448

8549
const getExhibitNotFoundForLanguageMessage = () => {
86-
const messages = Object.keys(languageFields)
87-
.filter((lang) => exhibit?.[languageFields[lang].name])
50+
const messages = languages
51+
.filter((lang) => exhibit?.[`name${lang}`])
8852
.map(
8953
(lang) =>
90-
`<a href="/${slug}?lng=${lang}">${t(`exhibitNotFound${capitalizeFirstLetter(lang)}`)}</a>`,
54+
`<a href="/${slug}?lng=${lang}">${t(`exhibitNotFound${lang}`)}</a>`,
9155
)
9256

9357
return `${t('exhibitNotFoundForLanguage')} ${messages.join(', ')}`
9458
}
9559

96-
const title =
97-
exhibit?.[languageFields[i18n.language].name as NameLanguageField]
98-
const author =
99-
exhibit?.[languageFields[i18n.language].author as AuthorLanguageField]
100-
const audioFile =
101-
exhibit?.[languageFields[i18n.language].audioFile as AudioLanguageField]
102-
?.url
103-
const description =
104-
exhibit?.[
105-
languageFields[i18n.language].description as DescriptionLanguageField
106-
]?.json
60+
const title = exhibit?.[`name${currentLanguage}`]
61+
const author = exhibit?.[`author${currentLanguage}`]
62+
const audioFile = exhibit?.[`audioFile${currentLanguage}`]?.url
63+
const description = exhibit?.[`description${currentLanguage}`]?.json
10764

10865
useEffect(() => {
109-
if (exhibit?.sys.id && slug && i18n.language) {
110-
triggerGtagVisit(exhibit.sys.id, i18n.language, slug)
66+
if (exhibit?.sys.id && slug && currentLanguage) {
67+
triggerGtagVisit(exhibit.sys.id, currentLanguage, slug)
11168
}
112-
}, [exhibit?.sys.id, slug, i18n.language])
69+
}, [exhibit?.sys.id, slug, currentLanguage])
11370

11471
useEffect(() => {
115-
console.log('1111', document.getElementById('exhibit-description'))
11672
document
11773
.getElementById('exhibit-description')
11874
?.querySelectorAll('a')

0 commit comments

Comments
 (0)