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 <[email protected]>
OWASP · Jul 6, 2023 · 4a55352 · 4a55352
1 parent bd4cec9
commit 4a55352
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
+        })}
       </>
     );
   }