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

Refactor Views by cleaning the code, relying on apolloCache and improving performances (#4516)

Browse Source 
* Wip refactoring view

* Post merge conflicts

* Fix review

* Add create view capability

* Fix create object missing view

* Fix tests
This commit is contained in:
Charles Bochet
2024-03-20 14:21:58 +01:00
committed by GitHub
parent 20e14cb455
commit cfb0cce9b8
392 changed files with 3474 additions and 4410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts
View File

@ -13,7 +13,7 @@ export const usePreviousHotkeyScope = () => {
({ snapshot, set }) =>
() => {
const previousHotkeyScope = snapshot
.getLoadable(previousHotkeyScopeState())
.getLoadable(previousHotkeyScopeState)
.getValue();
if (!previousHotkeyScope) {
@ -25,7 +25,7 @@ export const usePreviousHotkeyScope = () => {
previousHotkeyScope.customScopes,
);
set(previousHotkeyScopeState(), null);
set(previousHotkeyScopeState, null);
},
[setHotkeyScope],
);
@ -34,11 +34,11 @@ export const usePreviousHotkeyScope = () => {
({ snapshot, set }) =>
(scope: string, customScopes?: CustomHotkeyScopes) => {
const currentHotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState())
.getLoadable(currentHotkeyScopeState)
.getValue();
setHotkeyScope(scope, customScopes);
set(previousHotkeyScopeState(), currentHotkeyScope);
set(previousHotkeyScopeState, currentHotkeyScope);
},
[setHotkeyScope],
);

2
packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts
View File

@ -24,7 +24,7 @@ export const useScopedHotkeyCallback = () =>
preventDefault?: boolean;
}) => {
const currentHotkeyScopes = snapshot
.getLoadable(internalHotkeysEnabledScopesState())
.getLoadable(internalHotkeysEnabledScopesState)
.getValue();
if (!currentHotkeyScopes.includes(scope)) {

3
packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts
View File

@ -22,8 +22,7 @@ export const useScopedHotkeys = (
preventDefault: true,
},
) => {
const [pendingHotkey, setPendingHotkey] =
useRecoilState(pendingHotkeyState());
const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
const callScopedHotkeyCallback = useScopedHotkeyCallback();

3
packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts
View File

@ -20,8 +20,7 @@ export const useSequenceHotkeys = (
},
deps: any[] = [],
) => {
const [pendingHotkey, setPendingHotkey] =
useRecoilState(pendingHotkeyState());
const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
const callScopedHotkeyCallback = useScopedHotkeyCallback();

6
packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts
View File

@ -26,7 +26,7 @@ export const useSetHotkeyScope = () =>
({ snapshot, set }) =>
async (hotkeyScopeToSet: string, customScopes?: CustomHotkeyScopes) => {
const currentHotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState())
.getLoadable(currentHotkeyScopeState)
.getValue();
if (currentHotkeyScope.scope === hotkeyScopeToSet) {
@ -76,8 +76,8 @@ export const useSetHotkeyScope = () =>
}
scopesToSet.push(newHotkeyScope.scope);
set(internalHotkeysEnabledScopesState(), scopesToSet);
set(currentHotkeyScopeState(), newHotkeyScope);
set(internalHotkeysEnabledScopesState, scopesToSet);
set(currentHotkeyScopeState, newHotkeyScope);
},
[],
);

4
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useClickOutsideListener.test.tsx
View File

