From 163fd9143361022147117bfce837ef25501b9644 Mon Sep 17 00:00:00 2001
From: Bassgeta <kerry.mahne@gmail.com>
Date: Thu, 19 Sep 2024 12:06:15 +0200
Subject: [PATCH] refactor: create new ContentWithTeamFilter wrapping
 component, use it in pages

---
 .../common/ColonyFunding/ColonyFunding.tsx    |   7 +-
 .../pages/PermissionsPage/PermissionsPage.tsx |   7 +-
 .../v5/pages/ActivityPage/ActivityPage.tsx    |  29 +++--
 .../pages/AgreementsPage/AgreementsPage.tsx   |   9 +-
 .../v5/pages/BalancePage/BalancePage.tsx      |   7 +-
 .../v5/pages/MembersPage/MembersPage.tsx      |   7 +-
 .../frame/v5/pages/TeamsPage/TeamsPage.tsx    | 101 +++++++++---------
 .../ContentWithTeamFilter.tsx                 |  17 +++
 8 files changed, 97 insertions(+), 87 deletions(-)
 create mode 100644 src/components/v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx

diff --git a/src/components/common/ColonyFunding/ColonyFunding.tsx b/src/components/common/ColonyFunding/ColonyFunding.tsx
index 6f11fcce02..c2b1e57158 100644
--- a/src/components/common/ColonyFunding/ColonyFunding.tsx
+++ b/src/components/common/ColonyFunding/ColonyFunding.tsx
@@ -3,7 +3,7 @@ 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';
 
@@ -11,10 +11,9 @@ const ColonyFunding = () => {
   useSetPageHeadingTitle(formatText({ id: 'incomingFundsPage.title' }));
 
   return (
-    <div className="flex flex-col gap-8">
-      <TeamFilter />
+    <ContentWithTeamFilter>
       <FundsTable />
-    </div>
+    </ContentWithTeamFilter>
   );
 };
 
diff --git a/src/components/frame/Extensions/pages/PermissionsPage/PermissionsPage.tsx b/src/components/frame/Extensions/pages/PermissionsPage/PermissionsPage.tsx
index 5834590f60..b7329edd26 100644
--- a/src/components/frame/Extensions/pages/PermissionsPage/PermissionsPage.tsx
+++ b/src/components/frame/Extensions/pages/PermissionsPage/PermissionsPage.tsx
@@ -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';
@@ -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"
@@ -96,7 +95,7 @@ const PermissionsPage: FC = () => {
             : []),
         ]}
       />
-    </div>
+    </ContentWithTeamFilter>
   );
 };
 
diff --git a/src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx b/src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx
index e54303707e..c0dbec477b 100644
--- a/src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx
+++ b/src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx
@@ -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';
 
@@ -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>
   );
 };
 
diff --git a/src/components/frame/v5/pages/AgreementsPage/AgreementsPage.tsx b/src/components/frame/v5/pages/AgreementsPage/AgreementsPage.tsx
index 7db6483b90..a23f39a5ac 100644
--- a/src/components/frame/v5/pages/AgreementsPage/AgreementsPage.tsx
+++ b/src/components/frame/v5/pages/AgreementsPage/AgreementsPage.tsx
@@ -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';
@@ -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">
@@ -139,7 +136,7 @@ const AgreementsPage: FC = () => {
             )}
         </>
       )}
-    </div>
+    </ContentWithTeamFilter>
   );
 };
 
diff --git a/src/components/frame/v5/pages/BalancePage/BalancePage.tsx b/src/components/frame/v5/pages/BalancePage/BalancePage.tsx
index a04d0aedb0..152d814655 100644
--- a/src/components/frame/v5/pages/BalancePage/BalancePage.tsx
+++ b/src/components/frame/v5/pages/BalancePage/BalancePage.tsx
@@ -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';
@@ -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>
   );
 };
 
diff --git a/src/components/frame/v5/pages/MembersPage/MembersPage.tsx b/src/components/frame/v5/pages/MembersPage/MembersPage.tsx
index 0ddef8b021..816745854c 100644
--- a/src/components/frame/v5/pages/MembersPage/MembersPage.tsx
+++ b/src/components/frame/v5/pages/MembersPage/MembersPage.tsx
@@ -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';
@@ -99,8 +99,7 @@ const MembersPage: FC = () => {
   ]);
 
   return (
-    <div className="flex flex-col gap-8">
-      <TeamFilter />
+    <ContentWithTeamFilter>
       <Tabs
         activeTab={activeTab}
         onTabClick={(_, id) =>
@@ -165,7 +164,7 @@ const MembersPage: FC = () => {
           },
         ]}
       />
-    </div>
+    </ContentWithTeamFilter>
   );
 };
 
diff --git a/src/components/frame/v5/pages/TeamsPage/TeamsPage.tsx b/src/components/frame/v5/pages/TeamsPage/TeamsPage.tsx
index 21d894b833..639ab273a9 100644
--- a/src/components/frame/v5/pages/TeamsPage/TeamsPage.tsx
+++ b/src/components/frame/v5/pages/TeamsPage/TeamsPage.tsx
@@ -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';
@@ -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>
   );
 };
 
diff --git a/src/components/v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx b/src/components/v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx
new file mode 100644
index 0000000000..0c3abe72a1
--- /dev/null
+++ b/src/components/v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx
@@ -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;