diff --git a/abdulbasit-hussein-yazen/.gitignore b/abdulbasit-hussein-yazen/.gitignore
new file mode 100644
index 00000000..4d29575d
--- /dev/null
+++ b/abdulbasit-hussein-yazen/.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/abdulbasit-hussein-yazen/README.md b/abdulbasit-hussein-yazen/README.md
new file mode 100644
index 00000000..54ef0943
--- /dev/null
+++ b/abdulbasit-hussein-yazen/README.md
@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.React App
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
diff --git a/abdulbasit-hussein-yazen/public/logo192.png b/abdulbasit-hussein-yazen/public/logo192.png
new file mode 100644
index 00000000..fc44b0a3
Binary files /dev/null and b/abdulbasit-hussein-yazen/public/logo192.png differ
diff --git a/abdulbasit-hussein-yazen/public/logo512.png b/abdulbasit-hussein-yazen/public/logo512.png
new file mode 100644
index 00000000..a4e47a65
Binary files /dev/null and b/abdulbasit-hussein-yazen/public/logo512.png differ
diff --git a/abdulbasit-hussein-yazen/public/manifest.json b/abdulbasit-hussein-yazen/public/manifest.json
new file mode 100644
index 00000000..080d6c77
--- /dev/null
+++ b/abdulbasit-hussein-yazen/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/abdulbasit-hussein-yazen/public/robots.txt b/abdulbasit-hussein-yazen/public/robots.txt
new file mode 100644
index 00000000..e9e57dc4
--- /dev/null
+++ b/abdulbasit-hussein-yazen/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/abdulbasit-hussein-yazen/src/API.js b/abdulbasit-hussein-yazen/src/API.js
new file mode 100644
index 00000000..4299a476
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/API.js
@@ -0,0 +1,12 @@
+const TMDB_BASE_URL = "https://api.themoviedb.org/3";
+const KEY = "?api_key=754ad3989128c7d8cfcc82e6591e7f2e";
+const fetching = {
+ fetching: json,
+};
+function json(path, query) {
+ let full_url = TMDB_BASE_URL + path + KEY;
+ full_url += query === undefined ? "" : "&query=" + query;
+ return fetch(full_url).then((response) => response.json());
+}
+
+export default fetching;
diff --git a/abdulbasit-hussein-yazen/src/App.css b/abdulbasit-hussein-yazen/src/App.css
new file mode 100644
index 00000000..f1bd7d0c
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/App.css
@@ -0,0 +1,18 @@
+.genres {
+ margin-left: 15px;
+ margin-top: 5px;
+}
+html body {
+ background-color: #f8f9fa;
+}
+.card-shadow {
+ transition: all 0.3s ease-in-out;
+}
+.card-shadow:hover {
+ transform: scale(1.05, 1.05);
+}
+
+.nav-item {
+ color: white;
+ padding-top: 6px;
+}
diff --git a/abdulbasit-hussein-yazen/src/App.js b/abdulbasit-hussein-yazen/src/App.js
new file mode 100644
index 00000000..42e71543
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/App.js
@@ -0,0 +1,23 @@
+import React from "react";
+import Main from "./Components/Main";
+import Footer from "./Components/Footer";
+import Navbar from "./Components/Navbar";
+import "./App.css";
+import { BrowserRouter as Router} from "react-router-dom";
+import { MoiveProvider} from "./Components/MovieContext";
+
+function App() {
+ return (
+
+
+ <>
+
+
+ );
+}
+
+export default App;
diff --git a/abdulbasit-hussein-yazen/src/App.test.js b/abdulbasit-hussein-yazen/src/App.test.js
new file mode 100644
index 00000000..4db7ebc2
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+ const { getByText } = render(back
+ {id} actor id
+
+ );
+}
+
+export default ActorInfo;
diff --git a/abdulbasit-hussein-yazen/src/Components/Footer.js b/abdulbasit-hussein-yazen/src/Components/Footer.js
new file mode 100644
index 00000000..aceea23a
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/Components/Footer.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function footer() {
+ return (
+
+ );
+}
+export default footer;
diff --git a/abdulbasit-hussein-yazen/src/Components/GenresDropdown.js b/abdulbasit-hussein-yazen/src/Components/GenresDropdown.js
new file mode 100644
index 00000000..4a70d6e4
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/Components/GenresDropdown.js
@@ -0,0 +1,44 @@
+import React, { useState, useEffect, useContext } from "react";
+import { Form } from "react-bootstrap";
+import { MovieContext } from "./MovieContext";
+import API from "../API";
+function GenresDropdown(props) {
+ const [, dispatch] = useContext(MovieContext);
+ const [genres, setGenres] = useState([]);
+
+ useEffect(() => {
+ API.fetching("/genre/movie/list").then((data) =>
+ setGenres(data.genres)
+ );
+ }, []);
+
+ function handleChange(e) {
+ dispatch({
+ type: "SET_SELECTED_GENRE",
+ selectedGenre: parseInt(e.target.id),
+ });
+ }
+
+ return (
+
+
+
+ );
+}
+
+export default GenresDropdown;
diff --git a/abdulbasit-hussein-yazen/src/Components/Main.js b/abdulbasit-hussein-yazen/src/Components/Main.js
new file mode 100644
index 00000000..ea92dd6d
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/Components/Main.js
@@ -0,0 +1,32 @@
+import React, { useContext, useEffect } from "react";
+import MovieGrid from "./MovieGrid";
+import MoviePage from "./MoviePage";
+import {Route, Switch } from "react-router-dom";
+import ActorInfo from "./ActorInfo";
+import Search from "./Search";
+import { MovieContext } from "./MovieContext";
+import API from "../API";
+function Main() {
+ const [, dispatch] = useContext(MovieContext);
+
+ useEffect(() => {
+ API.fetching("/trending/movie/day").then((data) =>
+ dispatch({ type: "SET_MOVIES", movies: data.results })
+ );
+ }, [dispatch]);
+ return (
+
+
+
+
+ );
+}
+export default Main;
diff --git a/abdulbasit-hussein-yazen/src/Components/MovieContext.js b/abdulbasit-hussein-yazen/src/Components/MovieContext.js
new file mode 100644
index 00000000..2bd8aad4
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/Components/MovieContext.js
@@ -0,0 +1,31 @@
+import React, { createContext, useReducer } from "react";
+
+export const MovieContext = createContext();
+const SET_MOVIES = "SET_MOVIES";
+const SET_SELECTED_GENRE = "SET_SELECTED_GENRE";
+
+function reducer(state, action) {
+ switch (action.type) {
+ case SET_MOVIES:
+ return { ...state, movies: action.movies };
+ case SET_SELECTED_GENRE:
+ return { ...state, selectedGenre: action.selectedGenre };
+ default :
+ console.log("from default");
+ break;
+
+ }
+}
+const initialState = {
+ movies: [],
+ selectedGenre: -1,
+};
+export function MoiveProvider(props) {
+
+ const [state, dispatch] = useReducer(reducer, initialState);
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/abdulbasit-hussein-yazen/src/Components/MovieGrid.js b/abdulbasit-hussein-yazen/src/Components/MovieGrid.js
new file mode 100644
index 00000000..f2c9af6e
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/Components/MovieGrid.js
@@ -0,0 +1,35 @@
+import React, { useContext } from "react";
+import MovieItem from "./MovieItem";
+import { Container, Row, Col } from "react-bootstrap";
+import { MovieContext } from "./MovieContext";
+function MovieGrid() {
+ const [state] = useContext(MovieContext);
+
+ let movies;
+ if (state !== !!undefined) {
+ movies =
+ state.selectedGenre === -1
+ ? state.movies
+ : state.movies.filter((movie) =>
+ movie.genre_ids.includes(state.selectedGenre)
+ );
+ }
+
+ return (
+
+
+ {movies !== !!undefined
+ ? movies.map((movie) => {
+ return (
+
+
+ );
+}
+
+export default MovieGrid;
diff --git a/abdulbasit-hussein-yazen/src/Components/MovieInfo.js b/abdulbasit-hussein-yazen/src/Components/MovieInfo.js
new file mode 100644
index 00000000..cdddc203
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/Components/MovieInfo.js
@@ -0,0 +1,40 @@
+import React from "react";
+import { Container, Badge } from "react-bootstrap";
+function MovieInfo(props) {
+
+ return (
+ <>
+
+ {props.movie.title}
+
+
+ {props.movie.hasOwnProperty("release_date")
+ ? props.movie.release_date.substring(0, 4)
+ : ""}
+
+ {props.movie.overview}
+ {props.movie.runtime} minutes
+ {props.movie.title
+ ? props.movie.genres.map((genre) => {
+ return (
+
+ {genre.name}
+
+ );
+ })
+ : ""}
+
+ IMDB {props.movie.vote_average}
+
+
+
+ );
+}
+
+export default MovieInfo;
diff --git a/abdulbasit-hussein-yazen/src/Components/MovieItem.js b/abdulbasit-hussein-yazen/src/Components/MovieItem.js
new file mode 100644
index 00000000..f4df712f
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/Components/MovieItem.js
@@ -0,0 +1,37 @@
+import React from "react";
+import { Card, Badge, Col, Row } from "react-bootstrap";
+import { Link } from "react-router-dom";
+function MovieItem(props) {
+ return (
+
+
+ {props.mov.title}
+
+
+ {props.mov.hasOwnProperty("release_date")
+ ? props.mov.release_date.substring(0, 4)
+ : "no release date"}
+
+
+
+ Rating {props.mov.vote_average}
+
+
+
+
+
+
+ );
+}
+
+export default MovieItem;
diff --git a/abdulbasit-hussein-yazen/src/Components/MoviePage.js b/abdulbasit-hussein-yazen/src/Components/MoviePage.js
new file mode 100644
index 00000000..2fab7560
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/Components/MoviePage.js
@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react";
+import { Container, Button, Row, Col } from "react-bootstrap";
+import { Link, useHistory, useParams } from "react-router-dom";
+import MovieInfo from "./MovieInfo";
+import Carousel from "@brainhubeu/react-carousel";
+import "@brainhubeu/react-carousel/lib/style.css";
+import API from "../API";
+function MoviePage() {
+ const [movie, setMovie] = useState({});
+ const [video, setVideo] = useState({});
+ const [cast, setCast] = useState([]);
+ const history = useHistory();
+ const handleBack = () => {
+ history.goBack();
+ };
+ const { id } = useParams();
+
+ useEffect(() => {
+ //get movie info
+ API.fetching(`/movie/${id.split("-")[0]}`).then((data) =>
+ setMovie(data)
+ );
+ //get movie videos
+ API.fetching(`/movie/${id.split("-")[0]}/videos`).then((data) =>
+ setVideo(data)
+ );
+ //get movie cast
+ API.fetching(`/movie/${id.split("-")[0]}/credits`).then((data) =>
+ setCast(data.cast)
+ );
+ }, [id]);
+
+ return (
+
+
+ Back
+
+
+
+
+
+ {cast !== undefined
+ ? cast.map((actor) => {
+ return (
+
+
+
{actor.name}
+
+ {video.id ? (
+
+ VIDEO
+
+ ) : (
+ ""
+ )}
+
+ );
+}
+
+export default MoviePage;
diff --git a/abdulbasit-hussein-yazen/src/Components/Navbar.js b/abdulbasit-hussein-yazen/src/Components/Navbar.js
new file mode 100644
index 00000000..be68151b
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/Components/Navbar.js
@@ -0,0 +1,33 @@
+import React from "react";
+import SearchBox from "./SearchBox";
+import { Navbar, Nav } from "react-bootstrap";
+import GenresDropdown from "./GenresDropdown";
+import { GiFlame } from "react-icons/gi";
+import { Link, useLocation } from "react-router-dom";
+function NavB() {
+ const location = useLocation();
+ return (
+
+
+
+
+
+
+
+ Home
+
+
+ {location.pathname === "/" ? (
+
+
+ );
+}
+export default NavB;
diff --git a/abdulbasit-hussein-yazen/src/Components/Search.js b/abdulbasit-hussein-yazen/src/Components/Search.js
new file mode 100644
index 00000000..26ecf678
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/Components/Search.js
@@ -0,0 +1,18 @@
+import React, {useEffect, useContext } from "react";
+import MovieGrid from "./MovieGrid";
+import { useLocation } from "react-router-dom";
+import { MovieContext } from "./MovieContext";
+import API from "../API";
+function Search() {
+ const [, dispatch] = useContext(MovieContext);
+
+ const location = useLocation();
+ useEffect(() => {
+ API.fetching("/search/movie", location.search.slice(3)).then((data) =>
+ dispatch({ type: "SET_MOVIES", movies: data.results })
+ );
+ }, [location.search, dispatch]);
+ return
+ ,
+ document.getElementById("root")
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
diff --git a/abdulbasit-hussein-yazen/src/logo.svg b/abdulbasit-hussein-yazen/src/logo.svg
new file mode 100644
index 00000000..6b60c104
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/logo.svg
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/abdulbasit-hussein-yazen/src/serviceWorker.js b/abdulbasit-hussein-yazen/src/serviceWorker.js
new file mode 100644
index 00000000..b04b771a
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/serviceWorker.js
@@ -0,0 +1,141 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+ window.location.hostname === 'localhost' ||
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === '[::1]' ||
+ // 127.0.0.0/8 are considered localhost for IPv4.
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+ )
+);
+
+export function register(config) {
+ if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+ // The URL constructor is available in all browsers that support SW.
+ const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+ if (publicUrl.origin !== window.location.origin) {
+ // Our service worker won't work if PUBLIC_URL is on a different origin
+ // from what our page is served on. This might happen if a CDN is used to
+ // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+ return;
+ }
+
+ window.addEventListener('load', () => {
+ const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+ if (isLocalhost) {
+ // This is running on localhost. Let's check if a service worker still exists or not.
+ checkValidServiceWorker(swUrl, config);
+
+ // Add some additional logging to localhost, pointing developers to the
+ // service worker/PWA documentation.
+ navigator.serviceWorker.ready.then(() => {
+ console.log(
+ 'This web app is being served cache-first by a service ' +
+ 'worker. To learn more, visit https://bit.ly/CRA-PWA'
+ );
+ });
+ } else {
+ // Is not localhost. Just register service worker
+ registerValidSW(swUrl, config);
+ }
+ });
+ }
+}
+
+function registerValidSW(swUrl, config) {
+ navigator.serviceWorker
+ .register(swUrl)
+ .then(registration => {
+ registration.onupdatefound = () => {
+ const installingWorker = registration.installing;
+ if (installingWorker == null) {
+ return;
+ }
+ installingWorker.onstatechange = () => {
+ if (installingWorker.state === 'installed') {
+ if (navigator.serviceWorker.controller) {
+ // At this point, the updated precached content has been fetched,
+ // but the previous service worker will still serve the older
+ // content until all client tabs are closed.
+ console.log(
+ 'New content is available and will be used when all ' +
+ 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+ );
+
+ // Execute callback
+ if (config && config.onUpdate) {
+ config.onUpdate(registration);
+ }
+ } else {
+ // At this point, everything has been precached.
+ // It's the perfect time to display a
+ // "Content is cached for offline use." message.
+ console.log('Content is cached for offline use.');
+
+ // Execute callback
+ if (config && config.onSuccess) {
+ config.onSuccess(registration);
+ }
+ }
+ }
+ };
+ };
+ })
+ .catch(error => {
+ console.error('Error during service worker registration:', error);
+ });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+ // Check if the service worker can be found. If it can't reload the page.
+ fetch(swUrl, {
+ headers: { 'Service-Worker': 'script' },
+ })
+ .then(response => {
+ // Ensure service worker exists, and that we really are getting a JS file.
+ const contentType = response.headers.get('content-type');
+ if (
+ response.status === 404 ||
+ (contentType != null && contentType.indexOf('javascript') === -1)
+ ) {
+ // No service worker found. Probably a different app. Reload the page.
+ navigator.serviceWorker.ready.then(registration => {
+ registration.unregister().then(() => {
+ window.location.reload();
+ });
+ });
+ } else {
+ // Service worker found. Proceed as normal.
+ registerValidSW(swUrl, config);
+ }
+ })
+ .catch(() => {
+ console.log(
+ 'No internet connection found. App is running in offline mode.'
+ );
+ });
+}
+
+export function unregister() {
+ if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.ready
+ .then(registration => {
+ registration.unregister();
+ })
+ .catch(error => {
+ console.error(error.message);
+ });
+ }
+}
diff --git a/abdulbasit-hussein-yazen/src/setupTests.js b/abdulbasit-hussein-yazen/src/setupTests.js
new file mode 100644
index 00000000..74b1a275
--- /dev/null
+++ b/abdulbasit-hussein-yazen/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
+