Add keys and type hints

MEITREX · Sep 18, 2024 · db3c0c6 · db3c0c6
1 parent 781f4fd
commit db3c0c6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
diff --git a/app/search/SearchResult.tsx b/app/search/SearchResult.tsx
@@ -3,25 +3,25 @@
 import ExpandableText from '@/components/ExpandableText';
 import { Box, styled, Typography } from '@mui/material';
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
-import Paper from '@mui/material/Paper';
+import { pageSemanticSearchQuery$data } from '@/__generated__/pageSemanticSearchQuery.graphql';
 
-function getSegmentContents(mediaRecordSegment: any) {
+function getSegmentContents(mediaRecordSegment: NonNullable<pageSemanticSearchQuery$data['semanticSearch']>[number]["mediaRecordSegment"]): string {
     switch (mediaRecordSegment.__typename) {
         case "VideoRecordSegment":
-            return mediaRecordSegment.transcript;
+            return mediaRecordSegment.transcript ?? "";
         case "DocumentRecordSegment":
-            return mediaRecordSegment.text;
+            return mediaRecordSegment.text ?? "";
         default:
             return "Unknown media type";
     }
 }
 
-function getSegmentTitle(mediaRecordSegment: any) {
+function getSegmentTitle(mediaRecordSegment: NonNullable<pageSemanticSearchQuery$data['semanticSearch']>[number]["mediaRecordSegment"]) {
     switch (mediaRecordSegment.__typename) {
         case "VideoRecordSegment":
             return <Typography variant="h6">Time {mediaRecordSegment.screenText}</Typography>;
         case "DocumentRecordSegment":
-            return <Typography variant="h6">Page {mediaRecordSegment.page + 1}</Typography>;
+            return <Typography variant="h6">Page {mediaRecordSegment.page! + 1}</Typography>;
         default:
             return <Typography variant="h6">Unknown media type</Typography>;
     }
@@ -35,7 +35,7 @@ const NoMaxWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
     },
   });
 
-export default function SearchResult({ searchResult }: { searchResult: any }) {
+export default function SearchResult({ 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/app/search/SearchResultGroup.tsx b/app/search/SearchResultGroup.tsx
@@ -5,18 +5,20 @@ import SearchResult from "./SearchResult";
 import { ExpandMore, ExpandLess } from "@mui/icons-material";
 import { useState } from "react";
 import { MediaRecordIcon } from "@/components/MediaRecordIcon";
+import { pageSemanticSearchQuery$data } from "@/__generated__/pageSemanticSearchQuery.graphql";
 
-function renderDividerIfNotFirst(index: number) {
-    if (index === 0) {
+export default function SearchResultGroup({ searchResults, collapsedResultCount }: 
+    { searchResults: NonNullable<pageSemanticSearchQuery$data['semanticSearch']>[number][], collapsedResultCount: number }) {
+    // media record is the same for all results in the group, just get the first segment's media record
+    const mediaRecord = searchResults[0].mediaRecordSegment.mediaRecord;
+    if(mediaRecord === null || mediaRecord === undefined) {
         return null;
     }
-    return <Divider variant="middle" />;
-}
 
-export default function SearchResultGroup({ searchResults, collapsedResultCount }: { searchResults: any, collapsedResultCount: number }) {
-    // media record is the same for all results in the group, just get the first segment's media record
-    const mediaRecord = searchResults[0].mediaRecordSegment.mediaRecord;
-    const userAccessibleContent = mediaRecord.contents.find((x: any) => x !== undefined && x !== null);
+    const userAccessibleContent = mediaRecord.contents.find((x) => x !== undefined && x !== null);
+    if(userAccessibleContent === null || userAccessibleContent === undefined) {
+        return null;
+    }
 
     const [isExpanded, setIsExpanded] = useState(true);
     function toggleExpanded() {
@@ -31,11 +33,11 @@ export default function SearchResultGroup({ searchResults, collapsedResultCount
     function renderResultsIfExpanded() {
         if(isExpanded) {
             return <div>
-                {searchResults.slice(0, collapsedResultCount).map((result: any, index: number) => {
-                return (<div>
-                    {renderDividerIfNotFirst(index)}
+                {searchResults.slice(0, collapsedResultCount).map((result, index: number) => {
+                return (<Box key={result.mediaRecordSegment.id}>
+                    {index > 0 && <Divider variant="middle" />}
                     <SearchResult searchResult={result} />
-                </div>)
+                </Box>)
                 })}
 
                 <Button 
@@ -49,11 +51,11 @@ export default function SearchResultGroup({ searchResults, collapsedResultCount
 
                 {/* Show the rest of the results if user has expanded the result group */}
                 {doShowMoreResults 
-                && searchResults.slice(collapsedResultCount, searchResults.length).map((result: any, index: number) => {
-                return (<div>
-                    {renderDividerIfNotFirst(index)}
+                && searchResults.slice(collapsedResultCount, searchResults.length).map((result, index: number) => {
+                return (<Box key={result.mediaRecordSegment.id}>
+                    {index > 0 && <Divider variant="middle" />}
                     <SearchResult searchResult={result} />
-                </div>)
+                </Box>)
                 })}
 
 

diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -188,12 +188,13 @@ export default function SearchPage() {
 
             {((query !== null) &&
                 Object.values(semanticSearchResultGroups).map((resultGroup) => {
-                    return (
-                        <SearchResultGroup 
-                        searchResults={resultGroup} 
-                        collapsedResultCount={3} 
-                        key={resultGroup?.[0].mediaRecordSegment.mediaRecordId ?? "undefined"} />
-                    );
+                    if(resultGroup !== undefined)
+                        return (
+                            <SearchResultGroup 
+                            searchResults={resultGroup} 
+                            collapsedResultCount={3} 
+                            key={resultGroup?.[0].mediaRecordSegment.mediaRecordId ?? "undefined"} />
+                        );
                 })
             )}
         </main>