From 9152bb818b38ea64a903562bb985ab75014fa3dc Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Thu, 5 Mar 2026 05:37:10 +0530
Subject: [PATCH] refactor: Consolidate testimonial display into a single
 sortable list with dynamic sorting, replacing separate latest and oldest
 sections.

---
 src/components/settings/TestimonialsForm.tsx | 98 ++++++++------------
 1 file changed, 38 insertions(+), 60 deletions(-)

diff --git a/src/components/settings/TestimonialsForm.tsx b/src/components/settings/TestimonialsForm.tsx
index 1decf59..56790f8 100644
--- a/src/components/settings/TestimonialsForm.tsx
+++ b/src/components/settings/TestimonialsForm.tsx
@@ -52,29 +52,26 @@ function TestimonialCard({ testimonial }: { testimonial: Testimonial }) {
 export function TestimonialsForm() {
   const [copied, setCopied] = useState(false);
   const [testimonialLink, setTestimonialLink] = useState('');
-  const [latestTestimonials, setLatestTestimonials] = useState<Testimonial[]>([]);
-  const [oldestTestimonials, setOldestTestimonials] = useState<Testimonial[]>([]);
+  const [testimonials, setTestimonials] = useState<Testimonial[]>([]);
+  const [sortOrder, setSortOrder] = useState<'latest' | 'oldest'>('latest');
   const [loading, setLoading] = useState(true);
   const [generating, setGenerating] = useState(false);
 
-  useEffect(() => {
-    const fetchTestimonials = async () => {
-      try {
-        const [latest, oldest] = await Promise.all([
-          testimonialsService.getMyTestimonials('latest'),
-          testimonialsService.getMyTestimonials('oldest'),
-        ]);
-        setLatestTestimonials(latest);
-        setOldestTestimonials(oldest);
-      } catch (err) {
-        console.error('Failed to fetch testimonials:', err);
-      } finally {
-        setLoading(false);
-      }
-    };
+  const fetchTestimonials = async (sort: 'latest' | 'oldest') => {
+    try {
+      setLoading(true);
+      const data = await testimonialsService.getMyTestimonials(sort);
+      setTestimonials(data);
+    } catch (err) {
+      console.error('Failed to fetch testimonials:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-    fetchTestimonials();
-  }, []);
+  useEffect(() => {
+    fetchTestimonials(sortOrder);
+  }, [sortOrder]);
 
   const handleGenerateLink = async () => {
     try {
@@ -156,12 +153,12 @@ export function TestimonialsForm() {
         </div>
       </div>
 
-      {/* Testimonials Columns */}
+      {/* Testimonials */}
       {loading ? (
         <div className="flex items-center justify-center py-12">
           <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#E58625]"></div>
         </div>
-      ) : latestTestimonials.length === 0 ? (
+      ) : testimonials.length === 0 ? (
         <div className="text-center py-12 bg-[#d9d9d9]/25 rounded-[7px]">
           <p className="font-fractul font-medium text-[16px] text-[#00293D]/60">
             No testimonials yet
@@ -171,45 +168,26 @@ export function TestimonialsForm() {
           </p>
         </div>
       ) : (
-        <div className="flex flex-col lg:flex-row gap-4">
-          {/* Latest Column */}
-          <div className="flex-1 bg-[#d9d9d9]/25 rounded-[7px] p-5">
-            <div className="flex items-center gap-1 mb-4">
-              <span className="font-fractul font-medium text-[14px] text-black">
-                Sort By : Latest
-              </span>
-              <Image
-                src="/assets/icons/sort-arrow-down-icon.svg"
-                alt=""
-                width={14}
-                height={14}
-              />
-            </div>
-            <div className="space-y-4 max-h-[500px] overflow-y-auto pr-1 custom-scrollbar">
-              {latestTestimonials.map((testimonial) => (
-                <TestimonialCard key={testimonial.id} testimonial={testimonial} />
-              ))}
-            </div>
-          </div>
-
-          {/* Oldest Column */}
-          <div className="flex-1 bg-[#d9d9d9]/25 rounded-[7px] p-5">
-            <div className="flex items-center gap-1 mb-4">
-              <span className="font-fractul font-medium text-[14px] text-black">
-                Sort By : Oldest
-              </span>
-              <Image
-                src="/assets/icons/sort-arrow-down-icon.svg"
-                alt=""
-                width={14}
-                height={14}
-              />
-            </div>
-            <div className="space-y-4 max-h-[500px] overflow-y-auto pr-1 custom-scrollbar">
-              {oldestTestimonials.map((testimonial) => (
-                <TestimonialCard key={testimonial.id} testimonial={testimonial} />
-              ))}
-            </div>
+        <div className="bg-[#d9d9d9]/25 rounded-[7px] p-5">
+          <button
+            onClick={() => setSortOrder(sortOrder === 'latest' ? 'oldest' : 'latest')}
+            className="flex items-center gap-1 mb-4 hover:opacity-70 transition-opacity"
+          >
+            <span className="font-fractul font-medium text-[14px] text-black">
+              Sort By : {sortOrder === 'latest' ? 'Latest' : 'Oldest'}
+            </span>
+            <Image
+              src="/assets/icons/sort-arrow-down-icon.svg"
+              alt=""
+              width={14}
+              height={14}
+              className={sortOrder === 'oldest' ? 'rotate-180' : ''}
+            />
+          </button>
+          <div className="space-y-4 max-h-[600px] overflow-y-auto pr-1 custom-scrollbar">
+            {testimonials.map((testimonial) => (
+              <TestimonialCard key={testimonial.id} testimonial={testimonial} />
+            ))}
           </div>
         </div>
       )}