68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import styled from "styled-components";
|
|
import { s } from "@shared/styles";
|
|
import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
|
|
import Fade from "~/components/Fade";
|
|
import useStores from "~/hooks/useStores";
|
|
import RecentSearchListItem from "./RecentSearchListItem";
|
|
|
|
type Props = {
|
|
/** Callback when the Escape key is pressed while navigating the list */
|
|
onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
};
|
|
|
|
function RecentSearches(
|
|
{ onEscape }: Props,
|
|
ref: React.RefObject<HTMLDivElement>
|
|
) {
|
|
const { searches } = useStores();
|
|
const { t } = useTranslation();
|
|
const [isPreloaded] = React.useState(searches.recent.length > 0);
|
|
|
|
React.useEffect(() => {
|
|
void searches.fetchPage({
|
|
source: "app",
|
|
});
|
|
}, [searches]);
|
|
|
|
const content = searches.recent.length ? (
|
|
<>
|
|
<Heading>{t("Recent searches")}</Heading>
|
|
<StyledArrowKeyNavigation
|
|
ref={ref}
|
|
onEscape={onEscape}
|
|
aria-label={t("Recent searches")}
|
|
items={searches.recent}
|
|
>
|
|
{() =>
|
|
searches.recent.map((searchQuery) => (
|
|
<RecentSearchListItem
|
|
key={searchQuery.id}
|
|
searchQuery={searchQuery}
|
|
/>
|
|
))
|
|
}
|
|
</StyledArrowKeyNavigation>
|
|
</>
|
|
) : null;
|
|
|
|
return isPreloaded ? content : <Fade>{content}</Fade>;
|
|
}
|
|
|
|
const Heading = styled.h2`
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: ${s("textSecondary")};
|
|
margin-bottom: 0;
|
|
`;
|
|
|
|
const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
|
|
padding: 0;
|
|
margin-top: 8px;
|
|
`;
|
|
|
|
export default observer(React.forwardRef(RecentSearches));
|