feat: search working as expected

This commit is contained in:
Daniel Avila 2023-03-18 17:49:24 -04:00
parent da42d6272a
commit 4197a92609
5 changed files with 60 additions and 51 deletions

View file

@ -3,31 +3,15 @@ import { debounce } from 'lodash';
import { useDispatch } from 'react-redux';
import { Search } from 'lucide-react';
import { setQuery } from '~/store/searchSlice';
import { setConvos, refreshConversation } from '~/store/convoSlice';
import axios from 'axios';
// const fetch = async (q, pageNumber, callback) => {
// const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`);
// console.log(data);
// callback(data);
// };
export default function SearchBar({ fetch, onSuccess, clearSearch }) {
export default function SearchBar({ fetch, clearSearch }) {
const dispatch = useDispatch();
const [inputValue, setInputValue] = useState('');
// const onSuccess = (data) => {
// const { conversations, pages, pageNumber } = data;
// dispatch(setConvos({ convos: conversations, searchFetch: true }));
// dispatch(setPage(pageNumber));
// dispatch(setPages(pages));
// };
const debouncedChangeHandler = useCallback(
debounce((q) => {
dispatch(setQuery(q));
if (q.length > 0) {
// fetch(q, 1, onSuccess);
fetch(q, 1);
}
}, 750),
@ -46,19 +30,12 @@ export default function SearchBar({ fetch, onSuccess, clearSearch }) {
const changeHandler = (e) => {
// if (!search) {
// console.log('setting page to 1');
// dispatch(setPage(1));
// }
let q = e.target.value;
setInputValue(q);
q = q.trim();
if (q === '') {
dispatch(setQuery(''));
// dispatch(setPage(1));
// dispatch(refreshConversation());
clearSearch();
} else {
debouncedChangeHandler(q);

View file

@ -6,17 +6,10 @@ import Spinner from '../svg/Spinner';
import Pages from '../Conversations/Pages';
import Conversations from '../Conversations';
import NavLinks from './NavLinks';
import { swr } from '~/utils/fetchers';
import { searchFetcher, swr } from '~/utils/fetchers';
import { useDispatch, useSelector } from 'react-redux';
import { setConvos, refreshConversation } from '~/store/convoSlice';
const fetcher = async (pre, q, pageNumber, callback) => {
pre();
const { data } = await axios.get(`/api/search?q=${q}&pageNumber=${pageNumber}`);
console.log(data);
callback(data);
};
export default function Nav({ navVisible, setNavVisible }) {
const dispatch = useDispatch();
const [isHovering, setIsHovering] = useState(false);
@ -51,7 +44,7 @@ export default function Nav({ navVisible, setNavVisible }) {
setIsFetching(false);
};
const fetch = useCallback(_.partialRight(fetcher.bind(null, () => setIsFetching(true)), onSearchSuccess), [dispatch]);
const fetch = useCallback(_.partialRight(searchFetcher.bind(null, () => setIsFetching(true)), onSearchSuccess), [dispatch]);
const clearSearch = () => {
setPage(1);
@ -79,7 +72,6 @@ export default function Nav({ navVisible, setNavVisible }) {
setPage((prev) => prev + 1);
await mutate();
} else {
// await fetch(query, +pageNumber + 1, onSearchSuccess);
await fetch(query, +pageNumber + 1);
}
};
@ -91,7 +83,6 @@ export default function Nav({ navVisible, setNavVisible }) {
setPage((prev) => prev - 1);
await mutate();
} else {
// await fetch(query, +pageNumber - 1, onSearchSuccess);
await fetch(query, +pageNumber - 1);
}
};
@ -111,7 +102,7 @@ export default function Nav({ navVisible, setNavVisible }) {
container.scrollTop = Math.min(maxScrollTop, scrollPositionRef.current);
}
}, [data]);
}, [data, convos]);
useEffect(() => {
setNavVisible(false);