ngn/libremdb
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Activity

refactor: refactor code a bit

Browse Source 
make a hook to abstarct logic from page
changes to .prettierrc
changes to a couple of imports/exports
bunch of screen reader tweaks
This commit is contained in:
zyachel 2022-12-31 22:02:24 +05:30
parent 64f3896258
commit 57b050f196
18 changed files with 226 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.prettierrc
View File

@ -1,6 +1,8 @@
{ {
"trailingComma": "es5", "trailingComma": "es5",
"tabWidth": 2, "tabWidth": 2,
"semi": false, "arrowParens": "avoid",
"singleQuote": true "semi": true,
} "singleQuote": true,
"jsxSingleQuote": true
}

2
src/components/buttons/ThemeToggler.tsx
View File

@ -17,9 +17,9 @@ const ThemeToggler = (props: Props) => {
return ( return (
<button <button
className={`${styles.button} ${props.className}`} className={`${styles.button} ${props.className}`}
aria-label='Change theme'
onClick={clickHandler} onClick={clickHandler}
> >
<span className='visually-hidden'>Change theme</span>
<svg <svg
className={`icon ${styles.icon}`} className={`icon ${styles.icon}`}
focusable='false' focusable='false'

20
src/components/Error/ErrorInfo.tsx → src/components/error/ErrorInfo.tsx
View File

@ -1,6 +1,6 @@
import Link from 'next/link'; import Link from 'next/link';
import Layout from '../../layouts/Layout'; import Layout from '../../layouts/Layout';
import Meta from '../Meta/Meta'; import Meta from '../meta/Meta';
import styles from '../../styles/modules/components/error/error-info.module.scss'; import styles from '../../styles/modules/components/error/error-info.module.scss';
@ -13,22 +13,22 @@ const ErrorInfo = ({ message = 'Not found, sorry.', statusCode = 404 }) => {
<> <>
<Meta <Meta
title={`${message} (${statusCode})`} title={`${message} (${statusCode})`}
description='you encountered an error page!' description="you encountered an error page!"
/> />
<Layout className={styles.error}> <Layout className={styles.error}>
<svg <svg
className={styles.gnu} className={styles.gnu}
focusable='false' focusable="false"
role='img' role="img"
aria-labelledby='gnu-title gnu-desc' aria-labelledby="gnu-title gnu-desc"
> >
<title id='gnu-title'>GNU and Tux</title> <title id="gnu-title">GNU and Tux</title>
<desc id='gnu-desc'> <desc id="gnu-desc">
A pencil drawing of a big gnu and a small penguin, both very sad. A pencil drawing of a big gnu and a small penguin, both very sad.
GNU is despondently sitting on a bench, and Tux stands beside him, GNU is despondently sitting on a bench, and Tux stands beside him,
looking down and patting him on the back. looking down and patting him on the back.
</desc> </desc>
<use href='/svg/sadgnu.svg#sad-gnu'></use> <use href="/svg/sadgnu.svg#sad-gnu"></use>
</svg> </svg>
<h1 className={`heading heading__primary ${styles.heading}`}> <h1 className={`heading heading__primary ${styles.heading}`}>
<span>{message}</span> <span>{message}</span>
@ -36,8 +36,8 @@ const ErrorInfo = ({ message = 'Not found, sorry.', statusCode = 404 }) => {
</h1> </h1>
<p className={styles.back}> <p className={styles.back}>
Go back to{' '} Go back to{' '}
<Link href='/about'> <Link href="/about">
<a className='link'>the homepage</a> <a className="link">the homepage</a>
</Link> </Link>
. .
</p> </p>

0
src/components/Meta/Meta.tsx → src/components/meta/Meta.tsx
View File

42
src/components/title/Basic.tsx
View File

@ -1,27 +1,27 @@
import { Fragment } from 'react' import { Fragment } from 'react';
import Image from 'next/future/image' import Image from 'next/future/image';
import Link from 'next/link' import Link from 'next/link';
import { import {
formatNumber, formatNumber,
formatTime, formatTime,
getProxiedIMDbImgUrl, getProxiedIMDbImgUrl,
modifyIMDbImg, modifyIMDbImg,
} from '../../utils/helpers' } from '../../utils/helpers';
import { Basic } from '../../interfaces/shared/title' import { Basic } from '../../interfaces/shared/title';
import styles from '../../styles/modules/components/title/basic.module.scss' import styles from '../../styles/modules/components/title/basic.module.scss';
type Props = { type Props = {
className: string className: string;
data: Basic data: Basic;
} };
const Basic = ({ data, className }: Props) => { const Basic = ({ data, className }: Props) => {
const titleType = data.type.id const titleType = data.type.id;
const releaseTime = const releaseTime =
titleType === 'tvSeries' titleType === 'tvSeries'
? `${data.releaseYear?.start}-${data.releaseYear?.end || 'present'}` ? `${data.releaseYear?.start}-${data.releaseYear?.end || 'present'}`
: data.releaseYear?.start : data.releaseYear?.start;
return ( return (
<section <section
@ -45,11 +45,11 @@ const Basic = ({ data, className }: Props) => {
alt={data.poster.caption} alt={data.poster.caption}
priority priority
fill fill
sizes="300px" sizes='300px'
/> />
) : ( ) : (
<svg className={styles.image__NA}> <svg className={styles.image__NA}>
<use href="/svg/sprite.svg#icon-image-slash" /> <use href='/svg/sprite.svg#icon-image-slash' />
</svg> </svg>
)} )}
</div> </div>
@ -57,7 +57,7 @@ const Basic = ({ data, className }: Props) => {
<h1 className={`${styles.title} heading heading__primary`}> <h1 className={`${styles.title} heading heading__primary`}>
{data.title} {data.title}
</h1> </h1>
<ul className={styles.meta} aria-label="quick facts"> <ul className={styles.meta} aria-label='quick facts'>
{data.status && data.status.id !== 'released' && ( {data.status && data.status.id !== 'released' && (
<li className={styles.meta__text}>{data.status.text}</li> <li className={styles.meta__text}>{data.status.text}</li>
)} )}
@ -78,7 +78,7 @@ const Basic = ({ data, className }: Props) => {
<p className={styles.rating}> <p className={styles.rating}>
<span className={styles.rating__num}>{data.ratings.avg}</span> <span className={styles.rating__num}>{data.ratings.avg}</span>
<svg className={styles.rating__icon}> <svg className={styles.rating__icon}>
<use href="/svg/sprite.svg#icon-rating"></use> <use href='/svg/sprite.svg#icon-rating'></use>
</svg> </svg>
<span className={styles.rating__text}> Avg. rating</span> <span className={styles.rating__text}> Avg. rating</span>
</p> </p>
@ -87,7 +87,7 @@ const Basic = ({ data, className }: Props) => {
{formatNumber(data.ratings.numVotes)} {formatNumber(data.ratings.numVotes)}
</span> </span>
<svg className={styles.rating__icon}> <svg className={styles.rating__icon}>
<use href="/svg/sprite.svg#icon-like-dislike"></use> <use href='/svg/sprite.svg#icon-like-dislike'></use>
</svg> </svg>
<span className={styles.rating__text}> No. of votes</span> <span className={styles.rating__text}> No. of votes</span>
</p> </p>
@ -99,7 +99,7 @@ const Basic = ({ data, className }: Props) => {
{formatNumber(data.ranking.position)} {formatNumber(data.ranking.position)}
</span> </span>
<svg className={styles.rating__icon}> <svg className={styles.rating__icon}>
<use href="/svg/sprite.svg#icon-graph-rising"></use> <use href='/svg/sprite.svg#icon-graph-rising'></use>
</svg> </svg>
<span className={styles.rating__text}> <span className={styles.rating__text}>
{' '} {' '}
@ -136,7 +136,7 @@ const Basic = ({ data, className }: Props) => {
<span className={styles.overview__text}>{data.plot || '-'}</span> <span className={styles.overview__text}>{data.plot || '-'}</span>
</p> </p>
} }
{data.primaryCrew.map((crewType) => ( {data.primaryCrew.map(crewType => (
<p className={styles.crewType} key={crewType.type.id}> <p className={styles.crewType} key={crewType.type.id}>
<span className={styles.crewType__heading}> <span className={styles.crewType__heading}>
{`${crewType.type.category}: `} {`${crewType.type.category}: `}
@ -153,7 +153,7 @@ const Basic = ({ data, className }: Props) => {
))} ))}
</div> </div>
</section> </section>
) );
} };
export default Basic export default Basic;

48
src/components/title/Info.tsx
View File

@ -1,5 +1,5 @@
import Link from 'next/link'; import Link from 'next/link';
import { NextRouter } from 'next/router'; import { useRouter } from 'next/router';
import { Info } from '../../interfaces/shared/title'; import { Info } from '../../interfaces/shared/title';
import { formatMoney, formatTime } from '../../utils/helpers'; import { formatMoney, formatTime } from '../../utils/helpers';
@ -8,10 +8,10 @@ import styles from '../../styles/modules/components/title/info.module.scss';
type Props = { type Props = {
info: Info; info: Info;
className: string; className: string;
router: NextRouter;
}; };
const Info = ({ info, className, router }: Props) => { const Info = ({ info, className }: Props) => {
const router = useRouter();
const { titleId } = router.query; const { titleId } = router.query;
const { boxOffice, details, meta, keywords, technicalSpecs, accolades } = const { boxOffice, details, meta, keywords, technicalSpecs, accolades } =
info; info;
@ -20,7 +20,7 @@ const Info = ({ info, className, router }: Props) => {
<div className={`${className} ${styles.info}`}> <div className={`${className} ${styles.info}`}>
{meta.infoEpisode && ( {meta.infoEpisode && (
<section className={styles.episodeInfo}> <section className={styles.episodeInfo}>
<h2 className='heading heading__secondary'>Episode info</h2> <h2 className="heading heading__secondary">Episode info</h2>
<div className={styles.episodeInfo__container}> <div className={styles.episodeInfo__container}>
{meta.infoEpisode.numSeason && ( {meta.infoEpisode.numSeason && (
<p className={styles.series}> <p className={styles.series}>
@ -50,14 +50,14 @@ const Info = ({ info, className, router }: Props) => {
{meta.infoEpisode.prevId && ( {meta.infoEpisode.prevId && (
<p> <p>
<Link href={`/title/${meta.infoEpisode.prevId}`}> <Link href={`/title/${meta.infoEpisode.prevId}`}>
<a className='link'>Go to previous episode</a> <a className="link">Go to previous episode</a>
</Link> </Link>
</p> </p>
)} )}
{meta.infoEpisode.nextId && ( {meta.infoEpisode.nextId && (
<p> <p>
<Link href={`/title/${meta.infoEpisode.nextId}`}> <Link href={`/title/${meta.infoEpisode.nextId}`}>
<a className='link'>Go to next episode</a> <a className="link">Go to next episode</a>
</Link> </Link>
</p> </p>
)} )}
@ -66,7 +66,7 @@ const Info = ({ info, className, router }: Props) => {
)} )}
{meta.infoSeries && ( {meta.infoSeries && (
<section className={styles.seriesInfo}> <section className={styles.seriesInfo}>
<h2 className='heading heading__secondary'>Series info</h2> <h2 className="heading heading__secondary">Series info</h2>
<div className={styles.seriesInfo__container}> <div className={styles.seriesInfo__container}>
<p> <p>
<span>Total Seasons: </span> <span>Total Seasons: </span>
@ -82,19 +82,19 @@ const Info = ({ info, className, router }: Props) => {
</p> </p>
<p> <p>
<Link href={`/title/${titleId}/episodes`}> <Link href={`/title/${titleId}/episodes`}>
<a className='link'>See all Episodes</a> <a className="link">See all Episodes</a>
</Link> </Link>
</p> </p>
</div> </div>
</section> </section>
)} )}
<section className={styles.accolades}> <section className={styles.accolades}>
<h2 className='heading heading__secondary'>Accolades</h2> <h2 className="heading heading__secondary">Accolades</h2>
<div className={styles.accolades__container}> <div className={styles.accolades__container}>
{accolades.topRating && ( {accolades.topRating && (
<p> <p>
<Link href={`/chart/top`}> <Link href={`/chart/top`}>
<a className='link'>Top rated (#{accolades.topRating})</a> <a className="link">Top rated (#{accolades.topRating})</a>
</Link> </Link>
</p> </p>
)} )}
@ -112,21 +112,21 @@ const Info = ({ info, className, router }: Props) => {
</p> </p>
<p> <p>
<Link href={`/title/${titleId}/awards`}> <Link href={`/title/${titleId}/awards`}>
<a className='link'>View all awards</a> <a className="link">View all awards</a>
</Link> </Link>
</p> </p>
</div> </div>
</section> </section>
{!!keywords.total && ( {!!keywords.total && (
<section className={styles.keywords}> <section className={styles.keywords}>
<h2 className='heading heading__secondary'>Keywords</h2> <h2 className="heading heading__secondary">Keywords</h2>
<ul className={styles.keywords__container}> <ul className={styles.keywords__container}>
{keywords.list.map(word => ( {keywords.list.map(word => (
<li className={styles.keywords__item} key={word}> <li className={styles.keywords__item} key={word}>
<Link <Link
href={`/search/keyword/?keywords=${word.replace(/\s/g,'-')}`} href={`/search/keyword/?keywords=${word.replace(/\s/g, '-')}`}
> >
<a className='link'>{word}</a> <a className="link">{word}</a>
</Link> </Link>
</li> </li>
))} ))}
@ -135,7 +135,7 @@ const Info = ({ info, className, router }: Props) => {
)} )}
{!!Object.keys(details).length && ( {!!Object.keys(details).length && (
<section className={styles.details}> <section className={styles.details}>
<h2 className='heading heading__secondary'>Details</h2> <h2 className="heading heading__secondary">Details</h2>
<div className={styles.details__container}> <div className={styles.details__container}>
{details.releaseDate && ( {details.releaseDate && (
<p> <p>
@ -156,7 +156,7 @@ const Info = ({ info, className, router }: Props) => {
<Link <Link
href={`/search/title/?country_of_origin=${country.id}`} href={`/search/title/?country_of_origin=${country.id}`}
> >
<a className='link'>{country.text}</a> <a className="link">{country.text}</a>
</Link> </Link>
</span> </span>
))} ))}
@ -168,7 +168,7 @@ const Info = ({ info, className, router }: Props) => {
{details.officialSites.sites.map((site, i) => ( {details.officialSites.sites.map((site, i) => (
<span key={site.url}> <span key={site.url}>
{!!i && ', '} {!!i && ', '}
<a href={site.url} className='link'> <a href={site.url} className="link">
{site.name} {site.name}
</a> </a>
</span> </span>
@ -182,7 +182,7 @@ const Info = ({ info, className, router }: Props) => {
<span key={lang.id}> <span key={lang.id}>
{!!i && ', '} {!!i && ', '}
<Link href={`/search/title/?primary_language=${lang.id}`}> <Link href={`/search/title/?primary_language=${lang.id}`}>
<a className='link'>{lang.text}</a> <a className="link">{lang.text}</a>
</Link> </Link>
</span> </span>
))} ))}
@ -201,7 +201,7 @@ const Info = ({ info, className, router }: Props) => {
<span key={loc}> <span key={loc}>
{!!i && ', '} {!!i && ', '}
<Link href={`/search/title/?locations=${loc}`}> <Link href={`/search/title/?locations=${loc}`}>
<a className='link'>{loc}</a> <a className="link">{loc}</a>
</Link> </Link>
</span> </span>
))} ))}
@ -214,7 +214,7 @@ const Info = ({ info, className, router }: Props) => {
<span key={co.id}> <span key={co.id}>
{!!i && ', '} {!!i && ', '}
<Link href={`/company/${co.id}`}> <Link href={`/company/${co.id}`}>
<a className='link'>{co.name}</a> <a className="link">{co.name}</a>
</Link> </Link>
</span> </span>
))} ))}
@ -225,7 +225,7 @@ const Info = ({ info, className, router }: Props) => {
)} )}
{!!Object.keys(boxOffice).length && ( {!!Object.keys(boxOffice).length && (
<section className={styles.boxoffice}> <section className={styles.boxoffice}>
<h2 className='heading heading__secondary'>Box office</h2> <h2 className="heading heading__secondary">Box office</h2>
<div className={styles.boxoffice__container}> <div className={styles.boxoffice__container}>
{boxOffice.budget && ( {boxOffice.budget && (
<p> <p>
@ -277,7 +277,7 @@ const Info = ({ info, className, router }: Props) => {
)} )}
{!!Object.keys(technicalSpecs).length && ( {!!Object.keys(technicalSpecs).length && (
<section className={styles.technical}> <section className={styles.technical}>
<h2 className='heading heading__secondary'>Technical specs</h2> <h2 className="heading heading__secondary">Technical specs</h2>
<div className={styles.technical__container}> <div className={styles.technical__container}>
{technicalSpecs.runtime && ( {technicalSpecs.runtime && (
<p> <p>
@ -293,7 +293,7 @@ const Info = ({ info, className, router }: Props) => {
<span key={color.id}> <span key={color.id}>
{!!i && ', '} {!!i && ', '}
<Link href={`/search/title/?colors=${color.id}`}> <Link href={`/search/title/?colors=${color.id}`}>
<a className='link'>{color.name}</a> <a className="link">{color.name}</a>
</Link> </Link>
</span> </span>
))} ))}
@ -308,7 +308,7 @@ const Info = ({ info, className, router }: Props) => {
<span key={sound.id}> <span key={sound.id}>
{!!i && ', '} {!!i && ', '}
<Link href={`/search/title/?sound_mixes=${sound.id}`}> <Link href={`/search/title/?sound_mixes=${sound.id}`}>
<a className='link'>{sound.name}</a> <a className="link">{sound.name}</a>
</Link> </Link>
</span> </span>
))} ))}

22
src/components/title/Media.tsx
View File

@ -1,6 +1,5 @@
import Image from 'next/future/image'; import Image from 'next/future/image';
import Link from 'next/link'; import Link from 'next/link';
import { NextRouter } from 'next/router';
import { Media } from '../../interfaces/shared/title'; import { Media } from '../../interfaces/shared/title';
import { getProxiedIMDbImgUrl, modifyIMDbImg } from '../../utils/helpers'; import { getProxiedIMDbImgUrl, modifyIMDbImg } from '../../utils/helpers';
@ -9,21 +8,20 @@ import styles from '../../styles/modules/components/title/media.module.scss';
type Props = { type Props = {
className: string; className: string;
media: Media; media: Media;
router: NextRouter;
}; };
const Media = ({ className, media, router }: Props) => { const Media = ({ className, media }: Props) => {
return ( return (
<div className={`${className} ${styles.media}`}> <div className={`${className} ${styles.media}`}>
{(media.trailer || !!media.videos.total) && ( {(media.trailer || !!media.videos.total) && (
<section className={styles.videos}> <section className={styles.videos}>
<h2 className="heading heading__secondary">Videos</h2> <h2 className='heading heading__secondary'>Videos</h2>
<div className={styles.videos__container}> <div className={styles.videos__container}>
{media.trailer && ( {media.trailer && (
<div key={router.asPath} className={styles.trailer}> <div className={styles.trailer}>
<video <video
aria-label="trailer video" aria-label='trailer video'
// it's a relatively new tag. hence jsx-all1 complains // it's a relatively new tag. hence jsx-all1 complains
aria-description={media.trailer.caption} aria-description={media.trailer.caption}
controls controls
@ -32,7 +30,7 @@ const Media = ({ className, media, router }: Props) => {
modifyIMDbImg(media.trailer.thumbnail) modifyIMDbImg(media.trailer.thumbnail)
)} )}
className={styles.trailer__video} className={styles.trailer__video}
preload="none" preload='none'
> >
{media.trailer.urls.map(source => ( {media.trailer.urls.map(source => (
<source <source
@ -53,9 +51,9 @@ const Media = ({ className, media, router }: Props) => {
<Image <Image
className={styles.video__img} className={styles.video__img}
src={modifyIMDbImg(video.thumbnail)} src={modifyIMDbImg(video.thumbnail)}
alt="" alt=''
fill fill
sizes="400px" sizes='400px'
/> />
<p className={styles.video__caption}> <p className={styles.video__caption}>
{video.caption} ({video.runtime}s) {video.caption} ({video.runtime}s)
@ -68,16 +66,16 @@ const Media = ({ className, media, router }: Props) => {
)} )}
{!!media.images.total && ( {!!media.images.total && (
<section className={styles.images}> <section className={styles.images}>
<h2 className="heading heading__secondary">Images</h2> <h2 className='heading heading__secondary'>Images</h2>
<div className={styles.images__container}> <div className={styles.images__container}>
{media.images.images.map(image => ( {media.images.images.map(image => (
<figure key={image.id} className={styles.image}> <figure key={image.id} className={styles.image}>
<Image <Image
className={styles.image__img} className={styles.image__img}
src={modifyIMDbImg(image.url)} src={modifyIMDbImg(image.url)}
alt="" alt=''
fill fill
sizes="400px" sizes='400px'
/> />
<figcaption className={styles.image__caption}> <figcaption className={styles.image__caption}>
{image.caption.plainText} {image.caption.plainText}

16
src/components/title/Reviews.tsx
View File

@ -1,4 +1,4 @@
import { NextRouter } from 'next/router'; import { useRouter } from 'next/router';
import Link from 'next/link'; import Link from 'next/link';
import { Reviews } from '../../interfaces/shared/title'; import { Reviews } from '../../interfaces/shared/title';
import { formatNumber } from '../../utils/helpers'; import { formatNumber } from '../../utils/helpers';
@ -6,15 +6,15 @@ import styles from '../../styles/modules/components/title/reviews.module.scss';
type Props = { type Props = {
reviews: Reviews; reviews: Reviews;
router: NextRouter;
}; };
const Reviews = ({ reviews, router }: Props) => { const Reviews = ({ reviews }: Props) => {
const router = useRouter();
const { titleId } = router.query; const { titleId } = router.query;
return ( return (
<section className={styles.reviews}> <section className={styles.reviews}>
<h2 className='heading heading__secondary'>Reviews</h2> <h2 className="heading heading__secondary">Reviews</h2>
{reviews.featuredReview && ( {reviews.featuredReview && (
<article className={styles.reviews__reviewContainer}> <article className={styles.reviews__reviewContainer}>
@ -38,7 +38,7 @@ const Reviews = ({ reviews, router }: Props) => {
{' '} {' '}
by{' '} by{' '}
<Link href={`/user/${reviews.featuredReview.reviewer.id}`}> <Link href={`/user/${reviews.featuredReview.reviewer.id}`}>
<a className='link'>{reviews.featuredReview.reviewer.name}</a> <a className="link">{reviews.featuredReview.reviewer.name}</a>
</Link> </Link>
</span> </span>
<span> on {reviews.featuredReview.date}.</span> <span> on {reviews.featuredReview.date}.</span>
@ -58,21 +58,21 @@ const Reviews = ({ reviews, router }: Props) => {
<div className={styles.reviews__stats}> <div className={styles.reviews__stats}>
<p> <p>
<Link href={`/title/${titleId}/reviews`}> <Link href={`/title/${titleId}/reviews`}>
<a className='link'> <a className="link">
{formatNumber(reviews.numUserReviews)} User reviews {formatNumber(reviews.numUserReviews)} User reviews
</a> </a>
</Link> </Link>
</p> </p>
<p> <p>
<Link href={`/title/${titleId}/externalreviews`}> <Link href={`/title/${titleId}/externalreviews`}>
<a className='link'> <a className="link">
{formatNumber(reviews.numCriticReviews)} Critic reviews {formatNumber(reviews.numCriticReviews)} Critic reviews
</a> </a>
</Link> </Link>
</p> </p>
<p> <p>
<Link href={`/title/${titleId}/criticreviews`}> <Link href={`/title/${titleId}/criticreviews`}>
<a className='link'> {reviews.metacriticScore} Metascore</a> <a className="link"> {reviews.metacriticScore} Metascore</a>
</Link> </Link>
</p> </p>
</div> </div>

9
src/components/title/index.tsx Normal file
View File

@ -0,0 +1,9 @@
import Basic from './Basic';
import Cast from './Cast';
import DidYouKnow from './DidYouKnow';
import Info from './Info';
import Media from './Media';
import MoreLikeThis from './MoreLikeThis';
import Reviews from './Reviews';
export { Basic, Cast, DidYouKnow, Info, Media, MoreLikeThis, Reviews };

31
src/hooks/usePageLoading.ts Normal file
View File

@ -0,0 +1,31 @@
import { useCallback, useEffect, useState } from 'react';
import { useRouter } from 'next/router';
/**
* for showing progress bar. could've used nprogress package, but didn't feel like it
* @returns isPageLoading: as the name suggests.
* @returns key: a unique key(in reality, a part of url) telling whether the page has changed or not
*/
const useIsPageLoading = () => {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const handleStart = useCallback(() => setIsLoading(true), []);
const handleEnd = useCallback(() => setIsLoading(false), []);
useEffect(() => {
router.events.on('routeChangeStart', handleStart);
router.events.on('routeChangeComplete', handleEnd);
router.events.on('routeChangeError', handleEnd);
return () => {
router.events.off('routeChangeStart', handleStart);
router.events.off('routeChangeComplete', handleEnd);
router.events.off('routeChangeError', handleEnd);
};
}, [router, handleStart, handleEnd]);
return { isPageLoading: isLoading, key: router.asPath };
};
export default useIsPageLoading;

2
src/pages/404.tsx
View File

@ -1,4 +1,4 @@
import ErrorInfo from '../components/Error/ErrorInfo'; import ErrorInfo from '../components/error/ErrorInfo';
const Error404 = () => { const Error404 = () => {
return <ErrorInfo />; return <ErrorInfo />;

4
src/pages/500.tsx
View File

@ -1,6 +1,6 @@
import ErrorInfo from '../components/Error/ErrorInfo'; import ErrorInfo from '../components/error/ErrorInfo';
const Error500 = () => { const Error500 = () => {
return <ErrorInfo message='server messed up, sorry.' statusCode={500} />; return <ErrorInfo message="server messed up, sorry." statusCode={500} />;
}; };
export default Error500; export default Error500;

33
src/pages/_app.tsx
View File

@ -1,38 +1,21 @@
import { useCallback, useEffect, useState } from 'react';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import { useRouter } from 'next/router'; import usePageLoading from '../hooks/usePageLoading';
import ProgressBar from '../components/loaders/ProgressBar'; import ProgressBar from '../components/loaders/ProgressBar';
import ThemeProvider from '../context/theme-context'; import ThemeProvider from '../context/theme-context';
import '../styles/main.scss'; import '../styles/main.scss';
import { useRouter } from 'next/router';
const ModifiedApp = ({ Component, pageProps }: AppProps) => { const ModifiedApp = ({ Component, pageProps }: AppProps) => {
// for showing progress bar const { isPageLoading, key } = usePageLoading();
// could've used nprogress package, but didn't feel like it
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const handleStart = useCallback(() => setIsLoading(true), []);
const handleEnd = useCallback(() => setIsLoading(false), []);
useEffect(() => {
router.events.on('routeChangeStart', handleStart);
router.events.on('routeChangeComplete', handleEnd);
router.events.on('routeChangeError', handleEnd);
return () => {
router.events.off('routeChangeStart', handleStart);
router.events.off('routeChangeComplete', handleEnd);
router.events.off('routeChangeError', handleEnd);
};
}, [router, handleStart, handleEnd]);
//
return ( return (
<ThemeProvider> <ThemeProvider>
{isLoading && <ProgressBar />} {isPageLoading && <ProgressBar />}
<Component {...pageProps} /> <Component
{...pageProps}
key={key} /* passing key to force react to remound components */
/>
</ThemeProvider> </ThemeProvider>
); );
}; };

18
src/pages/_document.tsx
View File

@ -3,15 +3,17 @@ import Document, { Html, Head, Main, NextScript } from 'next/document';
// for preventing Flash of inAccurate coloR Theme(fart) // for preventing Flash of inAccurate coloR Theme(fart)
// chris coyier came up with that acronym(https://css-tricks.com/flash-of-inaccurate-color-theme-fart/) // chris coyier came up with that acronym(https://css-tricks.com/flash-of-inaccurate-color-theme-fart/)
const setInitialTheme = ` const setInitialTheme = `
document.documentElement.dataset.js = true; (() => {
document.documentElement.dataset.theme = (() => { document.documentElement.dataset.js = true;
let theme = 'light';
let themeColor = '#ffe5ef';
const userPrefersTheme = window.localStorage.getItem('theme') || null; const userPrefersTheme = window.localStorage.getItem('theme') || null;
const browserPrefersDarkTheme = window.matchMedia( const browserPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
'(prefers-color-scheme: dark)' if (userPrefersTheme) theme = userPrefersTheme;
).matches; else if (browserPrefersDarkTheme) theme = 'dark';
if (userPrefersTheme) return userPrefersTheme; if(theme === 'dark') themeColor = '#141c2e';
else if (browserPrefersDarkTheme) return 'dark'; document.documentElement.dataset.theme = theme;
else return 'light'; document.querySelector('meta[name="theme-color"]').setAttribute('content', themeColor);
})(); })();
`; `;

92
src/pages/about/index.tsx
View File

@ -1,19 +1,19 @@
/* eslint-disable react/no-unescaped-entities */ /* eslint-disable react/no-unescaped-entities */
import Link from 'next/link' import Link from 'next/link';
import Meta from '../../components/Meta/Meta' import Meta from '../../components/meta/Meta';
import Layout from '../../layouts/Layout' import Layout from '../../layouts/Layout';
import styles from '../../styles/modules/pages/about/about.module.scss' import styles from '../../styles/modules/pages/about/about.module.scss';
const About = () => { const About = () => {
return ( return (
<> <>
<Meta <Meta
title="About" title='About'
description="libremdb is a free & open source IMDb front-end. It allows you to see information about movies, tv shows, video games without any ads or tracking." description='libremdb is a free & open source IMDb front-end. It allows you to see information about movies, tv shows, video games without any ads or tracking.'
/> />
<Layout full className={styles.about}> <Layout full className={styles.about}>
<section id="features" className={styles.features}> <section id='features' className={styles.features}>
<h2 <h2
className={`heading heading__secondary ${styles.features__heading}`} className={`heading heading__secondary ${styles.features__heading}`}
> >
@ -22,12 +22,12 @@ const About = () => {
<ul className={styles.features__list}> <ul className={styles.features__list}>
<li className={styles.feature}> <li className={styles.feature}>
<svg <svg
aria-hidden="true" aria-hidden='true'
focusable="false" focusable='false'
role="img" role='img'
className={styles.feature__icon} className={styles.feature__icon}
> >
<use href="/svg/sprite.svg#icon-eye-slash"></use> <use href='/svg/sprite.svg#icon-eye-slash'></use>
</svg> </svg>
<h3 <h3
className={`heading heading__tertiary ${styles.feature__heading}`} className={`heading heading__tertiary ${styles.feature__heading}`}
@ -41,12 +41,12 @@ const About = () => {
</li> </li>
<li className={styles.feature}> <li className={styles.feature}>
<svg <svg
aria-hidden="true" aria-hidden='true'
focusable="false" focusable='false'
role="img" role='img'
className={styles.feature__icon} className={styles.feature__icon}
> >
<use href="/svg/sprite.svg#icon-palette"></use> <use href='/svg/sprite.svg#icon-palette'></use>
</svg> </svg>
<h3 <h3
className={`heading heading__tertiary ${styles.feature__heading}`} className={`heading heading__tertiary ${styles.feature__heading}`}
@ -60,12 +60,12 @@ const About = () => {
</li> </li>
<li className={styles.feature}> <li className={styles.feature}>
<svg <svg
aria-hidden="true" aria-hidden='true'
focusable="false" focusable='false'
role="img" role='img'
className={styles.feature__icon} className={styles.feature__icon}
> >
<use href="/svg/sprite.svg#icon-responsive"></use> <use href='/svg/sprite.svg#icon-responsive'></use>
</svg> </svg>
<h3 <h3
className={`heading heading__tertiary ${styles.feature__heading}`} className={`heading heading__tertiary ${styles.feature__heading}`}
@ -79,7 +79,7 @@ const About = () => {
</li> </li>
</ul> </ul>
</section> </section>
<section id="faq" className={styles.faqs}> <section id='faq' className={styles.faqs}>
<h2 className={`heading heading__secondary ${styles.faqs__heading}`}> <h2 className={`heading heading__secondary ${styles.faqs__heading}`}>
Questions you may have Questions you may have
</h2> </h2>
@ -91,21 +91,25 @@ const About = () => {
<p className={styles.faq__description}> <p className={styles.faq__description}>
Replace `imdb.com` in any IMDb URL with any of the instances. Replace `imdb.com` in any IMDb URL with any of the instances.
For example: ` For example: `
<a href="https://imdb.com/title/tt1049413" className="link"> <a
href='https://imdb.com/title/tt1049413'
className='link'
target='_blank'
rel='noreferrer'
>
imdb.com/title/tt1049413 imdb.com/title/tt1049413
</a> </a>
` to ` ` to `
<a <Link href='/title/tt1049413'>
href="https://libremdb.iket.me/title/tt1049413" <a className='link'>
className="link" {process.env.NEXT_PUBLIC_URL || ''}/title/tt1049413
> </a>
libremdb.iket.me/title/tt1049413 </Link>
</a>
` . To avoid changing the URLs manually, you can use extensions ` . To avoid changing the URLs manually, you can use extensions
like{' '} like{' '}
<a <a
href="https://github.com/libredirect/libredirect/" href='https://github.com/libredirect/libredirect/'
className="link" className='link'
> >
LibRedirect LibRedirect
</a> </a>
@ -140,33 +144,23 @@ const About = () => {
instance to avoid exposing your IP address, browser information instance to avoid exposing your IP address, browser information
and other personally identifiable metadata ( and other personally identifiable metadata (
<a <a
href="https://github.com/httpjamesm" href='https://github.com/httpjamesm'
target="_blank" target='_blank'
rel="noopener noreferrer" rel='noopener noreferrer'
className="link" className='link'
> >
Contributor Contributor
</a> </a>
). ).
</p> </p>
</details> </details>
<details className={styles.faq}>
<summary className={styles.faq__summary}>
Will Amazon track me then?
</summary>
<p className={styles.faq__description}>
Also nope. All Amazon will see is the libremdb instance making
the request, not you. IP address, browser information and other
personally identifiable metadata is hidden from Amazon.
</p>
</details>
<details className={styles.faq}> <details className={styles.faq}>
<summary className={styles.faq__summary}> <summary className={styles.faq__summary}>
Why not just use IMDb? Why not just use IMDb?
</summary> </summary>
<p className={styles.faq__description}> <p className={styles.faq__description}>
Refer to the{' '} Refer to the{' '}
<a className="link" href="#features"> <a className='link' href='#features'>
features section features section
</a>{' '} </a>{' '}
above. above.
@ -196,8 +190,8 @@ const About = () => {
</summary> </summary>
<p className={styles.faq__description}> <p className={styles.faq__description}>
That's great! I've a couple of{' '} That's great! I've a couple of{' '}
<Link href="/contact"> <Link href='/contact'>
<a className="link">contact methods</a> <a className='link'>contact methods</a>
</Link> </Link>
. Send your beautiful suggestions(or complaints), or just drop a . Send your beautiful suggestions(or complaints), or just drop a
hi. hi.
@ -207,7 +201,7 @@ const About = () => {
</section> </section>
</Layout> </Layout>
</> </>
) );
} };
export default About export default About;

16
src/pages/contact/index.tsx
View File

@ -1,4 +1,4 @@
import Meta from '../../components/Meta/Meta'; import Meta from '../../components/meta/Meta';
import Layout from '../../layouts/Layout'; import Layout from '../../layouts/Layout';
import styles from '../../styles/modules/pages/contact/contact.module.scss'; import styles from '../../styles/modules/pages/contact/contact.module.scss';
@ -7,10 +7,10 @@ const Contact = () => {
return ( return (
<> <>
<Meta <Meta
title='Contact' title="Contact"
description='Contact page of libremdb, a free & open source IMDb front-end.' description="Contact page of libremdb, a free & open source IMDb front-end."
/> />
<Layout className=''> <Layout className="">
<section className={styles.contact}> <section className={styles.contact}>
<h1 className={`heading heading__primary ${styles.contact__heading}`}> <h1 className={`heading heading__primary ${styles.contact__heading}`}>
Contact Contact
@ -19,22 +19,22 @@ const Contact = () => {
<div className={styles.list}> <div className={styles.list}>
<p className={styles.item}> <p className={styles.item}>
You can use{' '} You can use{' '}
<a href='https://github.com/zyachel/libremdb' className='link'> <a href="https://github.com/zyachel/libremdb" className="link">
GitHub GitHub
</a>{' '} </a>{' '}
or{' '} or{' '}
<a href='https://codeberg.org/zyachel/libremdb' className='link'> <a href="https://codeberg.org/zyachel/libremdb" className="link">
Codeberg Codeberg
</a>{' '} </a>{' '}
for general issues, questions, or requests. for general issues, questions, or requests.
</p> </p>
<p className={styles.item}> <p className={styles.item}>
In case you wish to contact me personally, I'm reachable via{' '} In case you wish to contact me personally, I'm reachable via{' '}
<a className='link' href='https://matrix.to/#/@ninal:matrix.org'> <a className="link" href="https://matrix.to/#/@ninal:matrix.org">
[matrix] [matrix]
</a>{' '} </a>{' '}
and{' '} and{' '}
<a className='link' href='mailto:aricla@protonmail.com'> <a className="link" href="mailto:aricla@protonmail.com">
email email
</a> </a>
. .

12
src/pages/privacy/index.tsx
View File

@ -1,7 +1,7 @@
import Meta from '../../components/Meta/Meta' import Meta from '../../components/meta/Meta';
import Layout from '../../layouts/Layout' import Layout from '../../layouts/Layout';
import styles from '../../styles/modules/pages/privacy/privacy.module.scss' import styles from '../../styles/modules/pages/privacy/privacy.module.scss';
const Privacy = () => { const Privacy = () => {
return ( return (
@ -55,7 +55,7 @@ const Privacy = () => {
</section> </section>
</Layout> </Layout>
</> </>
) );
} };
export default Privacy export default Privacy;

55
src/pages/title/[titleId]/index.tsx
View File

@ -1,35 +1,34 @@
// external // external
import { GetServerSideProps, GetStaticProps, GetStaticPaths } from 'next' import { GetServerSideProps, GetStaticProps, GetStaticPaths } from 'next'
import { useRouter } from 'next/router' import Head from 'next/head';
import { useRouter } from 'next/router';
// local // local
import Meta from '../../../components/Meta/Meta' import Meta from '../../../components/meta/Meta';
import Layout from '../../../layouts/Layout' import Layout from '../../../layouts/Layout';
import title from '../../../utils/fetchers/title' import ErrorInfo from '../../../components/error/ErrorInfo';
// components import {
import ErrorInfo from '../../../components/Error/ErrorInfo' Basic,
import Basic from '../../../components/title/Basic' Cast,
import Media from '../../../components/title/Media' DidYouKnow,
import Cast from '../../../components/title/Cast' Info,
import DidYouKnow from '../../../components/title/DidYouKnow' Media,
import Info from '../../../components/title/Info' MoreLikeThis,
import Reviews from '../../../components/title/Reviews' Reviews,
import MoreLikeThis from '../../../components/title/MoreLikeThis' } from '../../../components/title';
// misc // misc
import Title from '../../../interfaces/shared/title' import Title from '../../../interfaces/shared/title';
import { AppError } from '../../../interfaces/shared/error' import { AppError } from '../../../interfaces/shared/error';
import title from '../../../utils/fetchers/title';
import { getProxiedIMDbImgUrl } from '../../../utils/helpers';
// styles // styles
import styles from '../../../styles/modules/pages/title/title.module.scss' import styles from '../../../styles/modules/pages/title/title.module.scss';
import Head from 'next/head'
import { getProxiedIMDbImgUrl } from '../../../utils/helpers'
type Props = { data: Title; error: null } | { error: AppError; data: null } type Props = { data: Title; error: null } | { error: AppError; data: null };
// TO-DO: make a wrapper page component to display errors, if present in props // TO-DO: make a wrapper page component to display errors, if present in props
const TitleInfo = ({ data, error }: Props) => { const TitleInfo = ({ data, error }: Props) => {
const router = useRouter()
if (error) if (error)
return <ErrorInfo message={error.message} statusCode={error.statusCode} /> return <ErrorInfo message={error.message} statusCode={error.statusCode} />;
const info = { const info = {
meta: data.meta, meta: data.meta,
@ -38,7 +37,7 @@ const TitleInfo = ({ data, error }: Props) => {
boxOffice: data.boxOffice, boxOffice: data.boxOffice,
technicalSpecs: data.technicalSpecs, technicalSpecs: data.technicalSpecs,
accolades: data.accolades, accolades: data.accolades,
} };
return ( return (
<> <>
@ -60,18 +59,18 @@ const TitleInfo = ({ data, error }: Props) => {
</Head> </Head>
<Layout className={styles.title}> <Layout className={styles.title}>
<Basic data={data.basic} className={styles.basic} /> <Basic data={data.basic} className={styles.basic} />
<Media className={styles.media} media={data.media} router={router} /> <Media className={styles.media} media={data.media} />
<Cast className={styles.cast} cast={data.cast} /> <Cast className={styles.cast} cast={data.cast} />
<div className={styles.textarea}> <div className={styles.textarea}>
<DidYouKnow data={data.didYouKnow} /> <DidYouKnow data={data.didYouKnow} />
<Reviews reviews={data.reviews} router={router} /> <Reviews reviews={data.reviews} />
</div> </div>
<Info className={styles.infoarea} info={info} router={router} /> <Info className={styles.infoarea} info={info} />
<MoreLikeThis className={styles.related} data={data.moreLikeThis} /> <MoreLikeThis className={styles.related} data={data.moreLikeThis} />
</Layout> </Layout>
</> </>
) );
} };
// TO-DO: make a getServerSideProps wrapper for handling errors // TO-DO: make a getServerSideProps wrapper for handling errors
export const getServerSideProps: GetServerSideProps = async (ctx) => { export const getServerSideProps: GetServerSideProps = async (ctx) => {