@ -15,9 +15,7 @@ describe('useClickOutsideListener', () => {
return {
useClickOutside: useClickOutsideListener(componentId),
isActivated: useRecoilValue(
getClickOutsideListenerIsActivatedState(),
),
isActivated: useRecoilValue(getClickOutsideListenerIsActivatedState),
};
},
{

14
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOutsideListener.ts
View File

@ -34,7 +34,7 @@ export const useClickOutsideListener = (componentId: string) => {
callback(event);
const additionalCallbacks = snapshot
.getLoadable(getClickOutsideListenerCallbacksState())
.getLoadable(getClickOutsideListenerCallbacksState)
.getValue();
additionalCallbacks.forEach((additionalCallback) => {
@ -51,7 +51,7 @@ export const useClickOutsideListener = (componentId: string) => {
const toggleClickOutsideListener = useRecoilCallback(
({ set }) =>
(activated: boolean) => {
set(getClickOutsideListenerIsActivatedState(), activated);
set(getClickOutsideListenerIsActivatedState, activated);
},
[getClickOutsideListenerIsActivatedState],
);
@ -60,7 +60,7 @@ export const useClickOutsideListener = (componentId: string) => {
({ set, snapshot }) =>
({ callbackFunction, callbackId }: ClickOutsideListenerCallback) => {
const existingCallbacks = snapshot
.getLoadable(getClickOutsideListenerCallbacksState())
.getLoadable(getClickOutsideListenerCallbacksState)
.getValue();
const existingCallbackWithSameId = existingCallbacks.find(
@ -74,7 +74,7 @@ export const useClickOutsideListener = (componentId: string) => {
});
set(
getClickOutsideListenerCallbacksState(),
getClickOutsideListenerCallbacksState,
existingCallbacksWithNewCallback,
);
} else {
@ -95,7 +95,7 @@ export const useClickOutsideListener = (componentId: string) => {
};
set(
getClickOutsideListenerCallbacksState(),
getClickOutsideListenerCallbacksState,
existingCallbacksWithOverwrittenCallback,
);
}
@ -107,7 +107,7 @@ export const useClickOutsideListener = (componentId: string) => {
({ set, snapshot }) =>
({ callbackId }: { callbackId: string }) => {
const existingCallbacks = snapshot
.getLoadable(getClickOutsideListenerCallbacksState())
.getLoadable(getClickOutsideListenerCallbacksState)
.getValue();
const indexOfCallbackToUnsubscribe = existingCallbacks.findIndex(
@ -121,7 +121,7 @@ export const useClickOutsideListener = (componentId: string) => {
existingCallbacks.toSpliced(indexOfCallbackToUnsubscribe, 1);
set(
getClickOutsideListenerCallbacksState(),
getClickOutsideListenerCallbacksState,
newCallbacksWithoutCallbackToUnsubscribe,
);
}

8
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutsideV2.ts
View File

@ -32,7 +32,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
({ snapshot, set }) =>
(event: MouseEvent | TouchEvent) => {
const clickOutsideListenerIsActivated = snapshot
.getLoadable(getClickOutsideListenerIsActivatedState())
.getLoadable(getClickOutsideListenerIsActivatedState)
.getValue();
const isListening = clickOutsideListenerIsActivated && enabled;
@ -47,7 +47,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
.some((ref) => ref.current?.contains(event.target as Node));
set(
getClickOutsideListenerIsMouseDownInsideState(),
getClickOutsideListenerIsMouseDownInsideState,
clickedOnAtLeastOneRef,
);
}
@ -84,7 +84,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
});
set(
getClickOutsideListenerIsMouseDownInsideState(),
getClickOutsideListenerIsMouseDownInsideState,
clickedOnAtLeastOneRef,
);
}
@ -102,7 +102,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
({ snapshot }) =>
(event: MouseEvent | TouchEvent) => {
const isMouseDownInside = snapshot
.getLoadable(getClickOutsideListenerIsMouseDownInsideState())
.getLoadable(getClickOutsideListenerIsMouseDownInsideState)
.getValue();
if (mode === ClickOutsideMode.compareHTMLRef) {

19
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated.ts
View File

@ -1,19 +0,0 @@
import { RecoilState, SerializableParam } from 'recoil';
import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
export const getScopedFamilyStateDeprecated = <
StateType,
FamilyKey extends SerializableParam,
>(
recoilState: (
scopedFamilyKey: ComponentFamilyStateKey<FamilyKey>,
) => RecoilState<StateType>,
scopeId: string,
familyKey: FamilyKey,
) => {
return recoilState({
scopeId,
familyKey: familyKey || ('' as FamilyKey),
});
};

10
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedSelectorDeprecated.ts
View File

@ -1,10 +0,0 @@
import { RecoilScopedSelector } from '../types/RecoilScopedSelector';
export const getScopedSelectorDeprecated = <StateType>(
recoilScopedState: RecoilScopedSelector<StateType>,
scopeId: string,
) => {
return recoilScopedState({
scopeId,
});
};

2
packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useListenScroll.test.tsx
View File

@ -24,7 +24,7 @@ describe('useListenScroll', () => {
const { result } = renderHook(
() => {
useListenScroll({ scrollableRef: containerRef });
const isScrolling = useRecoilValue(isScrollingState());
const isScrolling = useRecoilValue(isScrollingState);
return { isScrolling };
},

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

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

2
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentState.ts
View File

@ -8,5 +8,5 @@ export const extractComponentState = <StateType>(
) => RecoilState<StateType>,
scopeId: string,
) => {
return () => componentState({ scopeId });
return componentState({ scopeId });
};

2
packages/twenty-front/src/modules/ui/utilities/state/utils/createState.ts
View File

@ -14,5 +14,5 @@ export const createState = <ValueType>({
default: defaultValue,
effects,
});
return () => recoilState;
return recoilState;
};