Skip to content

Commit

Permalink
fix(APP-3649): Add filters/sort, reorganize layout of buttons (#1415)
Browse files Browse the repository at this point in the history 
* chore: add filters/sort, reorganize layout of buttons

* chore: update CTA align

* chore: fix filters count sizing on button

* chore: center + single spinner

* chore: clean up spinner further
  • Loading branch information
@thekidnamedkd
thekidnamedkd authored Nov 6, 2024
1 parent 5b62109 commit 93e661e
Showing 1 changed file with 104 additions and 93 deletions.
197 changes: 104 additions & 93 deletions src/containers/daoExplorer/daoExplorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
import {Toggle, ToggleGroup} from '@aragon/ods';
import {useFeaturedDaos} from 'hooks/useFeaturedDaos';
import classNames from 'classnames';
import {useScreen} from '@aragon/ods-old';

const followedDaoToDao = (dao: NavigationDao): IDao => ({
creatorAddress: '' as Address,
Expand All @@ -42,6 +43,8 @@ export const DaoExplorer = () => {
const {t} = useTranslation();
const {isConnected, address, methods} = useWallet();

const {isMobile} = useScreen();

const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
const [activeDropdown, setActiveDropdown] = useState(false);
const [filters, dispatch] = useReducer(daoFiltersReducer, DEFAULT_FILTERS);
Expand Down Expand Up @@ -151,7 +154,7 @@ export const DaoExplorer = () => {
});
};

const showSortFilter = filters.quickFilter !== 'featuredDaos' && isConnected;
const showSortFilter = filters.quickFilter === 'allDaos';

const filterGroupClassName = classNames('flex justify-between w-full', {
'flex flex-col gap-y-3 md:flex-row md:justify-between': isConnected,
Expand All @@ -166,10 +169,10 @@ export const DaoExplorer = () => {
'flex w-full justify-center md:w-fit': isConnected,
});

const buttonGroupContainerClassName = classNames('shrink-0', {
const buttonGroupContainerClassName = classNames('flex gap-x-3 justify-end', {
'flex md:w-fit': !isConnected && filters.quickFilter === 'featuredDaos',
'flex gap-x-3 w-full md:w-fit justify-between':
isConnected && filters.quickFilter !== 'featuredDaos',
isConnected && filters.quickFilter === 'allDaos',
});

/*************************************************
Expand Down Expand Up @@ -212,81 +215,90 @@ export const DaoExplorer = () => {
size="md"
iconLeft={IconType.FILTER}
onClick={() => setShowAdvancedFilters(true)}
className="!min-w-fit"
>
{filtersCount}
</Button>
{filters.quickFilter !== 'following' && (
<Dropdown.Container
align="end"
open={activeDropdown}
onOpenChange={e => {
setActiveDropdown(e);
}}
customTrigger={
<Button
variant={activeDropdown ? 'secondary' : 'tertiary'}
size="md"
iconLeft={IconType.SORT_DESC}
/>

<Dropdown.Container
align="end"
open={activeDropdown}
onOpenChange={e => {
setActiveDropdown(e);
}}
customTrigger={
<Button
variant={activeDropdown ? 'secondary' : 'tertiary'}
size="md"
iconLeft={IconType.SORT_DESC}
/>
}
>
<Dropdown.Item
icon={
filters.order === 'tvl' ? IconType.CHECKMARK : undefined
}
selected={filters.order === 'tvl'}
onClick={() => toggleOrderby('tvl')}
>
<Dropdown.Item
icon={
filters.order === 'tvl' ? IconType.CHECKMARK : undefined
}
selected={filters.order === 'tvl'}
onClick={() => toggleOrderby('tvl')}
>
{t('explore.sortBy.largestTreasury')}
</Dropdown.Item>
<Dropdown.Item
icon={
filters.order === 'proposals'
? IconType.CHECKMARK
: undefined
}
iconPosition="right"
selected={filters.order === 'proposals'}
onClick={() => toggleOrderby('proposals')}
>
{t('explore.sortBy.mostProposals')}
</Dropdown.Item>
<Dropdown.Item
icon={
filters.order === 'members'
? IconType.CHECKMARK
: undefined
}
iconPosition="right"
selected={filters.order === 'members'}
onClick={() => toggleOrderby('members')}
>
{t('explore.sortBy.largestCommunity')}
</Dropdown.Item>
<Dropdown.Item
icon={
filters.order === 'createdAt'
? IconType.CHECKMARK
: undefined
}
iconPosition="right"
selected={filters.order === 'createdAt'}
onClick={() => toggleOrderby('createdAt')}
>
{t('explore.sortBy.recentlyCreated')}
</Dropdown.Item>
</Dropdown.Container>
)}
{t('explore.sortBy.largestTreasury')}
</Dropdown.Item>
<Dropdown.Item
icon={
filters.order === 'proposals'
? IconType.CHECKMARK
: undefined
}
iconPosition="right"
selected={filters.order === 'proposals'}
onClick={() => toggleOrderby('proposals')}
>
{t('explore.sortBy.mostProposals')}
</Dropdown.Item>
<Dropdown.Item
icon={
filters.order === 'members'
? IconType.CHECKMARK
: undefined
}
iconPosition="right"
selected={filters.order === 'members'}
onClick={() => toggleOrderby('members')}
>
{t('explore.sortBy.largestCommunity')}
</Dropdown.Item>
<Dropdown.Item
icon={
filters.order === 'createdAt'
? IconType.CHECKMARK
: undefined
}
iconPosition="right"
selected={filters.order === 'createdAt'}
onClick={() => toggleOrderby('createdAt')}
>
{t('explore.sortBy.recentlyCreated')}
</Dropdown.Item>
</Dropdown.Container>
</div>
)}
<Button
size="md"
href="/#/create"
onClick={handleWalletButtonClick}
className="w-fit"
>
{t('cta.create.actionLabel')}
</Button>
{isMobile && !isConnected && filters.quickFilter === 'allDaos' ? (
<Button
size="md"
href="/#/create"
onClick={handleWalletButtonClick}
iconLeft={IconType.PLUS}
/>
) : (
<Button
size="md"
href="/#/create"
onClick={handleWalletButtonClick}
className="shrink-0"
>
{t('cta.create.actionLabel')}
</Button>
)}
</div>
</div>
{noDaosFound || noFeaturedDaosFound ? (
Expand All @@ -302,29 +314,28 @@ export const DaoExplorer = () => {
}}
/>
) : (
<CardsWrapper>
{filters.quickFilter === 'featuredDaos' ? (
<>
{featuredDaoList?.map(
(dao: IDao, index: React.Key | null | undefined) => (
<DaoCard key={index} dao={dao} />
)
)}
{isLoadingFeaturedDaos && (
<Spinner size="xl" variant="primary" />
)}
</>
) : (
<>
{filteredDaoList?.map(
(dao: IDao, index: React.Key | null | undefined) => (
<DaoCard key={index} dao={dao} />
)
)}
{isLoading && <Spinner size="xl" variant="primary" />}
</>
<>
{((filters.quickFilter !== 'featuredDaos' && isLoading) ||
(filters.quickFilter === 'featuredDaos' &&
isLoadingFeaturedDaos)) && (
<div className="flex h-40 w-full grow items-center justify-center md:h-72">
<Spinner size="xl" variant="primary" />
</div>
)}
</CardsWrapper>
<CardsWrapper>
{filters.quickFilter === 'featuredDaos'
? featuredDaoList?.map(
(dao: IDao, index: React.Key | null | undefined) => (
<DaoCard key={index} dao={dao} />
)
)
: filteredDaoList?.map(
(dao: IDao, index: React.Key | null | undefined) => (
<DaoCard key={index} dao={dao} />
)
)}
</CardsWrapper>
</>
)}
</MainContainer>
{totalDaos != null &&
Expand Down

0 comments on commit 93e661e

Please sign in to comment.