Merge pull request #37 from Easybuoy/feature/create-toaster-169776716

Create toaster

src/components/Characters/CharacterList.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import MovieDetails from '../Common/MovieDetails';
@@ -36,6 +36,15 @@ export const CharacterList = ({ movie, characters, loading }) => {
   const [genderOrder, setGenderOrder] = useState(undefined);
   const [genderValue, setGenderValue] = useState('Filter Gender');
   const [stateCharacters, setStateCharacters] = useState([]);
+  const [movieInState, setMovieInState] = useState({});
+
+  useEffect(() => {
+    if (characters.length > 0 && movieInState.title !== movie.title) {
+      setStateCharacters([]);
+      setMovieInState(movie);
+      setGenderValue('Filter Gender');
+    }
+  }, [characters, movie, movieInState.title, stateCharacters.length]);
 
   if (loading) {
     return <PreLoader />;
@@ -117,6 +126,22 @@ export const CharacterList = ({ movie, characters, loading }) => {
       { title: 'N/A' }
     ];
 
+    if (genderValue !== 'Filter Gender' && stateCharacters.length === 0) {
+      return (
+        <StyledCharacterList>
+          <MovieDetails movie={movie} />
+
+          <Select
+            defaultValue="Filter Gender"
+            value={genderValue}
+            onChange={onSelectChange}
+            items={items}
+            disabled={false}
+          />
+          <h2>No character ound with search criteria</h2>
+        </StyledCharacterList>
+      );
+    }
     return (
       <StyledCharacterList>
         <MovieDetails movie={movie} />

src/components/Common/Alert.jsx

@@ -1,50 +1,24 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const StyledAlert = styled.div`
-  .toast {
-    position: fixed;
-    top: 10px;
-    right: 10px;
-    width: 250px;
-    border-radius: 4px;
-    box-shadow: #310808 1px 1px 5px;
-    background-color: rgba(177, 7, 15, 0.78);
-    padding: 10px;
-    color: #f5bfbf;
-
-    opacity: 1;
-    animation: toast 500ms cubic-bezier(0.23, 0.82, 0.16, 1.46);
-    animation-iteration-count: 1;
-  }
-
-  @keyframes toast {
-    0% {
-      opacity: 0;
-      transform: translateY(200px);
-    }
-
-    100% {
-      opacity: 1;
-      transform: translateY(0px);
-    }
-  }
-`;
-
-function Alert() {
-  let hideMessage = false;
-
-  setTimeout(() => {
-    hideMessage = true;
-  }, 4000);
+import React, { useState, useEffect } from 'react';
+import { Alert as StyledAlert } from '../../styles';
+
+const Alert = ({ message }) => {
+  const [hideMessage, setHideMessage] = useState(false);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setHideMessage('none');
+    }, 3000);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
 
   return (
     <StyledAlert>
-      <div class="toast" style={{ display: hideMessage }}>
-        <p>Your message</p>
+      <div className="toast" style={{ display: hideMessage }}>
+        <p>{message}</p>
       </div>
     </StyledAlert>
   );
-}
+};
 
 export default Alert;

src/components/Common/Alert.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Alert from './Alert';
+
+describe('<Alert />', () => {
+  const props = {
+    message: 'Error'
+  };
+
+  it('renders the Alert component correctly', () => {
+    const wrapper = shallow(<Alert {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/components/Common/MovieList.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import CharacterList from '../Characters/CharacterList';
 import PreLoader from './PreLoader';
-
+import Alert from './Alert';
 import { MovieListDropdown as StyledMovieListDropdown } from '../../styles';
 import Select from './Select';
 import {
@@ -18,6 +18,7 @@ export const MovieList = () => {
   const [movie, setMovie] = useState({});
   const [characterLoading, setCharacterLoading] = useState(false);
   const [disableSelect, setdisableSelect] = useState(false);
+  const [error, setError] = useState('');
 
   useEffect(() => {
     setMovieValue('Select Star Wars Movie');
@@ -27,9 +28,9 @@ export const MovieList = () => {
       })
       .catch(err => {
         if (err.response) {
-          alert(err.response.data.detail);
+          setError(err.response.data.detail);
         } else {
-          alert(err.message);
+          setError(err.message);
         }
       });
   }, []);
@@ -67,24 +68,28 @@ export const MovieList = () => {
             })
             .catch(err => {
               if (err.response) {
-                alert(err.response.data.detail);
+                setError(err.response.data.detail);
               } else {
-                alert(err.message);
+                setError(err.message);
               }
             });
         })
         .catch(err => {
           if (err.response) {
-            alert(err.response.data.detail);
+            setError(err.response.data.detail);
           } else {
-            alert(err.message);
+            setError(err.message);
           }
         });
     }
   };
 
   let dropDownItems = '';
 
+  if (error) {
+    return <Alert message={error} />
+  }
+
   if (movies.length > 0) {
     dropDownItems = (
       <div style={{ display: 'flex', width: '100%', flexWrap: 'wrap' }}>

src/components/Common/__snapshots__/Alert.test.jsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Alert /> renders the Alert component correctly 1`] = `
+<styled.div>
+  <div
+    className="toast"
+    style={
+      Object {
+        "display": false,
+      }
+    }
+  >
+    <p>
+      Error
+    </p>
+  </div>
+</styled.div>
+`;

src/styles/index.js

@@ -125,6 +125,7 @@ const CharacterList = styled.div`
   h2 {
     color: ${primaryColor};
     text-align: center;
+    width: 100%;
   }
   .fl-table {
     border-radius: 5px;
@@ -272,6 +273,37 @@ const Navigation = styled.nav`
   }
 `;
 
+const Alert = styled.div`
+  .toast {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    width: 250px;
+    border-radius: 4px;
+    box-shadow: #310808 1px 1px 5px;
+    background-color: rgba(177, 7, 15, 0.78);
+    padding: 0.3rem;
+    color: #ffffff;
+    font-family: 'Open Sans', sans-serif;
+    opacity: 1;
+    animation: toast 500ms cubic-bezier(0.23, 0.82, 0.16, 1.46);
+    animation-iteration-count: 1;
+  }
+
+  @keyframes toast {
+    0% {
+      opacity: 0;
+      transform: translateY(200px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+`;
+
+
 export {
   MovieListDropdown,
   Character,
@@ -280,5 +312,6 @@ export {
   OpeningCrawl,
   MovieDetails,
   Navigation,
-  Select
+  Select,
+  Alert
 };

src/utils/index.js

@@ -1,25 +1,22 @@
 export const formatGender = gender => {
-  switch (gender) {
-    case 'male':
-      return 'M';
-    case 'female':
-      return 'F';
-    case 'hermaphrodite':
-      return 'H';
-    default:
-      return 'N/A';
-  }
+  const genderLookup = {
+    male: 'M',
+    female: 'F',
+    hermaphrodite: 'H',
+    'n/a': 'N/A'
+  };
+  return genderLookup[gender];
 };
 
 export const calculateHeights = array => {
-  const heightCalculation = array.reduce((a, b) => {
+  const heightsSum = array.reduce((a, b) => {
     if (b.height === 'unknown') {
       return a;
     } else {
       return a + parseInt(b.height);
     }
   }, 0);
-  return heightCalculation;
+  return heightsSum;
 };
 
 export const calculateFeet = height => {
@@ -60,8 +57,8 @@ export const sortGender = (array, order) => {
   }
 };
 
-export const filterGender = (array, letter) => {
-  switch (letter) {
+export const filterGender = (array, condition) => {
+  switch (condition) {
     case 'MALE':
       return array.filter(word => word.gender === 'male');
     case 'FEMALE':
@@ -139,12 +136,12 @@ export const oneDayAgo = date => {
 };
 
 export const requestFromAPI = async (url, method = 'GET') => {
-  const rawResponse = await fetch(url, {
+  const response = await fetch(url, {
     method: method,
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json'
     }
   });
-  return rawResponse.json();
+  return response.json();
 };

src/utils/index.test.js

@@ -32,11 +32,6 @@ describe('Util', () => {
     expect(response).toEqual('H');
   });
 
-  it('test default case for Format Gender', () => {
-    const response = formatGender();
-    expect(response).toEqual('N/A');
-  });
-
   it('test calculateHeights', () => {
     const testArray = [{ height: 10 }, { height: 20 }];
     const response = calculateHeights(testArray);