Move search results to separate component

MEITREX · Sep 26, 2024 · 66687b5 · 66687b5
1 parent b9b71a0
commit 66687b5
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 24 deletions.
diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -4,10 +4,9 @@ import { pageSemanticSearchQuery, pageSemanticSearchQuery$data } from "@/__gener
 import { Autocomplete, Box, Button, Collapse, IconButton, InputAdornment, Paper, TextField, Typography } from "@mui/material";
 import { useRouter, useSearchParams } from "next/navigation";
 import { graphql, useLazyLoadQuery } from "react-relay";
-import SearchResultGroup from "./SearchResultGroup";
 import {ManageSearch, ExpandMore, ExpandLess, Search} from '@mui/icons-material';
 import { useState } from "react";
-import lodash from "lodash";
+import SearchResultsBox from "@/components/search/SearchResultsBox";
 
 export default function SearchPage() {
     const router = useRouter();
@@ -89,13 +88,6 @@ export default function SearchPage() {
         }
     );
 
-    // Group the search results
-    const semanticSearchResultGroups = lodash.chain(semanticSearch ?? [])
-        .groupBy((result) => result.mediaRecordSegment.mediaRecord?.id ?? "unknown")
-        .forEach((group) => group.sort((a, b) => a.score - b.score))
-        .sortBy((group) => group[0].score)
-        .value();
-
     // open advanced search by default if an advanced search parameter was provided
     const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = useState(searchParams.get("courses") !== null || searchParams.get("count") !== null);
     function toggleAdvancedSearch() {
@@ -176,17 +168,7 @@ export default function SearchPage() {
                     onClick={toggleAdvancedSearch}>{isAdvancedSearchOpen ? "Close Advanced Search" : "Advanced Search"}</Button>
             </Box>
 
-            {((query !== null) &&
-                Object.values(semanticSearchResultGroups).map((resultGroup) => {
-                    if(resultGroup !== undefined)
-                        return (
-                            <SearchResultGroup 
-                            searchResults={resultGroup} 
-                            collapsedResultCount={3} 
-                            key={resultGroup?.[0].mediaRecordSegment.mediaRecordId ?? "undefined"} />
-                        );
-                })
-            )}
+            {(query !== null && <SearchResultsBox searchResults={semanticSearch} />)}
         </main>
     );
 }
diff --git a/app/search/SearchResultGroup.tsx → components/search/SearchResultGroup.tsx b/app/search/SearchResultGroup.tsx → components/search/SearchResultGroup.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Box, Breadcrumbs, Button, Card, Divider, IconButton, Link, Paper, Tooltip } from "@mui/material";
-import SearchResult from "./SearchResult";
+import SearchResultItem from "./SearchResultItem";
 import { ExpandMore, ExpandLess } from "@mui/icons-material";
 import { useState } from "react";
 import { MediaRecordIcon } from "@/components/MediaRecordIcon";
@@ -37,7 +37,7 @@ export default function SearchResultGroup({ searchResults, collapsedResultCount
                 {searchResults.slice(0, collapsedResultCount).map((result, index: number) => {
                 return (<Box key={result.mediaRecordSegment.id}>
                     {index > 0 && <Divider variant="middle" />}
-                    <SearchResult searchResult={result} />
+                    <SearchResultItem searchResult={result} />
                 </Box>)
                 })}
 
@@ -55,7 +55,7 @@ export default function SearchResultGroup({ searchResults, collapsedResultCount
                 && searchResults.slice(collapsedResultCount, searchResults.length).map((result, index: number) => {
                 return (<Box key={result.mediaRecordSegment.id}>
                     {index > 0 && <Divider variant="middle" />}
-                    <SearchResult searchResult={result} />
+                    <SearchResultItem searchResult={result} />
                 </Box>)
                 })}
 

diff --git a/app/search/SearchResult.tsx → components/search/SearchResultItem.tsx b/app/search/SearchResult.tsx → components/search/SearchResultItem.tsx
@@ -36,7 +36,7 @@ const NoMaxWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
     },
   });
 
-export default function SearchResult({ searchResult }: { searchResult: NonNullable<pageSemanticSearchQuery$data['semanticSearch']>[number] }) {
+export default function SearchResultItem({ searchResult }: { searchResult: NonNullable<pageSemanticSearchQuery$data['semanticSearch']>[number] }) {
     return <Box sx={{display: "flex", padding: "15px"}}>
         <NoMaxWidthTooltip placement="right" title={
             <img src={searchResult.mediaRecordSegment.thumbnail} style={

diff --git a/components/search/SearchResultsBox.tsx b/components/search/SearchResultsBox.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { pageSemanticSearchQuery$data } from "@/__generated__/pageSemanticSearchQuery.graphql";
+import lodash from "lodash";
+import SearchResultGroup from "./SearchResultGroup";
+import { Box } from "@mui/material";
+
+export default function SearchResultsBox({ searchResults }: 
+    { searchResults:pageSemanticSearchQuery$data['semanticSearch'] }
+) {
+    // Group the search results
+    const semanticSearchResultGroups = lodash.chain(searchResults ?? [])
+        .groupBy((result) => result.mediaRecordSegment.mediaRecord?.id ?? "unknown")
+        .forEach((group) => group.sort((a, b) => a.score - b.score))
+        .sortBy((group) => group[0].score)
+        .value();
+
+    return <Box>{(Object.values(semanticSearchResultGroups).map((resultGroup) => {
+            if(resultGroup !== undefined)
+                return (
+                    <SearchResultGroup 
+                    searchResults={resultGroup} 
+                    collapsedResultCount={3} 
+                    key={resultGroup?.[0].mediaRecordSegment.mediaRecordId ?? "undefined"} />
+                );
+        })
+    )}
+    </Box>
+}