<repo_name>Shriya1607/Netflix-Clone<file_sep>/src/Header.js
import React, { useEffect, useState } from "react";
import axios from "./axios";
import requests from "./requests";
import "./header.css";

function Header() {
  const [Movie, setMovie] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const req = await axios.get(requests.fetchTrending);
      setMovie(
        req.data.results[
          Math.floor(Math.random() * (req.data.results.length - 1))
        ]
      );
      return req;
    }
    fetchData();
  }, []);

  function truncateText(str, n) {
    //truncate the text
    return str?.length > n ? str.substr(0, n - 1) + "..." : str;
  }

  return (
    <div
      className="header"
      style={{
        backgroundImage: `url("https://image.tmdb.org/t/p/original/${Movie.backdrop_path}")`,
        backgroundSize: "cover",
        backgroundPosition: "center center",
      }}
    >
      <div>
        <h1 className="header_moviename">
          {Movie.name || Movie.title || Movie.original_name}
        </h1>
        <h4 className="header_movieoverview">
          {truncateText(Movie.overview, 150)}
        </h4>
      </div>
    </div>
  );
}

export default Header;
<file_sep>/src/App.js
import React from "react";
import "./App.css";
import Header from "./Header";
import MovieRow from "./MovieRow";
import Navbar from "./Navbar";
import requests from "./requests";

function App() {
  return (
    <div className="App">
      <Navbar />
      <Header/>
      <MovieRow
        title="NETFLIX ORIGINALS"
        fetch_URL={requests.fetchNetflixOriginals}
      />
      <MovieRow title="TRENDING" fetch_URL={requests.fetchTrending} />
      <MovieRow title="TOP RATED" fetch_URL={requests.fetchTopRated} />
      <MovieRow title="ACTION MOVIES" fetch_URL={requests.fetchActionMovies} />
      <MovieRow title="COMEDY MOVIES" fetch_URL={requests.fetchComedyMovies} />
      <MovieRow title="HORROR MOVIES" fetch_URL={requests.fetchHorrorMovies} />
      <MovieRow
        title="ROMANCE MOVIES"
        fetch_URL={requests.fetchRomanceMovies}
      />
      <MovieRow title="DOCUMENTARIES" fetch_URL={requests.fetchDocumentaries} />
    </div>
  );
}

export default App;
<file_sep>/src/MovieRow.js
import axios from "./axios";
import React, { useEffect, useState } from "react";
import "./movierow.css";

function MovieRow({ title, fetch_URL }) {
  const url = "https://image.tmdb.org/t/p/original/";
  const [Movies, setMovies] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const req = await axios.get(
        fetch_URL
      ); /*fetching data from the url which is passed as a prop */
      setMovies(req.data.results); /* assigning value to the movie array*/
      return req;
    }
    fetchData();
  }, [
    fetch_URL /* whenever url changes the useEffect will run*/,
  ]); /* useEffect is a react hook, it is used to do something after every render(display)
  []-> if this is empty then use effect is called only once but if we write any variable then when the value of that variable changes then useState is called
  asynch/await means the function will take its own time to run */
  console.log(Movies);
  return (
    <div className="movierow">
      <h2>{title}</h2>
      <div className="movierow_thumbnail">
        {Movies.map((mov) => {
          return (
            <img
              key={mov.id}
              src={`${url}${mov.poster_path}`}
              alt={mov.name}
              className="movierow_image"
            />
          );
        })}
      </div>
    </div>
  );
}

export default MovieRow;
<file_sep>/src/Navbar.js
import React, { useEffect, useState } from "react";
import SearchIcon from "@material-ui/icons/Search";
import NotificationsActiveIcon from "@material-ui/icons/NotificationsActive";
import "./navbar.css";
import AccountBoxIcon from "@material-ui/icons/AccountBox";
import NotificationsIcon from "@material-ui/icons/Notifications";

function Navbar() {
  const [show, handleShow] = useState(false);
  useEffect(() => {
    window.addEventListener("scroll", () => {
      if (window.scrollY > 100) {
        handleShow(true);
      } else handleShow(false);
    });
    return () => {
      window.removeEventListener("scroll");
    };
  }, []);
  return (
    // <div className={`navbar ${show && "nav_black"}`}>
    //   <div className="navbar_img">
    //     <img
    //       src={process.env.PUBLIC_URL + "/netflix-logo.png"}
    //       alt=""
    //       className="logo"
    //     />
    //   </div>
    //   <div className="navbar_middle">
    //     <p>Home</p>
    //     <p>TV shows</p>
    //     <p>Movies</p>
    //     <p>New & Popular</p>
    //     <p>My List</p>
    //   </div>
    //   <div className="navbar_right">
    //     <SearchIcon className="navbar_search" />
    //     <p>Kids</p>
    //     <NotificationsActiveIcon className="navbar_notification" />
    //     <AccountBoxIcon className="navbar_account" />
    //   </div>
    // </div>
    <div className={`nav ${show && "nav_black"}`}>
      <div>
        <img
          src={process.env.PUBLIC_URL + "/netflix-logo.png"}
          alt="Netflix Logo"
          className="nav_logo"
        />
        <div className="nav_links">
          <p>Home</p>
          <p>TV Shows</p>
          <p>Movies</p>
          <p>New & Popular</p>
          <p>My List</p>
        </div>
      </div>
      <div className="nav_links profile">
        <SearchIcon style={{ marginRight: "1.25rem" }} />
        <p>KIDS</p>
        <NotificationsIcon className="navbar_notification" />
        <img
          className="nav_avatar"
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHg_t3WBJBy4SEC_9uU-gi71PNXXdInw5uRQ&usqp=CAU"
          alt=""
        />
      </div>
    </div>
  );
}

export default Navbar;
