andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SearchInput: update input value when query changes

Browse Source 
In cases where the searchQueryAtom is changed directly, either via
clicking a tag-button or from some future use-case, the input value is
updated as well.
This commit is contained in:
rektdeckard
2020-10-07 15:56:26 -04:00
parent 2750c84431
commit f57577c374
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/SearchInput/SearchInput.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useState, useEffect } from "react";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import { useDebounce } from "react-use"; import { useDebounce } from "react-use";
import { MagnifyingGlass, X, HourglassHigh } from "phosphor-react"; import { MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
@@ -11,7 +11,8 @@ type SearchInputProps = {};
const SearchInput: React.FC<SearchInputProps> = () => { const SearchInput: React.FC<SearchInputProps> = () => {
const [value, setValue] = useState<string>(""); const [value, setValue] = useState<string>("");
const [query, setQuery] = useRecoilState(searchQueryAtom); const [query, setQuery] = useRecoilState(searchQueryAtom);
void query;
useEffect(() => void (value !== query && setValue(query)), [query]);
const [isReady] = useDebounce( const [isReady] = useDebounce(
() => { () => {