From d86e5ae002b78b1796f1452d4cc0ff61260ece59 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Wed, 15 Dec 2021 10:14:19 +0900
Subject: [PATCH] minimized use of null, made Page.tsx functional component,
 removed unused import from NotFound.tsx, and moved HelmetProvider to
 index.tsx

---
 source/src/App.tsx                |  84 +++---
 source/src/components/SubMenu.tsx |   2 +-
 source/src/index.tsx              |   5 +-
 source/src/pages/NotFound.tsx     |   1 -
 source/src/pages/Page.tsx         | 412 ++++++++++++++----------------
 source/src/pages/Search.tsx       |  31 ++-
 6 files changed, 251 insertions(+), 284 deletions(-)

diff --git a/source/src/App.tsx b/source/src/App.tsx
index 372fb0b..c499609 100644
--- a/source/src/App.tsx
+++ b/source/src/App.tsx
@@ -5,7 +5,7 @@ import styled, {
 	createGlobalStyle,
 	css,
 } from "styled-components"
-import { HelmetProvider, Helmet } from "react-helmet-async"
+import { Helmet } from "react-helmet-async"
 import storage from "local-storage-fallback"
 import { isIE } from "react-device-detect"
 
@@ -303,57 +303,47 @@ export default class App extends React.Component<AppProps, AppState> {
 			)
 
 		return (
-			<HelmetProvider>
-				<ThemeProvider
-					theme={{
-						currentTheme: this.state.currentTheme,
-						setTheme: (setThemeTo) =>
-							this.setState({ currentTheme: setThemeTo }), // make setTheme function available in other components
-					}}
-				>
-					<Helmet>
-						<meta property="og:site_name" content="developomp" />
+			<ThemeProvider
+				theme={{
+					currentTheme: this.state.currentTheme,
+					setTheme: (setThemeTo) =>
+						this.setState({ currentTheme: setThemeTo }), // make setTheme function available in other components
+				}}
+			>
+				<Helmet>
+					<meta property="og:site_name" content="developomp" />
 
-						<meta property="og:title" content="Home" />
+					<meta property="og:title" content="Home" />
 
-						<meta
-							property="og:description"
-							content="developomp's blog"
-						/>
+					<meta
+						property="og:description"
+						content="developomp's blog"
+					/>
 
-						<meta
-							property="og:url"
-							content={process.env.PUBLIC_URL}
-						/>
-					</Helmet>
+					<meta property="og:url" content={process.env.PUBLIC_URL} />
+				</Helmet>
 
-					<GlobalStyle />
-					<Navbar />
-					<StyledContentContainer>
-						{this.state.isLoading ? (
-							<Loading />
-						) : (
-							<Routes>
-								<Route
-									path="/"
-									element={
-										<PostList howMany={5} title="Home" />
-									}
-								/>
+				<GlobalStyle />
 
-								<Route path="/loading" element={<Loading />} />
-
-								<Route path="/search" element={<Search />} />
-
-								<Route path="/404" element={<NotFound />} />
-
-								<Route path="/:path*" element={<Page />} />
-							</Routes>
-						)}
-					</StyledContentContainer>
-					<Footer />
-				</ThemeProvider>
-			</HelmetProvider>
+				<Navbar />
+				<StyledContentContainer>
+					{this.state.isLoading ? (
+						<Loading />
+					) : (
+						<Routes>
+							<Route
+								path="/"
+								element={<PostList howMany={5} title="Home" />}
+							/>
+							<Route path="/loading" element={<Loading />} />
+							<Route path="/search" element={<Search />} />
+							<Route path="/404" element={<NotFound />} />
+							<Route path="/:path*" element={<Page />} />
+						</Routes>
+					)}
+				</StyledContentContainer>
+				<Footer />
+			</ThemeProvider>
 		)
 	}
 }
