Pair 20 02 yusfi farkhan

package.json

@@ -7,8 +7,12 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
+    "firebase": "^9.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-firebase-hooks": "^5.0.3",
+    "react-icons": "^4.4.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
@@ -37,5 +41,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.7",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.1.6"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/.env

@@ -0,0 +1,6 @@
+REACT_APP_FIREBASE_API_KEY=AIzaSyAzCet0JGW0vPUSxvsk6JzjJA4B9_jrwHA
+REACT_APP_FIREBASE_AUTH_DOMAIN=dts-miniproject-pair20.firebaseapp.com
+REACT_APP_FIREBASE_PROJECT_ID=dts-miniproject-pair20
+REACT_APP_FIREBASE_STORAGE_BUCKET=dts-miniproject-pair20.appspot.com
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID=234051586286
+REACT_APP_FIREBASE_APP_ID=1:234051586286:web:df3dc4bab22024e2e8cbff

src/App.js

@@ -1,23 +1,76 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import React, { useEffect, useState } from "react";
+import tmdbInstance from "./apis/tmdb";
+import { Routes, Route } from "react-router-dom";
+
+// Partial Component
+import Header from "./containers/Header";
+import Navigation from "./containers/Navigation";
+import Footer from "./containers/Footer";
+import ProtectedComponent from "./components/app/ProtectedComponent";
+
+// Container Component
+import Home from "./containers/Home";
+import PopularMovies from "./containers/PopularMovies";
+import SelectedMovie from "./containers/SelectedMovie";
+import LoginOrRegister from "./containers/LoginOrRegister";
+import Missing from "./components/app/Missing";
+import Denied from "./components/app/Denied";
 
 function App() {
+  const [movies, setMovies] = useState([]);
+  const [search, setSearch] = useState("");
+
+  const searchHandler = (query) => {
+    setSearch(query);
+  };
+  useEffect(() => {
+    const fetchDataMovies = async () => {
+      try {
+        const responseDariTMDB = await tmdbInstance.get("/movie/popular");
+        setMovies(responseDariTMDB.data.results);
+      } catch (err) {
+        console.log(err);
+      }
+    };
+
+    fetchDataMovies();
+  }, []);
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Navigation />
+      <Header search={search} searchHandler={searchHandler} />
+      <main className="w-full  min-h-screen pt-2 pb-2 flex justify-center">
+        <Routes>
+          <Route
+            path="/"
+            element={<Home moviesData={movies} search={search} />}
+          />
+          <Route
+            path="/movie/:id"
+            element={
+              <ProtectedComponent>
+                <SelectedMovie />
+              </ProtectedComponent>
+            }
+          />
+          <Route
+            path="/popular"
+            element={<PopularMovies moviesData={movies} search={search} />}
+          />
+          <Route
+            path="/login"
+            element={<LoginOrRegister loginOrRegister="login" />}
+          />
+          <Route
+            path="/signup"
+            element={<LoginOrRegister loginOrRegister="register" />}
+          />
+          <Route path="/denied" element={<Denied />} />
+          <Route path="*" element={<Missing />} />
+        </Routes>
+      </main>
+      <Footer />
     </div>
   );
 }

src/apis/firebase.js

