Merge 0d62cf5 into 7a264f8

Easybuoy · Nov 18, 2019 · 9dc5ed6 · 9dc5ed6
2 parents 7a264f8 + 0d62cf5
commit 9dc5ed6
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/src/components/Characters/CharacterList.jsx b/src/components/Characters/CharacterList.jsx
@@ -15,7 +15,8 @@ import {
   sortName,
   calculateFeet,
   calculateInches,
-  filterGender
+  filterGender,
+  sortGender
 } from '../../utils';
 
 export const sortArrow = order => {
@@ -32,6 +33,7 @@ export const sortArrow = order => {
 export const CharacterList = ({ movie, characters, loading }) => {
   const [heightOrder, setHeightOrder] = useState(undefined);
   const [nameOrder, setNameOrder] = useState(undefined);
+  const [genderOrder, setGenderOrder] = useState(undefined);
   const [genderValue, setGenderValue] = useState('Filter Gender');
   const [stateCharacters, setStateCharacters] = useState([]);
 
@@ -75,6 +77,21 @@ export const CharacterList = ({ movie, characters, loading }) => {
     setStateCharacters(sorted);
   };
 
+  const sortGenderField = array => {
+    let sorted = [];
+    if (genderOrder === 0 || genderOrder === undefined) {
+      sorted = sortGender(array, 'asc');
+      setGenderOrder(1);
+    }
+
+    if (genderOrder === 1) {
+      sorted = sortGender(array, 'dsc');
+      setGenderOrder(0);
+    }
+
+    setStateCharacters(sorted);
+  };
+
   const filterGenderField = (array, letter) => {
     const sorted = filterGender(array, letter);
     setStateCharacters(sorted);
@@ -120,7 +137,12 @@ export const CharacterList = ({ movie, characters, loading }) => {
               >
                 Name {sortArrow(nameOrder)}
               </th>
-              <th>Gender</th>
+              <th
+                onClick={() => sortGenderField(characters)}
+                className="toggle gender"
+              >
+                Gender {sortArrow(genderOrder)}
+              </th>
               <th
                 onClick={() => sortHeightField(characters)}
                 className="toggle height"

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -47,6 +47,17 @@ export const sortHeight = (array, order) => {
   }
 };
 
+export const sortGender = (array, order) => {
+  switch (order) {
+    case 'asc':
+      return array.sort((a, b) => a.gender.localeCompare(b.gender));
+    case 'dsc':
+      return array.sort((a, b) => b.gender.localeCompare(a.gender));
+    default:
+      return array;
+  }
+};
+
 export const filterGender = (array, letter) => {
   switch (letter) {
     case 'MALE':

diff --git a/src/utils/index.test.js b/src/utils/index.test.js
@@ -6,6 +6,7 @@ import {
   formatHeight,
   sortHeight,
   sortName,
+  sortGender,
   filterGender,
   initializeLocalStorage,
   oneDayAgo,
@@ -88,6 +89,24 @@ describe('Util', () => {
     expect(response).toEqual(testArray);
   });
 
+  it('test asc case for sortGender', () => {
+    const testArray = [{ gender: 'male' }, { gender: 'female' }];
+    const response = sortGender(testArray, 'asc');
+    expect(response).toEqual([{ gender: 'female' }, { gender: 'male' }]);
+  });
+
+  it('test desc case for sortGender', () => {
+    const testArray = [{ gender: 'male' }, { gender: 'female' }];
+    const response = sortGender(testArray, 'dsc');
+    expect(response).toEqual([{ gender: 'male' }, { gender: 'female' }]);
+  });
+
+  it('test default case for sortGender', () => {
+    const testArray = [{ gender: 'male' }, { gender: 'n/a' }];
+    const response = sortGender(testArray, '');
+    expect(response).toEqual(testArray);
+  });
+
   it('test default case for sortName', () => {
     const testArray = [
       { name: 'Ezekiel', height: 10 },