Skip to content
This repository has been archived by the owner on Sep 10, 2023. It is now read-only.

Commit

Permalink
Merge pull request #14 from gthaka/master
Browse files Browse the repository at this point in the history 
Main Master Issue
  • Loading branch information
@gthaka
gthaka authored Jul 4, 2022
2 parents 2d454dc + 98a6c8d commit 24dd01a
Show file tree
Hide file tree
Showing 10 changed files with 3,339 additions and 2,763 deletions.
2 changes: 1 addition & 1 deletion .github/dependabot.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,4 @@ updates:
- package-ecosystem: "npm" # See documentation for possible values
directory: "/" # Location of package manifests
schedule:
interval: "daily"
interval: "weekly"
5,480 changes: 3,097 additions & 2,383 deletions package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 1 addition & 3 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import "./App.css";
/* This example requires Tailwind CSS v2.0+ */
import React from "react";
import Home from "./components/pages/Home";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Routes, Route, useLocation } from "react-router-dom";
import GithubUsers from "./components/pages/GithubUsers";
import DadJokes from "./components/pages/DadJokes";
// import Movies from "./components/pages/Movies";
import Movies from "./components/pages/MovieList";
import Movies from "./components/pages/Movies";
function App() {

// const location = useLocation();
return (
<div className="min-h-full">
<Router>
Expand Down
4 changes: 1 addition & 3 deletions src/components/MainBody.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ export default function MainBody() {
<main>
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div className="px-4 py-6 sm:px-0">
<div className="border-4 border-dashed border-gray-200 rounded-lg h-96">

</div>
<div className="border-4 border-dashed border-gray-200 rounded-lg h-96" />
</div>
</div>
</main>
Expand Down
14 changes: 7 additions & 7 deletions src/components/Sidebar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ export default function Sidebar() {
return (
<>
{!isOpen ? (
<button className="top-0 right-0 fixed text-blue" onClick={()=>setIsOpen(!isOpen)}>
<svg
<button className="top-0 right-0 fixed text-blue" onClick={() => setIsOpen(!isOpen)}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
Expand All @@ -24,12 +24,12 @@ export default function Sidebar() {
</button>
) : (
<div className="top-0 right-0 fixed bg-blue-500 w-[35vw]">
<button onClick={()=>setIsOpen(!isOpen)} className="text-xl text-white fixed top-4 right-4">
<button onClick={() => setIsOpen(!isOpen)} className="text-xl text-white fixed top-4 right-4">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</button>
&nbsp;
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</button>
&nbsp;
<h2 className="text-2xl text-white">Sidebbar Components</h2>
</div>
)}
Expand Down
8 changes: 3 additions & 5 deletions src/components/Titlebar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import React from "react";

export default function Titlebar({title,others}) {
// console.log(others);
export default function Titlebar({ title, others }) {
let button = '';
if(others && others.button){

if (others && others.button) {
button = others.button;
}
return (
<header className="bg-white shadow">
<div className="max-w-7xl mx-auto py-3 px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-gray-900">{title}{button}</h1>

</div>
</header>
);
Expand Down
49 changes: 29 additions & 20 deletions src/components/pages/DadJokes.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,28 +59,37 @@ function JokePlate({ joke }) {
const { _id, setup, punchline, author, type } = joke.body[0];
// console.log(joke.body[0]);
result = (
<div className="mt-10">
<div className="lg:text-center">
<h2 className="text-base text-indigo-600 font-semibold tracking-wide uppercase">
{type}
</h2>
</div>
<dl className="space-y-12 md:space-y-0 md:grid md:grid-cols-1">
<div key={_id} className="relative">
<dt>
<div className="absolute flex items-center justify-center h-24 w-24 rounded-md bg-indigo-500 text-white">
<UserIcon className="h-24 w-24" aria-hidden="true" />
<div className="py-12 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="shadow rounded-md p-5 w-full mx-auto">
<div className="place-content-center">
<div className="w-[30%] my-0 mx-auto text-basetext-indigo-600 font-semibold tracking-wide uppercase">
{type}
</div>
</dt>
<dd className="mt-2 ml-28 font-semibold tracking-wide ">{setup}</dd>
<dd className="mt-2 ml-28 text-indigo-600 font-semibold tracking-wide animate-[bounce_5s_ease-in-out_2] pr-32">
{punchline}
</dd>
<dd className="mt-2 text-1xl font-semibold tracking-wide uppercase">
{author.name}
</dd>
</div>
<dl className="space-y-12 md:space-y-0 md:grid md:grid-cols-1">
<div key={_id} className="relative">
<dt>
<div className="absolute flex items-center justify-center h-24 w-24 rounded-md bg-indigo-500 text-white">
<UserIcon className="h-24 w-24" aria-hidden="true" />
</div>
</dt>
<dd className="mt-2 ml-28 w-3/4 font-semibold tracking-wide">
{setup}
</dd>
<dd className="mt-2 ml-28 w-4/5 text-indigo-600 font-semibold tracking-wide animate-[bounce_5s_ease-in-out_2] pr-32">
{punchline}
</dd>
<dd className="mt-2 ml-28 tracking-wide w-4/5">
&nbsp;
</dd>
<dd className="mt-4 w-[100px] uppercase font-semibold tracking-wide ">
{author.name}
</dd>
</div>
</dl>
</div>
</dl>
</div>
</div>
);
}
Expand Down
96 changes: 34 additions & 62 deletions src/components/pages/MovieList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
// import { getMouseEventOptions } from "@testing-library/user-event/dist/utils";
import React from "react";
import {adMovies as MovieHead} from "../../config/rapidApi";
import { adMovies as MovieHead } from "../../config/rapidApi";

export default function MovieList() {

const url = "https://advanced-movie-search.p.rapidapi.com/genre/movie/list";
const movieURL =
"https://advanced-movie-search.p.rapidapi.com/discover/movie";

const movieURL = "https://advanced-movie-search.p.rapidapi.com/discover/movie";
const [genres, setGenres] = React.useState([]);
const [isLoading, setIsLoading] = React.useState(false);
const [movies, setMovies] = React.useState([]);
const [genre, setGenre] = React.useState(0);
const [page, setPage] = React.useState(1);
const [pages, setPages] = React.useState([]);
const [totalPages, setTotalPages] = React.useState(0);
const [totalResults, setTotalResults] = React.useState(0);

const getGenres = async () => {
setIsLoading(true);
Expand All @@ -28,73 +34,39 @@ export default function MovieList() {
const options = {
method: "GET",
headers: MovieHead,
// params: {with_genres: genre, page: '1'},
};
const gen = await fetch(`${movieURL}?with_genres=${genre}&page=${page===0?1:page}`, options);
if (!gen.ok) {
throw Error("Failed");
}
const gen = await fetch(`${movieURL}?with_genres=${genre}&page=${page}`, options);
if (!gen.ok) { throw Error("Failed"); }
const res = await gen.json();
setMovies(res.results);
setTotalPages(res.total_pages)
setTotalResults(res.total_results);
console.log(res.total_results)
setIsLoading(false);
};

const [genres, setGenres] = React.useState([]);
const [isLoading, setIsLoading] = React.useState(false);
const [movies, setMovies] = React.useState([]);
const [genre, setGenre] = React.useState(0);
const [page, setPage] = React.useState(0);
const [pages, setPages] = React.useState([]);
const [totalPages, setTotalPages] = React.useState(0);
const [totalResults, setTotalResults] = React.useState(0);
const handleSelectedGenre = (e) => {
setPage(1);
setGenre(e.target.value);
// return [];
};

React.useEffect(() => {
getGenres();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleSelectedPage = (e) => {
setPage(e.target.value);
// console.log(page)
};

// Fetch Movies Based on Selected Genre
React.useEffect(() => {
console.log(page+'<<<<')
genre!== 0 && getMovies();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [genre,page]);
React.useEffect(() => { getGenres(); }, []);

// Fetch Movies Based on Selected Genre
// React.useEffect(() => {
// movies.length && setTotalPages(movies.total_pages);
// movies.length && setTotalResults(movies.total_results);
// // return [];
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [movies]);
// eslint-disable-next-line react-hooks/exhaustive-deps
React.useEffect(() => { genre !== 0 && getMovies(); }, [genre, page]);

React.useMemo(()=>{
const range = [...Array(totalPages - 0 + 1).keys()].map(x => x + 0);
React.useMemo(() => {
const range = totalPages === 0 ? [] : [...Array(totalPages - 0 + 1).keys()].map(x => x + 0);
range.length && range.shift();
// console.log(range);
setPages(range);
},[totalPages])
// React.useEffect(() => {
// // console.log(totalPages)

// // setPages(range);
// // return [];
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [genre]);

const handleSelectedGenre = (e) => {
// console.log(e.target.value);
setGenre(e.target.value);
return [];
};

const handleSelectedPage = (e) => {
// console.log(e.target.value);
setPage(e.target.value);
console.log(page)
};
}, [totalPages])

return (
<>
Expand Down Expand Up @@ -125,7 +97,7 @@ export default function MovieList() {
name="moviePages"
id="movPg"
className="w-auto h-auto mx-20"
disabled={isLoading} defaultValue={1}
disabled={isLoading}
onChange={handleSelectedPage}
>
{pages.length &&
Expand All @@ -139,10 +111,10 @@ export default function MovieList() {
<section>
<div className="text-3xl">
<ul>
{movies.length && movies.map((movie) => (
// `${JSON.stringify(movie)} <br/>`
<li key={movie.id}>{movie.title}</li>
))}
{movies.length && movies.map((movie) => (
// `${JSON.stringify(movie)} <br/>`
<li key={movie.id}>{movie.title}</li>
))}
</ul>
</div>
</section>
Expand Down
Loading

1 comment on commit 24dd01a

@vercel
Copy link

@vercel vercel bot commented on 24dd01a Jul 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

tw-dashed – ./

tw-dashed-git-main-asl.vercel.app
tw-dashed-asl.vercel.app
tw-dashed.vercel.app

Please sign in to comment.