New page structure (twentyhq#1377)

* - new page structure * - removed unecessary task changes * - handleClick -> onClick
xprnio · Aug 30, 2023 · fa33506 · fa33506
1 parent 85155a6
commit fa33506
Show file tree

Hide file tree

Showing 14 changed files with 182 additions and 282 deletions.
diff --git a/front/src/modules/ui/layout/components/PageAddButton.tsx b/front/src/modules/ui/layout/components/PageAddButton.tsx
@@ -0,0 +1,19 @@
+import { IconButton } from '@/ui/button/components/IconButton';
+import { IconPlus } from '@/ui/icon';
+
+type OwnProps = {
+  onClick: () => void;
+};
+
+export function PageAddButton({ onClick }: OwnProps) {
+  return (
+    <IconButton
+      icon={<IconPlus size={16} />}
+      size="medium"
+      variant="secondary"
+      data-testid="add-button"
+      accent="default"
+      onClick={onClick}
+    />
+  );
+}
diff --git a/front/src/modules/ui/layout/components/PageBody.tsx b/front/src/modules/ui/layout/components/PageBody.tsx
@@ -1,5 +1,4 @@
-import { PAGE_BAR_MIN_HEIGHT } from '../page-bar/components/PageBar';
-
+import { PAGE_BAR_MIN_HEIGHT } from './PageHeader';
 import { RightDrawerContainer } from './RightDrawerContainer';
 
 type OwnProps = {

diff --git a/front/src/modules/ui/layout/components/PageFavoriteButton.tsx b/front/src/modules/ui/layout/components/PageFavoriteButton.tsx
@@ -0,0 +1,20 @@
+import { IconButton } from '@/ui/button/components/IconButton';
+import { IconHeart } from '@/ui/icon';
+
+type OwnProps = {
+  isFavorite: boolean;
+  onClick: () => void;
+};
+
+export function PageFavoriteButton({ isFavorite, onClick }: OwnProps) {
+  return (
+    <IconButton
+      icon={<IconHeart size={16} />}
+      size="medium"
+      variant="secondary"
+      data-testid="add-button"
+      accent={isFavorite ? 'danger' : 'default'}
+      onClick={onClick}
+    />
+  );
+}
diff --git a/front/src/modules/ui/layout/components/PageHeader.tsx b/front/src/modules/ui/layout/components/PageHeader.tsx
@@ -67,7 +67,7 @@ type OwnProps = {
   title: string;
   hasBackButton?: boolean;
   icon: ReactNode;
-  children: JSX.Element | JSX.Element[];
+  children?: JSX.Element | JSX.Element[];
 };
 
 export function PageHeader({ title, hasBackButton, icon, children }: OwnProps) {

diff --git a/...ut/page-bar/components/PageBarHotkeys.tsx → ...ules/ui/layout/components/PageHotkeys.tsx b/...ut/page-bar/components/PageBarHotkeys.tsx → ...ules/ui/layout/components/PageHotkeys.tsx
@@ -5,7 +5,7 @@ type OwnProps = {
   onAddButtonClick?: () => void;
 };
 
-export function PageBarHotkeys({ onAddButtonClick }: OwnProps) {
+export function PageHotkeys({ onAddButtonClick }: OwnProps) {
   useScopedHotkeys('c', () => onAddButtonClick?.(), TableHotkeyScope.Table, [
     onAddButtonClick,
   ]);

diff --git a/front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx b/front/src/modules/ui/layout/components/SubMenuTopBarContainer.tsx
@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
-import { PageBar } from '../page-bar/components/PageBar';
-
+import { PageHeader } from './PageHeader';
 import { RightDrawerContainer } from './RightDrawerContainer';
 
 type OwnProps = {
@@ -24,7 +23,7 @@ export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) {
 
   return (
     <StyledContainer isMobile={isMobile}>
-      {isMobile && <PageBar title={title} icon={icon} />}
+      {isMobile && <PageHeader title={title} icon={icon} />}
       <RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
     </StyledContainer>
   );

diff --git a/front/src/modules/ui/layout/components/WithTopBarContainer.tsx b/front/src/modules/ui/layout/components/WithTopBarContainer.tsx
diff --git a/front/src/modules/ui/layout/page-bar/components/PageBar.tsx b/front/src/modules/ui/layout/page-bar/components/PageBar.tsx
diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx
@@ -6,8 +6,13 @@ import { v4 } from 'uuid';
 import { CompanyTable } from '@/companies/table/components/CompanyTable';
 import { SEARCH_COMPANY_QUERY } from '@/search/graphql/queries/searchCompanyQuery';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
+import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { IconBuildingSkyscraper } from '@/ui/icon';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { PageAddButton } from '@/ui/layout/components/PageAddButton';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
+import { PageHotkeys } from '@/ui/layout/components/PageHotkeys';
 import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
 import { EntityTableContextMenu } from '@/ui/table/context-menu/components/EntityTableContextMenu';
 import { useUpsertEntityTableItem } from '@/ui/table/hooks/useUpsertEntityTableItem';
@@ -66,22 +71,29 @@ export function Companies() {
 
   return (
     <SpreadsheetImportProvider>
-      <WithTopBarContainer
-        title="Companies"
-        icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
-        onAddButtonClick={handleAddButtonClick}
-      >
-        <RecoilScope
-          scopeId="companies"
-          SpecificContext={TableRecoilScopeContext}
+      <PageContainer>
+        <PageHeader
+          title="Companies"
+          icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
         >
-          <StyledTableContainer>
-            <CompanyTable />
-          </StyledTableContainer>
-          <EntityTableActionBar />
-          <EntityTableContextMenu />
-        </RecoilScope>
-      </WithTopBarContainer>
+          <RecoilScope SpecificContext={DropdownRecoilScopeContext}>
+            <PageHotkeys onAddButtonClick={handleAddButtonClick} />
+            <PageAddButton onClick={handleAddButtonClick} />
+          </RecoilScope>
+        </PageHeader>
+        <PageBody>
+          <RecoilScope
+            scopeId="companies"
+            SpecificContext={TableRecoilScopeContext}
+          >
+            <StyledTableContainer>
+              <CompanyTable />
+            </StyledTableContainer>
+            <EntityTableActionBar />
+            <EntityTableContextMenu />
+          </RecoilScope>
+        </PageBody>
+      </PageContainer>
     </SpreadsheetImportProvider>
   );
 }
diff --git a/front/src/pages/companies/CompaniesMockMode.tsx b/front/src/pages/companies/CompaniesMockMode.tsx
@@ -3,7 +3,9 @@ import styled from '@emotion/styled';
 
 import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
 import { IconBuildingSkyscraper } from '@/ui/icon';
-import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { PageBody } from '@/ui/layout/components/PageBody';
+import { PageContainer } from '@/ui/layout/components/PageContainer';
+import { PageHeader } from '@/ui/layout/components/PageHeader';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
@@ -16,17 +18,18 @@ export function CompaniesMockMode() {
   const theme = useTheme();
 
   return (
-    <>
-      <WithTopBarContainer
+    <PageContainer>
+      <PageHeader
         title="Companies"
         icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
-      >
+      />
+      <PageBody>
         <RecoilScope SpecificContext={TableRecoilScopeContext}>
           <StyledTableContainer>
             <CompanyTableMockMode />
           </StyledTableContainer>
         </RecoilScope>
-      </WithTopBarContainer>
-    </>
+      </PageBody>
+    </PageContainer>
   );
 }