Skip to content

Commit

Permalink
fix: filtering
Browse files Browse the repository at this point in the history
  • Loading branch information
@Argeare5
Argeare5 committed Jan 14, 2025
1 parent 38e2933 commit ea0ca8c
Show file tree
Hide file tree
Showing 7 changed files with 73 additions and 56 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
"final-form-arrays": "^3.1.0",
"gray-matter": "^4.0.3",
"immer": "^10.1.1",
"lodash.debounce": "^4.0.8",
"next": "14.2.21",
"next-themes": "0.3.0",
"nextjs-toploader": "^3.7.15",
Expand Down Expand Up @@ -92,6 +93,7 @@
"@svgr/webpack": "^8.1.0",
"@types/dom-css": "^2.1.1",
"@types/lodash": "^4.17.14",
"@types/lodash.debounce": "^4.0.9",
"@types/node": "^22.10.5",
"@types/nprogress": "^0.2.3",
"@types/numeral": "^2.0.5",
Expand Down
13 changes: 13 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

28 changes: 18 additions & 10 deletions src/components/Pagination.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, useTheme } from '@mui/system';
import { useTheme } from '@mui/system';
import InitialPagination from 'rc-pagination';
import React, { useState } from 'react';

Expand Down Expand Up @@ -228,6 +228,9 @@ export function Pagination({
'a, .Pagination_item': {
cursor: 'default',
color: '$text',
span: {
color: theme.palette.$text,
},
'&:after': {
backgroundColor: '$text',
width: '100%',
Expand All @@ -247,7 +250,7 @@ export function Pagination({
},
},
'&:active': {
a: {
'a, .Pagination_item': {
span: {
backgroundColor: '$light',
},
Expand Down Expand Up @@ -278,11 +281,12 @@ export function Pagination({
itemRender={(current, type) => {
if (type === 'page') {
return setCurrentPageState && filtering ? (
<Box
<button
type="button"
className="Pagination_item"
onClick={() => setCurrentPageState(current)}>
<span>{current}</span>
</Box>
</button>
) : payloadsChainId && payloadsController ? (
<Link
href={ROUTES.payloadsExplorerPages(
Expand All @@ -301,7 +305,8 @@ export function Pagination({
}
if (type === 'prev') {
return setCurrentPageState && filtering ? (
<Box
<button
type="button"
className="Pagination_item"
onClick={() => setCurrentPageState(current)}
/>
Expand All @@ -320,7 +325,8 @@ export function Pagination({
}
if (type === 'next') {
return setCurrentPageState && filtering ? (
<Box
<button
type="button"
className="Pagination_item"
onClick={() => setCurrentPageState(current)}
/>
Expand All @@ -339,11 +345,12 @@ export function Pagination({
}
if (type === 'jump-prev') {
return setCurrentPageState && filtering ? (
<Box
<button
type="button"
className="Pagination_item"
onClick={() => setCurrentPageState(current)}>
<span>...</span>
</Box>
</button>
) : payloadsChainId && payloadsController ? (
<Link
href={ROUTES.payloadsExplorerPages(
Expand All @@ -362,11 +369,12 @@ export function Pagination({
}
if (type === 'jump-next') {
return setCurrentPageState && filtering ? (
<Box
<button
type="button"
className="Pagination_item"
onClick={() => setCurrentPageState(current)}>
<span>...</span>
</Box>
</button>
) : payloadsChainId && payloadsController ? (
<Link
href={ROUTES.payloadsExplorerPages(
Expand Down
51 changes: 29 additions & 22 deletions src/components/ProposalsList/FiltersPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Box, useTheme } from '@mui/system';
import debounce from 'lodash.debounce';
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { mainnet } from 'viem/chains';

import { appConfig } from '../../configs/appConfig';
import { proposalStatusesForFilter } from '../../helpers/statuses';
import { texts } from '../../helpers/texts/texts';
import { useDebounce } from '../../hooks/useDebounce';
import { useStore } from '../../providers/ZustandStoreProvider';
import { CustomSkeleton } from '../primitives/CustomSkeleton';
import { TopPanelContainer } from '../TopPanelContainer';
Expand Down Expand Up @@ -127,31 +127,30 @@ export function FiltersPanel() {

const [isSearchButtonOpen, setIsSearchButtonOpen] = useState(false);
const [searchValue, setSearchValue] = useState<string | null>(filters.title);
const debouncedSearchValue = useDebounce<string | null>(searchValue, 1000);

const handleSearchValueChange = (value: string | null) => {
setSearchValue(value);
};

useEffect(() => {
if (isSearchButtonOpen) {
if (
typeof debouncedSearchValue === 'string' &&
debouncedSearchValue !== ''
) {
setTitleFilter(searchValue, router, false, true);
}
}
if ((searchValue === null || searchValue === '') && isSearchButtonOpen) {
setTitleFilter(null, router, false, true);
if (searchValue !== '' && searchValue !== null) {
setIsSearchButtonOpen(true);
}
}, [debouncedSearchValue, isSearchButtonOpen]);
}, []);

const debouncedSearch = useRef(
debounce(async (value: string | null) => {
await setTitleFilter(value, router);
}, 1000),
).current;

useEffect(() => {
return () => {
debouncedSearch.cancel();
};
}, [debouncedSearch]);

const setFilteredStateLocal = (status: number | null) => {
const setFilteredStateLocal = async (status: number | null) => {
if (!!status || status === 0) {
setStateFilter(Number(status), router);
await setStateFilter(Number(status), router);
} else {
setStateFilter(null, router);
await setStateFilter(null, router);
}
};

Expand All @@ -176,7 +175,15 @@ export function FiltersPanel() {
isOpen={isSearchButtonOpen}
setIsOpen={setIsSearchButtonOpen}
searchValue={searchValue}
setSearchValue={handleSearchValueChange}
setSearchValue={async (value) => {
if (
(searchValue !== null && searchValue !== '') ||
(value !== '' && value !== null)
) {
await debouncedSearch(value);
}
setSearchValue(value);
}}
disabled={appConfig.govCoreChainId !== mainnet.id}
/>

Expand Down
12 changes: 3 additions & 9 deletions src/components/ProposalsList/SearchButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { Box, styled, useTheme } from '@mui/system';
import { useRouter } from 'next/navigation';
import React, { useRef, useState } from 'react';

import SearchIcon from '../../assets/icons/searchIcon.svg';
import { texts } from '../../helpers/texts/texts';
import { useStore } from '../../providers/ZustandStoreProvider';
import { BoxWith3D } from '../BoxWith3D';
import { InputWrapper } from '../InputWrapper';
import { IconBox } from '../primitives/IconBox';
Expand Down Expand Up @@ -38,7 +36,7 @@ interface SearchButtonProps {
isOpen: boolean;
setIsOpen: (value: boolean) => void;
searchValue: string | null;
setSearchValue: (value: string) => void;
setSearchValue: (value: string | null) => void;
disabled?: boolean;
}

Expand All @@ -49,9 +47,7 @@ export function SearchButton({
setSearchValue,
disabled,
}: SearchButtonProps) {
const router = useRouter();
const theme = useTheme();
const setTitleFilter = useStore((store) => store.setTitleFilter);

const [isHovered, setIsHovered] = useState(false);

Expand Down Expand Up @@ -156,9 +152,8 @@ export function SearchButton({
}}>
<InputWrapper
onCrossClick={() => {
setSearchValue('');
setSearchValue(null);
setIsOpen(false);
setTitleFilter(null, router, false, true);
}}>
<Input
ref={ref}
Expand Down Expand Up @@ -211,9 +206,8 @@ export function SearchButton({
}}>
<InputWrapper
onCrossClick={() => {
setSearchValue('');
setSearchValue(null);
setIsOpen(false);
setTitleFilter(null, router, false, true);
}}>
<Input
ref={refMobile}
Expand Down
14 changes: 0 additions & 14 deletions src/hooks/useDebounce.ts
View file

This file was deleted.

9 changes: 8 additions & 1 deletion src/store/proposalsListSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,6 @@ export const createProposalsListSlice: StoreSlice<
produce(state, (draft) => {
draft.filters = {
...draft.filters,
activePage: 1,
title: value,
};
}),
Expand All @@ -379,6 +378,14 @@ export const createProposalsListSlice: StoreSlice<
}
if (!withoutRequest) {
await get().updateFilteredData(withoutLoading);
set((state) =>
produce(state, (draft) => {
draft.filters = {
...draft.filters,
activePage: 1,
};
}),
);
}
},
setActivePageFilter: async (value, withoutRequest) => {
Expand Down

1 comment on commit ea0ca8c

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit was deployed on ipfs

Please sign in to comment.