Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 649 search screen back and forward browsers actions reacting on typying #660

Merged
merged 6 commits into from
Aug 13, 2024
Merged

fix: 649 search screen back and forward browsers actions reacting on typying #660

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9060b87
don't update searchParams every time a keystroke is types
qcdyx Aug 6, 2024
96da011
set search params in URL in handleSearch
qcdyx Aug 6, 2024
aff40be
update q only when there is a query
qcdyx Aug 6, 2024
8c15bde
1. Refactored `handleSearch` to prevent multiple `setSearchParams` ca…
qcdyx Aug 9, 2024
bb8dbfd
updated searchQuery when back nav is clicked
qcdyx Aug 12, 2024
ce83a07
Merge branch 'main' into 649-search-screen-back-and-forward-browsers-…
qcdyx Aug 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 44 additions & 46 deletions web-app/src/app/screens/Feeds/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,11 @@ export default function Feed(): React.ReactElement {
const [selectedFeedTypes, setSelectedFeedTypes] = useState(
getInitialSelectedFeedTypes(searchParams),
);
const [activeSearch, setActiveSearch] = useState('');
const [activeSearch, setActiveSearch] = useState(searchParams.get('q') ?? '');
const [searchQuery, setSearchQuery] = useState(activeSearch);
qcdyx marked this conversation as resolved.
Show resolved Hide resolved
const [activePagination, setActivePagination] = useState(
searchParams.get('o') !== null ? Number(searchParams.get('o')) : 1,
);
const [triggerSearch, setTriggerSearch] = useState(false);
const user = useSelector(selectUserProfile);
const dispatch = useAppDispatch();
const feedsData = useSelector(selectFeedsData);
Expand All @@ -89,43 +89,49 @@ export default function Feed(): React.ReactElement {
return paginationOffset;
};

const handleSearch = (): void => {
const searchQuery = searchParams.get('q') ?? '';
const paginationOffset = getPaginationOffset();
if (user !== undefined) {
dispatch(
loadingFeeds({
params: {
query: {
limit: searchLimit,
offset: paginationOffset,
search_query: searchQuery,
data_type:
getDataTypeParamFromSelectedFeedTypes(selectedFeedTypes),
// Fixed status values for now, until a status filter is implemented
// Filtering out deprecated feeds
status: ['active', 'inactive', 'development'],
},
useEffect(() => {
if (user == null) return;

const paginationOffset = getPaginationOffset(activePagination);
dispatch(
loadingFeeds({
params: {
query: {
limit: searchLimit,
offset: paginationOffset,
search_query: activeSearch,
data_type: getDataTypeParamFromSelectedFeedTypes(selectedFeedTypes),
// Fixed status values for now, until a status filter is implemented
// Filtering out deprecated feeds
status: ['active', 'inactive', 'development'],
},
}),
);
setActiveSearch(searchQuery);
}
};
},
}),
);
}, [user, activeSearch, activePagination, selectedFeedTypes, searchLimit]);

useEffect(() => {
handleSearch();
}, [user]);
const oldSearch = searchParams.get('q') ?? '';
const oldPagination =
searchParams.get('o') !== null ? Number(searchParams.get('o')) : 1;
if (oldSearch === activeSearch && oldPagination === activePagination) {
return;
}

useEffect(() => {
if (!triggerSearch) return;
handleSearch();
setTriggerSearch(false);
}, [triggerSearch]);
const newSearchParams = new URLSearchParams();
newSearchParams.set('q', activeSearch);
if (activePagination !== 1) {
newSearchParams.set('o', activePagination.toString());
}
setSearchParams(newSearchParams);
}, [activeSearch, activePagination]);

useEffect(() => {
handleSearch();
}, [selectedFeedTypes]);
const newQeury = searchParams.get('q') ?? '';
if (newQeury !== searchQuery) {
setSearchQuery(newQeury);
}
}, [searchParams]);

const getSearchResultNumbers = (): string => {
if (feedsData?.total !== undefined && feedsData?.total > 0) {
Expand Down Expand Up @@ -166,19 +172,18 @@ export default function Feed(): React.ReactElement {
onSubmit={(event) => {
event.preventDefault();
setActivePagination(1);
handleSearch();
setActiveSearch(searchQuery);
}}
sx={{ display: 'flex', width: '100%', alignItems: 'center' }}
>
<TextField
sx={{
width: 'calc(100% - 100px)',
}}
value={searchParams.get('q') ?? ''}
value={searchQuery}
placeholder={t('searchPlaceholder')}
onChange={(e) => {
const searchValue = e.target.value;
setSearchParams({ q: searchValue });
setSearchQuery(e.target.value);
}}
InputProps={{
startAdornment: (
Expand All @@ -188,7 +193,7 @@ export default function Feed(): React.ReactElement {
}}
onClick={() => {
setActivePagination(1);
handleSearch();
setActiveSearch(searchQuery);
}}
position='start'
>
Expand Down Expand Up @@ -230,7 +235,6 @@ export default function Feed(): React.ReactElement {
<Checkbox
checked={selectedFeedTypes.gtfs}
onChange={(e) => {
setSearchParams({ q: activeSearch });
setActivePagination(1);
setSelectedFeedTypes({
...selectedFeedTypes,
Expand All @@ -246,7 +250,6 @@ export default function Feed(): React.ReactElement {
<Checkbox
checked={selectedFeedTypes.gtfs_rt}
onChange={(e) => {
setSearchParams({ q: activeSearch });
setActivePagination(1);
setSelectedFeedTypes({
...selectedFeedTypes,
Expand Down Expand Up @@ -334,7 +337,7 @@ export default function Feed(): React.ReactElement {
},
}}
color='primary'
defaultPage={activePagination}
page={activePagination}
shape='rounded'
count={
feedsData.total !== undefined
Expand All @@ -343,12 +346,7 @@ export default function Feed(): React.ReactElement {
}
onChange={(event, value) => {
event.preventDefault();
setSearchParams({
q: activeSearch,
o: String(value),
});
setActivePagination(value);
setTriggerSearch(true);
}}
/>
</TableContainer>
Expand Down
Loading