make sure result list is structured with list elements only

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
2023-01-20 16:23:23 +01:00
parent 9dd6a59651
commit a0619a5b49
5 changed files with 119 additions and 147 deletions
@@ -18,7 +18,6 @@ import React, { ReactNode } from 'react';
 import {
  Box,
  Chip,
-  Divider,
  ListItem,
  ListItemIcon,
  ListItemText,
@@ -52,6 +51,7 @@ export interface ToolSearchResultListItemProps {
  result?: IndexableDocument;
  highlight?: ResultHighlight;
  rank?: number;
+  toggleModal?: () => void;
 }

 /**  @public */
@@ -63,47 +63,42 @@ export function ToolSearchResultListItem(props: ToolSearchResultListItemProps) {
  if (!result) return null;

  return (
-    <>
-      <ListItem alignItems="flex-start">
-        {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
-        <div className={classes.flexContainer}>
-          <ListItemText
-            className={classes.itemText}
-            primaryTypographyProps={{ variant: 'h6' }}
-            primary={
-              <Link noTrack to={result.location}>
-                {props.highlight?.fields.title ? (
-                  <HighlightedSearchResultText
-                    text={props.highlight.fields.title}
-                    preTag={props.highlight.preTag}
-                    postTag={props.highlight.postTag}
-                  />
-                ) : (
-                  result.title
-                )}
-              </Link>
-            }
-            secondary={
-              props.highlight?.fields.text ? (
+    <ListItem alignItems="flex-start" divider>
+      {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
+      <div className={classes.flexContainer}>
+        <ListItemText
+          className={classes.itemText}
+          primaryTypographyProps={{ variant: 'h6' }}
+          primary={
+            <Link noTrack to={result.location}>
+              {props.highlight?.fields.title ? (
                <HighlightedSearchResultText
-                  text={props.highlight.fields.text}
+                  text={props.highlight.fields.title}
                  preTag={props.highlight.preTag}
                  postTag={props.highlight.postTag}
                />
              ) : (
-                result.text
-              )
-            }
-          />
-          <Box>
-            {result.tags &&
-              result.tags.map((tag: string) => (
-                <Chip label={tag} size="small" />
-              ))}
-          </Box>
-        </div>
-      </ListItem>
-      <Divider component="li" />
-    </>
+                result.title
+              )}
+            </Link>
+          }
+          secondary={
+            props.highlight?.fields.text ? (
+              <HighlightedSearchResultText
+                text={props.highlight.fields.text}
+                preTag={props.highlight.preTag}
+                postTag={props.highlight.postTag}
+              />
+            ) : (
+              result.text
+            )
+          }
+        />
+        <Box>
+          {result.tags &&
+            result.tags.map((tag: string) => <Chip label={tag} size="small" />)}
+        </Box>
+      </div>
+    </ListItem>
  );
 }