Create ESLint rule to discourage usage of navigate() and prefer Link (#5642)

### Description
Create ESLint rule to discourage usage of navigate() and prefer Link


### Refs
#5468 

### Demo

![Capture-2024-05-29-112852](https://github.com/twentyhq/twenty/assets/140154534/28378c09-86bb-49d3-9e9a-49aa1c07ad11)

![Capture-2024-05-29-112843](https://github.com/twentyhq/twenty/assets/140154534/2c05ea92-e19b-49ae-acb9-07f6ec9182ab)

Fixes #5468

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
gitstart-twenty
2024-06-04 11:04:57 -04:00
committed by GitHub
parent 234e062232
commit bb7d94a455
18 changed files with 317 additions and 132 deletions

View File

@ -1,4 +1,4 @@
import { useNavigate } from 'react-router-dom';
import { Link } from 'react-router-dom';
import styled from '@emotion/styled';
import { H2Title, IconCalendarEvent, IconMailCog } from 'twenty-ui';
@ -6,6 +6,7 @@ import { SettingsNavigationCard } from '@/settings/components/SettingsNavigation
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Section } from '@/ui/layout/section/components/Section';
import { UndecoratedLink } from '@/ui/navigation/link/components/UndecoratedLink';
const StyledCardsContainer = styled.div`
display: flex;
@ -14,8 +15,6 @@ const StyledCardsContainer = styled.div`
`;
export const SettingsAccountsSettingsSection = () => {
const navigate = useNavigate();
return (
<Section>
<H2Title
@ -23,24 +22,16 @@ export const SettingsAccountsSettingsSection = () => {
description="Configure your emails and calendar settings."
/>
<StyledCardsContainer>
<SettingsNavigationCard
Icon={IconMailCog}
title="Emails"
onClick={() =>
navigate(getSettingsPagePath(SettingsPath.AccountsEmails))
}
>
Set email visibility, manage your blocklist and more.
</SettingsNavigationCard>
<SettingsNavigationCard
Icon={IconCalendarEvent}
title="Calendar"
onClick={() =>
navigate(getSettingsPagePath(SettingsPath.AccountsCalendars))
}
>
Configure and customize your calendar preferences.
</SettingsNavigationCard>
<UndecoratedLink to={getSettingsPagePath(SettingsPath.AccountsEmails)}>
<SettingsNavigationCard Icon={IconMailCog} title="Emails">
Set email visibility, manage your blocklist and more.
</SettingsNavigationCard>
</UndecoratedLink>
<Link to={getSettingsPagePath(SettingsPath.AccountsCalendars)}>
<SettingsNavigationCard Icon={IconCalendarEvent} title="Calendar">
Configure and customize your calendar preferences.
</SettingsNavigationCard>
</Link>
</StyledCardsContainer>
</Section>
);