Merge 8eb0239 into 1659578

src/components/Characters/CharacterList.jsx

@@ -16,7 +16,8 @@ import {
   calculateFeet,
   calculateInches,
   filterGender,
-  sortGender
+  sortGender,
+  genderFilterFromCharacters
 } from '../../utils';
 
 export const sortArrow = order => {
@@ -37,8 +38,11 @@ export const CharacterList = ({ movie, characters, loading }) => {
   const [genderValue, setGenderValue] = useState('Filter Gender');
   const [stateCharacters, setStateCharacters] = useState([]);
   const [movieInState, setMovieInState] = useState({});
+  const [genderFilter, setGenderFilter] = useState([]);
 
   useEffect(() => {
+    const filters = genderFilterFromCharacters(characters)
+    setGenderFilter(filters);
     if (characters.length > 0 && movieInState.title !== movie.title) {
       setStateCharacters([]);
       setMovieInState(movie);
@@ -118,13 +122,6 @@ export const CharacterList = ({ movie, characters, loading }) => {
     if (stateCharacters.length > 0) {
       totalHeight = calculateHeights(stateCharacters);
     }
-    const items = [
-      { title: 'ALL' },
-      { title: 'MALE' },
-      { title: 'FEMALE' },
-      { title: 'HERMAPHODITE' },
-      { title: 'N/A' }
-    ];
 
     if (genderValue !== 'Filter Gender' && stateCharacters.length === 0) {
       return (
@@ -135,7 +132,7 @@ export const CharacterList = ({ movie, characters, loading }) => {
             defaultValue="Filter Gender"
             value={genderValue}
             onChange={onSelectChange}
-            items={items}
+            items={genderFilter}
             disabled={false}
           />
           <h2>No character ound with search criteria</h2>
@@ -150,7 +147,7 @@ export const CharacterList = ({ movie, characters, loading }) => {
           defaultValue="Filter Gender"
           value={genderValue}
           onChange={onSelectChange}
-          items={items}
+          items={genderFilter}
           disabled={false}
         />
 

src/components/Common/Alert.jsx

@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
 import { Alert as StyledAlert } from '../../styles';
 
 const Alert = ({ message }) => {
   const [hideMessage, setHideMessage] = useState(false);
+
   useEffect(() => {
     const timeout = setTimeout(() => {
       setHideMessage('none');
@@ -21,4 +24,8 @@ const Alert = ({ message }) => {
   );
 };
 
+Alert.propTypes = {
+  message: PropTypes.string.isRequired,
+};
+
 export default Alert;

src/utils/index.js

@@ -3,7 +3,8 @@ export const formatGender = gender => {
     male: 'M',
     female: 'F',
     hermaphrodite: 'H',
-    'n/a': 'N/A'
+    'n/a': 'N/A',
+    none: 'N'
   };
   return genderLookup[gender];
 };
@@ -63,10 +64,12 @@ export const filterGender = (array, condition) => {
       return array.filter(word => word.gender === 'male');
     case 'FEMALE':
       return array.filter(word => word.gender === 'female');
-    case 'HERMAPHODITE':
+    case 'HERMAPHRODITE':
       return array.filter(word => word.gender === 'hermaphrodite');
     case 'N/A':
       return array.filter(word => word.gender === 'n/a');
+    case 'NONE':
+      return array.filter(word => word.gender === 'none');
     default:
       return array;
   }
@@ -145,3 +148,20 @@ export const requestFromAPI = async (url, method = 'GET') => {
   });
   return response.json();
 };
+
+export const genderFilterFromCharacters = (characters = []) => {
+  let filter = [{ title: 'ALL' }];
+
+  characters.forEach(character => {
+    const existingFilter = filter
+      .map(e => {
+        return e.title;
+      })
+      .indexOf(character.gender.toUpperCase());
+    if (existingFilter === -1) {
+      filter = filter.concat({ title: character.gender.toUpperCase() });
+    }
+    return character;
+  });
+  return filter.sort((a, b) => a.title.localeCompare(b.title));
+};

src/utils/index.test.js

@@ -161,7 +161,7 @@ describe('Util', () => {
       { name: 'John', height: 20, gender: 'male' },
       { name: 'Jayne', height: 10, gender: 'hermaphrodite' }
     ];
-    const response = filterGender(testArray, 'HERMAPHODITE');
+    const response = filterGender(testArray, 'HERMAPHRODITE');
     expect(response).toEqual([
       { name: 'Jayne', height: 10, gender: 'hermaphrodite' }
     ]);