Sort word list by en + refactoring (#364)

src/components/LangSelector/LangSelector.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames'
 import { useDispatch } from 'react-redux'
 
+import { EN, ISV } from 'consts'
+
 import { t } from 'translations'
 
 import { langAction } from 'actions'
@@ -23,15 +25,15 @@ const LangPart =
     ({ lang, dir, onSelect }: ILangPart) => {
         const langs = useDictionaryLanguages()
 
-        if (lang === 'isv') {
+        if (lang === ISV) {
             return (
                 <div className="lang-selector__isv">
                     {t('isvLang')}
                 </div>
             )
         }
 
-        const options = ['en', ...langs].map((value) => ({
+        const options = [EN, ...langs].map((value) => ({
             name: t(`${value}Lang`),
             value,
         }))
@@ -75,7 +77,7 @@ export const LangSelector =
                     data-testid="change-direction"
                     type="button"
                     aria-label="Change translation direction"
-                    className={classNames('lang-selector__change-dir-button', { rotate: from === 'isv' })}
+                    className={classNames('lang-selector__change-dir-button', { rotate: from === ISV })}
                     onClick={() => dispatch(langAction({
                         from: to,
                         to: from,

src/components/Modals/TranslationsModal/TranslationsModal.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
 
-import { addLangs, langs } from 'consts'
+import { ADD_LANGS, EN, ISV, LANGS } from 'consts'
 
 import { t } from 'translations'
 
@@ -52,12 +52,12 @@ export const TranslationsModal =
             return null
         }
 
-        const addLangsFiltered = addLangs.filter((lang) => dictionaryLanguages.includes(lang))
+        const addLangsFiltered = ADD_LANGS.filter((lang) => dictionaryLanguages.includes(lang))
 
         const allLangs = [
-            'isv',
-            'en',
-            ...langs,
+            ISV,
+            EN,
+            ...LANGS,
             ...addLangsFiltered,
         ]
 

src/components/Pages/Settings/Settings.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import { useState } from 'react'
 import { useDispatch } from 'react-redux'
 
-import { addLangs, interfaceLanguageList } from 'consts'
+import { ADD_LANGS, EN, interfaceLanguageList } from 'consts'
 
 import { t } from 'translations'
 
@@ -211,7 +211,7 @@ export const Settings =
                     )}
                 </h6>
                 <div className={classNames('settings__add-langs', { 'settings__add-langs-loading': isLoading })}>
-                    {addLangs.map((lang, i) => {
+                    {ADD_LANGS.map((lang, i) => {
                         const checked = dictionaryLanguages.includes(lang)
 
                         return (
@@ -225,15 +225,15 @@ export const Settings =
 
                                     if (checked && from === lang) {
                                         dispatch(langAction({
-                                            from: 'en',
+                                            from: EN,
                                             to,
                                         }))
                                     }
 
                                     if (checked && to === lang) {
                                         dispatch(langAction({
                                             from,
-                                            to: 'en',
+                                            to: EN,
                                         }))
                                     }
 

src/components/Pages/Viewer/Viewer.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model'
 import { Grid, GridOptions,ModuleRegistry  } from '@ag-grid-community/core'
 
-import { addLangs, initialFields, langs,validFields } from 'consts'
+import { ADD_LANGS, EN, initialFields, ISV, LANGS, validFields } from 'consts'
 
 import { t } from 'translations'
 
@@ -48,17 +48,17 @@ const getFieldWidth = (field: string): number => {
 const customSort = (field: string) => {
     if (field === 'id') {
         return (a: number, b: number) => a - b
-    } else if (field === 'isv') {
+    } else if (field === ISV) {
         return (a: string, b: string) => removeExclamationMark(a).localeCompare(removeExclamationMark(b), 'sk')
-    } else if (field === 'en' || langs.includes(field) || addLangs.includes(field)) {
+    } else if (field === EN || LANGS.includes(field) || ADD_LANGS.includes(field)) {
         return (a: string, b: string) => removeExclamationMark(a).localeCompare(removeExclamationMark(b), `${field}`)
     } else {
         return undefined
     }
 }
 
 const customFilterParams = (field: string) => {
-    if (field === 'isv' || field === 'en' || langs.includes(field) || addLangs.includes(field)) {
+    if (field === ISV || field === EN || LANGS.includes(field) || ADD_LANGS.includes(field)) {
         return {
             filterOptions: [
                 'equals', 'notEqual', 'contains', 'notContains', 'startsWith', 'endsWith',
@@ -164,7 +164,7 @@ const prepareColumnDefs = (displayFields) => {
                 pinned: initialFields.includes(field) ? 'left' : false,
                 lockPinned: initialFields.includes(field),
                 cellClass: initialFields.includes(field) ? 'lock-pinned' : '',
-                headerTooltip: ['isv', ...langs, ...addLangs].includes(field) ? t(`${field}Lang`) : field,
+                headerTooltip: ['isv', ...LANGS, ...ADD_LANGS].includes(field) ? t(`${field}Lang`) : field,
                 tooltipField: field,
                 width: getFieldWidth(field),
                 cellStyle: getCellStyle,

src/consts.ts

@@ -13,7 +13,11 @@ export const alphabetTypes = [
     },
 ]
 
-export const langs = [
+export const ISV_SRC = 'isv-src'
+export const ISV = 'isv'
+export const EN = 'en'
+
+export const LANGS = [
     'ru',
     'be',
     'uk',
@@ -27,7 +31,7 @@ export const langs = [
     'bg',
 ]
 
-export const addLangs = [
+export const ADD_LANGS = [
     'de',
     'nl',
     'eo',
@@ -64,12 +68,12 @@ export const initialAddFields = [
 
 export const basicFields = [
     ...initialFields,
-    ...langs,
+    ...LANGS,
 ]
 
 export const validFields = [
     ...basicFields,
-    ...addLangs,
+    ...ADD_LANGS,
 ]
 
 export interface ITableData {
@@ -87,7 +91,7 @@ export const tablesData: ITableData[] = [
     {
         spreadsheetId: '1N79e_yVHDo-d026HljueuKJlAAdeELAiPzdFzdBuKbY',
         sheetId: '2005431854',
-        fields: addLangs,
+        fields: ADD_LANGS,
     },
 ]
 

src/serviceWorker/cashUrls.ts

@@ -1,10 +1,10 @@
-import { addLangs } from 'consts'
+import { ADD_LANGS } from 'consts'
 
 export const CASH_URLS = [
     '/',
     '/data/basic.json',
     '/data/translateStatistic.json',
-    ...addLangs.map((lang) => `/data/${lang}.json`),
+    ...ADD_LANGS.map((lang) => `/data/${lang}.json`),
     '/grammarComponent.js',
     '/index.js',
     '/sw.js',

src/services/dictionary.ts

@@ -1,4 +1,4 @@
-import { addLangs,langs } from 'consts'
+import { ADD_LANGS, EN,ISV, ISV_SRC, LANGS } from 'consts'
 
 import { IAlphabets } from 'reducers'
 
@@ -155,9 +155,6 @@ export interface ITranslateResult {
     remove?: boolean;
 }
 
-export const ISV_SRC = 'isv-src'
-export const ISV = 'isv'
-
 export type WordList = string[][]
 export type SearchIndex = Record<string, Array<[string, string[]]>>
 
@@ -205,9 +202,9 @@ class DictionaryClass {
 
         this.langsList = [
             ISV,
-            'en',
-            ...langs,
-            ...addLangs,
+            EN,
+            ...LANGS,
+            ...ADD_LANGS,
         ].filter((lang) => this.header.includes(lang))
 
         this.headerIndexes = new Map(this.header.map((item, i: number) => [this.header[i], i]))

src/services/fetchDictionary.ts

@@ -1,4 +1,4 @@
-import { addLangs } from 'consts'
+import { ADD_LANGS } from 'consts'
 
 import { isLoadingAction, runSearch } from 'actions'
 
@@ -38,7 +38,7 @@ export async function fetchDictionary(dispatch, langList: string[]) {
 
     const stat = await fetchStat()
     const basicData = await fetchBasic()
-    const langsData = await fetchLangs(langList.filter((lang) => addLangs.includes(lang)))
+    const langsData = await fetchLangs(langList.filter((lang) => ADD_LANGS.includes(lang)))
 
     langsData.forEach((langData) => {
         basicData.searchIndex = {

src/services/generateDictionary.ts

@@ -1,8 +1,8 @@
 import * as fs from 'fs'
 
-import { addLangs, initialAddFields, initialFields,langs } from 'consts'
+import { ADD_LANGS, EN, initialAddFields, initialFields, ISV, ISV_SRC, LANGS } from 'consts'
 
-import { Dictionary, ISV, ISV_SRC, loadTablesData } from 'services'
+import { Dictionary, loadTablesData } from 'services'
 
 import { getColumnName, transposeMatrix } from 'utils'
 
@@ -21,23 +21,25 @@ loadTablesData.then(({ data, columns }) => {
     columns.forEach((column: string[]) => {
         const fieldName = getColumnName(column)
 
-        if (initialFilteredFields.includes(fieldName) || langs.includes(fieldName)) {
+        if (initialFilteredFields.includes(fieldName) || LANGS.includes(fieldName)) {
             basicDataTransposed.push(column)
         }
     })
 
     let basicData = transposeMatrix<string>(basicDataTransposed)
 
+    const sortIndex = basicData[0].indexOf(EN)
+
     basicData = [
         basicData[0],
-        ...basicData.slice(1).sort((a, b) => a[1].localeCompare(b[1])),
+        ...basicData.slice(1).sort((a, b) => a[sortIndex].localeCompare(b[sortIndex])),
     ]
 
     const searchIndexBasic = [
         ISV_SRC,
         ISV,
-        'en',
-        ...langs,
+        EN,
+        ...LANGS,
     ].reduce((searchIndexObj, lang) => {
         searchIndexObj[lang] = searchIndex[lang]
 
@@ -60,7 +62,7 @@ loadTablesData.then(({ data, columns }) => {
     // eslint-disable-next-line no-console
     console.info(`basic.json g-zip size: ${sizeMB.toFixed(2)} MB`)
 
-    addLangs.forEach((lang) => {
+    ADD_LANGS.forEach((lang) => {
         const langDataTransposed = [
             columns.find(([fieldName]) => fieldName === lang),
         ]

src/store.ts

@@ -1,4 +1,4 @@
-import { langs } from './consts'
+import { EN, ISV,LANGS } from './consts'
 import { localStorageMiddleware } from './middlewares/localStorageMiddleware'
 import { urlParamsMiddleware } from './middlewares/urlParamsMiddleware'
 import { IMainState, mainReducer } from './reducers'
@@ -11,8 +11,8 @@ import md5 from 'md5'
 
 export const defaultState: IMainState = {
     lang: {
-        from: 'en',
-        to: 'isv',
+        from: EN,
+        to: ISV,
     },
     interfaceLang: getPreferredLanguage(),
     colorTheme: getPreferredTheme(),
@@ -26,7 +26,7 @@ export const defaultState: IMainState = {
     fromText: '',
     searchType: 'begin',
     posFilter: '',
-    dictionaryLanguages: langs,
+    dictionaryLanguages: LANGS,
     flavorisationType: '3',
     alphabetType: 'latin',
     page: 'dictionary',
@@ -54,10 +54,10 @@ function getInitialState(): IMainState {
     try {
         const savedState = JSON.parse(localStorage.getItem('reduxState')) || {}
 
-        if (savedState.lang.from !== 'isv' && savedState.lang.to !== 'isv') {
+        if (savedState.lang.from !== ISV && savedState.lang.to !== ISV) {
             savedState.lang = {
-                from: 'en',
-                to: 'isv',
+                from: EN,
+                to: ISV,
             }
         }
 
@@ -68,7 +68,7 @@ function getInitialState(): IMainState {
         if (validateLang(lang)) {
             const [from, to] = lang.split('-')
 
-            const loadedLangs = ['en', ...savedState.dictionaryLanguages]
+            const loadedLangs = [EN, ...savedState.dictionaryLanguages]
 
             if (loadedLangs.includes(from) || loadedLangs.includes(to)) {
                 savedState.lang = {

src/translations/translations.ts

@@ -8,6 +8,8 @@ import {
     parseI18nString,
 } from 'utils'
 
+import { ISV } from '../consts'
+
 let currentLang
 
 const toLatin = createTaggedTemplate((s) => getLatin(String(s), '3'), 'strings')
@@ -29,7 +31,7 @@ function tRaw(key) {
     if (!translations[key]) {
         return key
     } else if (translations[key][lang]) {
-        if (lang === 'isv') {
+        if (lang === ISV) {
             const parsed = parseI18nString(translations[key].isv)
             // transliteration & flavorisation of isv word
             switch (alphabet) {

src/utils/getPreferredLanguage/getPreferredLanguage.ts

@@ -1,18 +1,18 @@
-import { interfaceLanguageList } from 'consts'
+import { EN,interfaceLanguageList } from 'consts'
 
 import { intersection } from 'utils'
 
 const supportedLanguages = interfaceLanguageList.map(item => item.value)
 
 export function getPreferredLanguage(): string {
     if (typeof navigator === 'undefined' || !navigator.languages) {
-        return 'en'
+        return EN
     }
 
     const languages = navigator.languages.map(getPrimaryTag)
     const relevantLanguages = intersection(languages, supportedLanguages)
 
-    return relevantLanguages.length > 0 ? relevantLanguages[0] : 'en'
+    return relevantLanguages.length > 0 ? relevantLanguages[0] : EN
 }
 
 function getPrimaryTag(languageCode: string): string {

src/utils/validateLang/validateLang.ts

@@ -1,10 +1,10 @@
-import { addLangs, langs } from 'consts'
+import { ADD_LANGS, EN,LANGS } from 'consts'
 
 export function validateLang(lang: string): boolean {
     const validLangs: string[] = [
-        'en',
-        ...langs,
-        ...addLangs,
+        EN,
+        ...LANGS,
+        ...ADD_LANGS,
     ].reduce((acc, lang) => [...acc, `isv-${lang}`, `${lang}-isv`], [])
 
     return Boolean(lang && validLangs.includes(lang))