Repository: samie820/hooks-movie-app Branch: master Commit: 7f37ed465393 Files: 13 Total size: 10.0 KB Directory structure: gitextract_z9v1xsqp/ ├── .gitignore ├── README.md ├── package.json ├── public/ │ ├── index.html │ └── manifest.json └── src/ ├── App.css ├── components/ │ ├── App.js │ ├── Header.js │ ├── Movie.js │ └── Search.js ├── index.css ├── index.js └── store/ └── reducer/ └── index.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # production /build # misc .DS_Store .env.local .env.development.local .env.test.local .env.production.local npm-debug.log* yarn-debug.log* yarn-error.log* ================================================ FILE: README.md ================================================ # 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](https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/) # 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](https://nodejs.org/en/download/) to download it. - A cool text editor, I recommend using either [VSCode](https://code.visualstudio.com/download) or [Atom(with the nuclide plugin)](https://nuclide.io/docs/editor/setup/) # Installing To get the project running, follow these steps: - Create a folder -Enter/Navigate into that folder ``` cd ``` - 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 ================================================ FILE: package.json ================================================ { "name": "movie-app", "version": "0.1.0", "private": true, "dependencies": { "axios": "^0.19.0", "react": "^16.8.2", "react-dom": "^16.8.2", "react-scripts": "2.1.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] } ================================================ FILE: public/index.html ================================================ Hooked Movie Searcher
================================================ FILE: public/manifest.json ================================================ { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" } ================================================ FILE: src/App.css ================================================ .App { text-align: center; } .App-header { background-color: #282c34; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; padding: 20px; cursor: pointer; } .spinner { height: 80px; margin: auto; } .App-intro { font-size: large; } /* new css for movie component */ * { box-sizing: border-box; } .movies { display: flex; flex-wrap: wrap; flex-direction: row; } .App-header h2 { margin: 0; } .add-movies { text-align: center; } .add-movies button { font-size: 16px; padding: 8px; margin: 0 10px 30px 10px; } .movie { padding: 5px 25px 10px 25px; max-width: 25%; } .errorMessage { margin: auto; font-weight: bold; color: rgb(161, 15, 15); } .search { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 10px; } input[type="submit"] { padding: 5px; background-color: transparent; color: black; border: 1px solid black; width: 80px; margin-left: 5px; cursor: pointer; } input[type="submit"]:hover { background-color: #282c34; color: antiquewhite; } .search > input[type="text"]{ width: 40%; min-width: 170px; } @media screen and (min-width: 694px) and (max-width: 915px) { .movie { max-width: 33%; } } @media screen and (min-width: 652px) and (max-width: 693px) { .movie { max-width: 50%; } } @media screen and (max-width: 651px) { .movie { max-width: 100%; margin: auto; } } ================================================ FILE: src/components/App.js ================================================ import React, { useReducer, useEffect } from "react"; import Header from "./Header"; import Movie from "./Movie"; import spinner from "../assets/ajax-loader.gif"; import Search from "./Search"; import { initialState, reducer } from "../store/reducer"; import axios from "axios"; const MOVIE_API_URL = "https://www.omdbapi.com/?s=man&apikey=4a3b711b"; const App = () => { const [state, dispatch] = useReducer(reducer, initialState); useEffect(() => { axios.get(MOVIE_API_URL).then(jsonResponse => { dispatch({ type: "SEARCH_MOVIES_SUCCESS", payload: jsonResponse.data.Search }); }); }, []); // you can add this to the onClick listener of the Header component const refreshPage = () => { window.location.reload(); }; const search = searchValue => { dispatch({ type: "SEARCH_MOVIES_REQUEST" }); axios(`https://www.omdbapi.com/?s=${searchValue}&apikey=4a3b711b`).then( jsonResponse => { if (jsonResponse.data.Response === "True") { dispatch({ type: "SEARCH_MOVIES_SUCCESS", payload: jsonResponse.data.Search }); } else { dispatch({ type: "SEARCH_MOVIES_FAILURE", error: jsonResponse.data.Error }); } } ); }; const { movies, errorMessage, loading } = state; const retrievedMovies = loading && !errorMessage ? ( Loading spinner ) : errorMessage ? (
{errorMessage}
) : ( movies.map((movie, index) => ( )) ); return (

Sharing a few of our favourite movies

{retrievedMovies}
); }; export default App; ================================================ FILE: src/components/Header.js ================================================ import React from "react"; const Header = props => { return (

{props.text}

); }; export default Header; ================================================ FILE: src/components/Movie.js ================================================ import React from "react"; const DEFAULT_PLACEHOLDER_IMAGE = "https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SX300.jpg"; const Movie = ({ movie }) => { const poster = movie.Poster === "N/A" ? DEFAULT_PLACEHOLDER_IMAGE : movie.Poster; return (

{movie.Title}

{`The

({movie.Year})

); }; export default Movie; ================================================ FILE: src/components/Search.js ================================================ import React, { useState } from "react"; const Search = ({ search }) => { const [searchValue, setSearchValue] = useState(""); const handleSearchInputChanges = e => { setSearchValue(e.target.value); }; const resetInputField = () => { setSearchValue(""); }; const callSearchFunction = e => { e.preventDefault(); search(searchValue); resetInputField(); }; return (
); }; export default Search; ================================================ FILE: src/index.css ================================================ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } ================================================ FILE: src/index.js ================================================ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; ReactDOM.render(, document.getElementById('root')); ================================================ FILE: src/store/reducer/index.js ================================================ export const initialState = { loading: true, movies: [], errorMessage: null }; export const reducer = (state, action) => { switch (action.type) { case "SEARCH_MOVIES_REQUEST": return { ...state, loading: true, errorMessage: null }; case "SEARCH_MOVIES_SUCCESS": return { ...state, loading: false, movies: action.payload }; case "SEARCH_MOVIES_FAILURE": return { ...state, loading: false, errorMessage: action.error }; default: return state; } };