diff --git a/source/src/components/SubMenu.tsx b/source/src/components/SubMenu.tsx
index 4d83609..3abf8fb 100644
--- a/source/src/components/SubMenu.tsx
+++ b/source/src/components/SubMenu.tsx
@@ -65,7 +65,7 @@ const SubMenu = (props: Props) => {
 						? props.item.iconOpened
 						: props.item.subNav
 						? props.item.iconClosed
-						: null}
+						: undefined}
 				</div>
 			</SidebarLink>
 
diff --git a/source/src/index.tsx b/source/src/index.tsx
index 16c1265..220eabb 100644
--- a/source/src/index.tsx
+++ b/source/src/index.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom"
+import { HelmetProvider } from "react-helmet-async"
 import { BrowserRouter } from "react-router-dom"
 
 import App from "./App"
@@ -8,7 +9,9 @@ import reportWebVitals from "./reportWebVitals"
 ReactDOM.render(
 	<React.StrictMode>
 		<BrowserRouter>
-			<App />
+			<HelmetProvider>
+				<App />
+			</HelmetProvider>
 		</BrowserRouter>
 	</React.StrictMode>,
 	document.getElementById("root")
diff --git a/source/src/pages/NotFound.tsx b/source/src/pages/NotFound.tsx
index b56ff1e..3375c71 100644
--- a/source/src/pages/NotFound.tsx
+++ b/source/src/pages/NotFound.tsx
@@ -1,4 +1,3 @@
-import React from "react"
 import styled from "styled-components"
 import { Helmet } from "react-helmet-async"
 
diff --git a/source/src/pages/Page.tsx b/source/src/pages/Page.tsx
index ae0e929..66fb5ec 100644
--- a/source/src/pages/Page.tsx
+++ b/source/src/pages/Page.tsx
@@ -1,19 +1,13 @@
-import React from "react"
+import { useState } from "react"
 import { Helmet } from "react-helmet-async"
-import { Link } from "react-router-dom"
+import { Link, useLocation } from "react-router-dom"
 import styled from "styled-components"
 import { HashLink } from "react-router-hash-link"
 import { Collapse } from "react-collapse"
 import storage from "local-storage-fallback"
 
-import theming from "../theming"
+import { TocElement, FetchedPage, Map } from "../types/typings"
 
-import Tag from "../components/Tag"
-import TagList from "../components/TagList"
-import NotFound from "./NotFound"
-import Loading from "../components/Loading"
-
-import _map from "../data/map.json"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
 	faBook,
@@ -23,7 +17,15 @@ import {
 	faHourglass,
 } from "@fortawesome/free-solid-svg-icons"
 
-import { TocElement, FetchedPage, Map } from "../types/typings"
+import Tag from "../components/Tag"
+import TagList from "../components/TagList"
+import NotFound from "./NotFound"
+import Loading from "../components/Loading"
+
+import theming from "../theming"
+
+import _map from "../data/map.json"
+import { useEffect } from "react"
 
 const map: Map = _map
 
@@ -119,95 +121,127 @@ function parseToc(tocData: TocElement[]) {
 	)
 }
 
