Skip to content

Commit

Permalink
refactor: create new ContentWithTeamFilter wrapping component, use it…
Browse files Browse the repository at this point in the history 
… in pages
  • Loading branch information
@bassgeta
bassgeta committed Sep 19, 2024
1 parent 7ef7cb7 commit 163fd91
Show file tree
Hide file tree
Showing 8 changed files with 97 additions and 87 deletions.
7 changes: 3 additions & 4 deletions src/components/common/ColonyFunding/ColonyFunding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,17 @@ import React from 'react';
import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingContext.ts';
import FundsTable from '~frame/v5/pages/FundsPage/partials/FundsTable/index.ts';
import { formatText } from '~utils/intl.ts';
import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';
import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';

const displayName = 'common.ColonyFunding';

const ColonyFunding = () => {
useSetPageHeadingTitle(formatText({ id: 'incomingFundsPage.title' }));

return (
<div className="flex flex-col gap-8">
<TeamFilter />
<ContentWithTeamFilter>
<FundsTable />
</div>
</ContentWithTeamFilter>
);
};

Expand Down
7 changes: 3 additions & 4 deletions src/components/frame/Extensions/pages/PermissionsPage/PermissionsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from '~routes/index.ts';
import Tabs from '~shared/Extensions/Tabs/index.ts';
import { formatText } from '~utils/intl.ts';
import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';
import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';

import { useGetMembersForPermissions } from './hooks.tsx';
import { PermissionType } from './types.ts';
Expand Down Expand Up @@ -63,8 +63,7 @@ const PermissionsPage: FC = () => {
useSetPageHeadingTitle(formatText({ id: 'permissionsPage.title' }));

return (
<div className="flex flex-col gap-8">
<TeamFilter />
<ContentWithTeamFilter>
<Tabs
activeTab={activeTab}
className="pt-6"
Expand Down Expand Up @@ -96,7 +95,7 @@ const PermissionsPage: FC = () => {
: []),
]}
/>
</div>
</ContentWithTeamFilter>
);
};

Expand Down
29 changes: 14 additions & 15 deletions src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import ColonyActionsTable from '~common/ColonyActionsTable/index.ts';
import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingContext.ts';
import { formatText } from '~utils/intl.ts';
import WidgetBoxList from '~v5/common/WidgetBoxList/index.ts';
import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';
import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';

import { useActivityFeedWidgets } from './hooks.tsx';

Expand All @@ -17,21 +17,20 @@ const ActivityPage: FC = () => {
const widgets = useActivityFeedWidgets();

return (
<div className="flex w-full flex-col gap-4 sm:gap-6">
<div className="mb-2">
<TeamFilter />
<ContentWithTeamFilter>
<div className="flex w-full flex-col gap-4 sm:gap-6">
<WidgetBoxList items={widgets} />
<div>
<FiltersContextProvider>
<ColonyActionsTable
className="[&_tr.expanded-below:not(last-child)_td>*:not(.expandable)]:!pb-2 [&_tr.expanded-below_td]:border-none"
showTotalPagesNumber={false}
hasHorizontalPadding
/>
</FiltersContextProvider>
</div>
</div>
<WidgetBoxList items={widgets} />
<div>
<FiltersContextProvider>
<ColonyActionsTable
className="[&_tr.expanded-below:not(last-child)_td>*:not(.expandable)]:!pb-2 [&_tr.expanded-below_td]:border-none"
showTotalPagesNumber={false}
hasHorizontalPadding
/>
</FiltersContextProvider>
</div>
</div>
</ContentWithTeamFilter>
);
};

Expand Down
9 changes: 3 additions & 6 deletions src/components/frame/v5/pages/AgreementsPage/AgreementsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import { getDraftDecisionFromStore } from '~utils/decisions.ts';
import { formatText } from '~utils/intl.ts';
import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts.ts';
import EmptyContent from '~v5/common/EmptyContent/EmptyContent.tsx';
import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';
import Button from '~v5/shared/Button/Button.tsx';
import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';

import { useFiltersContext } from './FiltersContext/FiltersContext.ts';
import { useGetAgreements } from './hooks.ts';
Expand Down Expand Up @@ -48,10 +48,7 @@ const AgreementsPage: FC = () => {
);

return (
<div>
<div className="mb-8">
<TeamFilter />
</div>
<ContentWithTeamFilter>
{draftAgreement && <DraftSection className="mb-6" />}
<div className="mb-6 flex-col justify-between sm:flex sm:flex-row sm:items-center">
<div className="mb-2.5 flex items-center gap-2 sm:mb-0">
Expand Down Expand Up @@ -139,7 +136,7 @@ const AgreementsPage: FC = () => {
)}
</>
)}
</div>
</ContentWithTeamFilter>
);
};

Expand Down
7 changes: 3 additions & 4 deletions src/components/frame/v5/pages/BalancePage/BalancePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { type FC } from 'react';

import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingContext.ts';
import { formatText } from '~utils/intl.ts';
import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';
import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';

import { FiltersContextProvider } from './partials/BalanceTable/Filters/FiltersContext/index.ts';
import BalanceTable from './partials/BalanceTable/index.ts';
Expand All @@ -13,12 +13,11 @@ const BalancePage: FC = () => {
useSetPageHeadingTitle(formatText({ id: 'navigation.finances.balance' }));

return (
<div className="flex w-full flex-col gap-8">
<TeamFilter />
<ContentWithTeamFilter>
<FiltersContextProvider>
<BalanceTable />
</FiltersContextProvider>
</div>
</ContentWithTeamFilter>
);
};

