[Resources] Sort by optional date reviewed (#25793)

* [Resources] Sort by optional date reviewed

* Update src/components/ResourcesBySelector.tsx

Co-authored-by: Pedro Sousa <[email protected]>

* Tweak

---------

Co-authored-by: Pedro Sousa <[email protected]>

Author: kodster28

src/components/ResourcesBySelector.tsx

@@ -72,83 +72,94 @@ export default function ResourcesBySelector({
 
 	// Keep facets organized by filterable field for left sidebar
 
-	const visibleResources = resources.filter((resource) => {
-		// Handle top filter (ReactSelect)
-		if (filterPlacement === "top" && selectedFilter && filters) {
-			const filterableValues: string[] = [];
-			for (const filter of filters) {
-				if (filter === "products" && resource.data.productTitles) {
-					// Use resolved product titles for products filter
-					filterableValues.push(...resource.data.productTitles);
-				} else {
-					const val = resource.data[filter as keyof typeof resource.data];
-					if (val) {
-						if (Array.isArray(val) && val.every((v) => typeof v === "string")) {
-							filterableValues.push(...val);
-						} else if (
-							Array.isArray(val) &&
-							val.every((v) => typeof v === "object")
-						) {
-							filterableValues.push(...val.map((v) => v.id));
-						} else if (typeof val === "string") {
-							filterableValues.push(val);
-						}
-					}
-				}
-			}
-			if (!filterableValues.includes(selectedFilter)) return false;
-		}
-
-		// Handle left sidebar filters
-		if (filterPlacement === "left" && filters) {
-			// Check each filterable field separately
-			for (const [filterField, selectedValues] of Object.entries(
-				leftFilters.selectedValues,
-			)) {
-				if (selectedValues.length > 0) {
-					const resourceValues: string[] = [];
-					if (filterField === "products" && resource.data.productTitles) {
+	const visibleResources = resources
+		.filter((resource) => {
+			// Handle top filter (ReactSelect)
+			if (filterPlacement === "top" && selectedFilter && filters) {
+				const filterableValues: string[] = [];
+				for (const filter of filters) {
+					if (filter === "products" && resource.data.productTitles) {
 						// Use resolved product titles for products filter
-						resourceValues.push(...resource.data.productTitles);
+						filterableValues.push(...resource.data.productTitles);
 					} else {
-						const val =
-							resource.data[filterField as keyof typeof resource.data];
+						const val = resource.data[filter as keyof typeof resource.data];
 						if (val) {
 							if (
 								Array.isArray(val) &&
 								val.every((v) => typeof v === "string")
 							) {
-								resourceValues.push(...val);
+								filterableValues.push(...val);
 							} else if (
 								Array.isArray(val) &&
 								val.every((v) => typeof v === "object")
 							) {
-								resourceValues.push(...val.map((v) => v.id));
+								filterableValues.push(...val.map((v) => v.id));
 							} else if (typeof val === "string") {
-								resourceValues.push(val);
+								filterableValues.push(val);
 							}
 						}
 					}
-					if (!resourceValues.some((v) => selectedValues.includes(v))) {
-						return false;
-					}
 				}
+				if (!filterableValues.includes(selectedFilter)) return false;
 			}
 
-			// Search filter
-			if (leftFilters.search) {
-				const searchTerm = leftFilters.search.toLowerCase();
-				const title = resource.data.title?.toLowerCase() || "";
-				const description = resource.data.description?.toLowerCase() || "";
+			// Handle left sidebar filters
+			if (filterPlacement === "left" && filters) {
+				// Check each filterable field separately
+				for (const [filterField, selectedValues] of Object.entries(
+					leftFilters.selectedValues,
+				)) {
+					if (selectedValues.length > 0) {
+						const resourceValues: string[] = [];
+						if (filterField === "products" && resource.data.productTitles) {
+							// Use resolved product titles for products filter
+							resourceValues.push(...resource.data.productTitles);
+						} else {
+							const val =
+								resource.data[filterField as keyof typeof resource.data];
+							if (val) {
+								if (
+									Array.isArray(val) &&
+									val.every((v) => typeof v === "string")
+								) {
+									resourceValues.push(...val);
+								} else if (
+									Array.isArray(val) &&
+									val.every((v) => typeof v === "object")
+								) {
+									resourceValues.push(...val.map((v) => v.id));
+								} else if (typeof val === "string") {
+									resourceValues.push(val);
+								}
+							}
+						}
+						if (!resourceValues.some((v) => selectedValues.includes(v))) {
+							return false;
+						}
+					}
+				}
+
+				// Search filter
+				if (leftFilters.search) {
+					const searchTerm = leftFilters.search.toLowerCase();
+					const title = resource.data.title?.toLowerCase() || "";
+					const description = resource.data.description?.toLowerCase() || "";
 
-				if (!title.includes(searchTerm) && !description.includes(searchTerm)) {
-					return false;
+					if (
+						!title.includes(searchTerm) &&
+						!description.includes(searchTerm)
+					) {
+						return false;
+					}
 				}
 			}
-		}
 
-		return true;
-	});
+			return true;
+		})
+		.sort(
+			(a, b) =>
+				Number(b?.data?.reviewed ?? 600) - Number(a?.data?.reviewed ?? 600),
+		);
 
 	useEffect(() => {
 		const params = new URLSearchParams(window.location.search);