ngn/libremdb
1
0
Fork 0
Code Issues 1 Pull Requests 9 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
Download Patch File Download Diff File Expand all files Collapse all files

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 = () => {
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 = () => {
return <ErrorInfo message='server messed up, sorry.' statusCode={500} />;
return <ErrorInfo message="server messed up, sorry." statusCode={500} />;
};
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 { useRouter } from 'next/router';
import usePageLoading from '../hooks/usePageLoading';
import ProgressBar from '../components/loaders/ProgressBar';
import ThemeProvider from '../context/theme-context';
import '../styles/main.scss';
import { useRouter } from 'next/router';
const ModifiedApp = ({ Component, pageProps }: AppProps) => {
// for showing progress bar
// 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]);
//
const { isPageLoading, key } = usePageLoading();
return (
<ThemeProvider>
{isLoading && <ProgressBar />}
<Component {...pageProps} />
{isPageLoading && <ProgressBar />}
<Component
{...pageProps}
key={key} /* passing key to force react to remound components */
/>
</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)
// chris coyier came up with that acronym(https://css-tricks.com/flash-of-inaccurate-color-theme-fart/)
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 browserPrefersDarkTheme = window.matchMedia(
'(prefers-color-scheme: dark)'
).matches;
if (userPrefersTheme) return userPrefersTheme;
else if (browserPrefersDarkTheme) return 'dark';
else return 'light';
const browserPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userPrefersTheme) theme = userPrefersTheme;
else if (browserPrefersDarkTheme) theme = 'dark';
if(theme === 'dark') themeColor = '#141c2e';
document.documentElement.dataset.theme = theme;
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 */
import Link from 'next/link'
import Meta from '../../components/Meta/Meta'
import Layout from '../../layouts/Layout'
import Link from 'next/link';
import Meta from '../../components/meta/Meta';
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 = () => {
return (
<>
<Meta
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."
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.'
/>
<Layout full className={styles.about}>
<section id="features" className={styles.features}>
<section id='features' className={styles.features}>
<h2
className={`heading heading__secondary ${styles.features__heading}`}
>
@ -22,12 +22,12 @@ const About = () => {
<ul className={styles.features__list}>
<li className={styles.feature}>
<svg
aria-hidden="true"
focusable="false"
role="img"
aria-hidden='true'
focusable='false'
role='img'
className={styles.feature__icon}
>
<use href="/svg/sprite.svg#icon-eye-slash"></use>
<use href='/svg/sprite.svg#icon-eye-slash'></use>
</svg>
<h3
className={`heading heading__tertiary ${styles.feature__heading}`}
@ -41,12 +41,12 @@ const About = () => {
</li>
<li className={styles.feature}>
<svg
aria-hidden="true"
focusable="false"
role="img"
aria-hidden='true'
focusable='false'
role='img'
className={styles.feature__icon}
>
<use href="/svg/sprite.svg#icon-palette"></use>
<use href='/svg/sprite.svg#icon-palette'></use>
</svg>
<h3
className={`heading heading__tertiary ${styles.feature__heading}`}
@ -60,12 +60,12 @@ const About = () => {
</li>
<li className={styles.feature}>
<svg
aria-hidden="true"
focusable="false"
role="img"
aria-hidden='true'
focusable='false'
role='img'
className={styles.feature__icon}
>
<use href="/svg/sprite.svg#icon-responsive"></use>
<use href='/svg/sprite.svg#icon-responsive'></use>
</svg>
<h3
className={`heading heading__tertiary ${styles.feature__heading}`}
@ -79,7 +79,7 @@ const About = () => {
</li>
</ul>
</section>
<section id="faq" className={styles.faqs}>
<section id='faq' className={styles.faqs}>
<h2 className={`heading heading__secondary ${styles.faqs__heading}`}>
Questions you may have
</h2>
@ -91,21 +91,25 @@ const About = () => {
<p className={styles.faq__description}>
Replace `imdb.com` in any IMDb URL with any of the instances.
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
</a>
` to `
<a
href="https://libremdb.iket.me/title/tt1049413"
className="link"
>
libremdb.iket.me/title/tt1049413
</a>
<Link href='/title/tt1049413'>
<a className='link'>
{process.env.NEXT_PUBLIC_URL || ''}/title/tt1049413
</a>
</Link>
` . To avoid changing the URLs manually, you can use extensions
like{' '}
<a
href="https://github.com/libredirect/libredirect/"
className="link"
href='https://github.com/libredirect/libredirect/'
className='link'
>
LibRedirect
</a>
@ -140,33 +144,23 @@ const About = () => {
instance to avoid exposing your IP address, browser information
and other personally identifiable metadata (
<a
href="https://github.com/httpjamesm"
target="_blank"
rel="noopener noreferrer"
className="link"
href='https://github.com/httpjamesm'
target='_blank'
rel='noopener noreferrer'
className='link'
>
Contributor
</a>
).
</p>
</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}>
<summary className={styles.faq__summary}>
Why not just use IMDb?
</summary>
<p className={styles.faq__description}>
Refer to the{' '}
<a className="link" href="#features">
<a className='link' href='#features'>
features section
</a>{' '}
above.
@ -196,8 +190,8 @@ const About = () => {
</summary>
<p className={styles.faq__description}>
That's great! I've a couple of{' '}
<Link href="/contact">
<a className="link">contact methods</a>
<Link href='/contact'>
<a className='link'>contact methods</a>
</Link>
. Send your beautiful suggestions(or complaints), or just drop a
hi.
@ -207,7 +201,7 @@ const About = () => {
</section>
</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 styles from '../../styles/modules/pages/contact/contact.module.scss';
@ -7,10 +7,10 @@ const Contact = () => {
return (
<>
<Meta
title='Contact'
description='Contact page of libremdb, a free & open source IMDb front-end.'
title="Contact"
description="Contact page of libremdb, a free & open source IMDb front-end."
/>
<Layout className=''>
<Layout className="">
<section className={styles.contact}>
<h1 className={`heading heading__primary ${styles.contact__heading}`}>
Contact
@ -19,22 +19,22 @@ const Contact = () => {
<div className={styles.list}>
<p className={styles.item}>
You can use{' '}
<a href='https://github.com/zyachel/libremdb' className='link'>
<a href="https://github.com/zyachel/libremdb" className="link">
GitHub
</a>{' '}
or{' '}
<a href='https://codeberg.org/zyachel/libremdb' className='link'>
<a href="https://codeberg.org/zyachel/libremdb" className="link">
Codeberg
</a>{' '}
for general issues, questions, or requests.
</p>
<p className={styles.item}>
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]
</a>{' '}
and{' '}
<a className='link' href='mailto:aricla@protonmail.com'>
<a className="link" href="mailto:aricla@protonmail.com">
email
</a>
.

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

@ -1,7 +1,7 @@
import Meta from '../../components/Meta/Meta'
import Layout from '../../layouts/Layout'
import Meta from '../../components/meta/Meta';
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 = () => {
return (
@ -55,7 +55,7 @@ const Privacy = () => {
</section>
</Layout>
</>
)
}
);
};
export default Privacy
export default Privacy;

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

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