generated from mzaien/remix-nextui-vercel
-
Notifications
You must be signed in to change notification settings - Fork 182
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
…age (#123)
- Loading branch information
1 parent
98d7d38
commit b7e18f6
Showing
26 changed files
with
743 additions
and
166 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,56 @@ | ||
| import { Text } from '@nextui-org/react'; | ||
|
|
||
| const CastPage = () => ( | ||
| <Text b h4 css={{ paddingLeft: '88px' }}> | ||
| {' '} | ||
| In development | ||
| </Text> | ||
| ); | ||
| /* eslint-disable @typescript-eslint/no-throw-literal */ | ||
| import { LoaderFunction, json } from '@remix-run/node'; | ||
| import { useLoaderData } from '@remix-run/react'; | ||
| import { Row } from '@nextui-org/react'; | ||
| import { getCredits } from '~/services/tmdb/tmdb.server'; | ||
| import { ICast } from '~/services/tmdb/tmdb.types'; | ||
| import PeopleList from '~/src/components/people/PeopleList'; | ||
|
|
||
| type LoaderData = { | ||
| cast: ICast[]; | ||
| }; | ||
|
|
||
| export const loader: LoaderFunction = async ({ params }) => { | ||
| const { movieId } = params; | ||
| const mid = Number(movieId); | ||
|
|
||
| if (!mid) throw new Response('Not found', { status: 404 }); | ||
| const credits = await getCredits('movie', mid); | ||
|
|
||
| if (!credits) throw new Response('Not found', { status: 404 }); | ||
|
|
||
| return json<LoaderData>({ cast: credits.cast }); | ||
| }; | ||
|
|
||
| const CastPage = () => { | ||
| const { cast } = useLoaderData<LoaderData>(); | ||
|
|
||
| return ( | ||
| <Row | ||
| fluid | ||
| justify="center" | ||
| align="center" | ||
| css={{ | ||
| flexDirection: 'column', | ||
| '@xsMax': { | ||
| paddingLeft: 'calc(var(--nextui-space-sm))', | ||
| paddingRight: 'calc(var(--nextui-space-sm))', | ||
| }, | ||
| '@xs': { | ||
| paddingLeft: '88px', | ||
| paddingRight: '1rem', | ||
| }, | ||
| }} | ||
| > | ||
| {/* | ||
| TODO: Need react virtual to load this list | ||
| This list has a lot of items, so i limit it to 24 items until we install react virtual | ||
| */} | ||
| {cast && cast.length > 0 && ( | ||
| <PeopleList listType="grid" items={cast.slice(0, 24)} listName="Cast" /> | ||
| )} | ||
| </Row> | ||
| ); | ||
| }; | ||
|
|
||
| export default CastPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,56 @@ | ||
| import { Text } from '@nextui-org/react'; | ||
|
|
||
| const CrewPage = () => ( | ||
| <Text b h4 css={{ paddingLeft: '88px' }}> | ||
| {' '} | ||
| In development | ||
| </Text> | ||
| ); | ||
| /* eslint-disable @typescript-eslint/no-throw-literal */ | ||
| import { LoaderFunction, json } from '@remix-run/node'; | ||
| import { useLoaderData } from '@remix-run/react'; | ||
| import { Row } from '@nextui-org/react'; | ||
| import { getCredits } from '~/services/tmdb/tmdb.server'; | ||
| import { ICrew } from '~/services/tmdb/tmdb.types'; | ||
| import PeopleList from '~/src/components/people/PeopleList'; | ||
|
|
||
| type LoaderData = { | ||
| crew: ICrew[]; | ||
| }; | ||
|
|
||
| export const loader: LoaderFunction = async ({ params }) => { | ||
| const { movieId } = params; | ||
| const mid = Number(movieId); | ||
|
|
||
| if (!mid) throw new Response('Not found', { status: 404 }); | ||
| const credits = await getCredits('movie', mid); | ||
|
|
||
| if (!credits) throw new Response('Not found', { status: 404 }); | ||
|
|
||
| return json<LoaderData>({ crew: credits.crew }); | ||
| }; | ||
|
|
||
| const CrewPage = () => { | ||
| const { crew } = useLoaderData<LoaderData>(); | ||
|
|
||
| return ( | ||
| <Row | ||
| fluid | ||
| justify="center" | ||
| align="center" | ||
| css={{ | ||
| flexDirection: 'column', | ||
| '@xsMax': { | ||
| paddingLeft: 'calc(var(--nextui-space-sm))', | ||
| paddingRight: 'calc(var(--nextui-space-sm))', | ||
| }, | ||
| '@xs': { | ||
| paddingLeft: '88px', | ||
| paddingRight: '1rem', | ||
| }, | ||
| }} | ||
| > | ||
| {/* | ||
| TODO: Need react virtual to load this list | ||
| This list has a lot of items, so i limit it to 24 items until we install react virtual | ||
| */} | ||
| {crew && crew.length > 0 && ( | ||
| <PeopleList listType="grid" items={crew.slice(0, 24)} listName="Crew" /> | ||
| )} | ||
| </Row> | ||
| ); | ||
| }; | ||
|
|
||
| export default CrewPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| /* eslint-disable @typescript-eslint/no-throw-literal */ | ||
| import { LoaderFunction, json } from '@remix-run/node'; | ||
| import { useLoaderData, useNavigate, Link, RouteMatch, useParams } from '@remix-run/react'; | ||
| import { Row, Pagination } from '@nextui-org/react'; | ||
| import { getRecommendation } from '~/services/tmdb/tmdb.server'; | ||
| import MediaList from '~/src/components/Media/MediaList'; | ||
| import useMediaQuery from '~/hooks/useMediaQuery'; | ||
| import i18next from '~/i18n/i18next.server'; | ||
|
|
||
| type LoaderData = { | ||
| recommendations: Awaited<ReturnType<typeof getRecommendation>>; | ||
| }; | ||
|
|
||
| export const loader: LoaderFunction = async ({ request, params }) => { | ||
| const { movieId } = params; | ||
| const mid = Number(movieId); | ||
| if (!mid) throw new Response('Not Found', { status: 404 }); | ||
|
|
||
| const locale = await i18next.getLocale(request); | ||
| const url = new URL(request.url); | ||
| let page = Number(url.searchParams.get('page')) || undefined; | ||
| if (page && (page < 1 || page > 1000)) page = 1; | ||
|
|
||
| const recommendations = await getRecommendation('movie', mid, page, locale); | ||
| if (!recommendations) throw new Response('Not Found', { status: 404 }); | ||
|
|
||
| return json<LoaderData>({ | ||
| recommendations, | ||
| }); | ||
| }; | ||
|
|
||
| export const handle = { | ||
| breadcrumb: (match: RouteMatch) => ( | ||
| <Link to={`/movies/${match.params.movieId}/recommendations`}>Recommendations</Link> | ||
| ), | ||
| }; | ||
|
|
||
| const RecommendationsPage = () => { | ||
| const { movieId } = useParams(); | ||
| const { recommendations } = useLoaderData<LoaderData>(); | ||
| const navigate = useNavigate(); | ||
| const isXs = useMediaQuery(650); | ||
| const paginationChangeHandler = (page: number) => | ||
| navigate(`/movies/${movieId}/recommendations?page=${page}`); | ||
|
|
||
| return ( | ||
| <Row | ||
| fluid | ||
| justify="center" | ||
| align="center" | ||
| css={{ | ||
| flexDirection: 'column', | ||
| '@xsMax': { | ||
| paddingLeft: 'calc(var(--nextui-space-sm))', | ||
| paddingRight: 'calc(var(--nextui-space-sm))', | ||
| }, | ||
| '@xs': { | ||
| paddingLeft: '88px', | ||
| paddingRight: '1rem', | ||
| }, | ||
| }} | ||
| > | ||
| {recommendations && recommendations.items && recommendations.items.length > 0 && ( | ||
| <> | ||
| <MediaList listType="grid" items={recommendations.items} listName="Recommendations" /> | ||
| <Pagination | ||
| total={recommendations.totalPages} | ||
| initialPage={recommendations.page} | ||
| shadow | ||
| onChange={paginationChangeHandler} | ||
| css={{ marginTop: '30px' }} | ||
| {...(isXs && { size: 'xs' })} | ||
| /> | ||
| </> | ||
| )} | ||
| </Row> | ||
| ); | ||
| }; | ||
|
|
||
| export default RecommendationsPage; |
Oops, something went wrong.
b7e18f6There was a problem hiding this comment.
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:
remix-movie – ./
remix-movie-git-master-khanhtran47.vercel.app
remix-movie-khanhtran47.vercel.app
remix-watchmovie.vercel.app