diff --git a/src/old/lib/utilities/sorting.ts b/src/old/lib/utilities/sorting.ts new file mode 100644 index 000000000..4323b6096 --- /dev/null +++ b/src/old/lib/utilities/sorting.ts @@ -0,0 +1,16 @@ +import { IPostType, IOrigin, IDirection } from '../types'; + +export const sortByAlphabet = ( + array: IDirection[], + sortBy: string | undefined = 'name', +): IDirection[] => { + return array?.sort((prev, current) => { + if (prev[sortBy] > current[sortBy]) { + return 1; + } + if (prev[sortBy] < current[sortBy]) { + return -1; + } + return 0; + }); +}; diff --git a/src/old/modules/materials/components/MaterialsView.tsx b/src/old/modules/materials/components/MaterialsView.tsx index 7c0ff954e..752f674fb 100644 --- a/src/old/modules/materials/components/MaterialsView.tsx +++ b/src/old/modules/materials/components/MaterialsView.tsx @@ -1,4 +1,5 @@ /* eslint-disable @typescript-eslint/no-shadow */ +/* eslint-disable @typescript-eslint/no-unsafe-assignment */ import { Box, Grid, Typography } from '@material-ui/core'; import { isEmpty, uniq } from 'lodash'; import React, { useEffect, useState } from 'react'; @@ -50,6 +51,7 @@ import { updateOrig, updateDir, } from '../../utilities/utilityFunctions'; +import { sortByAlphabet } from '../../../lib/utilities/sorting'; const MaterialsView: React.FC = () => { const { t } = useTranslation(); @@ -79,57 +81,53 @@ const MaterialsView: React.FC = () => { const materials = selectPostsByIds(postIds); const origins = useSelector(selectOrigins); const originsInPlural: IOrigin[] = []; - + // here we translate origins and put them in proper order if (origins.length) { - const el1: IOrigin = { ...origins[0] }; - const el2: IOrigin = { ...origins[1] }; - const el3: IOrigin = { ...origins[2] }; - - Object.defineProperty(el1, 'name', { - enumerable: false, - configurable: true, - writable: true, - value: `${t(langTokens.experts.expertOpinion, defaultPlural)}`, - }); - Object.defineProperty(el3, 'name', { - enumerable: false, - configurable: true, - writable: true, - value: `${t(langTokens.common.translation, defaultPlural)}`, + const translatedOrigins = origins.map((origin) => { + const translations = { + '1': `${t(langTokens.experts.expertOpinion, defaultPlural)}`, + '3': `${t(langTokens.common.translation, defaultPlural)}`, + }; + const translatedOrigin = { ...origin }; + translatedOrigin.name = translations[origin.id] || origin.name; + return translatedOrigin; }); - - originsInPlural.push(el1, el3, el2); + originsInPlural.push( + translatedOrigins[0], + translatedOrigins[2], + translatedOrigins[1], + ); } const postTypes = useSelector(selectPostTypes); const postTypesInPlural: IPostType[] = []; + // here we translate types and put them in proper order if (postTypes.length) { - const el1: IPostType = { ...postTypes[0] }; - const el2: IPostType = { ...postTypes[1] }; - const el3: IPostType = { ...postTypes[2] }; - - Object.defineProperty(el1, 'name', { - enumerable: false, - configurable: true, - writable: true, - value: `${t(langTokens.common.article_1, defaultPlural)}`, - }); - Object.defineProperty(el2, 'name', { - enumerable: false, - configurable: true, - writable: true, - value: `${t(langTokens.common.video)}`, - }); - Object.defineProperty(el3, 'name', { - enumerable: false, - configurable: true, - writable: true, - value: `${t(langTokens.common.post, defaultPlural)}`, + const translatedPostTypes = postTypes.map((postType) => { + const translations = { + '1': `${t(langTokens.common.article_1, defaultPlural)}`, + '2': `${t(langTokens.common.video)}`, + '3': `${t(langTokens.common.post, defaultPlural)}`, + }; + const translatedPostType = { ...postType }; + translatedPostType.name = translations[postType.id] || postType.name; + return translatedPostType; }); - postTypesInPlural.push(el1, el3, el2); + postTypesInPlural.push( + translatedPostTypes[0], + translatedPostTypes[2], + translatedPostTypes[1], + ); } const directions = useSelector(selectDirections); + const directionsInPlural: IDirection[] = []; + // here we sorted directions in alphabet order + if (directions.length) { + const directionsToSort = directions.map((direction) => ({ ...direction })); + const sortedDirections = sortByAlphabet(directionsToSort, 'label'); + directionsInPlural.push(...sortedDirections); + } const propertiesLoaded = !isEmpty(postTypes) && !isEmpty(directions) && !isEmpty(origins); @@ -195,7 +193,6 @@ const MaterialsView: React.FC = () => { const queryType = getQueryTypeByFilterType(filterType); const checkedIds = Object.keys(checked).filter((key) => checked[key]); const isQuerySame = uniq(Object.values(checked)).length === 1; // removing the query if user checks/unchecks the last box - query.set(queryType, checkedIds.join(',')); if (!checkedIds.length || isQuerySame) { query.delete(queryType); @@ -264,7 +261,7 @@ const MaterialsView: React.FC = () => { let selectedDirections: | IDirection[] - | filtersStateEnum = directions?.filter((direction) => + | filtersStateEnum = directionsInPlural?.filter((direction) => selectedDirectionsString?.includes(direction.id.toString()), ); @@ -380,7 +377,6 @@ const MaterialsView: React.FC = () => { chipsListType: ChipFilterType | undefined, ) => { let filtersUpdatedByChips: undefined | CheckboxFormStateType; - if (chipsListType === 'ORIGIN') { filtersUpdatedByChips = { ...checkedFiltersOrigins }; } else if (chipsListType === 'POST_TYPE') { @@ -509,7 +505,7 @@ const MaterialsView: React.FC = () => { onFormChange={(checked) => setFilters(checked, FilterTypeEnum.DIRECTIONS) } - possibleFilters={directions} + possibleFilters={directionsInPlural} selectedFilters={selectedDirections} filterTitle={t(langTokens.common.byDirection).toLowerCase()} allTitle={t(langTokens.common.allDirections)}