Skip to content

Commit

Permalink
fix: proposals page rendering issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@andyesp
andyesp committed Oct 26, 2023
1 parent 71f1c3d commit 05d9fab
Showing 1 changed file with 103 additions and 97 deletions.
200 changes: 103 additions & 97 deletions src/pages/proposals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import Link from '../components/Common/Typography/Link'
import Text from '../components/Common/Typography/Text'
import WiderContainer from '../components/Common/WiderContainer'
import ActionableLayout from '../components/Layout/ActionableLayout'
import LoadingView from '../components/Layout/LoadingView'
import MaintenanceLayout from '../components/Layout/MaintenanceLayout'
import Navigation, { NavigationTab } from '../components/Layout/Navigation'
import ProposalItem from '../components/Proposal/ProposalItem'
Expand Down Expand Up @@ -110,111 +111,116 @@ export default function ProposalsPage() {
<Head title={title} description={description} image="https://decentraland.org/images/decentraland.png" />
<Navigation activeTab={NavigationTab.Proposals} />
<WiderContainer>
<div className="OnlyDesktop">
<RandomBanner isVisible={!searching} />
</div>
{search && (
<NotMobile>
<SearchTitle />
</NotMobile>
)}
<div className="ProposalsPage__Container">
<div className="ProposalsPage__Sidebar">
<NotMobile>
<div>
<CategoryFilter filterType={ProposalType} />
<StatusFilter statusType={ProposalStatus} />
<TimeFrameFilter />
</div>
</NotMobile>
</div>
<div className="ProposalsPage__Content">
{!isLoading && <LoadingView />}
{isLoading && (
<>
<div className="OnlyDesktop">
<RandomBanner isVisible={!searching} />
</div>
{search && (
<Mobile>
<NotMobile>
<SearchTitle />
</Mobile>
</NotMobile>
)}
<ActionableLayout
leftAction={
<Text color="secondary" weight="semi-bold" className="ProposalsPage__ProposalCount">
{t('general.count_proposals', { count: proposals?.total || 0 })}
</Text>
}
rightAction={
<>
<SortingMenu />
<div className="ProposalsPage__Container">
<div className="ProposalsPage__Sidebar">
<NotMobile>
<div>
<CategoryFilter filterType={ProposalType} />
<StatusFilter statusType={ProposalStatus} />
<TimeFrameFilter />
</div>
</NotMobile>
</div>
<div className="ProposalsPage__Content">
{search && (
<Mobile>
<FilterMenu>
<CategoryFilter filterType={ProposalType} />
<StatusFilter statusType={ProposalStatus} />
<TimeFrameFilter />
</FilterMenu>
<SearchTitle />
</Mobile>
<Button
primary
size="small"
className="ProposalsPage__SubmitButton"
as={Link}
href={locations.submit()}
>
{t('page.proposal_list.new_proposal')}
</Button>
</>
}
>
{isLoading && (
<div className="ProposalsPage__LoaderContainer">
<Loader size="medium" active={isLoading} />
</div>
)}
{!isLoading && (
<>
{type && !searching && <CategoryBanner type={type} />}
{proposals && proposals.data.length === 0 && (
<Empty
className="ProposalsPage__Empty"
description={
searching || status || timeFrame?.length > 0
? t('navigation.search.no_matches')
: t('page.proposal_list.no_proposals_yet')
}
/>
)}
{proposals && (
<div className="ProposalsPage__List">
{proposals.data.map((proposal) => {
return isTabletAndBelow ? (
<ProposalItem
key={proposal.id}
proposal={proposal}
hasCoauthorRequest={!!requestsStatus.find((req) => req.proposal_id === proposal.id)}
votes={votes ? votes[proposal.id] : undefined}
/>
) : (
<ProposalPreviewCard
key={proposal.id}
proposal={proposal}
votes={votes ? votes[proposal.id] : undefined}
variant="category"
/>
)
})}
)}
<ActionableLayout
leftAction={
<Text color="secondary" weight="semi-bold" className="ProposalsPage__ProposalCount">
{t('general.count_proposals', { count: proposals?.total || 0 })}
</Text>
}
rightAction={
<>
<SortingMenu />
<Mobile>
<FilterMenu>
<CategoryFilter filterType={ProposalType} />
<StatusFilter statusType={ProposalStatus} />
<TimeFrameFilter />
</FilterMenu>
</Mobile>
<Button
primary
size="small"
className="ProposalsPage__SubmitButton"
as={Link}
href={locations.submit()}
>
{t('page.proposal_list.new_proposal')}
</Button>
</>
}
>
{isLoading && (
<div className="ProposalsPage__LoaderContainer">
<Loader size="medium" active={isLoading} />
</div>
)}
{proposals && proposals.total > ITEMS_PER_PAGE && (
<Pagination
onPageChange={(e, { activePage }) => handlePageFilter(activePage as number)}
totalPages={Math.ceil(proposals.total / ITEMS_PER_PAGE)}
activePage={page}
firstItem={null}
lastItem={null}
/>
{!isLoading && (
<>
{type && !searching && <CategoryBanner type={type} />}
{proposals && proposals.data.length === 0 && (
<Empty
className="ProposalsPage__Empty"
description={
searching || status || timeFrame?.length > 0
? t('navigation.search.no_matches')
: t('page.proposal_list.no_proposals_yet')
}
/>
)}
{proposals && (
<div className="ProposalsPage__List">
{proposals.data.map((proposal) => {
return isTabletAndBelow ? (
<ProposalItem
key={proposal.id}
proposal={proposal}
hasCoauthorRequest={!!requestsStatus.find((req) => req.proposal_id === proposal.id)}
votes={votes ? votes[proposal.id] : undefined}
/>
) : (
<ProposalPreviewCard
key={proposal.id}
proposal={proposal}
votes={votes ? votes[proposal.id] : undefined}
variant="category"
/>
)
})}
</div>
)}
{proposals && proposals.total > ITEMS_PER_PAGE && (
<Pagination
onPageChange={(e, { activePage }) => handlePageFilter(activePage as number)}
totalPages={Math.ceil(proposals.total / ITEMS_PER_PAGE)}
activePage={page}
firstItem={null}
lastItem={null}
/>
)}
</>
)}
</>
)}
</ActionableLayout>
</div>
</div>
</ActionableLayout>
</div>
</div>
</>
)}
</WiderContainer>
</>
)
Expand Down

0 comments on commit 05d9fab

Please sign in to comment.