admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add page titles using React Helmet (#1321)

Browse Source 
* feat: add page titles using React Helmet

* refactor: extract page title logic to separate component

* fix: resolve review comments

* fix: resolve testing errors
This commit is contained in:
Mustajab Ikram
2023-08-28 22:19:04 +05:30
committed by GitHub
parent 74919eff7a
commit 8bb4071f09
10 changed files with 242 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
front/src/pages/companies/CompanyShow.tsx
View File

@ -17,6 +17,7 @@ import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPage
import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer';
import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
import { ShowPageRecoilScopeContext } from '@/ui/layout/states/ShowPageRecoilScopeContext';
import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
@ -45,66 +46,71 @@ export function CompanyShow() {
}
return (
<WithTopBarContainer
title={company.name ?? ''}
hasBackButton
isFavorite={isFavorite}
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
onFavoriteButtonClick={handleFavoriteButtonClick}
extraButtons={[
<ShowPageAddButton
key="add"
entity={{
id: company.id,
type: ActivityTargetableEntityType.Company,
}}
/>,
]}
>
<RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
<ShowPageContainer>
<ShowPageLeftContainer>
<ShowPageSummaryCard
id={company.id}
logoOrAvatar={getLogoUrlFromDomainName(company.domainName ?? '')}
title={company.name ?? 'No name'}
date={company.createdAt ?? ''}
renderTitleEditComponent={() => (
<CompanyNameEditableField company={company} />
)}
/>
<PropertyBox extraPadding={true}>
<EditableFieldMutationContext.Provider
value={useUpdateOneCompanyMutation}
>
<EditableFieldEntityIdContext.Provider value={company.id}>
{companyShowFieldDefinition.map((fieldDefinition) => {
return (
<EditableFieldDefinitionContext.Provider
value={fieldDefinition}
key={fieldDefinition.id}
>
<GenericEditableField />
</EditableFieldDefinitionContext.Provider>
);
})}
</EditableFieldEntityIdContext.Provider>
</EditableFieldMutationContext.Provider>
</PropertyBox>
<CompanyTeam company={company}></CompanyTeam>
</ShowPageLeftContainer>
<ShowPageRightContainer
<>
<PageTitle title={company.name || 'No Name'} />
<WithTopBarContainer
title={company.name ?? ''}
hasBackButton
isFavorite={isFavorite}
icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
onFavoriteButtonClick={handleFavoriteButtonClick}
extraButtons={[
<ShowPageAddButton
key="add"
entity={{
id: company.id,
type: ActivityTargetableEntityType.Company,
}}
timeline
tasks
notes
emails
/>
</ShowPageContainer>
</RecoilScope>
</WithTopBarContainer>
/>,
]}
>
<RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
<ShowPageContainer>
<ShowPageLeftContainer>
<ShowPageSummaryCard
id={company.id}
logoOrAvatar={getLogoUrlFromDomainName(
company.domainName ?? '',
)}
title={company.name ?? 'No name'}
date={company.createdAt ?? ''}
renderTitleEditComponent={() => (
<CompanyNameEditableField company={company} />
)}
/>
<PropertyBox extraPadding={true}>
<EditableFieldMutationContext.Provider
value={useUpdateOneCompanyMutation}
>
<EditableFieldEntityIdContext.Provider value={company.id}>
{companyShowFieldDefinition.map((fieldDefinition) => {
return (
<EditableFieldDefinitionContext.Provider
value={fieldDefinition}
key={fieldDefinition.id}
>
<GenericEditableField />
</EditableFieldDefinitionContext.Provider>
);
})}
</EditableFieldEntityIdContext.Provider>
</EditableFieldMutationContext.Provider>
</PropertyBox>
<CompanyTeam company={company}></CompanyTeam>
</ShowPageLeftContainer>
<ShowPageRightContainer
entity={{
id: company.id,
type: ActivityTargetableEntityType.Company,
}}
timeline
tasks
notes
emails
/>
</ShowPageContainer>
</RecoilScope>
</WithTopBarContainer>
</>
);
}

