Sorted filter checkboxes in alphabet order in materials page

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;
+  });
+};

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)}