mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Admin panel refactor (#10119)

Browse Source 
addressing > 
There are two patterns to avoid:
Creating functions that return JSX like renderThing() -> this was taken
already addressed in https://github.com/twentyhq/twenty/pull/10011
Making a hook that "stores" all the logic of a component - > this PR is
addressing this particular pattern
In essence, handlers should remain in the component and be connected to
their events.
And everything in a handler can be abstracted into its dedicated hook.
For example:
const { myReactiveState } =
useRecoilValue(myReactiveStateComponentState);
const { removeThingFromOtherThing } = useRemoveThingFromOtherThing();

const handleClick = () => {
  if (isDefined(myReactiveState)) {
    removeThingFromOtherThing();
  }
}

Broadly speaking, this is how you can split large components into
several sub-hooks.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
nitin
2025-02-11 22:40:28 +05:30
committed by GitHub
parent 83bf2d1739
commit 252922b522
11 changed files with 266 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminEnvVariables.tsx
View File

@ -36,6 +36,8 @@ const StyledShowMoreButton = styled(Button)<{ isSelected?: boolean }>`
`}
`;
const StyledEnvVariablesDescription = styled.div``;
export const SettingsAdminEnvVariables = () => {
const { data: environmentVariables } = useGetEnvironmentVariablesGroupedQuery(
{
@ -65,59 +67,68 @@ export const SettingsAdminEnvVariables = () => {
);
return (
<Section>
{visibleGroups.map((group) => (
<StyledGroupContainer key={group.name}>
<H1Title title={group.name} fontColor={H1TitleFontColor.Primary} />
{group.description !== '' && (
<StyledGroupDescription>{group.description}</StyledGroupDescription>
)}
{group.variables.length > 0 && (
<StyledGroupVariablesContainer>
<SettingsAdminEnvVariablesTable variables={group.variables} />
</StyledGroupVariablesContainer>
)}
</StyledGroupContainer>
))}
<>
<StyledEnvVariablesDescription>
These are only the server values. Ensure your worker environment has the
same variables and values, this is required for asynchronous tasks like
email sync.
</StyledEnvVariablesDescription>
<Section>
{visibleGroups.map((group) => (
<StyledGroupContainer key={group.name}>
<H1Title title={group.name} fontColor={H1TitleFontColor.Primary} />
{group.description !== '' && (
<StyledGroupDescription>
{group.description}
</StyledGroupDescription>
)}
{group.variables.length > 0 && (
<StyledGroupVariablesContainer>
<SettingsAdminEnvVariablesTable variables={group.variables} />
</StyledGroupVariablesContainer>
)}
</StyledGroupContainer>
))}
{hiddenGroups.length > 0 && (
<>
<StyledButtonsRow>
{hiddenGroups.map((group) => (
<StyledShowMoreButton
key={group.name}
onClick={() => toggleGroupVisibility(group.name)}
title={group.name}
variant="secondary"
isSelected={selectedGroup === group.name}
>
{group.name} variables
</StyledShowMoreButton>
))}
</StyledButtonsRow>
{hiddenGroups.length > 0 && (
<>
<StyledButtonsRow>
{hiddenGroups.map((group) => (
<StyledShowMoreButton
key={group.name}
onClick={() => toggleGroupVisibility(group.name)}
title={group.name}
variant="secondary"
isSelected={selectedGroup === group.name}
>
{group.name} variables
</StyledShowMoreButton>
))}
</StyledButtonsRow>
{selectedGroupData && (
<StyledGroupContainer>
<H1Title
title={selectedGroupData.name}
fontColor={H1TitleFontColor.Primary}
/>
{selectedGroupData.description !== '' && (
<StyledGroupDescription>
{selectedGroupData.description}
</StyledGroupDescription>
)}
{selectedGroupData.variables.length > 0 && (
<StyledGroupVariablesContainer>
<SettingsAdminEnvVariablesTable
variables={selectedGroupData.variables}
/>
</StyledGroupVariablesContainer>
)}
</StyledGroupContainer>
)}
</>
)}
</Section>
{selectedGroupData && (
<StyledGroupContainer>
<H1Title
title={selectedGroupData.name}
fontColor={H1TitleFontColor.Primary}
/>
{selectedGroupData.description !== '' && (
<StyledGroupDescription>
{selectedGroupData.description}
</StyledGroupDescription>
)}
{selectedGroupData.variables.length > 0 && (
<StyledGroupVariablesContainer>
<SettingsAdminEnvVariablesTable
variables={selectedGroupData.variables}
/>
</StyledGroupVariablesContainer>
)}
</StyledGroupContainer>
)}
</>
)}
</Section>
</>
);
};