Expand Down
7 changes: 3 additions & 4 deletions src/components/frame/v5/pages/MembersPage/MembersPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ import { formatMessage } from '~utils/yup/tests/helpers.ts';
import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts.ts';
import Filter from '~v5/common/Filter/index.ts';
import { FilterTypes } from '~v5/common/TableFiltering/types.ts';
import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';
import MeatBallMenu from '~v5/shared/MeatBallMenu/MeatBallMenu.tsx';
import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';

import { useMembersPage } from './hooks.ts';
import { MembersTabContentWrapper } from './partials/MembersTabContent/index.ts';
Expand Down Expand Up @@ -99,8 +99,7 @@ const MembersPage: FC = () => {
]);

return (
<div className="flex flex-col gap-8">
<TeamFilter />
<ContentWithTeamFilter>
<Tabs
activeTab={activeTab}
onTabClick={(_, id) =>
Expand Down Expand Up @@ -165,7 +164,7 @@ const MembersPage: FC = () => {
},
]}
/>
</div>
</ContentWithTeamFilter>
);
};

Expand Down
101 changes: 51 additions & 50 deletions src/components/frame/v5/pages/TeamsPage/TeamsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import { formatText } from '~utils/intl.ts';
import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts.ts';
import EmptyContent from '~v5/common/EmptyContent/EmptyContent.tsx';
import TeamCardList from '~v5/common/TeamCardList/index.ts';
import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';
import Button, { CloseButton } from '~v5/shared/Button/index.ts';
import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';

import { useTeams } from './hooks.tsx';
import TeamsPageFilter from './partials/TeamsPageFilter/TeamsPageFilter.tsx';
Expand All @@ -35,58 +35,59 @@ const TeamsPage: FC = () => {
};

return (
<div className="flex w-full flex-col gap-6">
<div className="mb-2">
<TeamFilter />
</div>
<div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h2 className="text-gray-900 heading-4">
{formatText({ id: 'teamsPage.allTeams' })}
</h2>
<div className="flex items-center gap-2 sm:ml-auto sm:justify-end">
{hasFilterChanged &&
!isEqual(defaultFilterValue, filters.filterValue) &&
!isMobile && (
<div className="inline-flex items-center gap-1 rounded-lg bg-blue-100 px-3 py-2 text-blue-400">
<div className="container text-sm font-semibold capitalize">
{currentFilters.label}:
<ContentWithTeamFilter>
<div className="flex w-full flex-col gap-6">
<div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h2 className="text-gray-900 heading-4">
{formatText({ id: 'teamsPage.allTeams' })}
</h2>
<div className="flex items-center gap-2 sm:ml-auto sm:justify-end">
{hasFilterChanged &&
!isEqual(defaultFilterValue, filters.filterValue) &&
!isMobile && (
<div className="inline-flex items-center gap-1 rounded-lg bg-blue-100 px-3 py-2 text-blue-400">
<div className="container text-sm font-semibold capitalize">
{currentFilters.label}:
</div>
<p className="min-w-fit text-sm">
{currentFilters.direction}
</p>
<CloseButton
iconSize={12}
aria-label={formatText({ id: 'ariaLabel.closeFilter' })}
className="ml-1 shrink-0 !p-0 text-current"
onClick={() => {
filters.onChange(defaultFilterValue);
}}
/>
</div>
<p className="min-w-fit text-sm">{currentFilters.direction}</p>
<CloseButton
iconSize={12}
aria-label={formatText({ id: 'ariaLabel.closeFilter' })}
className="ml-1 shrink-0 !p-0 text-current"
onClick={() => {
filters.onChange(defaultFilterValue);
}}
/>
</div>
)}
<TeamsPageFilter {...filters} />
<Button
onClick={() =>
toggleActionSidebarOn({
[ACTION_TYPE_FIELD_NAME]: Action.CreateNewTeam,
})
}
text={formatText({ id: 'teamsPage.createNewTeam' })}
mode="primarySolid"
size="small"
/>
)}
<TeamsPageFilter {...filters} />
<Button
onClick={() =>
toggleActionSidebarOn({
[ACTION_TYPE_FIELD_NAME]: Action.CreateNewTeam,
})
}
text={formatText({ id: 'teamsPage.createNewTeam' })}
mode="primarySolid"
size="small"
/>
</div>
</div>
{searchedTeams.length > 0 ? (
<TeamCardList items={searchedTeams} />
) : (
<EmptyContent
className="pb-9 pt-10"
title={formatText({ id: 'teamsPage.empty.title' })}
description={formatText({ id: 'teamsPage.empty.description' })}
icon={Binoculars}
withBorder
/>
)}
</div>
{searchedTeams.length > 0 ? (
<TeamCardList items={searchedTeams} />
) : (
<EmptyContent
className="pb-9 pt-10"
title={formatText({ id: 'teamsPage.empty.title' })}
description={formatText({ id: 'teamsPage.empty.description' })}
icon={Binoculars}
withBorder
/>
)}
</div>
</ContentWithTeamFilter>
);
};

Expand Down
17 changes: 17 additions & 0 deletions src/components/v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React, { type FC, type PropsWithChildren } from 'react';

import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';

const displayName = 'v5.frame.ContentWithTeamFilter';

const ContentWithTeamFilter: FC<PropsWithChildren> = ({ children }) => {
return (
<div className="flex flex-col gap-8">
<TeamFilter />
{children}
</div>
);
};

ContentWithTeamFilter.displayName = displayName;
export default ContentWithTeamFilter;

0 comments on commit 163fd91

Please sign in to comment.