Merge edd1fb7 into cb601e2

src/actions/index.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { toast } from 'react-toastify';
 
-import { addMovieToLocalStorage } from '../utils';
+import { addMovieDataToLocalStorage, addMovieListToLocalStorage } from '../utils';
 import {
   LOADING,
   ERROR,
@@ -15,7 +15,11 @@ export const getMovies = () => dispatch => {
   dispatch({ type: LOADING });
   return axios
     .get('https://cors-anywhere.herokuapp.com/https://swapi.co/api/films')
-    .then(res => dispatch({ type: SET_MOVIES, payload: res.data.results }))
+
+    .then(res => {
+      addMovieListToLocalStorage(res.data.results)
+      dispatch(setMovies(res.data.results))
+    })
     .catch(err => {
       if (err.response) {
         dispatch({ type: ERROR, payload: err.response.data.detail });
@@ -60,7 +64,7 @@ export const getCharacter = movie => dispatch => {
     )
   )
     .then(res => {
-      addMovieToLocalStorage(movie, res);
+      addMovieDataToLocalStorage(movie, res);
       dispatch(setCharacters(res));
     })
     .catch(err => {
@@ -83,6 +87,10 @@ export const setCharacters = characters => {
   return { type: SET_CHARACTERS, payload: characters };
 };
 
+export const setMovies = movies => {
+  return { type: SET_MOVIES, payload: movies };
+};
+
 export const setMovie = movie => {
   return { type: SET_MOVIE, payload: movie };
 };

src/components/Common/MovieListDropdown.jsx

@@ -8,23 +8,32 @@ import {
   selectMovie,
   getMovie,
   setCharacters,
-  setMovie
+  setMovie,
+  setMovies
 } from '../../actions';
 import { MovieListDropdown as StyledMovieListDropdown } from '../../styles';
 import Select from './Select';
-import { getMovieFromLocalStorage } from '../../utils';
+import { getMovieFromLocalStorage, getMovieListFromLocalStorage } from '../../utils';
 
 export const MovieListDropdown = ({
   movies,
   selectMovie,
   getMovies,
   getMovie,
   setCharacters,
-  setMovie
+  setMovie,
+  setMovies
 }) => {
   const [movieValue, setMovieValue] = useState('');
 
   useEffect(() => {
+    const existingMovieListInLocalStorage = getMovieListFromLocalStorage();
+    if (existingMovieListInLocalStorage.length > 0) {
+      setMovies(existingMovieListInLocalStorage)
+    } else {
+      //we could not find movieList in localstorage, thus get from api
+      getMovies();
+    }
     getMovies();
     setMovieValue('Select Star Wars Movie');
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -92,5 +101,5 @@ const mapStateToProps = state => ({
 
 export default connect(
   mapStateToProps,
-  { getMovies, selectMovie, getMovie, setCharacters, setMovie }
+  { getMovies, selectMovie, getMovie, setCharacters, setMovie, setMovies }
 )(MovieListDropdown);

src/utils/index.js

@@ -73,7 +73,25 @@ export const sortName = (array, order) => {
   }
 };
 
-export const addMovieToLocalStorage = (movie, characters) => {
+export const addMovieListToLocalStorage = list => {
+  initializeLocalStorage();
+
+  const movieList = JSON.parse(localStorage.getItem('movieList'));
+  if (movieList.length > 0) {
+    return movieList;
+  }
+
+  localStorage.setItem('movieList', JSON.stringify(list));
+  return list;
+};
+
+export const getMovieListFromLocalStorage = () => {
+  initializeLocalStorage();
+  const movieList = JSON.parse(localStorage.getItem('movieList'));
+  return movieList;
+};
+
+export const addMovieDataToLocalStorage = (movie, characters) => {
   initializeLocalStorage();
 
   const movieData = JSON.parse(localStorage.getItem('movieData'));
@@ -107,6 +125,10 @@ export const initializeLocalStorage = () => {
   if (!localStorage.getItem('movieData')) {
     localStorage.setItem('movieData', JSON.stringify([]));
   }
+
+  if (!localStorage.getItem('movieList')) {
+    localStorage.setItem('movieList', JSON.stringify([]));
+  }
 };
 
 export const oneDayAgo = date => {

src/utils/index.test.js

@@ -9,11 +9,13 @@ import {
   sortGender,
   initializeLocalStorage,
   oneDayAgo,
-  getMovieFromLocalStorage
+  getMovieFromLocalStorage,
+  getMovieListFromLocalStorage,
+  addMovieListToLocalStorage
 } from './index';
 
 import mock from '../__mocks__/mock';
-const { getMovieDataMock } = mock;
+const { getMovieDataMock, getMovieListMock } = mock;
 
 describe('Util', () => {
   it('test male case Format Gender', () => {
@@ -182,12 +184,29 @@ describe('Util', () => {
     expect(response).toEqual([]);
   });
 
+  it('test getMovieListFromLocalStorage with invalid movie', () => {
+    localStorage.setItem('movieList', JSON.stringify(getMovieListMock));
+    const response = getMovieListFromLocalStorage();
+    expect(response).toEqual(JSON.parse(localStorage.getItem('movieList')));
+  });
+
   it('test getMovieFromLocalStorage with valid movie', () => {
     localStorage.setItem('movieData', JSON.stringify(getMovieDataMock));
     const response = getMovieFromLocalStorage('A New Hope');
     expect(response).toEqual(JSON.parse(localStorage.getItem('movieData')));
   });
 
+  it('test addMovieListToLocalStorage with valid movie', () => {
+    const response = addMovieListToLocalStorage(getMovieListMock);
+    expect(response).toEqual(JSON.parse(localStorage.getItem('movieList')));
+  });
+
+  it('test addMovieListToLocalStorage empty case with valid movie', () => {
+    localStorage.removeItem('movieList');
+    const response = addMovieListToLocalStorage(getMovieListMock);
+    expect(response).toEqual(JSON.parse(localStorage.getItem('movieList')));
+  });
+
   it('test initializeLocalStorage', () => {
     localStorage.removeItem('movieData');
     expect(initializeLocalStorage()).toEqual(undefined);