124
front/src/pages/people/PersonShow.tsx
View File

@ -18,6 +18,7 @@ import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPage
import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer';
import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
import { ShowPageRecoilScopeContext } from '@/ui/layout/states/ShowPageRecoilScopeContext';
import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import {
useUpdateOnePersonMutation,
@ -63,66 +64,73 @@ export function PersonShow() {
}
return (
<WithTopBarContainer
title={person.firstName ?? ''}
icon={<IconUser size={theme.icon.size.md} />}
hasBackButton
isFavorite={isFavorite}
onFavoriteButtonClick={handleFavoriteButtonClick}
extraButtons={[
<ShowPageAddButton
key="add"
entity={{
id: person.id,
type: ActivityTargetableEntityType.Person,
}}
/>,
]}
>
<RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
<ShowPageContainer>
<ShowPageLeftContainer>
<ShowPageSummaryCard
id={person.id}
title={person.displayName ?? 'No name'}
logoOrAvatar={person.avatarUrl ?? undefined}
date={person.createdAt ?? ''}
renderTitleEditComponent={() =>
person ? <PeopleFullNameEditableField people={person} /> : <></>
}
onUploadPicture={onUploadPicture}
/>
<PropertyBox extraPadding={true}>
<EditableFieldMutationContext.Provider
value={useUpdateOnePersonMutation}
>
<EditableFieldEntityIdContext.Provider value={person.id}>
{personShowFieldDefinition.map((fieldDefinition) => {
return (
<EditableFieldDefinitionContext.Provider
value={fieldDefinition}
key={fieldDefinition.id}
>
<GenericEditableField />
</EditableFieldDefinitionContext.Provider>
);
})}
</EditableFieldEntityIdContext.Provider>
</EditableFieldMutationContext.Provider>
</PropertyBox>
</ShowPageLeftContainer>
<ShowPageRightContainer
<>
<PageTitle title={person.displayName || 'No Name'} />
<WithTopBarContainer
title={person.firstName ?? ''}
icon={<IconUser size={theme.icon.size.md} />}
hasBackButton
isFavorite={isFavorite}
onFavoriteButtonClick={handleFavoriteButtonClick}
extraButtons={[
<ShowPageAddButton
key="add"
entity={{
id: person.id ?? '',
id: person.id,
type: ActivityTargetableEntityType.Person,
}}
timeline
tasks
notes
emails
/>
</ShowPageContainer>
</RecoilScope>
</WithTopBarContainer>
/>,
]}
>
<RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
<ShowPageContainer>
<ShowPageLeftContainer>
<ShowPageSummaryCard
id={person.id}
title={person.displayName ?? 'No name'}
logoOrAvatar={person.avatarUrl ?? undefined}
date={person.createdAt ?? ''}
renderTitleEditComponent={() =>
person ? (
<PeopleFullNameEditableField people={person} />
) : (
<></>
)
}
onUploadPicture={onUploadPicture}
/>
<PropertyBox extraPadding={true}>
<EditableFieldMutationContext.Provider
value={useUpdateOnePersonMutation}
>
<EditableFieldEntityIdContext.Provider value={person.id}>
{personShowFieldDefinition.map((fieldDefinition) => {
return (
<EditableFieldDefinitionContext.Provider
value={fieldDefinition}
key={fieldDefinition.id}
>
<GenericEditableField />
</EditableFieldDefinitionContext.Provider>
);
})}
</EditableFieldEntityIdContext.Provider>
</EditableFieldMutationContext.Provider>
</PropertyBox>
</ShowPageLeftContainer>
<ShowPageRightContainer
entity={{
id: person.id ?? '',
type: ActivityTargetableEntityType.Person,
}}
timeline
tasks
notes
emails
/>
</ShowPageContainer>
</RecoilScope>
</WithTopBarContainer>
</>
);
}