IT-forward · Otabekkadirov · Mar 28, 2021 · Mar 28, 2021 · Mar 28, 2021 · Apr 7, 2021
diff --git a/.gitignore b/.gitignore
@@ -12,4 +12,3 @@ yarn-debug.log*
 yarn-error.log*
 /.changelog
 .npm/
-yarn.lock
diff --git a/otabek/.gitignore b/otabek/.gitignore
@@ -0,0 +1,23 @@
+# 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*
diff --git a/otabek/README.md b/otabek/README.md
@@ -0,0 +1,13 @@
+# This is a movie search app
+
+### In this webpage you can see there is a heading, input and a button.
+
+When you type a movie name in the input, you get a movie card that shows:
+
+- a movie poster
+- title
+- release date
+- rating
+- overview
+
+### You can try this app here :
diff --git a/otabek/babel.config.js b/otabek/babel.config.js
@@ -0,0 +1,4 @@
+// babel.config.js
+module.exports = {
+  presets: [["@babel/preset-env", { targets: { node: "current" } }]],
+};
diff --git a/otabek/package.json b/otabek/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "otabek",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^4.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.14",
+    "@babel/preset-env": "^7.13.12",
+    "babel-jest": "^26.6.3",
+    "react-test-renderer": "^17.0.2"
+  }
+}
diff --git a/otabek/public/favicon.ico b/otabek/public/favicon.ico
diff --git a/otabek/public/index.html b/otabek/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      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>React App</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>
diff --git a/otabek/public/logo192.png b/otabek/public/logo192.png
diff --git a/otabek/public/logo512.png b/otabek/public/logo512.png
diff --git a/otabek/public/manifest.json b/otabek/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/otabek/public/robots.txt b/otabek/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/otabek/src/components/CardList.js b/otabek/src/components/CardList.js
@@ -0,0 +1,21 @@
+import React from "react";
+import MovieCard from "./MovieCard";
+
+export default function CardList({ movies }) {
+  return (
+    <div className="card-list">
+      {movies
+        .filter((movie) => movie.poster_path)
+        .map((movie) => (
+          <MovieCard
+            key={movie.id}
+            img={movie.poster_path}
+            title={movie.title}
+            date={movie.release_date}
+            rating={movie.vote_average}
+            desc={movie.overview}
+          />
+        ))}
+    </div>
+  );
+}
diff --git a/otabek/src/components/Form.js b/otabek/src/components/Form.js
@@ -0,0 +1,26 @@
+import React from "react";
+
+export default function Form({ onSubmit, query, onChange }) {
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+  return (
+    <form className="form" onSubmit={onSubmit}>
+      <label htmlFor="query" className="label">
+        <h3>Movie Name</h3>
+      </label>
+      <input
+        id="query"
+        className="input"
+        type="text"
+        name="query"
+        placeholder="i.e. Harry Potter"
+        value={query}
+        onChange={handleChange}
+      ></input>
+      <button className="button" type="submit">
+        Search
+      </button>
+    </form>
+  );
+}
diff --git a/otabek/src/components/Form.test.js b/otabek/src/components/Form.test.js
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import Form from "./Form";
+
+describe("Form", () => {
+  test("renders the correct output", () => {
+    const { getByText, getByLabelText } = render(<Form />);
+
+    getByText("Movie Name");
+    getByLabelText("Movie Name");
+    getByText("Search");
+  });
+});
diff --git a/otabek/src/components/MovieCard.js b/otabek/src/components/MovieCard.js
@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function MovieCard({ img, title, date, rating, desc }) {
+  return (
+    <div className="card">
+      <img
+        className="card--image"
+        src={`https://image.tmdb.org/t/p/w185_and_h278_bestv2/${img}`}
+        alt={title + " poster"}
+      />
+      <div className="card--content">
+        <h3 className="card--title">{title}</h3>
+        <p>
+          <small>RELEASE DATE: {date}</small>
+        </p>
+        <p>
+          <small>RATING: {rating}</small>
+        </p>
+        <p className="card--desc">{desc}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/otabek/src/components/SearchMovies.js b/otabek/src/components/SearchMovies.js
@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import Form from "./Form";
+import CardList from "./CardList";
+
+export default function SearchMovies(props) {
+  const [query, setQuery] = useState("");
+  const [movies, setMovies] = useState([]);
+
+  const searchMovies = async (e) => {
+    e.preventDefault();
+
+    const url = `https://api.themoviedb.org/3/search/movie?api_key=e6aea0d7609d8123fae4d5b388808e52&language=en-US&query=${query}&page=1&include_adult=false`;
+
+    try {
+      const response = await fetch(url);
+      const data = await response.json();
+      setMovies(data.results);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <>
+      <h1 className="title">React Movie Search</h1>
+      <Form onSubmit={searchMovies} query={query} onChange={setQuery} />
+      <CardList movies={movies} />
+    </>
+  );
+}
diff --git a/otabek/src/components/SearchMovies.test.js b/otabek/src/components/SearchMovies.test.js
@@ -0,0 +1,51 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import SearchMovies from "./SearchMovies";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Form from "./Form";
+
+describe("SearchMovies", () => {
+  test("should render the correct h1", () => {
+    const root = document.createElement("div");
+    ReactDOM.render(<SearchMovies />, root);
+
+    expect(root.querySelector("h1").textContent).toBe("React Movie Search");
+  });
+  test("initial query should be an empty string", () => {
+    render(<SearchMovies />);
+    const input = screen.getByRole("textbox");
+    expect(input.value).toBe("");
+  });
+
+  test("initial movies should be an empty array", () => {
+    render(<SearchMovies />);
+    const card = screen.queryByText("RELEASE DATE");
+    expect(card).toBe(null);
+  });
+
+  test("calls the onSubmit callback function properly", () => {
+    const onSubmit = jest.fn();
+    const onChange = jest.fn();
+
+    onSubmit.mockImplementation((event) => {
+      event.preventDefault();
+    });
+
+    render(<Form onSubmit={onSubmit} onChange={onChange} />);
+
+    fireEvent.change(screen.getByRole("textbox"), {
+      target: { value: "Star Wars" },
+    });
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onSubmit).toHaveBeenCalled();
+  });
+
+  // test("works with async/await", async () => {
+  //   render(<SearchMovies />);
+  //   // expect.searchMovies(1);
+  //   expect(SearchMovies).toContain(URL);
+  //   const data = await fetch(URL);
+  // });
+});