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

[ESLint rule] prevent useRecoilCallback without a dependency array (#4411)

Browse Source 
Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
This commit is contained in:
gitstart-app[bot]
2024-03-12 15:12:17 +01:00
committed by GitHub
parent 41c7cd8cf7
commit 60598bf235
11 changed files with 174 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/twenty-front/.eslintrc.cjs
View File

@ -51,6 +51,7 @@ module.exports = {
'@nx/workspace-component-props-naming': 'error',
'@nx/workspace-explicit-boolean-predicates-in-if': 'error',
'@nx/workspace-use-getLoadable-and-getValue-to-get-atoms': 'error',
'@nx/workspace-useRecoilCallback-has-dependency-array': 'error',
'react/no-unescaped-entities': 'off',
'react/prop-types': 'off',

5
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
View File

@ -24,10 +24,10 @@ export const useCommandMenu = () => {
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const openCommandMenu = () => {
const openCommandMenu = useCallback(() => {
setIsCommandMenuOpened(true);
setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenuOpen);
};
}, [setHotkeyScopeAndMemorizePreviousScope, setIsCommandMenuOpened]);
const closeCommandMenu = useRecoilCallback(
({ snapshot }) =>
@ -60,6 +60,7 @@ export const useCommandMenu = () => {
openCommandMenu();
}
},
[closeCommandMenu, openCommandMenu],
);
const addToCommandMenu = useCallback(

49
packages/twenty-front/src/modules/object-record/record-action-bar/hooks/useRecordActionBar.tsx
View File

@ -45,29 +45,40 @@ export const useRecordActionBar = ({
objectNameSingular: objectMetadataItem.nameSingular,
});
const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => {
if (selectedRecordIds.length > 1) {
return;
}
const handleFavoriteButtonClick = useRecoilCallback(
({ snapshot }) =>
() => {
if (selectedRecordIds.length > 1) {
return;
}
const selectedRecordId = selectedRecordIds[0];
const selectedRecord = snapshot
.getLoadable(recordStoreFamilyState(selectedRecordId))
.getValue();
const selectedRecordId = selectedRecordIds[0];
const selectedRecord = snapshot
.getLoadable(recordStoreFamilyState(selectedRecordId))
.getValue();
const foundFavorite = favorites?.find(
(favorite) => favorite.recordId === selectedRecordId,
);
const foundFavorite = favorites?.find(
(favorite) => favorite.recordId === selectedRecordId,
);
const isFavorite = !!selectedRecordId && !!foundFavorite;
const isFavorite = !!selectedRecordId && !!foundFavorite;
if (isFavorite) {
deleteFavorite(foundFavorite.id);
} else if (isDefined(selectedRecord)) {
createFavorite(selectedRecord, objectMetadataItem.nameSingular);
}
callback?.();
});
if (isFavorite) {
deleteFavorite(foundFavorite.id);
} else if (isDefined(selectedRecord)) {
createFavorite(selectedRecord, objectMetadataItem.nameSingular);
}
callback?.();
},
[
callback,
createFavorite,
deleteFavorite,
favorites,
objectMetadataItem.nameSingular,
selectedRecordIds,
],
);
const handleDeleteClick = useCallback(async () => {
callback?.();

17
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View File

@ -4,9 +4,11 @@ import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { RecordTable } from '@/object-record/record-table/components/RecordTable';
import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
@ -92,11 +94,16 @@ export const RecordTableWithWrappers = ({
<RecordTable
recordTableId={recordTableId}
objectNameSingular={objectNameSingular}
onColumnsChange={useRecoilCallback(() => (columns) => {
persistViewFields(
mapColumnDefinitionsToViewFields(columns),
);
})}
onColumnsChange={useRecoilCallback(
() => (columns) => {
persistViewFields(
mapColumnDefinitionsToViewFields(
columns as ColumnDefinition<FieldMetadata>[],
),
);
},
[persistViewFields],
)}
createRecord={createRecord}
/>
<DragSelect

10
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRowSelectedState.ts
View File

@ -5,7 +5,11 @@ import { useRecordTableStates } from '@/object-record/record-table/hooks/interna
export const useSetRowSelectedState = (recordTableId?: string) => {
const { isRowSelectedFamilyState } = useRecordTableStates(recordTableId);
return useRecoilCallback(({ set }) => (rowId: string, selected: boolean) => {
set(isRowSelectedFamilyState(rowId), selected);
});
return useRecoilCallback(
({ set }) =>
(rowId: string, selected: boolean) => {
set(isRowSelectedFamilyState(rowId), selected);
},
[isRowSelectedFamilyState],
);
};

1
packages/twenty-front/src/modules/settings/developers/hooks/useGeneratedApiKeys.ts
View File

@ -8,5 +8,6 @@ export const useGeneratedApiKeys = () => {
(apiKeyId: string, apiKey: string | null) => {
set(generatedApiKeyFamilyState(apiKeyId), apiKey);
},
[],
);
};

16
packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/hooks/useSnackBar.tsx
View File

@ -14,12 +14,16 @@ export const useSnackBar = () => {
SnackBarManagerScopeInternalContext,
);
const handleSnackBarClose = useRecoilCallback(({ set }) => (id: string) => {
set(snackBarInternalScopedState({ scopeId }), (prevState) => ({
...prevState,
queue: prevState.queue.filter((snackBar) => snackBar.id !== id),
}));
});
const handleSnackBarClose = useRecoilCallback(
({ set }) =>
(id: string) => {
set(snackBarInternalScopedState({ scopeId }), (prevState) => ({
...prevState,
queue: prevState.queue.filter((snackBar) => snackBar.id !== id),
}));
},
[scopeId],
);
const setSnackBarQueue = useRecoilCallback(
({ set }) =>

46
packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts
View File

@ -12,28 +12,40 @@ export const useListenScroll = <T extends Element>({
}: {
scrollableRef: React.RefObject<T>;
}) => {
const hideScrollBarsCallback = useRecoilCallback(({ snapshot }) => () => {
const isScrolling = snapshot.getLoadable(isScrollingState()).getValue();
const hideScrollBarsCallback = useRecoilCallback(
({ snapshot }) =>
() => {
const isScrolling = snapshot.getLoadable(isScrollingState()).getValue();
if (!isScrolling) {
scrollableRef.current?.classList.remove('scrolling');
}
});
if (!isScrolling) {
scrollableRef.current?.classList.remove('scrolling');
}
},
[scrollableRef],
);
const handleScrollStart = useRecoilCallback(({ set }) => (event: Event) => {
set(isScrollingState(), true);
scrollableRef.current?.classList.add('scrolling');
const handleScrollStart = useRecoilCallback(
({ set }) =>
(event: Event) => {
set(isScrollingState(), true);
scrollableRef.current?.classList.add('scrolling');
const target = event.target as HTMLElement;
const target = event.target as HTMLElement;
set(scrollTopState(), target.scrollTop);
set(scrollLeftState(), target.scrollLeft);
});
set(scrollTopState(), target.scrollTop);
set(scrollLeftState(), target.scrollLeft);
},
[scrollableRef],
);
const handleScrollEnd = useRecoilCallback(({ set }) => () => {
set(isScrollingState(), false);
debounce(hideScrollBarsCallback, 1000)();
});
const handleScrollEnd = useRecoilCallback(
({ set }) =>
() => {
set(isScrollingState(), false);
debounce(hideScrollBarsCallback, 1000)();
},
[hideScrollBarsCallback],
);
useEffect(() => {
const refTarget = scrollableRef.current;