simplified PostCard logic and fixed bug

- simplified locale-specific url generation logic for `PostCard`
- fixed bug where navigation fails on series contents

src/components/PostCard.tsx

@@ -1,3 +1,4 @@
+import { useContext } from "react"
 import styled from "styled-components"
 import { Link } from "react-router-dom"
 
@@ -15,6 +16,7 @@ import TagList from "./TagList"
 import MainContent from "./MainContent"
 
 import theming from "../styles/theming"
+import { globalContext } from "../globalContext"
 
 const PostCardContainer = styled(Link)`
 	display: block;
@@ -66,7 +68,7 @@ const StyledTitle = styled.h1`
 const StyledMetaContainer = styled.small``
 
 interface PostCardData extends PostData {
-	url: string
+	content_id: string
 }
 
 interface Props {
@@ -75,40 +77,43 @@ interface Props {
 
 const PostCard = (props: Props) => {
 	const { postData } = props
+	const { content_id, wordCount, date, readTime, title, tags } = postData
+
+	const { globalState } = useContext(globalContext)
 
 	return (
 		<StyledPostCard>
-			<PostCardContainer to={postData.url}>
+			<PostCardContainer
+				to={`/${globalState.locale}${content_id.replace(/(.kr)$/g, "")}`}
+			>
 				<StyledTitle>
-					{postData.title || "No title"}
+					{title || "No title"}
 					{/* show "(series)" for urls that matches regex "/series/<series-title>" */}
-					{/\/series\/[^/]*$/.test(postData.url) && " (series)"}
+					{/\/series\/[^/]*$/.test(content_id) && " (series)"}
 				</StyledTitle>
 
 				<br />
 
 				<StyledMetaContainer>
 					<TagList direction="left">
-						{postData.tags &&
-							postData.tags.map((tag) => {
-								return <Tag key={postData.title + tag} text={tag} />
+						{tags &&
+							tags.map((tag) => {
+								return <Tag key={title + tag} text={tag} />
 							})}
 					</TagList>
 					<hr />
 					<FontAwesomeIcon icon={faCalendar} />
 					&nbsp;&nbsp;&nbsp;
-					{postData.date || "Unknown date"}
+					{date || "Unknown date"}
 					&nbsp;&nbsp;&nbsp;&nbsp;
 					<FontAwesomeIcon icon={faHourglass} />
 					&nbsp;&nbsp;&nbsp;
-					{postData.readTime
-						? postData.readTime + " read"
-						: "unknown read time"}
+					{readTime ? readTime + " read" : "unknown read time"}
 					&nbsp;&nbsp;&nbsp;&nbsp;
 					<FontAwesomeIcon icon={faBook} />
 					&nbsp;&nbsp;&nbsp;
-					{typeof postData.wordCount === "number"
-						? postData.wordCount + " words"
+					{typeof wordCount === "number"
+						? wordCount + " words"
 						: "unknown length"}
 				</StyledMetaContainer>
 			</PostCardContainer>

src/pages/Home/Home.tsx

@@ -56,8 +56,7 @@ const Home = () => {
 					<PostCard
 						key={content_id}
 						postData={{
-							// /<locale>/<content id without locale suffix>
-							url: `/${locale}${content_id.replace(/(.kr)$/g, "")}`,
+							content_id: content_id,
 							...map.posts[content_id],
 						}}
 					/>

src/pages/Page/Page.tsx

@@ -203,7 +203,7 @@ export default function Page() {
 						<PostCard
 							key={post}
 							postData={{
-								url: post,
+								content_id: post,
 								...map.posts[post],
 							}}
 						/>

src/pages/Page/SeriesControlButtons.tsx

@@ -1,3 +1,4 @@
+import { useContext } from "react"
 import styled, { css } from "styled-components"
 import { Link } from "react-router-dom"
 
@@ -10,6 +11,8 @@ import {
 
 import theming from "../../styles/theming"
 
+import { globalContext } from "../../globalContext"
+
 const Container = styled.div`
 	display: flex;
 	justify-content: space-between;
@@ -54,15 +57,20 @@ const DisabledButton = styled.div`
 	}
 `
 
-const SeriesControlButtons = (props: {
+interface Props {
 	seriesHome: string
 	prevURL?: string
 	nextURL?: string
-}) => {
+}
+
+function SeriesControlButtons({ prevURL, seriesHome, nextURL }: Props) {
+	const { globalState } = useContext(globalContext)
+	const { locale } = globalState
+
 	return (
 		<Container>
-			{props.prevURL ? (
-				<Link to={props.prevURL}>
+			{prevURL ? (
+				<Link to={`/${locale}${prevURL}`}>
 					<Button>
 						<FontAwesomeIcon icon={faArrowLeft} />
 					</Button>
@@ -73,14 +81,14 @@ const SeriesControlButtons = (props: {
 				</DisabledButton>
 			)}
 
-			<Link to={props.seriesHome}>
+			<Link to={`/${locale}${seriesHome}`}>
 				<Button>
 					<FontAwesomeIcon icon={faListUl} />
 				</Button>
 			</Link>
 
-			{props.nextURL ? (
-				<Link to={props.nextURL}>
+			{nextURL ? (
+				<Link to={`/${locale}${nextURL}`}>
 					<Button>
 						<FontAwesomeIcon icon={faArrowRight} />
 					</Button>

src/pages/Page/helper.ts

@@ -79,6 +79,7 @@ export function checkURLValidity(
 		: content_id + ".kr" // add .kr suffix
 
 	switch (pageType) {
+		case PageType.SERIES:
 		case PageType.POST: {
 			if (map.posts[content_id]) return URLValidity.VALID
 
@@ -88,20 +89,19 @@ export function checkURLValidity(
 			break
 		}
 
-		case PageType.SERIES_HOME:
-		case PageType.SERIES: {
+		case PageType.SERIES_HOME: {
 			const series_keys = Object.keys(map.series)
 
 			if (
 				series_keys.some((seriesHomeURL) =>
-					content_id.startsWith(seriesHomeURL)
+					seriesHomeURL.startsWith(content_id)
 				)
 			)
 				return URLValidity.VALID
 
 			if (
 				series_keys.some((seriesHomeURL) =>
-					alt_content_id.startsWith(seriesHomeURL)
+					seriesHomeURL.startsWith(alt_content_id)
 				)
 			)
 				return URLValidity.VALID_BUT_IN_OTHER_LOCALE

src/pages/Search/Search.tsx

@@ -201,7 +201,7 @@ const Search = () => {
 						<PostCard
 							key={res.ref}
 							postData={{
-								url: res.ref,
+								content_id: res.ref,
 								...postData,
 							}}
 						/>