refactor: nav and search.

feat: use recoil to replace redux
feat: use react-native

THIS IS NOT FINISHED. DONT USE THIS
This commit is contained in:
Wentao Lyu 2023-03-28 20:36:21 +08:00
parent d8ccc5b870
commit af3d74b104
33 changed files with 1142 additions and 473 deletions

View file

@ -1,41 +1,44 @@
import React, { useCallback } from 'react';
import React, { useCallback, useState } from 'react';
import { debounce } from 'lodash';
import { useSelector, useDispatch } from 'react-redux';
import { Search } from 'lucide-react';
import { setInputValue, setQuery } from '~/store/searchSlice';
import { useSetRecoilState } from 'recoil';
import store from '~/store';
export default function SearchBar({ fetch, clearSearch }) {
const dispatch = useDispatch();
const { inputValue } = useSelector((state) => state.search);
// const dispatch = useDispatch();
const [inputValue, setInputValue] = useState('');
const setSearchQuery = useSetRecoilState(store.searchQuery);
// const [inputValue, setInputValue] = useState('');
const debouncedChangeHandler = useCallback(
debounce((q) => {
dispatch(setQuery(q));
debounce(q => {
setSearchQuery(q);
if (q.length > 0) {
fetch(q, 1);
}
}, 750),
[dispatch]
[setSearchQuery]
);
const handleKeyUp = (e) => {
const handleKeyUp = e => {
const { value } = e.target;
if (e.keyCode === 8 && value === '') {
if (e.keyCode === 8 && value === '') {
// Value after clearing input: ""
console.log(`Value after clearing input: "${value}"`);
dispatch(setQuery(''));
setSearchQuery('');
clearSearch();
}
}
};
const changeHandler = (e) => {
const changeHandler = e => {
let q = e.target.value;
dispatch(setInputValue(q));
setInputValue(q);
q = q.trim();
if (q === '') {
dispatch(setQuery(''));
setSearchQuery('');
clearSearch();
} else {
debouncedChangeHandler(q);