Full Code of samie820/hooks-movie-app for AI

master 7f37ed465393 cached
13 files
10.0 KB
3.1k tokens
2 symbols
1 requests
Download .txt 
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 <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


================================================
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
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="%PUBLIC_URL%/favicon.ico" rel="shortcut icon">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link href="%PUBLIC_URL%/manifest.json" rel="manifest">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Hooked Movie Searcher</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>


================================================
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 ? (
      <img className="spinner" src={spinner} alt="Loading spinner" />
    ) : errorMessage ? (
      <div className="errorMessage">{errorMessage}</div>
    ) : (
      movies.map((movie, index) => (
        <Movie key={`${index}-${movie.Title}`} movie={movie} />
      ))
    );

  return (
    <div className="App">
      <div className="m-container">
        <Header text="HOOKED" />

        <Search search={search} />

        <p className="App-intro">Sharing a few of our favourite movies</p>

        <div className="movies">{retrievedMovies}</div>
      </div>
    </div>
  );
};

export default App;


================================================
FILE: src/components/Header.js
================================================
import React from "react";

const Header = props => {
  return (
    <header className="App-header">
      <h2>{props.text}</h2>
    </header>
  );
};

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 (
    <div className="movie">
      <h2>{movie.Title}</h2>
      <div>
        <img
          width="200"
          alt={`The movie titled: ${movie.Title}`}
          src={poster}
        />
      </div>
      <p>({movie.Year})</p>
    </div>
  );
};

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 (
    <form className="search">
      <input
        value={searchValue}
        onChange={handleSearchInputChanges}
        type="text"
      />

      <input onClick={callSearchFunction} type="submit" value="SEARCH" />
    </form>
  );
};

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(<App />, 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;
  }
};
Download .txt 
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
Download .txt 
SYMBOL INDEX (2 symbols across 2 files)

FILE: src/components/App.js
  constant MOVIE_API_URL (line 10) | const MOVIE_API_URL = "https://www.omdbapi.com/?s=man&apikey=4a3b711b";

FILE: src/components/Movie.js
  constant DEFAULT_PLACEHOLDER_IMAGE (line 3) | const DEFAULT_PLACEHOLDER_IMAGE =
Download .json
Condensed preview — 13 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (12K chars). 
[
  {
    "path": ".gitignore",
    "chars": 310,
    "preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
  },
  {
    "path": "README.md",
    "chars": 1420,
    "preview": "# Hooks Movie App\nThis is the demo application using React Hooks!!!\n\nThe article containing instructions on how to build"
  },
  {
    "path": "package.json",
    "chars": 506,
    "preview": "{\n  \"name\": \"movie-app\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"axios\": \"^0.19.0\",\n    \"react"
  },
  {
    "path": "public/index.html",
    "chars": 1584,
    "preview": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <link href=\"%PUBLIC_URL%/favicon.ico\" rel=\"shor"
  },
  {
    "path": "public/manifest.json",
    "chars": 306,
    "preview": "{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n     "
  },
  {
    "path": "src/App.css",
    "chars": 1533,
    "preview": ".App {\n  text-align: center;\n}\n\n.App-header {\n  background-color: #282c34;\n  height: 70px;\n  display: flex;\n  flex-direc"
  },
  {
    "path": "src/components/App.js",
    "chars": 2033,
    "preview": "import React, { useReducer, useEffect } from \"react\";\n\nimport Header from \"./Header\";\nimport Movie from \"./Movie\";\nimpor"
  },
  {
    "path": "src/components/Header.js",
    "chars": 175,
    "preview": "import React from \"react\";\n\nconst Header = props => {\n  return (\n    <header className=\"App-header\">\n      <h2>{props.te"
  },
  {
    "path": "src/components/Movie.js",
    "chars": 569,
    "preview": "import React from \"react\";\n\nconst DEFAULT_PLACEHOLDER_IMAGE =\n  \"https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5"
  },
  {
    "path": "src/components/Search.js",
    "chars": 666,
    "preview": "import React, { useState } from \"react\";\n\nconst Search = ({ search }) => {\n  const [searchValue, setSearchValue] = useSt"
  },
  {
    "path": "src/index.css",
    "chars": 380,
    "preview": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    "
  },
  {
    "path": "src/index.js",
    "chars": 179,
    "preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './components/App';\n\n"
  },
  {
    "path": "src/store/reducer/index.js",
    "chars": 587,
    "preview": "export const initialState = {\n  loading: true,\n  movies: [],\n  errorMessage: null\n};\n\nexport const reducer = (state, act"
  }
]

About this extraction

This page contains the full source code of the samie820/hooks-movie-app GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 13 files (10.0 KB), approximately 3.1k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.

Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.

Extract another repo
Copied to clipboard!