Updating Latest Rules/Search results page

app/[filename]/ServerCategoryPage.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { RiGithubLine, RiPencilLine } from "react-icons/ri";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import Breadcrumbs from "@/components/Breadcrumbs";
-import RuleListWrapper from "@/components/rule-list/rule-list-wrapper";
+import RuleList from "@/components/rule-list/rule-list";
 import MarkdownComponentMapping from "@/components/tina-markdown/markdown-component-mapping";
 import { IconLink } from "@/components/ui";
 import { ICON_SIZE } from "@/constants";
@@ -54,15 +54,7 @@ export default function ServerCategoryPage({ category, path, includeArchived, vi
             <TinaMarkdown content={category?.body} components={MarkdownComponentMapping} />
           </div>
 
-          <RuleListWrapper
-            categoryUri={path}
-            rules={finalRules}
-            initialView={view}
-            initialPage={page}
-            initialPerPage={perPage}
-            includeArchived={includeArchived}
-            showFilterControls={true}
-          />
+          <RuleList categoryUri={path} rules={finalRules} initialPage={page} initialPerPage={perPage} />
         </div>
 
         <div className="hidden lg:flex lg:flex-col lg:absolute lg:top-0 lg:right-0 lg:bottom-0 lg:w-1/3 pl-6">

app/latest-rules/client-page.tsx

@@ -1,23 +1,35 @@
 "use client";
 
+import { useMemo, useState } from "react";
 import AboutSSWCard from "@/components/AboutSSWCard";
 import Breadcrumbs from "@/components/Breadcrumbs";
 import HelpCard from "@/components/HelpCard";
 import HelpImproveCard from "@/components/HelpImproveCard";
 import JoinConversationCard from "@/components/JoinConversationCard";
-import LatestRulesList from "@/components/LatestRulesList";
 import RuleCount from "@/components/RuleCount";
+import RuleList from "@/components/rule-list/rule-list";
 import SearchBar from "@/components/SearchBarWrapper";
 import WhyRulesCard from "@/components/WhyRulesCard";
-import { LatestRule } from "@/models/LatestRule";
+import { RuleListFilter } from "@/types/ruleListFilter";
+import { RuleOrderBy } from "@/types/ruleOrderBy";
 
 interface LatestRuleClientPageProps {
   ruleCount: number;
-  latestRulesByUpdated: LatestRule[];
-  latestRulesByCreated: LatestRule[];
+  latestRulesByUpdated: any[];
+  latestRulesByCreated: any[];
 }
 
 export default function LatestRuleClientPage({ ruleCount, latestRulesByUpdated, latestRulesByCreated }: LatestRuleClientPageProps) {
+  const [currentSort, setCurrentSort] = useState<string>(RuleOrderBy.LastUpdated);
+
+  const sortOptions = useMemo(
+    () => [
+      { value: RuleOrderBy.LastUpdated, label: "Last Updated", rules: latestRulesByUpdated },
+      { value: RuleOrderBy.Created, label: "Recently Created", rules: latestRulesByCreated },
+    ],
+    [latestRulesByUpdated, latestRulesByCreated]
+  );
+
   return (
     <>
       <Breadcrumbs breadcrumbText="Latest Rules" />
@@ -26,8 +38,19 @@ export default function LatestRuleClientPage({ ruleCount, latestRulesByUpdated,
           <div className="h-20">
             <SearchBar />
           </div>
-
-          <LatestRulesList rulesByUpdated={latestRulesByUpdated} rulesByCreated={latestRulesByCreated} title="Latest Rules" />
+          <div className="w-full bg-white pt-4 p-6 border border-[#CCC] rounded shadow-lg">
+            <h1 className="m-0 mb-4 text-ssw-red font-bold">Latest Rules</h1>
+            <RuleList
+              rules={latestRulesByUpdated}
+              initialView={RuleListFilter.TitleOnly}
+              showEverythingView={false}
+              initialPerPage={10}
+              showPagination={true}
+              sortOptions={sortOptions}
+              initialSort={RuleOrderBy.LastUpdated}
+              onSortChange={setCurrentSort}
+            />
+          </div>
         </div>
 
         <div className="layout-sidebar">

app/latest-rules/page.tsx

@@ -5,30 +5,14 @@ import LatestRuleClientPage from "./client-page";
 
 export const revalidate = 300;
 
-const DEFAULT_SIZE = 5;
+const DEFAULT_SIZE = 10;
 const MAX_SIZE = 50;
 
-type LatestRulePageProps = {
-  searchParams?: Promise<{ size?: string | string[] }>;
-};
-
-export default async function LatestRulePage({ searchParams }: LatestRulePageProps) {
-  const sp = (await searchParams) ?? {};
-  const sizeRaw = sp.size;
-  const sizeStr = Array.isArray(sizeRaw) ? sizeRaw[0] : sizeRaw;
-
-  let size = sizeStr ? parseInt(sizeStr, 10) : DEFAULT_SIZE;
-
-  if (!Number.isFinite(size) || Number.isNaN(size) || size <= 0) {
-    size = DEFAULT_SIZE;
-  } else if (size > MAX_SIZE) {
-    size = MAX_SIZE;
-  }
-
+export default async function LatestRulePage() {
   const [ruleCount, latestRulesByUpdated, latestRulesByCreated] = await Promise.all([
     fetchRuleCount(),
-    fetchLatestRules(size, "lastUpdated", true),
-    fetchLatestRules(size, "created", true),
+    fetchLatestRules(MAX_SIZE, "lastUpdated", true),
+    fetchLatestRules(MAX_SIZE, "created", true),
   ]);
 
   return (

app/search/client-page.tsx

@@ -1,27 +1,26 @@
 "use client";
 
-import { useSearchParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import SearchBar from "@/components/SearchBarWrapper";
+import { useSearchParams } from "next/navigation";
+import { useMemo, useState } from "react";
 import AboutSSWCard from "@/components/AboutSSWCard";
+import Breadcrumbs from "@/components/Breadcrumbs";
 import HelpCard from "@/components/HelpCard";
 import HelpImproveCard from "@/components/HelpImproveCard";
 import JoinConversationCard from "@/components/JoinConversationCard";
+import LatestRulesCard from "@/components/LatestRulesCard";
 import RuleCount from "@/components/RuleCount";
+import RuleList from "@/components/rule-list/rule-list";
+import SearchBar from "@/components/SearchBarWrapper";
 import WhyRulesCard from "@/components/WhyRulesCard";
 import { LatestRule } from "@/models/LatestRule";
-import LatestRulesCard from "@/components/LatestRulesCard";
-import Dropdown from "@/components/ui/dropdown";
-import { CgSortAz } from "react-icons/cg";
-import RuleCard from "@/components/RuleCard";
-import Spinner from '@/components/Spinner';
-import { useEffect } from 'react';
-import Breadcrumbs from "@/components/Breadcrumbs";
+import { RuleListFilter } from "@/types/ruleListFilter";
 
 interface SearchResult {
   objectID: string;
   title: string;
   slug: string;
+  lastUpdated?: string;
+  lastUpdatedBy?: string;
   [key: string]: any;
 }
 
@@ -32,84 +31,50 @@ interface RuleSearchClientPageProps {
 
 export default function RulesSearchClientPage({ ruleCount, latestRulesByUpdated }: RuleSearchClientPageProps) {
   const searchParams = useSearchParams();
-  const router = useRouter();
   const keyword = searchParams.get("keyword") || "";
   const sortBy = searchParams.get("sortBy") || "lastUpdated";
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  useEffect(() => {
-    setIsLoading(false);
-  }, [searchParams]);
-
-  const handleSortChange = (newSort: string) => {
-    const params = new URLSearchParams(searchParams);
-    params.set("sortBy", newSort);
-    if (keyword) params.set("keyword", keyword);
-    setIsLoading(true);
-    router.push(`/search?${params.toString()}`);
-  };
-
-  const sortOptions = [
-    { value: "lastUpdated", label: "Last Updated" },
-    { value: "created", label: "Recently Created" }
-  ];
+  // Transform search results to match RuleList expected format
+  const rulesForList = useMemo(
+    () =>
+      searchResults.map((result) => ({
+        guid: result.objectID,
+        uri: result.slug,
+        title: result.title,
+        lastUpdated: result.lastUpdated,
+        lastUpdatedBy: result.lastUpdatedBy,
+      })),
+    [searchResults]
+  );
 
   return (
     <>
       <Breadcrumbs breadcrumbText="Search" />
       <div className="layout-two-columns">
         <div className="layout-main-section">
           <div className="h-[5rem]">
-            <SearchBar 
-              keyword={keyword}
-              sortBy={sortBy}
-              onResults={setSearchResults}
-            />
+            <SearchBar keyword={keyword} sortBy={sortBy} onResults={setSearchResults} />
           </div>
-
-          {isLoading ? (
-            <div className="py-8 flex justify-center">
-              <Spinner size="lg" />
-            </div>
-          ) : (
-            searchResults.length > 0 && (
-            <div>
-              <div className="mb-4 flex justify-between items-center">
-                <h1 className="m-0 text-ssw-red font-bold">
-                  Search Results ({searchResults.length})
-                </h1>
-                <div className="flex items-center space-x-2">
-                  <CgSortAz className="inline" size={24} />
-                  <Dropdown
-                    options={sortOptions}
-                    value={sortBy}
-                    onChange={handleSortChange}
-                  />
-                </div>
-              </div>
 
-              {searchResults.map((result, index) => (
-                <RuleCard
-                  key={result.objectID}
-                  title={result.title}
-                  slug={result.slug}
-                  lastUpdatedBy={result.lastUpdatedBy}
-                  lastUpdated={result.lastUpdated}
-                  index={index}
-                  authorUrl={result.authorUrl}
-                />
-              ))}
+          {searchResults.length > 0 && (
+            <div className="w-full bg-white pt-4 p-6 border border-[#CCC] rounded shadow-lg">
+              <h1 className="m-0 mb-4 text-ssw-red font-bold">Search Results ({searchResults.length})</h1>
+              <RuleList
+                rules={rulesForList}
+                initialView={RuleListFilter.TitleOnly}
+                showTitlesView={false}
+                showBlurbsView={false}
+                showEverythingView={false}
+                showPagination={true}
+                initialPerPage={10}
+              />
             </div>
-        )
-      )}
-
+          )}
         </div>
 
         <div className="layout-sidebar">
-          <div className="h-[3.5rem]">
-            {ruleCount && <RuleCount count={ruleCount} />}
-          </div>
+          <div className="h-[3.5rem]">{ruleCount && <RuleCount count={ruleCount} />}</div>
           <LatestRulesCard rules={latestRulesByUpdated} />
           <WhyRulesCard />
           <HelpImproveCard />

components/LatestRulesCard.tsx

@@ -1,10 +1,10 @@
 "use client";
 
+import Link from "next/link";
+import { RiTimeFill } from "react-icons/ri";
 import { Card } from "@/components/ui/card";
-import { LatestRule } from "@/models/LatestRule";
 import { timeAgo } from "@/lib/dateUtils";
-import { RiTimeFill } from "react-icons/ri";
-import Link from "next/link";
+import { LatestRule } from "@/models/LatestRule";
 
 interface LatestRulesProps {
   rules: LatestRule[];
@@ -27,10 +27,7 @@ export default function LatestRulesCard({ rules }: LatestRulesProps) {
         ))}
       </ul>
 
-      <Link
-        href="/latest-rules/?size=50"
-        className="px-4 py-2 rounded-md inline-flex items-center text-ssw-red hover:underline"
-      >
+      <Link href="/latest-rules" className="px-4 py-2 rounded-md inline-flex items-center text-ssw-red hover:underline">
         See more
       </Link>
     </Card>