@@ -0,0 +1,70 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import {
+  getAuth,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  sendPasswordResetEmail,
+  signOut,
+} from "firebase/auth";
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyAzCet0JGW0vPUSxvsk6JzjJA4B9_jrwHA",
+  authDomain: "dts-miniproject-pair20.firebaseapp.com",
+  projectId: "dts-miniproject-pair20",
+  storageBucket: "dts-miniproject-pair20.appspot.com",
+  messagingSenderId: "234051586286",
+  appId: "1:234051586286:web:df3dc4bab22024e2e8cbff",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+
+// Fucntion
+const registerWithEmailAndPassword = async (email, password) => {
+  try {
+    const UserCredential = await createUserWithEmailAndPassword(
+      auth,
+      email,
+      password
+    );
+    console.log(UserCredential.user);
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+const loginWithEmailAndPassword = async (email, password) => {
+  try {
+    const activeUser = await signInWithEmailAndPassword(auth, email, password);
+    console.log(activeUser.user);
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+const resetPassword = async (email) => {
+  try {
+    sendPasswordResetEmail(auth, email);
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+const logOut = async () => {
+  try {
+    signOut(auth);
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+export {
+  auth,
+  registerWithEmailAndPassword,
+  loginWithEmailAndPassword,
+  resetPassword,
+  logOut,
+};

src/apis/tmdb.js

@@ -0,0 +1,13 @@
+import axios from "axios";
+
+// Di sini kita membuat instance dari axios
+const tmdbInstance = axios.create({
+  baseURL: "https://api.themoviedb.org/3",
+  params: {
+    // TODO: Jangan lupa masukkan API_KEY yang benarnya di sini yah !
+    api_key: "1415dc66b6ef1d7172388a426b3b7a65",
+  },
+});
+
+// Jangan lupa diexport karena akan digunakan di tempat lainnya
+export default tmdbInstance;

src/components/app/Denied.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { FaHome } from "react-icons/fa";
+
+const Denied = () => {
+  return (
+    <div className="w-4/5">
+      <div className="w-full mt-4 bg-slate-100 flex rounded-lg shadow-lg py-8 px-4">
+        <div>
+          <img
+            src="https://i.kym-cdn.com/entries/icons/mobile/000/002/144/You_Shall_Not_Pass!_0-1_screenshot.jpg"
+            alt="Denied"
+          />
+        </div>
+        <div className="w-full flex flex-col">
+          <div
+            class="w-full text-center overflow-hidden before:h-[1px] after:h-[1px] after:bg-black 
+           after:inline-block after:relative after:align-middle after:w-1/4 
+           before:bg-black before:inline-block before:relative before:align-middle 
+           before:w-1/4 before:right-2 after:left-2 text-xl p-4 capitalize font-semibold"
+          >
+            Access Forbiden!
+          </div>
+          <div className="w-full">
+            <p>Sorry, you have to be logged in to access this page.</p>
+            <p>But, no worries! You can find more on Our Hompage</p>
+          </div>
+          <div className="w-full mt-4">
+            <Link to="/">
+              <button className="w-3/5 p-2 bg-amber-600 text-white font-semibold">
+                <span className="flex gap-2 justify-center align-center">
+                  <span className="self-center">
+                    <FaHome />
+                  </span>
+                  BreezyMovies Homepage
+                </span>
+              </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Denied;

src/components/app/Missing.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import missing from "../../assets/missing.png";
+import { Link } from "react-router-dom";
+import { FaHome } from "react-icons/fa";
+
+const Missing = () => {
+  return (
+    <div className="w-4/5">
+      <div className="w-full mt-4 bg-slate-100 flex rounded-lg shadow-lg py-8 px-4">
+        <div>
+          <img src={missing} alt="Not Found..." />
+        </div>
+        <div className="w-full flex flex-col">
+          <div
+            class="w-full text-center overflow-hidden before:h-[1px] after:h-[1px] after:bg-black 
+           after:inline-block after:relative after:align-middle after:w-1/4 
+           before:bg-black before:inline-block before:relative before:align-middle 
+           before:w-1/4 before:right-2 after:left-2 text-xl p-4 capitalize font-semibold"
+          >
+            lost your way?
+          </div>
+          <div className="w-full">
+            <p>Sorry, we can't found that page.</p>
+            <p>You'll find more interesting stuff on Our Hompage</p>
+          </div>
+          <div className="w-full mt-4">
+            <Link to="/">
+              <button className="w-3/5 p-2 bg-amber-600 text-white font-semibold">
+                <span className="flex gap-2 justify-center align-center">
+                  <span className="self-center">
+                    <FaHome />
+                  </span>
+                  BreezyMovies Homepage
+                </span>
+              </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Missing;

src/components/app/ProtectedComponent.jsx

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuthState } from "react-firebase-hooks/auth";
+import { auth } from "../../apis/firebase";
+
+const ProtectedComponent = ({ children }) => {
+  let navigate = useNavigate();
+
+  const [user, isLoading] = useAuthState(auth);
+
+  useEffect(() => {
+    if (!user) {
+      navigate("/denied");
+      return;
+    }
+  }, [user, navigate]);
+
+  if (isLoading) {
+    return;
+  } else {
+    return children;
+  }
+};
+
+export default ProtectedComponent;

src/components/header/FormSearch.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const FormSearch = ({ search, searchHandler }) => {
+  return (
+    <form className="basis-2/5">
+      <input
+        className="w-full outline-none shadow border border-gray-500 p-1 rounded-t-lg 
+        focus:border-b-2 focus:border-sky-600"
+        type="text"
+        onChange={(e) => searchHandler(e.target.value)}
+        value={search}
+        placeholder="Cari judul film..."
+      />
+    </form>
+  );
+};
+
+export default FormSearch;

src/components/header/Menu.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const Menu = () => {
+  return (
+    <ul className="flex gap-4">
+      <li className="hover:font-bold">
+        <Link to="/">Home</Link>
+      </li>
+      <li className="hover:font-bold">
+        <Link to="/popular">Popular</Link>
+      </li>
+    </ul>
+  );
+};
+
+export default Menu;