-interface PageProps {}
-
-interface PageState {
-	fetchedPage?: FetchedPage
-	isUnsearchable: boolean
-	isSeries: boolean
-	seriesData: {
-		seriesHome: string
-		prev: string | null
-		next: string | null
-	} | null
-	isTocOpened: boolean
-	loading: boolean
+const NextPrevButton = (props: { prevURL?: string; nextURL?: string }) => {
+	return (
+		<StyledNextPrevContainer>
+			{props.prevURL ? (
+				<StyledLink to={props.prevURL}>prev</StyledLink>
+			) : (
+				<StyledDisabledLink>prev</StyledDisabledLink>
+			)}
+			{props.nextURL ? (
+				<StyledLink to={props.nextURL}>next</StyledLink>
+			) : (
+				<StyledDisabledLink>next</StyledDisabledLink>
+			)}
+		</StyledNextPrevContainer>
+	)
 }
 
-interface NextPrevProps {
-	prevURL: string | null
-	nextURL: string | null
+const PostMeta = (props: { fetchedPage: FetchedPage }) => {
+	return (
+		<StyledMetaContainer>
+			<FontAwesomeIcon icon={faCalendar} />
+			&nbsp;&nbsp;&nbsp;
+			{props.fetchedPage.date || "Unknown date"}
+			&nbsp;&nbsp;&nbsp;&nbsp;
+			<FontAwesomeIcon icon={faHourglass} />
+			&nbsp;&nbsp;&nbsp;
+			{props.fetchedPage.readTime
+				? props.fetchedPage.readTime + " read"
+				: "unknown length"}
+			&nbsp;&nbsp;&nbsp;&nbsp;
+			<FontAwesomeIcon icon={faBook} />
+			&nbsp;&nbsp;&nbsp;
+			{props.fetchedPage.wordCount
+				? props.fetchedPage.wordCount + " words"
+				: "unknown words"}
+		</StyledMetaContainer>
+	)
 }
 
-class NextPrev extends React.Component<NextPrevProps> {
-	render() {
-		return (
-			<StyledNextPrevContainer>
-				{this.props.prevURL ? (
-					<StyledLink to={this.props.prevURL}>prev</StyledLink>
+const PageTOC = (props: { fetchedPage: FetchedPage }) => {
+	const [isTocOpened, setIsTocOpened] = useState(
+		storage.getItem("isTocOpened") == "true"
+	)
+
+	useEffect(() => {
+		storage.setItem("isTocOpened", isTocOpened.toString())
+	}, [isTocOpened])
+
+	return (
+		<>
+			<StyledTocToggleButton
+				onClick={() => {
+					setIsTocOpened((prev) => !prev)
+				}}
+			>
+				<strong>Table of Content </strong>
+				{isTocOpened ? (
+					<FontAwesomeIcon icon={faCaretUp} />
 				) : (
-					<StyledDisabledLink>prev</StyledDisabledLink>
+					<FontAwesomeIcon icon={faCaretDown} />
 				)}
-				{this.props.nextURL ? (
-					<StyledLink to={this.props.nextURL}>next</StyledLink>
-				) : (
-					<StyledDisabledLink>next</StyledDisabledLink>
-				)}
-			</StyledNextPrevContainer>
-		)
-	}
+			</StyledTocToggleButton>
+			<StyledCollapseContainer>
+				<Collapse isOpened={isTocOpened}>
+					<div className="white-link">{props.fetchedPage.toc}</div>
+				</Collapse>
+			</StyledCollapseContainer>
+			<hr />
+		</>
+	)
 }
 
-export default class Page extends React.Component<PageProps, PageState> {
-	constructor(props: PageProps) {
-		super(props)
+interface SeriesData {
+	seriesHome: string
+	prev?: string
+	next?: string
+}
 
-		this.state = {
-			fetchedPage: undefined,
-			isUnsearchable: false,
-			isSeries: false,
-			seriesData: null,
-			isTocOpened: storage.getItem("isTocOpened") == "true",
-			loading: true,
-		}
+const Page = () => {
+	const [fetchedPage, setFetchPage] = useState<FetchedPage | undefined>(
+		undefined
+	)
+	const [isPageUnsearchable, setIsPageUnsearchable] = useState(false)
+	const [isSeries, setIsSeries] = useState(false)
+	const [seriesData, setSeriesData] = useState<SeriesData | undefined>(
+		undefined
+	)
+	const [isLoading, setIsLoading] = useState(true)
+	const location = useLocation()
+
+	const fetchContent = async (
+		isContentUnsearchable: boolean,
+		url: string
+	) => {
+		return isContentUnsearchable
+			? await import(`../data/content/unsearchable${url}.json`)
+			: await import(`../data/content${url}.json`)
 	}
 
-	componentDidUpdate(_: PageProps, prevState: PageState) {
-		if (this.state.isTocOpened !== prevState.isTocOpened) {
-			storage.setItem("isTocOpened", this.state.isTocOpened.toString())
-		}
-	}
-
-	async componentDidMount() {
-		let _isUnsearchable = false
+	useEffect(() => {
 		let _isSeries = false
-
 		const url = location.pathname.replace(/\/$/, "") // remove trailing slash
-
 		if (url.startsWith("/series")) _isSeries = true
 
 		if (_isSeries) {
 			const seriesURL = url.slice(0, url.lastIndexOf("/"))
 			if (seriesURL in map.series) {
 				const _curr: number = map.series[seriesURL].order.indexOf(url)
-				let _prev: number | null = _curr - 1
-				let _next: number | null = _curr + 1
+				const _prev = _curr - 1
+				const _next = _curr + 1
 
-				if (_prev < 0) _prev = null
-				if (_next > map.series[seriesURL].order.length - 1) _next = null
-
-				this.setState({
-					seriesData: {
-						seriesHome: seriesURL,
-						prev:
-							_prev != null
-								? map.series[seriesURL].order[_prev]
-								: null,
-						next:
-							_next != null
-								? map.series[seriesURL].order[_next]
-								: null,
-					},
+				setSeriesData({
+					seriesHome: seriesURL,
+					prev:
+						_prev >= 0
+							? map.series[seriesURL].order[_prev]
+							: undefined,
+					next:
+						_next < map.series[seriesURL].order.length
+							? map.series[seriesURL].order[_next]
+							: undefined,
 				})
 			}
 		}
@@ -221,167 +255,109 @@ export default class Page extends React.Component<PageProps, PageState> {
 			tags: [] as string[],
 		}
 
+		let _isUnsearchable = false
 		if (!MapPost) {
 			_isUnsearchable = true
-			this.setState({ isUnsearchable: _isUnsearchable })
+			setIsPageUnsearchable(_isUnsearchable)
 
 			if (!map.unsearchable[url]) {
-				this.setState({ loading: false })
+				setIsLoading(false)
 				return
 			}
 		}
 
-		const fetched_content = _isUnsearchable
-			? await import(`../data/content/unsearchable${url}.json`)
-			: await import(`../data/content${url}.json`)
+		fetchContent(_isUnsearchable, url).then((fetched_content) => {
+			fetchedPage.content = fetched_content.content
+				? fetched_content.content
+				: "No content"
+			fetchedPage.toc = fetched_content.toc
+				? parseToc(fetched_content.toc)
+				: undefined
+			fetchedPage.title = _isUnsearchable
+				? map.unsearchable[url].title
+				: fetchedPage?.title
+				? fetchedPage.title
+				: "No title"
 
-		fetchedPage.content = fetched_content.content
-			? fetched_content.content
-			: "No content"
-		fetchedPage.toc = fetched_content.toc
-			? parseToc(fetched_content.toc)
-			: undefined
-		fetchedPage.title = _isUnsearchable
-			? map.unsearchable[url].title
-			: fetchedPage?.title
-			? fetchedPage.title
-			: "No title"
-		if (!_isUnsearchable) {
-			fetchedPage.date = fetchedPage?.date
-				? fetchedPage.date
-				: "Unknown date"
-		}
+			if (!_isUnsearchable) {
+				fetchedPage.date = fetchedPage?.date
+					? fetchedPage.date
+					: "Unknown date"
+			}
 
-		this.setState({
-			isSeries: _isSeries,
-			fetchedPage: fetchedPage,
-			loading: false,
+			setIsSeries(_isSeries)
+			setFetchPage(fetchedPage)
+			setIsLoading(false)
 		})
-	}
+	}, [location])
 
-	render() {
-		if (this.state.loading) return <Loading />
-		if (!this.state.fetchedPage) return <NotFound />
+	if (isLoading) return <Loading />
 
-		return (
-			<>
-				<Helmet>
-					<title>pomp | {this.state.fetchedPage.title}</title>
+	if (!fetchedPage) return <NotFound />
 
-					<meta
-						property="og:title"
-						content={this.state.fetchedPage.title}
+	return (
+		<>
+			<Helmet>
+				<title>pomp | {fetchedPage.title}</title>
+
+				<meta property="og:title" content={fetchedPage.title} />
+				<meta property="og:type" content="website" />
+				<meta
+					property="og:image"
+					content={`${process.env.PUBLIC_URL}/icon/icon.svg`}
+				/>
+			</Helmet>
+
+			<div className="card main-content" style={{ paddingTop: 0 }}>
+				{isSeries ? (
+					<NextPrevButton
+						prevURL={seriesData?.prev}
+						nextURL={seriesData?.next}
 					/>
-					<meta property="og:type" content="website" />
-					<meta
-						property="og:image"
-						content={`${process.env.PUBLIC_URL}/icon/icon.svg`}
-					/>
-				</Helmet>
-
-				<div
-					className="card main-content"
-					style={{
-						paddingTop: 0,
-					}}
-				>
-					{this.state.isSeries ? (
-						<NextPrev
-							prevURL={this.state.seriesData?.prev || null}
-							nextURL={this.state.seriesData?.next || null}
-						/>
-					) : (
-						<br />
-					)}
-					<StyledTitle>{this.state.fetchedPage.title}</StyledTitle>
+				) : (
+					<br />
+				)}
+				<StyledTitle>{fetchedPage.title}</StyledTitle>
 
+				<small>
 					{/* Post tags */}
-					<small>
+					{!!fetchedPage.tags.length && (
 						<TagList direction="left">
-							{this.state.fetchedPage.tags ? (
-								this.state.fetchedPage.tags.map((tag) => {
-									return (
-										<td
-											key={
-												this.state.fetchedPage?.title +
-												tag
-											}
-										>
-											<Tag text={tag} />
-										</td>
-									)
-								})
-							) : (
-								<></>
-							)}
+							{fetchedPage.tags.map((tag) => {
+								return (
+									<td key={fetchedPage?.title + tag}>
+										<Tag text={tag} />
+									</td>
+								)
+							})}
 						</TagList>
+					)}
 
-						<br />
+					<br />
 
-						{!this.state.isUnsearchable && (
-							<StyledMetaContainer>
-								<FontAwesomeIcon icon={faCalendar} />
-								&nbsp;&nbsp;&nbsp;
-								{this.state.fetchedPage?.date || "Unknown date"}
-								&nbsp;&nbsp;&nbsp;&nbsp;
-								<FontAwesomeIcon icon={faHourglass} />
-								&nbsp;&nbsp;&nbsp;
-								{this.state.fetchedPage?.readTime
-									? this.state.fetchedPage?.readTime + " read"
-									: "unknown length"}
-								&nbsp;&nbsp;&nbsp;&nbsp;
-								<FontAwesomeIcon icon={faBook} />
-								&nbsp;&nbsp;&nbsp;
-								{this.state.fetchedPage?.wordCount
-									? this.state.fetchedPage.wordCount +
-									  " words"
-									: "unknown words"}
-							</StyledMetaContainer>
-						)}
-					</small>
+					{/* Post metadata */}
+					{!isPageUnsearchable && (
+						<PostMeta fetchedPage={fetchedPage} />
+					)}
+				</small>
 
-					<hr />
+				<hr />
 
-					{
-						// add table of contents if it exists
-						!!this.state.fetchedPage?.toc?.props.children
-							.length && (
-							<>
-								<StyledTocToggleButton
-									onClick={() => {
-										this.setState({
-											isTocOpened:
-												!this.state.isTocOpened,
-										})
-									}}
-								>
-									<strong>Table of Content </strong>
-									{this.state.isTocOpened ? (
-										<FontAwesomeIcon icon={faCaretUp} />
-									) : (
-										<FontAwesomeIcon icon={faCaretDown} />
-									)}
-								</StyledTocToggleButton>
-								<StyledCollapseContainer>
-									<Collapse isOpened={this.state.isTocOpened}>
-										<div className="white-link">
-											{this.state.fetchedPage.toc}
-										</div>
-									</Collapse>
-								</StyledCollapseContainer>
-								<hr />
-							</>
-						)
-					}
+				{/* add table of contents if it exists */}
+				{!!fetchedPage.toc?.props.children.length && (
+					<PageTOC fetchedPage={fetchedPage} />
+				)}
 
-					<div
-						className="white-link"
-						dangerouslySetInnerHTML={{
-							__html: this.state.fetchedPage.content,
-						}}
-					/>
-				</div>
-			</>
-		)
-	}
+				{/* page content */}
+				<div
+					className="white-link"
+					dangerouslySetInnerHTML={{
+						__html: fetchedPage.content,
+					}}
+				/>
+			</div>
+		</>
+	)
 }
+
+export default Page
diff --git a/source/src/pages/Search.tsx b/source/src/pages/Search.tsx
index 7bd77f6..c5c040b 100644
--- a/source/src/pages/Search.tsx
+++ b/source/src/pages/Search.tsx
@@ -133,16 +133,11 @@ function isDateInRange(
 	return Date.parse(from) < compareDate && compareDate < Date.parse(to)
 }
 
-function isSelectedTagsInPost(
-	selectedTags: TagsData[] | null,
-	postTags: string[] | undefined
-) {
-	if (selectedTags == null) return true
-	if (selectedTags.length == 0) return true
+function isSelectedTagsInPost(selectedTags?: TagsData[], postTags?: string[]) {
+	if (!selectedTags || selectedTags.length <= 0) return true
+	if (!postTags || postTags.length <= 0) return false
 
-	if (postTags == undefined) return false
-
-	// if tag is empty or null
+	// if tag is empty or undefined
 	const tagValues = selectedTags.map((value) => value.value)
 	if (!postTags.every((val) => tagValues.includes(val))) return false
 
@@ -150,8 +145,8 @@ function isSelectedTagsInPost(
 }
 
 // Search doesn't work on url change if component is not wrapped
-export default () => {
-	const inputRef = useRef<HTMLInputElement>(null)
+const Search = () => {
+	const inputRef = useRef<HTMLInputElement | null>(null)
 
 	const navigate = useNavigate()
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -179,7 +174,7 @@ export default () => {
 	const [postCards, setPostCards] = useState<unknown[]>([])
 	const [dateRange, setDateRange] = useState<Array<Range>>(defaultDateRange)
 	const [searchInput, setSearchInput] = useState(query.query)
-	const [selectedTags, setSelectedOption] = useState<TagsData[] | null>(
+	const [selectedTags, setSelectedOption] = useState<TagsData[] | undefined>(
 		query.tags.map((elem) => ({ label: elem, value: elem }))
 	)
 
@@ -273,12 +268,12 @@ export default () => {
 		}
 
 		// convert Date to YYYY-MM-DD string if it exists
-		if (item.selection.startDate != null)
+		if (item.selection.startDate)
 			historyToPush.from = item.selection.startDate
 				.toISOString()
 				.split("T")[0]
 
-		if (item.selection.endDate != null)
+		if (item.selection.endDate)
 			historyToPush.to = item.selection.endDate
 				.toISOString()
 				.split("T")[0]
@@ -348,8 +343,10 @@ export default () => {
 
 interface TagSelectProps {
 	query: Query
-	selectedTags: TagsData[] | null
-	setSelectedOption: React.Dispatch<React.SetStateAction<TagsData[] | null>>
+	selectedTags?: TagsData[]
+	setSelectedOption: React.Dispatch<
+		React.SetStateAction<TagsData[] | undefined>
+	>
 }
 
 const TagSelect: React.FC<TagSelectProps> = ({
@@ -487,3 +484,5 @@ const TagSelect: React.FC<TagSelectProps> = ({
 		</StyledReactTagsContainer>
 	)
 }
+
+export default Search