Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Consolidate testimonial display into a single sortable list with dynamic sorting, replacing separate latest and oldest sections.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-05 05:37:10 +05:30
parent 93b86a3472
commit 9152bb818b
1 changed files with 38 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/settings/TestimonialsForm.tsx
View File

@@ -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>
)}