Skip to content

Commit

Permalink
Revert "Make projec titems search and concept tree search debounced i…
Browse files Browse the repository at this point in the history
…nput fields instead of working with enter"

This reverts commit ee1c9b8.
  • Loading branch information
awildturtok committed Jul 1, 2024
1 parent 49a1af7 commit 1cd9bf1
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 23 deletions.
7 changes: 5 additions & 2 deletions frontend/src/js/concept-trees/ConceptTreeSearchBox.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled from "@emotion/styled";
import { useCallback, useRef } from "react";
import { FC, useCallback, useRef } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";

Expand Down Expand Up @@ -48,8 +48,11 @@ const TopRow = styled("div")`
align-items: center;
gap: 5px;
`;
interface PropsT {
className?: string;
}

const ConceptTreeSearchBox = ({ className }: { className?: string }) => {
const ConceptTreeSearchBox: FC<PropsT> = ({ className }) => {
const showMismatches = useSelector<StateT, boolean>(
(state) => state.conceptTrees.search.showMismatches,
);
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/js/previous-queries/list/ProjectItemsTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import { canUploadResult } from "../../user/selectors";
import ProjectItemsFilter from "../filter/ProjectItemsFilter";
import type { ProjectItemsFilterStateT } from "../filter/reducer";
import { toggleFoldersOpen } from "../folder-filter/actions";
import ProjectItemsSearchBox from "../search/ProjectItemsSearchBox";
import ProjectItemsTypeFilter from "../type-filter/ProjectItemsTypeFilter";
import { ProjectItemsTypeFilterStateT } from "../type-filter/reducer";
import UploadQueryResults from "../upload/UploadQueryResults";

import { Panel, PanelGroup } from "react-resizable-panels";
import { ResizeHandle } from "../../common/ResizeHandle";
import ProjectItemsSearchBox from "../search/ProjectItemsSearchBox";
import Folders from "./Folders";
import FoldersToggleButton from "./FoldersToggleButton";
import { ProjectItemT } from "./ProjectItem";
Expand All @@ -46,6 +46,9 @@ const FoldersAndQueries = styled(Row)`
overflow: hidden;
position: relative;
`;
const SxProjectItemsSearchBox = styled(ProjectItemsSearchBox)`
flex-grow: 1;
`;

const Filters = styled("div")`
display: flex;
Expand Down Expand Up @@ -116,7 +119,7 @@ const ProjectItemsTab = ({ datasetId }: PropsT) => {
active={areFoldersOpen}
onClick={onToggleFoldersOpen}
/>
<ProjectItemsSearchBox />
<SxProjectItemsSearchBox />
{hasPermissionToUpload && (
<SxUploadQueryResults datasetId={datasetId} />
)}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useCallback } from "react";
import { FC, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";

Expand All @@ -8,7 +8,11 @@ import SearchBar from "../../search-bar/SearchBar";
import { clearSearch, useSearchItems } from "./actions";
import type { ProjectItemsSearchStateT } from "./reducer";

const ProjectItemsSearchBox = () => {
interface Props {
className?: string;
}

const ProjectItemsSearchBox: FC<Props> = ({ className }) => {
const { t } = useTranslation();
const search = useSelector<StateT, ProjectItemsSearchStateT>(
(state) => state.projectItemsSearch,
Expand All @@ -21,6 +25,7 @@ const ProjectItemsSearchBox = () => {

return (
<SearchBar
className={className}
searchTerm={search.searchTerm}
placeholder={t("previousQueries.searchPlaceholder")}
onClear={onClear}
Expand Down
68 changes: 51 additions & 17 deletions frontend/src/js/search-bar/SearchBar.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import styled from "@emotion/styled";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import { memo, useEffect, useState } from "react";

import IconButton from "../button/IconButton";
import { exists } from "../common/helpers/exists";
import { useDebounce } from "../common/helpers/useDebounce";
import BaseInput from "../ui-components/BaseInput";

const InputContainer = styled("div")`
flex-grow: 1;
position: relative;
`;

const SxBaseInput = styled(BaseInput)`
width: 100%;
input {
padding-right: 60px;
height: 34px;
width: 100%;
&::placeholder {
Expand All @@ -17,33 +24,44 @@ const SxBaseInput = styled(BaseInput)`
}
`;

const Right = styled("div")`
position: absolute;
top: 0px;
right: 30px;
display: flex;
flex-direction: row;
align-items: center;
height: 34px;
`;

const StyledIconButton = styled(IconButton)`
padding: 8px 10px;
color: ${({ theme }) => theme.col.gray};
`;

interface Props {
className?: string;
searchTerm: string | null;
placeholder: string;
onSearch: (value: string) => void;
onClear: () => void;
}

const SearchBar = ({
className,
searchTerm,
placeholder,
onSearch,
onClear,
}: {
searchTerm: string | null;
placeholder: string;
onSearch: (value: string) => void;
onClear: () => void;
}) => {
}: Props) => {
const [localSearchTerm, setLocalSearchTerm] = useState<string | null>(null);

useDebounce(
() => {
if (exists(localSearchTerm)) onSearch(localSearchTerm);
},
500,
[localSearchTerm],
);

useEffect(() => {
setLocalSearchTerm(searchTerm);
}, [searchTerm]);

return (
<div className="flex-grow">
<InputContainer className={className}>
<SxBaseInput
inputType="text"
placeholder={placeholder}
Expand All @@ -53,8 +71,24 @@ const SearchBar = ({

setLocalSearchTerm(value as string | null);
}}
inputProps={{
onKeyPress: (e) => {
return e.key === "Enter" && exists(localSearchTerm)
? onSearch(localSearchTerm)
: null;
},
}}
/>
</div>
{exists(localSearchTerm) && (
<Right>
<StyledIconButton
icon={faSearch}
aria-hidden="true"
onClick={() => onSearch(localSearchTerm)}
/>
</Right>
)}
</InputContainer>
);
};

Expand Down

0 comments on commit 1cd9bf1

Please sign in to comment.