refactor: refactor code a bit

make a hook to abstarct logic from page changes to .prettierrc changes to a couple of imports/exports bunch of screen reader tweaks
2022-12-31 22:02:24 +05:30
parent 64f3896258
commit 57b050f196
18 changed files with 226 additions and 208 deletions
--- a/src/components/buttons/ThemeToggler.tsx
+++ b/src/components/buttons/ThemeToggler.tsx
@ -17,9 +17,9 @@ const ThemeToggler = (props: Props) => {
  return (
    <button
      className={`${styles.button}  ${props.className}`}
-      aria-label='Change theme'
      onClick={clickHandler}
    >
+      <span className='visually-hidden'>Change theme</span>
      <svg
        className={`icon ${styles.icon}`}
        focusable='false'
--- a/src/components/error/ErrorInfo.tsx
+++ b/src/components/error/ErrorInfo.tsx
@ -1,6 +1,6 @@
 import Link from 'next/link';
 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';

@ -13,22 +13,22 @@ const ErrorInfo = ({ message = 'Not found, sorry.', statusCode = 404 }) => {
    <>
      <Meta
        title={`${message} (${statusCode})`}
-        description='you encountered an error page!'
+        description="you encountered an error page!"
      />
      <Layout className={styles.error}>
        <svg
          className={styles.gnu}
-          focusable='false'
-          role='img'
-          aria-labelledby='gnu-title gnu-desc'
+          focusable="false"
+          role="img"
+          aria-labelledby="gnu-title gnu-desc"
        >
-          <title id='gnu-title'>GNU and Tux</title>
-          <desc id='gnu-desc'>
+          <title id="gnu-title">GNU and Tux</title>
+          <desc id="gnu-desc">
            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,
            looking down and patting him on the back.
          </desc>
-          <use href='/svg/sadgnu.svg#sad-gnu'></use>
+          <use href="/svg/sadgnu.svg#sad-gnu"></use>
        </svg>
        <h1 className={`heading heading__primary ${styles.heading}`}>
          <span>{message}</span>
@ -36,8 +36,8 @@ const ErrorInfo = ({ message = 'Not found, sorry.', statusCode = 404 }) => {
        </h1>
        <p className={styles.back}>
          Go back to{' '}
-          <Link href='/about'>
-            <a className='link'>the homepage</a>
+          <Link href="/about">
+            <a className="link">the homepage</a>
          </Link>
          .
        </p>
--- a/src/components/meta/Meta.tsx
+++ b/src/components/meta/Meta.tsx
--- a/src/components/title/Basic.tsx
+++ b/src/components/title/Basic.tsx
@ -1,27 +1,27 @@
-import { Fragment } from 'react'
-import Image from 'next/future/image'
-import Link from 'next/link'
+import { Fragment } from 'react';
+import Image from 'next/future/image';
+import Link from 'next/link';

 import {
  formatNumber,
  formatTime,
  getProxiedIMDbImgUrl,
  modifyIMDbImg,
-} from '../../utils/helpers'
-import { Basic } from '../../interfaces/shared/title'
-import styles from '../../styles/modules/components/title/basic.module.scss'
+} from '../../utils/helpers';
+import { Basic } from '../../interfaces/shared/title';
+import styles from '../../styles/modules/components/title/basic.module.scss';

 type Props = {
-  className: string
-  data: Basic
-}
+  className: string;
+  data: Basic;
+};

 const Basic = ({ data, className }: Props) => {
-  const titleType = data.type.id
+  const titleType = data.type.id;
  const releaseTime =
    titleType === 'tvSeries'
      ? `${data.releaseYear?.start}-${data.releaseYear?.end || 'present'}`
-      : data.releaseYear?.start
+      : data.releaseYear?.start;

  return (
    <section
@ -45,11 +45,11 @@ const Basic = ({ data, className }: Props) => {
            alt={data.poster.caption}
            priority
            fill
-            sizes="300px"
+            sizes='300px'
          />
        ) : (
          <svg className={styles.image__NA}>
-            <use href="/svg/sprite.svg#icon-image-slash" />
+            <use href='/svg/sprite.svg#icon-image-slash' />
          </svg>
        )}
      </div>
@ -57,7 +57,7 @@ const Basic = ({ data, className }: Props) => {
        <h1 className={`${styles.title} heading heading__primary`}>
          {data.title}
        </h1>
-        <ul className={styles.meta} aria-label="quick facts">
+        <ul className={styles.meta} aria-label='quick facts'>
          {data.status && data.status.id !== 'released' && (
            <li className={styles.meta__text}>{data.status.text}</li>
          )}
@ -78,7 +78,7 @@ const Basic = ({ data, className }: Props) => {
              <p className={styles.rating}>
                <span className={styles.rating__num}>{data.ratings.avg}</span>
                <svg className={styles.rating__icon}>
-                  <use href="/svg/sprite.svg#icon-rating"></use>
+                  <use href='/svg/sprite.svg#icon-rating'></use>
                </svg>
                <span className={styles.rating__text}> Avg. rating</span>
              </p>
@ -87,7 +87,7 @@ const Basic = ({ data, className }: Props) => {
                  {formatNumber(data.ratings.numVotes)}
                </span>
                <svg className={styles.rating__icon}>
-                  <use href="/svg/sprite.svg#icon-like-dislike"></use>
+                  <use href='/svg/sprite.svg#icon-like-dislike'></use>
                </svg>
                <span className={styles.rating__text}> No. of votes</span>
              </p>
@ -99,7 +99,7 @@ const Basic = ({ data, className }: Props) => {
                {formatNumber(data.ranking.position)}
              </span>
              <svg className={styles.rating__icon}>
-                <use href="/svg/sprite.svg#icon-graph-rising"></use>
+                <use href='/svg/sprite.svg#icon-graph-rising'></use>
              </svg>
              <span className={styles.rating__text}>
                {' '}
@ -136,7 +136,7 @@ const Basic = ({ data, className }: Props) => {
            <span className={styles.overview__text}>{data.plot || '-'}</span>
          </p>
        }
-        {data.primaryCrew.map((crewType) => (
+        {data.primaryCrew.map(crewType => (
          <p className={styles.crewType} key={crewType.type.id}>
            <span className={styles.crewType__heading}>
              {`${crewType.type.category}: `}
@ -153,7 +153,7 @@ const Basic = ({ data, className }: Props) => {
        ))}
      </div>
    </section>
-  )
-}
+  );
+};

-export default Basic
+export default Basic;
--- a/src/components/title/Info.tsx
+++ b/src/components/title/Info.tsx
@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { NextRouter } from 'next/router';
+import { useRouter } from 'next/router';
 import { Info } from '../../interfaces/shared/title';
 import { formatMoney, formatTime } from '../../utils/helpers';

@ -8,10 +8,10 @@ import styles from '../../styles/modules/components/title/info.module.scss';
 type Props = {
  info: Info;
  className: string;
-  router: NextRouter;
 };

-const Info = ({ info, className, router }: Props) => {
+const Info = ({ info, className }: Props) => {
+  const router = useRouter();
  const { titleId } = router.query;
  const { boxOffice, details, meta, keywords, technicalSpecs, accolades } =
    info;
@ -20,7 +20,7 @@ const Info = ({ info, className, router }: Props) => {
    <div className={`${className} ${styles.info}`}>
      {meta.infoEpisode && (
        <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}>
            {meta.infoEpisode.numSeason && (
              <p className={styles.series}>
@ -50,14 +50,14 @@ const Info = ({ info, className, router }: Props) => {
            {meta.infoEpisode.prevId && (
              <p>
                <Link href={`/title/${meta.infoEpisode.prevId}`}>
-                  <a className='link'>Go to previous episode</a>
+                  <a className="link">Go to previous episode</a>
                </Link>
              </p>
            )}
            {meta.infoEpisode.nextId && (
              <p>
                <Link href={`/title/${meta.infoEpisode.nextId}`}>
-                  <a className='link'>Go to next episode</a>
+                  <a className="link">Go to next episode</a>
                </Link>
              </p>
            )}
@ -66,7 +66,7 @@ const Info = ({ info, className, router }: Props) => {
      )}
      {meta.infoSeries && (
        <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}>
            <p>
              <span>Total Seasons: </span>
@ -82,19 +82,19 @@ const Info = ({ info, className, router }: Props) => {
            </p>
            <p>
              <Link href={`/title/${titleId}/episodes`}>
-                <a className='link'>See all Episodes</a>
+                <a className="link">See all Episodes</a>
              </Link>
            </p>
          </div>
        </section>
      )}
      <section className={styles.accolades}>
-        <h2 className='heading heading__secondary'>Accolades</h2>
+        <h2 className="heading heading__secondary">Accolades</h2>
        <div className={styles.accolades__container}>
          {accolades.topRating && (
            <p>
              <Link href={`/chart/top`}>
-                <a className='link'>Top rated (#{accolades.topRating})</a>
+                <a className="link">Top rated (#{accolades.topRating})</a>
              </Link>
            </p>
          )}
@ -112,21 +112,21 @@ const Info = ({ info, className, router }: Props) => {
          </p>
          <p>
            <Link href={`/title/${titleId}/awards`}>
-              <a className='link'>View all awards</a>
+              <a className="link">View all awards</a>
            </Link>
          </p>
        </div>
      </section>
      {!!keywords.total && (
        <section className={styles.keywords}>
-          <h2 className='heading heading__secondary'>Keywords</h2>
+          <h2 className="heading heading__secondary">Keywords</h2>
          <ul className={styles.keywords__container}>
            {keywords.list.map(word => (
              <li className={styles.keywords__item} key={word}>
                <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>
              </li>
            ))}
@ -135,7 +135,7 @@ const Info = ({ info, className, router }: Props) => {
      )}
      {!!Object.keys(details).length && (
        <section className={styles.details}>
-          <h2 className='heading heading__secondary'>Details</h2>
+          <h2 className="heading heading__secondary">Details</h2>
          <div className={styles.details__container}>
            {details.releaseDate && (
              <p>
@ -156,7 +156,7 @@ const Info = ({ info, className, router }: Props) => {
                    <Link
                      href={`/search/title/?country_of_origin=${country.id}`}
                    >
-                      <a className='link'>{country.text}</a>
+                      <a className="link">{country.text}</a>
                    </Link>
                  </span>
                ))}
@ -168,7 +168,7 @@ const Info = ({ info, className, router }: Props) => {
                {details.officialSites.sites.map((site, i) => (
                  <span key={site.url}>
                    {!!i && ', '}
-                    <a href={site.url} className='link'>
+                    <a href={site.url} className="link">
                      {site.name}
                    </a>
                  </span>
@ -182,7 +182,7 @@ const Info = ({ info, className, router }: Props) => {
                  <span key={lang.id}>
                    {!!i && ', '}
                    <Link href={`/search/title/?primary_language=${lang.id}`}>
-                      <a className='link'>{lang.text}</a>
+                      <a className="link">{lang.text}</a>
                    </Link>
                  </span>
                ))}
@ -201,7 +201,7 @@ const Info = ({ info, className, router }: Props) => {
                  <span key={loc}>
                    {!!i && ', '}
                    <Link href={`/search/title/?locations=${loc}`}>
-                      <a className='link'>{loc}</a>
+                      <a className="link">{loc}</a>
                    </Link>
                  </span>
                ))}
@ -214,7 +214,7 @@ const Info = ({ info, className, router }: Props) => {
                  <span key={co.id}>
                    {!!i && ', '}
                    <Link href={`/company/${co.id}`}>
-                      <a className='link'>{co.name}</a>
+                      <a className="link">{co.name}</a>
                    </Link>
                  </span>
                ))}
@ -225,7 +225,7 @@ const Info = ({ info, className, router }: Props) => {
      )}
      {!!Object.keys(boxOffice).length && (
        <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}>
            {boxOffice.budget && (
              <p>
@ -277,7 +277,7 @@ const Info = ({ info, className, router }: Props) => {
      )}
      {!!Object.keys(technicalSpecs).length && (
        <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}>
            {technicalSpecs.runtime && (
              <p>
@ -293,7 +293,7 @@ const Info = ({ info, className, router }: Props) => {
                    <span key={color.id}>
                      {!!i && ', '}
                      <Link href={`/search/title/?colors=${color.id}`}>
-                        <a className='link'>{color.name}</a>
+                        <a className="link">{color.name}</a>
                      </Link>
                    </span>
                  ))}
@ -308,7 +308,7 @@ const Info = ({ info, className, router }: Props) => {
                    <span key={sound.id}>
                      {!!i && ', '}
                      <Link href={`/search/title/?sound_mixes=${sound.id}`}>
-                        <a className='link'>{sound.name}</a>
+                        <a className="link">{sound.name}</a>
                      </Link>
                    </span>
                  ))}
--- a/src/components/title/Media.tsx
+++ b/src/components/title/Media.tsx
@ -1,6 +1,5 @@
 import Image from 'next/future/image';
 import Link from 'next/link';
-import { NextRouter } from 'next/router';
 import { Media } from '../../interfaces/shared/title';
 import { getProxiedIMDbImgUrl, modifyIMDbImg } from '../../utils/helpers';

@ -9,21 +8,20 @@ import styles from '../../styles/modules/components/title/media.module.scss';
 type Props = {
  className: string;
  media: Media;
-  router: NextRouter;
 };

-const Media = ({ className, media, router }: Props) => {
+const Media = ({ className, media }: Props) => {
  return (
    <div className={`${className} ${styles.media}`}>
      {(media.trailer || !!media.videos.total) && (
        <section className={styles.videos}>
-          <h2 className="heading heading__secondary">Videos</h2>
+          <h2 className='heading heading__secondary'>Videos</h2>

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

 type Props = {
  reviews: Reviews;
-  router: NextRouter;
 };

-const Reviews = ({ reviews, router }: Props) => {
+const Reviews = ({ reviews }: Props) => {
+  const router = useRouter();
  const { titleId } = router.query;

  return (
    <section className={styles.reviews}>
-      <h2 className='heading heading__secondary'>Reviews</h2>
+      <h2 className="heading heading__secondary">Reviews</h2>

      {reviews.featuredReview && (
        <article className={styles.reviews__reviewContainer}>
@ -38,7 +38,7 @@ const Reviews = ({ reviews, router }: Props) => {
                {' '}
                by{' '}
                <Link href={`/user/${reviews.featuredReview.reviewer.id}`}>
-                  <a className='link'>{reviews.featuredReview.reviewer.name}</a>
+                  <a className="link">{reviews.featuredReview.reviewer.name}</a>
                </Link>
              </span>
              <span> on {reviews.featuredReview.date}.</span>
@ -58,21 +58,21 @@ const Reviews = ({ reviews, router }: Props) => {
      <div className={styles.reviews__stats}>
        <p>
          <Link href={`/title/${titleId}/reviews`}>
-            <a className='link'>
+            <a className="link">
              {formatNumber(reviews.numUserReviews)} User reviews
            </a>
          </Link>
        </p>
        <p>
          <Link href={`/title/${titleId}/externalreviews`}>
-            <a className='link'>
+            <a className="link">
              {formatNumber(reviews.numCriticReviews)} Critic reviews
            </a>
          </Link>
        </p>
        <p>
          <Link href={`/title/${titleId}/criticreviews`}>
-            <a className='link'> {reviews.metacriticScore} Metascore</a>
+            <a className="link"> {reviews.metacriticScore} Metascore</a>
          </Link>
        </p>
      </div>
--- a/src/components/title/index.tsx
+++ b/src/components/title/index.tsx
@ -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 };