samie820 / hooks-movie-app

A movie application built using React hooks

Hooks Movie App

This is the demo application using React Hooks!!!

The article containing instructions on how to build this app can be found here

Getting Started

These instructions should get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Things you need to get started:

• A recent version of Node running on your machine (8.0 or higher), check this link to download it.
• A cool text editor, I recommend using either VSCode or Atom(with the nuclide plugin)

Installing

To get the project running, follow these steps:

• Create a folder -Enter/Navigate into that folder

cd <folder-name>

• Clone this repository:

git clone https://github.com/samie820/hooks-movie-app.git

• Install all the project's dependencies:

yarn or npm install

• Once that's done, run the project:

npm start or yarn start

Deployment

The app can be deployed using either heroku or Netlify

Built With

• Javascript
• React - (UI library)

Contribution

Please read the CONTRIBUTING.md file (Soon to be added) to see how you can contribute and add more features to the project.

Authors

TODO: Add the Authors

hooks-movie-app's Issues

onKeyUp instead of onChange in Search.js?

A great tutorial at the right time. I tried onKeyUp in the section
<input value={searchValue} onChange={handleSearchInputChanges} type="text" /> to see if the results could be dynamically modified as you type and to avoid use of the Search button, but the input field then does not accept input. Any way to get this to work? Thanks

Uncaught TypeError: Cannot read property 'map' of undefined

Hello,

I noticed you have the following error message when you launch the project for the first time.

Uncaught TypeError: Cannot read property 'map' of undefined

It seem that you perform an axios() request on MOVIE_API_URL which doesn't necessary return an array you .map() on.

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    axios.get(MOVIE_API_URL).then(jsonResponse => {  // **(1)**
      dispatch({
        type: "SEARCH_MOVIES_SUCCESS",
        payload: jsonResponse.data.Search
      });
    });
  }, []);

(1): return an object. However you're looking for an array to be able to use map()

const retrievedMovies =
   loading && !errorMessage ? (
     <img className="spinner" src={spinner} alt="Loading spinner" />
   ) : errorMessage ? (
     <div className="errorMessage">{errorMessage}</div>
   ) : (
     movies.map((movie, index) => ( // **it will crash here**
       <Movie key={`${index}-${movie.Title}`} movie={movie} />
     ))
   );

So my suggestions are

• Either you completely remove the useEffect() at the beginning of the App() component and thus display an "empty" page (without the preview of the available movie)

-Or you can perform an axios() request to another endpoint. Basically display a list of movie (not a random list) but display the result of a default search.

e.g https://www.omdbapi.com/?s=AVENGER&apikey=4a3b711b

(display a list of movie related to the Avenger instead of leaving a blank page and waiting for the user to perform his own research)

Do you want me to open a pull request ?

Store Management

If store management is inside store folder maybe other developers understand the code much better. I added the improvements and if you approve the changes you can close this issue.

Thanks

can you host this..

hey plz can you host this ? coz i want to see this .. and as i am learnings react js so it'd helpfull.