Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Routing issue fix #436

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Routing issue fix #436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f7f40d
fetchData logic change
anamika7153 Jul 15, 2023
8b70f6a
fixed all components to render data to the frontend
anamika7153 Jul 15, 2023
b5a3196
Merge branch 'master' of https://github.com/sourabhsikarwar/Scene-Mov…
anamika7153 Jul 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 77 additions & 77 deletions server/routes/movies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,166 +1,166 @@
const express = require('express')
const router = express.Router()
const apiKey = process.env.TMDB_KEY
const express = require("express");
const router = express.Router();
const apiKey = process.env.TMDB_KEY;

//get all the genre at the beginning
router.get('/get-all-genres', async (req, res) => {
router.get("/get-all-genres", async (req, res) => {
try {
const data = await fetch(
`https://api.themoviedb.org/3/genre/movie/list?api_key=${apiKey}&language=en-US`
).then((res) => res.json())
res.status(200).json({ success: true, data: data })
).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});
//get the banner
router.get('/get-banner', async (req, res) => {
router.get("/get-banner", async (req, res) => {
try {
const data = await fetch(
`https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&with_genres=12`
).then((res) => res.json())
res.status(200).json({ success: true, data: data })
).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});

//for searching a movie
router.post('/search', async (req, res) => {
router.post("/search", async (req, res) => {
try {
const { query } = req.body
const { query } = req.body;

const data = await fetch(
`https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&language=en-US&query=${query}&page=1&include_adult=false`
).then((res) => res.json())
res.status(200).json({ success: true, data: data })
).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});

//for all movies with genre
router.get('/all-movies/:genre_id', async (req, res) => {
router.get("/all-movies/:genre_id", async (req, res) => {
try {
const { genre_id } = req.params
const { genre_id } = req.params;
const data = await fetch(
`https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&with_genres=${genre_id}`
).then((res) => res.json())
res.status(200).json({ success: true, data: data })
).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});

//for trending with pagination and no pagination
router.get('/trending', async (req, res) => {
router.get("/trending", async (req, res) => {
try {
const { page } = req.query
const { page } = req.query;

let url = `https://api.themoviedb.org/3/trending/movie/day?api_key=${apiKey}`
let url = `https://api.themoviedb.org/3/trending/movie/day?api_key=${apiKey}`;
if (page) {
url = `https://api.themoviedb.org/3/trending/movie/day?api_key=${apiKey}&page=${page}`
url = `https://api.themoviedb.org/3/trending/movie/day?api_key=${apiKey}&page=${page}`;
}

const data = await fetch(url).then((res) => res.json())
res.status(200).json({ success: true, data: data })
const data = await fetch(url).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});
//get popular genre
router.get('/popular-genre/id/:id', async (req, res) => {
router.get("/popular-genre/id/:id", async (req, res) => {
try {
const { id } = req.params
const { id } = req.params;

const data = await fetch(
`https://api.themoviedb.org/3/genre/${id}/movies?api_key=${apiKey}&language=en-US`
).then((res) => res.json())
res.status(200).json({ success: true, data: data })
).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});

//for getting all category wise content
router.get('/:content/:id', async (req, res) => {
router.get("/:content/:id", async (req, res) => {
try {
const { content, id } = req.params
const { page } = req.query
const { content, id } = req.params;
const { page } = req.query;

const data = await fetch(
`https://api.themoviedb.org/3/discover/${content}?api_key=${apiKey}&with_genres=${id}&page=${page}`
).then((res) => res.json())
res.status(200).json({ success: true, data: data })
).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});

//for getting similr movies
router.get('/similar/:title/:id', async (req, res) => {
const { title, id } = req.params
router.get("/similar/:title/:id", async (req, res) => {
const { title, id } = req.params;
try {
const data = await fetch(
`https://api.themoviedb.org/3/${title}/${id}/similar?api_key=${apiKey}&language=en-US&page=1`
).then((res) => res.json())
res.status(200).json({ success: true, data: data })
).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});

//for getting individual movie banner
router.get('/movie-banner/movie/:id', async (req, res) => {
const { id } = req.params
router.get("/movie-banner/movie/:id", async (req, res) => {
const { id } = req.params;

try {
const data = await fetch(
`https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}&language=en-US`
).then((res) => res.json())
res.status(200).json({ success: true, data: data })
).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});

//get the trailer of a particular movie
router.get('/trailer/id/:id', async (req, res) => {
const { id } = req.params
router.get("/trailer/id/:id", async (req, res) => {
const { id } = req.params;
try {
const data = await fetch(
`https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}&append_to_response=videos`
).then((res) => res.json())
res.status(200).json({ success: true, data: data })
).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});

//get the tv shows
router.get('/tv/:id', async (req, res) => {
const { id } = req.params
router.get("/tv/:id", async (req, res) => {
const { id } = req.params;
try {
const data = await fetch(
`https://api.themoviedb.org/3/tv/${id}/season/1?api_key=${apiKey}&language=en-US`
).then((res) => res.json())
res.status(200).json({ success: true, data: data })
).then((res) => res.json());
res.status(200).json({ success: true, data: data });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});

//get genre of a particular movie
router.get('/all-genre/id/:id', async (req, res) => {
router.get("/all-genre/id/:id", async (req, res) => {
try {
const { id } = req.params
const { id } = req.params;
const data = await fetch(
`https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}`
).then((res) => res.json())
res.status(200).json({ success: true, data: data.genres })
).then((res) => res.json());
res.status(200).json({ success: true, data: data.genres });
} catch (e) {
res.status(500).json({ message: 'Internal Server Error' })
res.status(500).json({ message: "Internal Server Error" });
}
})
});

module.exports = router
module.exports = router;
66 changes: 34 additions & 32 deletions src/components/Banner/Banner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,79 @@
import React, { useState, useEffect } from 'react'
import styles from '../../style'
import { Link } from 'react-router-dom'
import { Oval } from 'react-loader-spinner'
import fetchData from '../../helper/fetchData'
import React, { useState, useEffect } from "react";
import styles from "../../style";
import { Link } from "react-router-dom";
import { Oval } from "react-loader-spinner";
import fetchData from "../../helper/fetchData";

function Banner() {
const [Movies, setMovies] = useState({})
const [initialLoading, setInitialLoading] = useState(true)
const apiKey = process.env.REACT_APP_API_KEY;
const [Movies, setMovies] = useState({});
const [initialLoading, setInitialLoading] = useState(true);

useEffect(() => {
upload()
}, [])
upload();
}, []);

const upload = async () => {
setInitialLoading(true)
setInitialLoading(true);
try {
const response = await fetchData('get-banner', 1)
const url = `https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&with_genres=12`;
const response = await fetchData(url);
if (response.success) {
setMovies(response.data.results[0])
setInitialLoading(false)
setMovies(response.data.results[0]);
setInitialLoading(false);
}
} catch (error) {
console.log(error)
console.log(error);
}
}
};
return (
<>
<section
className={`text-gray-600 body-font`}
style={{
backgroundImage: `url(https://image.tmdb.org/t/p/original/${
Movies.backdrop_path ??
'https://image.tmdb.org/t/p/original/nGxUxi3PfXDRm7Vg95VBNgNM8yc.jpg'
"https://image.tmdb.org/t/p/original/nGxUxi3PfXDRm7Vg95VBNgNM8yc.jpg"
}), linear-gradient(0deg, #0D1117 0%, #161B22 10%, #0D1117 20%, transparent 100%)`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundBlendMode: 'multiply',
backgroundSize: "cover",
backgroundPosition: "center",
backgroundBlendMode: "multiply",
}}
>
{!initialLoading ? (
<div
className={`${styles.boxWidth} mx-auto flex px-8 py-8 flex-row md:items-end items-end md:h-[85vh] h-[90vh]`}
>
<div className='md:w-full lg:pr-24 md:pr-16 flex flex-col md:items-center md:text-center md:mb-0 items-center text-center'>
<div className="md:w-full lg:pr-24 md:pr-16 flex flex-col md:items-center md:text-center md:mb-0 items-center text-center">
<h1 className={`${styles.heading1} mb-2 text-gray-100`}>
{Movies.title}
</h1>
<div className='flex justify-center my-4'>
<Link to={'/movie/' + Movies.title + '/' + Movies.id}>
<button className='inline-flex bg-blue-gradient text-black border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg'>
<div className="flex justify-center my-4">
<Link to={"/movie/" + Movies.title + "/" + Movies.id}>
<button className="inline-flex bg-blue-gradient text-black border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
See More
</button>
</Link>
<button className='ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg'>
<button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
Play
</button>
</div>
</div>
</div>
) : (
<div className='flex justify-center my-8'>
<div className="flex justify-center my-8">
<Oval
height='50'
width='50'
color='grey'
secondaryColor='grey'
ariaLabel='loading'
height="50"
width="50"
color="grey"
secondaryColor="grey"
ariaLabel="loading"
/>
</div>
)}
</section>
</>
)
);
}

export default Banner
export default Banner;
Loading