diff --git a/src/beta/components/search/SearchResultList/SearchResultList.jsx b/src/beta/components/search/SearchResultList/SearchResultList.jsx
index 9da0a2a..29453d1 100644
--- a/src/beta/components/search/SearchResultList/SearchResultList.jsx
+++ b/src/beta/components/search/SearchResultList/SearchResultList.jsx
@@ -1,16 +1,27 @@
-import React from "react";
+import React, { useEffect } from "react";
import { Divider, Stack, styled } from "@mui/material";
import { getLogEntryGroupId } from "components/Properties";
import { SearchResultGroupItem } from "./SearchResultGroupItem/SearchResultGroupItem";
import { SearchResultSingleItem } from "./SearchResultSingleItem";
import { sortByCreatedDate } from "components/log/sort";
+import { useKeyPress } from "hooks/useKeyPress";
+import { updateCurrentLogEntry, useCurrentLogEntry } from "features/currentLogEntryReducer";
+import { useDispatch } from "react-redux";
+import useBetaNavigate from "hooks/useBetaNavigate";
-export const SearchResultList = styled(({logs, dateDescending, selectedId, onRowClick, className}) => {
+export const SearchResultList = styled(({ logs, dateDescending, className }) => {
+ const dispatch = useDispatch();
+ const navigate = useBetaNavigate();
+
+ const currentLogEntry = useCurrentLogEntry();
+ const currentLogEntryId = Number(currentLogEntry?.id);
+ const arrowUpPressed = useKeyPress('ArrowUp');
+ const arrowDownPressed = useKeyPress('ArrowDown');
const removeSubsequentReplies = (logs) => {
const visitedGroups = []
return logs.reduce((res, log) => {
- if(log.groupId && visitedGroups.includes(log.groupId)) {
+ if (log.groupId && visitedGroups.includes(log.groupId)) {
return [...res];
} else {
visitedGroups.push(log.groupId);
@@ -18,26 +29,58 @@ export const SearchResultList = styled(({logs, dateDescending, selectedId, onRow
}
}, []);
}
+ const logsAndReplies = logs.map(log => ({
+ ...log,
+ groupId: getLogEntryGroupId(log.properties)
+ })).toSorted(sortByCreatedDate(dateDescending))
- const transformedLogs = removeSubsequentReplies(
- logs.map(log => ({
- ...log,
- groupId: getLogEntryGroupId(log.properties)
- }))
- .toSorted(sortByCreatedDate(dateDescending))
+ const logsNoReplies = removeSubsequentReplies(
+ logsAndReplies
);
+ const navigateToEntry = (log) => {
+ dispatch(updateCurrentLogEntry(log));
+ navigate(`/logs/${log.id}`);
+ }
+
+ const keyboardNavigate = (nextEntryId) => {
+ const nextEntry = logsAndReplies.find(log => log.id === nextEntryId);
+ if (nextEntry) {
+ navigateToEntry(nextEntry);
+ }
+ }
+
+ const setDefaultLogEntry = () => {
+ if (!currentLogEntryId) {
+ dispatch(updateCurrentLogEntry(logsNoReplies[0]));
+ }
+ }
+
+ useEffect(() => {
+ if (arrowUpPressed) {
+ setDefaultLogEntry();
+ keyboardNavigate(currentLogEntryId + 1);
+ }
+ }, [arrowUpPressed]);
+
+ useEffect(() => {
+ if (arrowDownPressed) {
+ setDefaultLogEntry();
+ keyboardNavigate(currentLogEntryId - 1);
+ }
+ }, [arrowDownPressed]);
+
return (
}
>
- {transformedLogs?.map(log => {
- if(log.groupId) {
- return
+ {logsNoReplies?.map(log => {
+ if (log.groupId) {
+ return
} else {
- return
+ return
}
})}
diff --git a/src/beta/components/search/SearchResults.js b/src/beta/components/search/SearchResults.js
index 7003dcc..5fa019f 100644
--- a/src/beta/components/search/SearchResults.js
+++ b/src/beta/components/search/SearchResults.js
@@ -1,7 +1,6 @@
import { Alert, Badge, Box, IconButton, LinearProgress, Stack, TablePagination, Typography, styled } from "@mui/material";
import { ologApi, removeEmptyKeys } from "api/ologApi";
import customization from "config/customization";
-import { updateCurrentLogEntry, useCurrentLogEntry } from "features/currentLogEntryReducer";
import { updateSearchPageParams, useSearchPageParams } from "features/searchPageParamsReducer";
import { updateSearchParams, useSearchParams } from "features/searchParamsReducer";
import React, { useEffect, useMemo, useState } from "react";
@@ -14,15 +13,12 @@ import { SearchParamsBadges } from "./SearchParamsBadges";
import { AdvancedSearchDrawer } from "./SearchResultList/AdvancedSearchDrawer";
import { useAdvancedSearch } from "features/advancedSearchReducer";
import { withCacheBust } from "hooks/useSanitizedSearchParams";
-import useBetaNavigate from "hooks/useBetaNavigate";
export const SearchResults = styled(({ className }) => {
const dispatch = useDispatch();
- const navigate = useBetaNavigate();
const { active: advancedSearchActive, fieldCount: advancedSearchFieldCount } = useAdvancedSearch();
- const currentLogEntry = useCurrentLogEntry();
const searchParams = useSearchParams();
const searchPageParams = useSearchPageParams();
const rowsPerPageOptions = customization.defaultRowsPerPageOptions;
@@ -86,11 +82,6 @@ export const SearchResults = styled(({ className }) => {
const count = searchResults?.hitCount ?? 0;
- const onRowClick = (log) => {
- dispatch(updateCurrentLogEntry(log));
- navigate(`/logs/${log.id}`);
- }
-
const onPageChange = (event, page) => {
setPage(page);
};
@@ -159,8 +150,6 @@ export const SearchResults = styled(({ className }) => {
?
:
No records found
diff --git a/src/hooks/useKeyPress.js b/src/hooks/useKeyPress.js
new file mode 100644
index 0000000..4ba8236
--- /dev/null
+++ b/src/hooks/useKeyPress.js
@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+export const useKeyPress = (targetKey) => {
+ const [keyPressed, setKeyPressed] = useState(false);
+
+ useEffect(() => {
+ const downHandler = ({ key }) => {
+ if (key === targetKey) {
+ setKeyPressed(true);
+ }
+ };
+
+ const upHandler = ({ key }) => {
+ if (key === targetKey) {
+ setKeyPressed(false);
+ }
+ };
+
+ window.addEventListener('keydown', downHandler);
+ window.addEventListener('keyup', upHandler);
+
+ return () => {
+ window.removeEventListener('keydown', downHandler);
+ window.removeEventListener('keyup', upHandler);
+ };
+ }, [targetKey]);
+
+ return keyPressed;
+};
\ No newline at end of file