From 4a55352e2fc6a95b1b58fd5c9d6027a34c535faa Mon Sep 17 00:00:00 2001
From: John Harvey <10814889+john681611@users.noreply.github.com>
Date: Thu, 6 Jul 2023 11:54:49 +0100
Subject: [PATCH] Separate documents in search results (#316)

* Initial attempt at separating documents in search results

* Make Search Results Separation only on Sources

* Fix: Sorting of nested links missing

---------

Co-authored-by: Spyros <northdpole@users.noreply.github.com>
---
 .../components/DocumentNode/DocumentNode.tsx  |  2 +-
 .../frontend/src/pages/Search/SearchName.tsx  |  2 +-
 .../pages/Search/components/SearchResults.tsx | 21 +++++++++++++------
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/application/frontend/src/components/DocumentNode/DocumentNode.tsx b/application/frontend/src/components/DocumentNode/DocumentNode.tsx
index 97ccb3306..ac2be82e6 100644
--- a/application/frontend/src/components/DocumentNode/DocumentNode.tsx
+++ b/application/frontend/src/components/DocumentNode/DocumentNode.tsx
@@ -149,7 +149,7 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
                   </div>
                   <div>
                     <div className="accordion ui fluid styled f0">
-                      {links.map((link, i) => (
+                      {links.sort((a, b) => getDocumentDisplayName(a.document).localeCompare(getDocumentDisplayName(b.document))).map((link, i) => (
                         <div key={Math.random()}>
                           <DocumentNode
                             node={link.document}
diff --git a/application/frontend/src/pages/Search/SearchName.tsx b/application/frontend/src/pages/Search/SearchName.tsx
index c3f5ef078..57bb8dfd5 100644
--- a/application/frontend/src/pages/Search/SearchName.tsx
+++ b/application/frontend/src/pages/Search/SearchName.tsx
@@ -65,7 +65,7 @@ export const SearchName = () => {
           </div>
           <div className="eight wide column">
             <h1 className="standard-page__heading">Matching sources</h1>
-            {nodes && <SearchResults results={nodes} />}
+            {nodes && <SearchResults results={nodes} grouped />}
           </div>
         </div>
       )}
diff --git a/application/frontend/src/pages/Search/components/SearchResults.tsx b/application/frontend/src/pages/Search/components/SearchResults.tsx
index a618da28c..a17de00c5 100644
--- a/application/frontend/src/pages/Search/components/SearchResults.tsx
+++ b/application/frontend/src/pages/Search/components/SearchResults.tsx
@@ -3,15 +3,24 @@ import React from 'react';
 import { DocumentNode } from '../../../components/DocumentNode';
 import { getDocumentDisplayName } from 'application/frontend/src/utils/document';
 
-export const SearchResults = ({ results }) => {
+export const SearchResults = ({ results, grouped=false }) => {
   if (results && results.length != 0) {
+    const sortedResults = results.sort((a, b) => getDocumentDisplayName(a).localeCompare(getDocumentDisplayName(b)))
+    let lastDocumentName = sortedResults[0].id ?? sortedResults[0].name
     return (
       <>
-        {results.sort((a, b) => getDocumentDisplayName(a).localeCompare(getDocumentDisplayName(b))).map((document, i) => (
-          <div key={i} className="accordion ui fluid styled standard-page__links-container">
-            <DocumentNode node={document} linkType={'Standard'} />
-          </div>
-        ))}
+        {sortedResults.map((document, i) => {let temp = (
+          <>
+            {grouped && lastDocumentName !== (document.id ?? document.name) &&<hr style={{marginBottom: "40px"}} />}
+            <div key={i} className="accordion ui fluid styled standard-page__links-container">
+              <DocumentNode node={document} linkType={'Standard'} />
+            </div>
+          </>
+        
+        )
+        lastDocumentName = (document.id ?? document.name);
+        return temp
+        })}
       </>
     );
   }