src/components/LearningOnline.tsx

@@ -53,7 +53,8 @@ export function LearningOnline() {
   const [selectedPriceRange, setSelectedPriceRange] = useState('All Prices');
   const [selectedDuration, setSelectedDuration] = useState('All Durations');
   const [selectedRating, setSelectedRating] = useState('All Ratings');
-  const [sortBy, setSortBy] = useState('most_popular'); // ✅ Changed to match API value
+  const [sortBy, setSortBy] = useState(''); // ✅ Changed to match API value
+  // const [sortBy, setSortBy] = useState('most_popular'); // ✅ Changed to match API value
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [currentPage, setCurrentPage] = useState(1);
   const coursesPerPage = 9;
@@ -204,7 +205,7 @@ export function LearningOnline() {
 
     // Sort by
     const apiSortBy = getSortByForApi(sortBy);
-    if (apiSortBy) {
+    if (apiSortBy && sortBy !== '') {
       filters.sort_by = apiSortBy;
     }
 
@@ -290,7 +291,7 @@ export function LearningOnline() {
     setSelectedPriceRange('All Prices');
     setSelectedDuration('All Durations');
     setSelectedRating('All Ratings');
-    setSortBy('most_popular'); // ✅ Updated to match API value
+    setSortBy(''); 
   };
 
   const hasActiveFilters = searchTerm ||
@@ -434,7 +435,7 @@ export function LearningOnline() {
                 </button>
               </div>
 
-              <Select value={sortBy} onValueChange={setSortBy}>
+              <Select value={sortBy || undefined} onValueChange={setSortBy}>
                 <SelectTrigger className="w-40 text-body">
                   <SelectValue placeholder="Sort by" />
                 </SelectTrigger>