feat: [2U-530] added alphabetically sorting for course list (#58)

* feat: added alphabetically sorting for course list

* refactor: sorted all tabs

* refactor: added tests

src/studio-home/tabs-section/archived-tab/index.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import CardItem from '../../card-item';
+import { sortAlphabeticallyArray } from '../utils';
 
 const ArchivedTab = ({ archivedCoursesData }) => (
   <div className="courses-tab">
-    {archivedCoursesData.map(({
+    {sortAlphabeticallyArray(archivedCoursesData).map(({
       courseKey, displayName, lmsLink, org, rerunLink, number, run, url,
     }) => (
       <CardItem

src/studio-home/tabs-section/courses-tab/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import CardItem from '../../card-item';
+import { sortAlphabeticallyArray } from '../utils';
 import DefaultSection from './default-section';
 
 const CoursesTab = ({ coursesDataItems }) => {
@@ -11,7 +12,7 @@ const CoursesTab = ({ coursesDataItems }) => {
     );
   }
 
-  return coursesDataItems.map(({
+  return sortAlphabeticallyArray(coursesDataItems).map(({
     courseKey, displayName, lmsLink, org, rerunLink, number, run, url,
   }) => (
     <CardItem

src/studio-home/tabs-section/libraries-tab/index.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import CardItem from '../../card-item';
+import { sortAlphabeticallyArray } from '../utils';
 
 const LibrariesTab = ({ libraries }) => (
   <div className="courses-tab">
-    {libraries.map(({
+    {sortAlphabeticallyArray(libraries).map(({
       displayName, org, number, url,
     }) => (
       <CardItem

src/studio-home/tabs-section/utils.js

@@ -0,0 +1,12 @@
+/**
+ * Alphabetical sorting for arrays of courses and libraries.
+ *
+ * @param {array} arr - Array of courses or libraries.
+ * @returns {array} - An array of alphabetically sorted courses or libraries.
+ */
+const sortAlphabeticallyArray = (arr) => [...arr]
+  .sort((firstArrayData, secondArrayData) => firstArrayData
+    .displayName.localeCompare(secondArrayData.displayName));
+
+// eslint-disable-next-line import/prefer-default-export
+export { sortAlphabeticallyArray };

src/studio-home/tabs-section/utils.test.js

@@ -0,0 +1,26 @@
+import { sortAlphabeticallyArray } from './utils';
+
+const testData = [
+  { displayName: 'Apple' },
+  { displayName: 'Orange' },
+  { displayName: 'Banana' },
+];
+
+describe('sortAlphabeticallyArray', () => {
+  it('sortAlphabeticallyArray sorts array alphabetically', () => {
+    const sortedData = sortAlphabeticallyArray(testData);
+
+    expect(sortedData).toEqual([
+      { displayName: 'Apple' },
+      { displayName: 'Banana' },
+      { displayName: 'Orange' },
+    ]);
+  });
+
+  it('sortAlphabeticallyArray does not mutate the original array', () => {
+    const originalData = [...testData];
+    sortAlphabeticallyArray(testData);
+
+    expect(testData).toEqual(originalData);
+  });
+});