maj refactor, post list ui. make reuse more-stories-concise, hk usePostSort

Author: tkokhing

src/app/_components/language_handler/language-display.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { type ElementType } from 'react';
 import LanguageSwitcher from "@/app/_components/language_handler/language-switcher";

src/app/_components/main_frame/dismissible-box.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { useState } from 'react';
 

src/app/_components/post_gen/more-stories-concise.tsx

@@ -1,46 +1,16 @@
-"use client";
+"use client"
 
-import { useEffect, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
 import { Post } from "@/interfaces/post";
 import { TitlePreview } from "@/app/_components/post_gen/title-preview";
+import { usePostSort } from "@/app/_hooks/usePostSort";
 
 type Props = {
   posts: Post[];
+  skipURLParam?: boolean; // for MDX usage
 };
 
-export function MoreStoriesConcise({ posts }: Props) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const defaultSort = searchParams.get("sort") === "date" ? "date" : "title";
-  const [sortBy, setSortBy] = useState<"title" | "date">(defaultSort);
-
-  // Sync localStorage on sort change
-  useEffect(() => {
-    localStorage.setItem("preferredSort", sortBy);
-  }, [sortBy]);
-
-  // If no URL param, check localStorage once on load
-  useEffect(() => {
-    const saved = localStorage.getItem("preferredSort");
-    if (!searchParams.get("sort") && saved) {
-      setSortBy(saved === "date" ? "date" : "title");
-      router.replace(`?sort=${saved}`);
-    }
-  }, []);
-
-  // Apply sorting
-  const sortedPosts = [...posts].sort((a, b) => {
-    if (sortBy === "title") return a.title.localeCompare(b.title);
-    return new Date(b.date).getTime() - new Date(a.date).getTime();
-  });
-
-  // Handle button click
-  const handleSortChange = (mode: "title" | "date") => {
-    setSortBy(mode);
-    router.replace(`?sort=${mode}`);
-  };
+export function MoreStoriesConcise({ posts, skipURLParam }: Props) {
+  const { sortedPosts, sortBy, handleSortChange } = usePostSort(posts, skipURLParam);
 
   return (
     <section>

src/app/_components/post_gen/post-body-client.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { useFontSize } from '@/app/_components/main_frame/font-size-ctrl';
 

src/app/_components/post_gen/title-preview.tsx

@@ -17,21 +17,16 @@ export function TitlePreview({
   subPath,
   excerpt,
   postStatus,
-  }: Props) 
-  {
+}: Props) {
   return (
-    <div>
-      <h3 className="shadow-sm w-full dark:shadow-sky-900/50 hover:shadow-2xl hover:dark:shadow-zinc-50/100 hover:dark:shadow-lg py-3 px-4 text-xl mb-3 leading-snug">
-        <Link href={`/${subPath}/${slug}`} className="hover:underline">
-          {title}
-          <p className="text-pretty text-xs mb-4 italic">
-            {excerpt}
-          </p>
-          <p className="text-right text-xs mb-4 italic">
-            {postStatus} <DateFormatter dateString={date} />
-          </p>
-        </Link>
-      </h3>
+    <div className="shadow-sm w-full dark:shadow-sky-900/50 hover:shadow-2xl hover:dark:shadow-zinc-50/100 hover:dark:shadow-lg py-3 px-4 text-xl mb-3 leading-snug">
+      <Link href={`/${subPath}/${slug}`}>
+        <h3 className="text-xl font-medium hover:underline">{title}</h3>
+      </Link>
+      <p className="text-pretty text-xs mb-1 italic">{excerpt}</p>
+      <p className="text-right text-xs italic">
+        {postStatus} <DateFormatter dateString={date} />
+      </p>
     </div>
   );
 }

src/app/_components/preference/counter.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { useState } from 'react';
 

src/app/_components/preference/data-exporter.tsx

@@ -1,6 +1,6 @@
 // for content injections and 
 // export to different page.tsx for dynamic language switching
-'use client';
+"use client";
 import enFrontierData from '@/lib/_data_exporter/frontier_data_en.mdx';
 import zhFrontierData from '@/lib/_data_exporter/frontier_data_zh.mdx';
 import enCyberDomainData from '@/lib/_data_exporter/strategic_cyber_domains_en.mdx';

src/app/_components/preference/toggle-frame.tsx

@@ -1,26 +1,45 @@
-// app/_components/toggle-frame.tsx
-
 "use client";
 
-import { useState, ReactNode } from "react";
+import { useRef, useState, useEffect } from "react";
 
 type Props = {
-  label?: string;
-  children: ReactNode;
+  label: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
 };
 
-export function ToggleFrame({ label, children }: Props) {
-  const [open, setOpen] = useState(false);
+export function ToggleFrame({ label, children, defaultOpen = false }: Props) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleToggle = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  // Scroll into view when opened
+  useEffect(() => {
+    if (isOpen && ref.current) {
+      setTimeout(() => {
+        ref.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+      }, 50);
+    }
+  }, [isOpen]);
 
   return (
-    <div className="my-4">
+    <div ref={ref} className="my-6">
       <button
-        onClick={() => setOpen(!open)}
-        className="underline text-blue-800 dark:text-blue-300  hover:text-tkokhing-blue hover:dark:text-tkokhing-dark transition"
+        type="button"
+        onClick={handleToggle}
+        className="text-left text-lg font-semibold underline text-blue-800 dark:text-blue-300  hover:text-tkokhing-blue hover:dark:text-tkokhing-dark transition"
       >
-        {open ? `Hide ${label}` : `Show ${label}`}
+        {label}&nbsp;{isOpen ? "▼" : "▶"} 
       </button>
-      {open && <div className="mt-2">{children}</div>}
+
+      {isOpen && (
+        <div className="mt-4">
+          {children}
+        </div>
+      )}
     </div>
   );
 }

src/app/_hooks/usePostSort.ts

@@ -0,0 +1,46 @@
+// app/_hooks/usePostSort.ts
+
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Post } from "@/interfaces/post";
+
+type SortMode = "title" | "date";
+
+export function usePostSort(posts: Post[], skipURLParam = false) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const defaultSort: SortMode = searchParams.get("sort") === "date" ? "date" : "title";
+  const [sortBy, setSortBy] = useState<SortMode>(defaultSort);
+
+  // Sync localStorage
+  useEffect(() => {
+    localStorage.setItem("preferredSort", sortBy);
+  }, [sortBy]);
+
+  // Load preferred sort if no query param and not skipping
+  useEffect(() => {
+    const saved = localStorage.getItem("preferredSort");
+    if (!skipURLParam && !searchParams.get("sort") && saved) {
+      const savedMode = saved === "date" ? "date" : "title";
+      setSortBy(savedMode);
+      router.replace(`?sort=${savedMode}`, { scroll: false });
+    }
+  }, []);
+
+  // Apply sorting
+  const sortedPosts = [...posts].sort((a, b) => {
+    if (sortBy === "title") return a.title.localeCompare(b.title);
+    return new Date(b.date).getTime() - new Date(a.date).getTime();
+  });
+
+  // handle sort change
+  const handleSortChange = (mode: SortMode) => {
+    setSortBy(mode);
+    if (!skipURLParam) {
+      router.replace(`?sort=${mode}`, { scroll: false });
+    }
+  };
+  return { sortedPosts, sortBy, handleSortChange };
+}