Skip to content

Commit

Permalink
refactor: render React the right way and improve TypeScript (Hashnode#64
Browse files Browse the repository at this point in the history 
)

* style: format touched files

* refactor: render react the right way and improve TypeScript

Closes Hashnode#60
  • Loading branch information
@iamandrewluca
iamandrewluca authored Jan 11, 2024
1 parent 971027b commit ba8d32d
Show file tree
Hide file tree
Showing 8 changed files with 651 additions and 582 deletions.
125 changes: 51 additions & 74 deletions packages/blog-starter-kit/themes/enterprise/pages/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { getAutogeneratedPostOG } from '@starter-kit/utils/social/og';
import request from 'graphql-request';
import { GetStaticPaths, GetStaticProps } from 'next';
import dynamic from 'next/dynamic';
import ErrorPage from 'next/error';
import Head from 'next/head';
import Link from 'next/link';
import { Container } from '../components/container';
Expand All @@ -16,45 +15,41 @@ import { PostHeader } from '../components/post-header';
import { PostTOC } from '../components/post-toc';
import {
PageByPublicationDocument,
PageByPublicationQuery,
PageByPublicationQueryVariables,
PostFullFragment,
PublicationFragment,
SinglePostByPublicationDocument,
SinglePostByPublicationQuery,
SinglePostByPublicationQueryVariables,
SlugPostsByPublicationDocument,
SlugPostsByPublicationQuery,
SlugPostsByPublicationQueryVariables,
StaticPageFragment,
} from '../generated/graphql';
// @ts-ignore
import handleMathJax from '@starter-kit/utils/handle-math-jax';
import { useEffect, useState } from 'react';
import { useEmbeds } from '@starter-kit/utils/renderer/hooks/useEmbeds';
import { loadIframeResizer } from '@starter-kit/utils/renderer/services/embed';
import { useEffect, useState } from 'react';
// @ts-ignore
import { triggerCustomWidgetEmbed } from '@starter-kit/utils/trigger-custom-widget-embed';
import { useEmbeds } from '@starter-kit/utils/renderer/hooks/useEmbeds';

const AboutAuthor = dynamic(() => import('../components/about-author'), { ssr: false });
const Subscribe = dynamic(() => import('../components/subscribe').then((mod) => mod.Subscribe));
const PostComments = dynamic(() =>
import('../components/post-comments').then((mod) => mod.PostComments),
);

type Props =
| {
post: PostFullFragment;
page: null;
publication: PublicationFragment;
}
| {
post: null;
page: StaticPageFragment;
publication: PublicationFragment;
};
type PostProps = {
type: 'post';
post: PostFullFragment;
publication: PublicationFragment;
};

type PageProps = {
type: 'page';
page: StaticPageFragment;
publication: PublicationFragment;
};

const Post = (publication: PublicationFragment, post: PostFullFragment) => {
type Props = PostProps | PageProps;

const Post = ({ publication, post }: PostProps) => {
const highlightJsMonokaiTheme =
'.hljs{display:block;overflow-x:auto;padding:.5em;background:#23241f}.hljs,.hljs-subst,.hljs-tag{color:#f8f8f2}.hljs-emphasis,.hljs-strong{color:#a8a8a2}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#ae81ff}.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title{color:#a6e22e}.hljs-strong{font-weight:700}.hljs-emphasis{font-style:italic}.hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag{color:#f92672}.hljs-attribute,.hljs-symbol{color:#66d9ef}.hljs-class .hljs-title,.hljs-params{color:#f8f8f2}.hljs-addition,.hljs-built_in,.hljs-builtin-name,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable{color:#e6db74}.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}';

Expand All @@ -73,25 +68,25 @@ const Post = (publication: PublicationFragment, post: PostFullFragment) => {
useEmbeds({ enabled: canLoadEmbeds });
if (post.hasLatexInPost) {
setTimeout(() => {
handleMathJax(true);
handleMathJax(true);
}, 500);
}

useEffect(() => {
if (screen.width <= 425) {
setMobMount(true);
setMobMount(true);
}

if (!post) {
return;
return;
}

// TODO:
// More of an alert, did this below to wrap async funcs inside useEffect
(async () => {
await loadIframeResizer();
triggerCustomWidgetEmbed(post.publication?.id.toString());
setCanLoadEmbeds(true);
await loadIframeResizer();
triggerCustomWidgetEmbed(post.publication?.id.toString());
setCanLoadEmbeds(true);
})();
}, []);

Expand Down Expand Up @@ -152,7 +147,7 @@ const Post = (publication: PublicationFragment, post: PostFullFragment) => {
);
};

const Page = (page: StaticPageFragment) => {
const Page = ({ page }: PageProps) => {
const title = page.title;
return (
<>
Expand All @@ -164,18 +159,18 @@ const Page = (page: StaticPageFragment) => {
);
};

export default function PostOrPage({ publication, post, page }: Props) {
if (!post && !page) {
return <ErrorPage statusCode={404} />;
}
export default function PostOrPage(props: Props) {
const maybePost = props.type === 'post' ? props.post : null;
const publication = props.publication;

return (
<AppProvider publication={publication} post={post}>
<AppProvider publication={publication} post={maybePost}>
<Layout>
<Header />
<Container className="pt-10">
<article className="flex flex-col items-start gap-10 pb-10">
{post ? Post(publication, post) : Page(page)}
{props.type === 'post' && <Post {...props} />}
{props.type === 'page' && <Page {...props} />}
</article>
</Container>
<Footer />
Expand All @@ -192,63 +187,45 @@ export const getStaticProps: GetStaticProps<Props, Params> = async ({ params })
if (!params) {
throw new Error('No params');
}
const data = await request<SinglePostByPublicationQuery, SinglePostByPublicationQueryVariables>(
process.env.NEXT_PUBLIC_HASHNODE_GQL_ENDPOINT,
SinglePostByPublicationDocument,
{
host: process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST,
slug: params.slug,
},
);

// Extract the post data from the GraphQL response
const publication = data.publication;
if (!publication) {
const endpoint = process.env.NEXT_PUBLIC_HASHNODE_GQL_ENDPOINT;
const host = process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST;
const slug = params.slug;

const postData = await request(endpoint, SinglePostByPublicationDocument, { host, slug });

if (postData.publication?.post) {
return {
notFound: true,
props: {
type: 'post',
post: postData.publication.post,
publication: postData.publication,
},
revalidate: 1,
};
}
const post = publication.post;
if (!post) {
const staticPageData = await request<PageByPublicationQuery, PageByPublicationQueryVariables>(
process.env.NEXT_PUBLIC_HASHNODE_GQL_ENDPOINT,
PageByPublicationDocument,
{
host: process.env.NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST,
slug: params.slug,
},
);

const page = staticPageData.publication?.staticPage;
if (!page) {
return {
notFound: true,
revalidate: 1,
};
}
const pageData = await request(endpoint, PageByPublicationDocument, { host, slug });

if (pageData.publication?.staticPage) {
return {
props: {
post: null,
page,
publication,
type: 'page',
page: pageData.publication.staticPage,
publication: pageData.publication,
},
revalidate: 1,
};
}

return {
props: {
post,
page: null,
publication,
},
notFound: true,
revalidate: 1,
};
};

export const getStaticPaths: GetStaticPaths = async () => {
const data = await request<SlugPostsByPublicationQuery, SlugPostsByPublicationQueryVariables>(
const data = await request(
process.env.NEXT_PUBLIC_HASHNODE_GQL_ENDPOINT,
SlugPostsByPublicationDocument,
{
Expand Down
Loading

0 comments on commit ba8d32d

Please sign in to comment.