From 443d29da88eb2b548a1e4b6cd2978414809bb88f Mon Sep 17 00:00:00 2001
From: karolina-siemieniuk-morawska <karolina.siemieniukmorawska@gmail.com>
Date: Tue, 12 Dec 2023 14:49:27 +0100
Subject: [PATCH] ui: add sort dropdown

* ref: cern-sis/issues-scoap3#251
---
 ui/src/components/search/SearchResults.tsx | 40 +++++++++++++++++++++-
 ui/src/components/search/YearFacet.tsx     |  1 -
 ui/src/styles/globals.css                  |  8 +++++
 ui/src/types.ts                            |  1 +
 4 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/search/SearchResults.tsx b/ui/src/components/search/SearchResults.tsx
index abc453693..2f2cee469 100644
--- a/ui/src/components/search/SearchResults.tsx
+++ b/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: "_created_at",
+    },
+    {
+      label: "Least recent",
+      value: "-_created_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">
diff --git a/ui/src/components/search/YearFacet.tsx b/ui/src/components/search/YearFacet.tsx
index 60b780c92..38ab18cb1 100644
--- a/ui/src/components/search/YearFacet.tsx
+++ b/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
     }));
   };
 
diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
index 53c813811..caa6e8c90 100644
--- a/ui/src/styles/globals.css
+++ b/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;
 }
diff --git a/ui/src/types.ts b/ui/src/types.ts
index 023b98c0e..6c1b18926 100644
--- a/ui/src/types.ts
+++ b/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];