252922b522
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>
37 lines
999 B
TypeScript
37 lines
999 B
TypeScript
import { userLookupResultState } from '@/settings/admin-panel/states/userLookupResultState';
|
|
import { useRecoilState } from 'recoil';
|
|
import { isDefined } from 'twenty-shared';
|
|
import { FeatureFlagKey } from '~/generated/graphql';
|
|
|
|
export const useFeatureFlagState = () => {
|
|
const [userLookupResult, setUserLookupResult] = useRecoilState(
|
|
userLookupResultState,
|
|
);
|
|
|
|
const updateFeatureFlagState = (
|
|
workspaceId: string,
|
|
featureFlag: FeatureFlagKey,
|
|
value: boolean,
|
|
) => {
|
|
if (!isDefined(userLookupResult)) return;
|
|
|
|
setUserLookupResult({
|
|
...userLookupResult,
|
|
workspaces: userLookupResult.workspaces.map((workspace) =>
|
|
workspace.id === workspaceId
|
|
? {
|
|
...workspace,
|
|
featureFlags: workspace.featureFlags.map((flag) =>
|
|
flag.key === featureFlag ? { ...flag, value } : flag,
|
|
),
|
|
}
|
|
: workspace,
|
|
),
|
|
});
|
|
};
|
|
|
|
return {
|
|
updateFeatureFlagState,
|
|
};
|
|
};
|