implement sort gender

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"

src/utils/index.js

@@ -47,6 +47,19 @@ 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':