ui: add sort dropdown

ui/src/components/search/SearchResults.tsx

@@ -1,8 +1,12 @@
 import React from "react";
+import { Select } from "antd";
+import { DownOutlined } from "@ant-design/icons";
 
 import { Result } from "@/types";
 import ResultItem from "./ResultItem";
 import SearchPagination from "./SearchPagination";
+import { useRouter } from "next/navigation";
+import { getSearchUrl } from "@/utils/utils";
 
 interface SearchResultsProps {
   results: Result[];
@@ -15,13 +19,47 @@ const SearchResults: React.FC<SearchResultsProps> = ({
   count,
   params,
 }) => {
+  const router = useRouter();
+
+  const sortOptions = [
+    {
+      label: "Most recent",
+      value: "_updated_at",
+    },
+    {
+      label: "Least recent",
+      value: "-_updated_at",
+    },
+  ];
+
+  const sortResults = (value: string) => {
+    router.push(
+      getSearchUrl({
+        ...params,
+        page: 1,
+        ordering: value,
+      })
+    );
+  };
+
   return (
     <div>
       <div className="mt-4 mb-6 flex justify-between align-center">
         <p className="flex items-center">Found {count} results.</p>
         <SearchPagination count={count} params={params} />
         <div className="sort flex items-center">
-          {count > 0 && "Add sort here"}
+          {count > 0 && (
+            <Select
+              options={sortOptions}
+              placeholder="Sort by"
+              className="sort-dropdown"
+              onChange={sortResults}
+            >
+              <div>
+                Sort by <DownOutlined />
+              </div>
+            </Select>
+          )}
         </div>
       </div>
       <ul className="border-0 border-t border-solid border-slate-200">

ui/src/components/search/YearFacet.tsx

@@ -56,7 +56,6 @@ const YearFacet: React.FC<YearFacetProps> = ({ data, params }) => {
     return initial?.map((item) => ({
       x: new Date(item?.key)?.getFullYear(),
       y: item?.doc_count,
-      y0: 0
     }));
   };
 

ui/src/styles/globals.css

@@ -340,6 +340,14 @@ a {
   color: white !important;
 }
 
+.sort-dropdown {
+  width: 120px;
+}
+
+.sort-dropdown .ant-select-selection-placeholder {
+  color: #333;
+}
+
 .search-results-record-date {
   color: #ccc;
 }

ui/src/types.ts

@@ -5,6 +5,7 @@ export const queryTypes = [
   "country",
   "journal",
   "publication_year__range",
+  "ordering"
 ] as const;
 
 export type QueryType = (typeof queryTypes)[number];