ReactJs: How to save my selected user using a state hook?

Viewed 50

I am a bit confused with state hooks and wanted to know if someone can help me figure out how to:

  1. Be able to read the selected user and log it on the console.
  2. 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;
1 Answers
Related