Improved handling of null values when entering tags frontmatter

.vscode/settings.json

@@ -2,6 +2,7 @@
   "cSpell.words": [
     "alipay",
     "frontmatter",
+    "Frontmatters",
     "giscus",
     "github",
     "micromessenger",

lib/post-process.ts

@@ -4,7 +4,7 @@ import { TPostListItem, TTagSubPostSet } from "@/types/post-list";
 import fs from "fs";
 import { serialize } from "next-mdx-remote/serialize";
 import path from "path";
-import { capitalizeFirstLetter, nullifyEmptyString } from "./utils";
+import { isEmptyString, nullifyEmptyArray, nullifyEmptyString } from "./utils";
 
 async function getFrontmatters(filepath: string): Promise<TFrontmatter> {
   const source = fs.readFileSync(filepath, "utf-8");
@@ -45,7 +45,10 @@ const sortOutPostLists = async (): Promise<{
   for (let i = 0; i < postFilePaths.length; i++) {
     const frontmatter = await getFrontmatters(postFilePaths[i]);
     const postId = path.parse(postFilePaths[i]).name;
-    const normalizedTags = frontmatter.tags?.map((tagname) => tagname.toUpperCase());
+
+    const normalizedTags = frontmatter.tags
+      ?.filter((tagname) => !isEmptyString(tagname))
+      .map((tagname) => tagname.toUpperCase());
 
     const postListItem: TPostListItem = {
       id: postId,
@@ -53,7 +56,7 @@ const sortOutPostLists = async (): Promise<{
         title: frontmatter.title,
         subtitle: nullifyEmptyString(frontmatter.subtitle),
         coverURL: nullifyEmptyString(frontmatter.coverURL),
-        tags: normalizedTags ?? [],
+        tags: nullifyEmptyArray(normalizedTags),
         summary: nullifyEmptyString(frontmatter.summary),
         time: frontmatter.time,
         pin: frontmatter.pin ?? false,

lib/utils.ts

@@ -1,3 +1,4 @@
+import { NonEmptyArray } from "@/types/utils.type";
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -33,13 +34,10 @@ export function paginateArray<T = any>(array: T[], pageSize: number, pageNumber:
  * @returns return `null` if the input belongs to "", undefined and null.
  */
 export function nullifyEmptyString(value: string | null | undefined): string | null {
-  if (value == null) {
+  if (isEmptyString(value)) {
     return null;
   }
-  if (value.trim() === "") {
-    return null;
-  }
-  return value;
+  return value!;
 }
 
 /**
@@ -48,7 +46,7 @@ export function nullifyEmptyString(value: string | null | undefined): string | n
  * @returns return `true` if the input belongs to "", undefined and null.
  */
 export function isEmptyString(value: string | null | undefined): boolean {
-  if (value == null) {
+  if (value === null || value === undefined) {
     return true;
   }
   if (value.trim() === "") {
@@ -57,6 +55,42 @@ export function isEmptyString(value: string | null | undefined): boolean {
   return false;
 }
 
+/**
+ * Removes empty values from an array.
+ * @param value - The array to remove empty values from.
+ * @returns The array without empty values.
+ * @template T - The type of the array elements.
+ */
+export function removeEmptyValuesFromArray<T = any>(value: any[]): T[] {
+  return value.filter((item) => item != null);
+}
+
+/**
+ * Checks if an array is empty.
+ * @param value - The array to check.
+ * @returns True if the array is empty, false otherwise.
+ */
+export function isEmptyArray(value: any[] | null | undefined): boolean {
+  if (value === null || value === undefined) {
+    return true;
+  }
+  return removeEmptyValuesFromArray(value).length !== 0;
+}
+
+/**
+ * Nullifies an empty array.
+ *
+ * @template T - The type of the array elements.
+ * @param value - The array value to be nullified if empty.
+ * @returns The nullified array if it is empty, otherwise returns the original array.
+ */
+export function nullifyEmptyArray<T>(value: T[] | null | undefined): NonEmptyArray<T> | null {
+  if (isEmptyArray(value)) {
+    return null;
+  }
+  return value as NonEmptyArray<T>;
+}
+
 /**
  * Capitalizes the first letter of each word in a string.
  *

pages/posts/[[...slug]].tsx

@@ -38,7 +38,7 @@ export default function PostsPage(props: PostsPageProps) {
     }
   };
 
-  const handleChangePageNumber = (event: ChangeEvent<HTMLInputElement>) => {
+  const handleInputPageNumber = (event: ChangeEvent<HTMLInputElement>) => {
     setPageNumber(event.target.value);
   };
 
@@ -78,7 +78,7 @@ export default function PostsPage(props: PostsPageProps) {
           <div className="my-auto font-bold flex justify-center">
             <Input
               onKeyDown={handleEnterKeyJump}
-              onChange={handleChangePageNumber}
+              onChange={handleInputPageNumber}
               className="my-auto mx-2 w-11 h-6"
               value={pageNumber}
             />

pages/search.tsx

@@ -7,6 +7,7 @@ import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { SEO } from "@/components/utils/SEO";
 import { Config } from "@/data/config";
+import { isEmptyString } from "@/lib/utils";
 import { fontFangZhengXiaoBiaoSongCN, fontSourceSerifScreenCN } from "@/styles/font";
 import { TSearchResultItem } from "@/types/search-result";
 import axios from "axios";
@@ -30,7 +31,7 @@ export default function SearchPage() {
     onSuccess: (data) => {
       setSearchResult(data);
       if (data.length === 0) {
-        toast({ title: "Empty Result", description: "Change the keyword please." });
+        toast({ title: "Empty Result", description: "No results were found for this keyword. Try another keyword." });
       }
     },
     onError: () => {
@@ -47,6 +48,10 @@ export default function SearchPage() {
   };
 
   const handleMakeSearch = () => {
+    if (isEmptyString(searchText)) {
+      toast({ title: "Enter a Keyword", description: "Please enter one keyword at least." });
+      return;
+    }
     querySearch.refetch();
   };
 

pages/tags/[...slug].tsx

@@ -35,7 +35,7 @@ export default function TagsContentPage(props: TagsContentPageProps) {
     }
   };
 
-  const handleChangePageNumber = (event: ChangeEvent<HTMLInputElement>) => {
+  const handleInputPageNumber = (event: ChangeEvent<HTMLInputElement>) => {
     setPageNumber(event.target.value);
   };
 
@@ -70,7 +70,7 @@ export default function TagsContentPage(props: TagsContentPageProps) {
           <div className="my-auto font-bold flex justify-center">
             <Input
               onKeyDown={handleEnterKeyJump}
-              onChange={handleChangePageNumber}
+              onChange={handleInputPageNumber}
               className="my-auto mx-2 w-11 h-6"
               value={pageNumber}
             />

types/frontmatter.type.ts

@@ -1,7 +1,9 @@
+import { NonEmptyArray } from "./utils.type";
+
 export type TFrontmatter = {
   title: string;
   time: string;
-  tags: string[] | null;
+  tags: NonEmptyArray<string> | null;
   subtitle: string | null;
   summary: string | null;
   coverURL: string | null;

types/utils.type.ts

@@ -0,0 +1 @@
+export type NonEmptyArray<T> = [T, ...T[]];