I am a bit confused with state hooks and wanted to know if someone can help me figure out how to:
- Be able to read the selected user and log it on the console.
- Save the selected user on a state hook.
As I see in the code the onSelectUser={onSelectUser} prop helps me select the user from a list, then saves it and adds it to another list. The currentUserId prop when logged on the console gives me the data of the user:
{_id: 'jCnf5KRxy85cag8ao', username: 'kayrush', realname: 'kayrush'}.
I tried this with console.log(currentUserId).
How can I save the selected user on a state hook? I want to be able to save it in order to display my result on the modal later.
Here is the file where I want to save the selected user.
type Props = {
itemId: string;
currentUserId?: string | null;
processing?: boolean;
error?: string;
onSearchRequested?: (
searchValue: string,
callback?: (error?: Error, result?: User[]) => void,
) => void;
onSelectUser?: (event: React.MouseEvent | React.TouchEvent, user: User) => void;
onCancel?: () => void;
onFocus?: (event: React.FocusEvent) => void;
onBlur?: (event: React.FocusEvent) => void;
};
const UserSearchSection: React.FC<Props> = ({
itemId,
currentUserId,
processing,
error,
onSearchRequested,
onSelectUser,
onCancel,
onFocus,
onBlur,
}) => {
const isMountedRef = useIsMounted();
const searchInputRef = useRef<LoadingShower>(null);
const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const lastSearchRef = useRef<string>("");
const [searchText, setSearchText] = useState<string>("");
const [searching, setSearching] = useState<boolean>(false);
const [searchResults, setSearchResults] = useState<User[]>([]);
const [searchError, setSearchError] = useState<boolean>(false);
const showActivity = () => {
if (searchInputRef.current) searchInputRef.current.showLoadingIndicator();
};
const hideActivity = () => {
if (searchInputRef.current) searchInputRef.current.hideLoadingIndicator();
};
const executeSearch = (searchValue: string) => {
if (!isMountedRef.current) return;
clearSearchTimeout();
if (!searchValue) {
hideActivity();
return;
}
onSearchRequested?.(searchValue, (error?: Error, result?: User[]) => {
if (!isMountedRef.current || searchValue !== lastSearchRef.current) return;
hideActivity();
if (error) {
setSearchError(true);
setSearching(false);
} else {
setSearchText(searchValue);
setSearchResults(result ? result : []);
setSearching(false);
setSearchError(false);
}
});
};
const onSearchChange = (value: string) => {
clearSearchTimeout();
lastSearchRef.current = value;
if (value === "") {
hideActivity();
setSearching(false);
setSearchText(value);
setSearchResults([]);
return;
}
setSearching(true);
showActivity();
searchTimeoutRef.current = setTimeout(() => {
executeSearch(value);
}, LIVE_SEARCH_DELAY);
};
const onSearchRetry = () => {
setSearchError(false);
setSearchResults([]);
onSearchChange(lastSearchRef.current);
};
**const selectUser = () => {
console.log(currentUserId);
};**
return (
<div className={styles.searchField}>
**<SearchInput
ref={searchInputRef}
onChange={onSearchChange}
placeholder={t`writeFindUser`}
autoFocus
onFocus={onFocus}
onBlur={onBlur}
itemId={itemId}
currentUserId={selectUser}
searchText={searchText}
searching={searching}
searchResults={searchResults}
searchError={searchError}
onSelectUser={onSelectUser}
onSearchRetry={onSearchRetry}
/>**
</div>
<div className={permissionsDialogStyles.permissionsDialogActions}>
<MainButton label={t`CancelMin`} backgroundColor="#D84646" onClick={onCancel} />
</div>
);
};
UserSearchSection.propTypes = {
currentUserId: PropTypes.string,
processing: PropTypes.bool,
error: PropTypes.string,
onSearchRequested: PropTypes.func,
onSelectUser: PropTypes.func,
onCancel: PropTypes.func,
onFocus: PropTypes.func,
};
export default UserSearchSection;