Rework atom naming (#18240)
## Summary - **Enhanced the `matching-state-variable` ESLint rule** to enforce consistent naming for `ComponentState`, `FamilyState`, and `ComponentFamilyState` hooks — previously it only covered `useAtomState` and `useAtomStateValue` - **The rule now checks 12 hooks** across three categories: value hooks (`useAtomComponentStateValue`, `useAtomFamilyStateValue`, etc.), state hooks (`useAtomComponentState`, `useAtomComponentFamilyState`), and setter hooks (`useSetAtomState`, `useSetAtomComponentState`, `useSetAtomFamilyState`, `useSetAtomComponentFamilyState`) - **Fixed all 225 resulting lint violations** across 151 files, renaming variables to match their state atom names (e.g. `currentViewId` → `contextStoreCurrentViewId`, `selectedRecord` → `recordStore`). Cases where the same state is accessed with different family keys/instance IDs are suppressed with `eslint-disable-next-line`. ## Naming convention | Hook | State argument | Valid | Invalid | |------|---------------|-------|---------| | `useAtomStateValue` | `fooState` | `const foo = ...` | `const bar = ...` | | `useAtomComponentStateValue` | `fooComponentState` | `const foo = ...` | `const bar = ...` | | `useAtomFamilyStateValue` | `fooFamilyState` | `const foo = ...` | `const bar = ...` | | `useAtomComponentFamilyStateValue` | `fooComponentFamilyState` | `const foo = ...` | `const bar = ...` | | `useAtomState` | `fooState` | `const [foo, setFoo] = ...` | `const [bar, setBar] = ...` | | `useAtomComponentState` | `fooComponentState` | `const [foo, setFoo] = ...` | `const [bar, setBar] = ...` | | `useAtomComponentFamilyState` | `fooComponentFamilyState` | `const [foo, setFoo] = ...` | `const [bar, setBar] = ...` | | `useSetAtomState` | `fooState` | `const setFoo = ...` | `const setBar = ...` | | `useSetAtomComponentState` | `fooComponentState` | `const setFoo = ...` | `const setBar = ...` | | `useSetAtomFamilyState` | `fooFamilyState` | `const setFoo = ...` | `const setBar = ...` | | `useSetAtomComponentFamilyState` | `fooComponentFamilyState` | `const setFoo = ...` | `const setBar = ...` |
This commit is contained in:
@@ -3,13 +3,13 @@ import { workflowVisualizerWorkflowRunIdComponentState } from '@/workflow/states
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
|
||||
export const useWorkflowRunIdOrThrow = () => {
|
||||
const workflowRunId = useAtomComponentStateValue(
|
||||
const workflowVisualizerWorkflowRunId = useAtomComponentStateValue(
|
||||
workflowVisualizerWorkflowRunIdComponentState,
|
||||
);
|
||||
|
||||
if (!isDefined(workflowRunId)) {
|
||||
if (!isDefined(workflowVisualizerWorkflowRunId)) {
|
||||
throw new Error('Expected the workflow run ID to be defined');
|
||||
}
|
||||
|
||||
return workflowRunId;
|
||||
return workflowVisualizerWorkflowRunId;
|
||||
};
|
||||
|
||||
@@ -3,13 +3,13 @@ import { workflowVisualizerWorkflowVersionIdComponentState } from '@/workflow/st
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
|
||||
export const useWorkflowVersionIdOrThrow = () => {
|
||||
const workflowVersionId = useAtomComponentStateValue(
|
||||
const workflowVisualizerWorkflowVersionId = useAtomComponentStateValue(
|
||||
workflowVisualizerWorkflowVersionIdComponentState,
|
||||
);
|
||||
|
||||
if (!isDefined(workflowVersionId)) {
|
||||
if (!isDefined(workflowVisualizerWorkflowVersionId)) {
|
||||
throw new Error('Expected the workflow version ID to be defined');
|
||||
}
|
||||
|
||||
return workflowVersionId;
|
||||
return workflowVisualizerWorkflowVersionId;
|
||||
};
|
||||
|
||||
+11
-11
@@ -170,13 +170,13 @@ export const WorkflowDiagramCanvasBase = ({
|
||||
|
||||
const reactflow = useReactFlow();
|
||||
|
||||
const currentWorkflowDiagram = useAtomComponentStateValue(
|
||||
const workflowDiagram = useAtomComponentStateValue(
|
||||
workflowDiagramComponentState,
|
||||
);
|
||||
const workflowDiagramPanOnDrag = useAtomComponentStateValue(
|
||||
workflowDiagramPanOnDragComponentState,
|
||||
);
|
||||
const workflowDiagram = useAtomComponentStateCallbackState(
|
||||
const workflowDiagramCallbackState = useAtomComponentStateCallbackState(
|
||||
workflowDiagramComponentState,
|
||||
);
|
||||
const setWorkflowDiagram = useSetAtomComponentState(
|
||||
@@ -213,12 +213,12 @@ export const WorkflowDiagramCanvasBase = ({
|
||||
} | null>(null);
|
||||
|
||||
const { nodes, edges } = useMemo(() => {
|
||||
if (!isDefined(currentWorkflowDiagram)) {
|
||||
if (!isDefined(workflowDiagram)) {
|
||||
return { nodes: [], edges: [] };
|
||||
}
|
||||
|
||||
const nodes = [...currentWorkflowDiagram.nodes];
|
||||
const edges = [...currentWorkflowDiagram.edges];
|
||||
const nodes = [...workflowDiagram.nodes];
|
||||
const edges = [...workflowDiagram.edges];
|
||||
|
||||
if (
|
||||
isDefined(workflowInsertStepIds.position) &&
|
||||
@@ -255,7 +255,7 @@ export const WorkflowDiagramCanvasBase = ({
|
||||
}
|
||||
|
||||
return { nodes, edges };
|
||||
}, [currentWorkflowDiagram, workflowInsertStepIds]);
|
||||
}, [workflowDiagram, workflowInsertStepIds]);
|
||||
|
||||
const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState);
|
||||
const { isInRightDrawer } = useContext(ActionMenuContext);
|
||||
@@ -357,10 +357,10 @@ export const WorkflowDiagramCanvasBase = ({
|
||||
isInRightDrawer,
|
||||
isCommandMenuOpened,
|
||||
workflowDiagramFlowInitialized,
|
||||
workflowDiagram: store.get(workflowDiagram),
|
||||
workflowDiagram: store.get(workflowDiagramCallbackState),
|
||||
});
|
||||
},
|
||||
[setFlowViewport, workflowDiagram, store],
|
||||
[setFlowViewport, workflowDiagramCallbackState, store],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -378,7 +378,7 @@ export const WorkflowDiagramCanvasBase = ({
|
||||
|
||||
const handleNodesChanges = useCallback(
|
||||
(changes: NodeChange<WorkflowDiagramNode>[]) => {
|
||||
const existingWorkflowDiagram = store.get(workflowDiagram);
|
||||
const existingWorkflowDiagram = store.get(workflowDiagramCallbackState);
|
||||
|
||||
const filteredChanges = changes.filter(
|
||||
(change) =>
|
||||
@@ -399,7 +399,7 @@ export const WorkflowDiagramCanvasBase = ({
|
||||
};
|
||||
}
|
||||
|
||||
store.set(workflowDiagram, updatedWorkflowDiagram);
|
||||
store.set(workflowDiagramCallbackState, updatedWorkflowDiagram);
|
||||
|
||||
const currentWorkflowDiagramWaitingNodesDimensions = store.get(
|
||||
workflowDiagramWaitingNodesDimensions,
|
||||
@@ -419,7 +419,7 @@ export const WorkflowDiagramCanvasBase = ({
|
||||
isCommandMenuOpened,
|
||||
setFlowViewport,
|
||||
workflowDiagramFlowInitialized,
|
||||
workflowDiagram,
|
||||
workflowDiagramCallbackState,
|
||||
workflowDiagramWaitingNodesDimensions,
|
||||
isInRightDrawer,
|
||||
store,
|
||||
|
||||
+3
-3
@@ -30,7 +30,7 @@ export const WorkflowRunVisualizerEffect = ({
|
||||
const { getIcon } = useIcons();
|
||||
|
||||
const workflowRun = useWorkflowRun({ workflowRunId });
|
||||
const setWorkflowRunId = useSetAtomComponentState(
|
||||
const setWorkflowVisualizerWorkflowRunId = useSetAtomComponentState(
|
||||
workflowVisualizerWorkflowRunIdComponentState,
|
||||
);
|
||||
|
||||
@@ -72,8 +72,8 @@ export const WorkflowRunVisualizerEffect = ({
|
||||
const store = useStore();
|
||||
|
||||
useEffect(() => {
|
||||
setWorkflowRunId(workflowRunId);
|
||||
}, [setWorkflowRunId, workflowRunId]);
|
||||
setWorkflowVisualizerWorkflowRunId(workflowRunId);
|
||||
}, [setWorkflowVisualizerWorkflowRunId, workflowRunId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDefined(workflowRun)) {
|
||||
|
||||
+3
-3
@@ -87,7 +87,7 @@ export const WorkflowRunDiagramStepNode = ({
|
||||
const { getIcon } = useIcons();
|
||||
const theme = useTheme();
|
||||
|
||||
const workflowId = useAtomComponentStateValue(
|
||||
const workflowVisualizerWorkflowId = useAtomComponentStateValue(
|
||||
workflowVisualizerWorkflowIdComponentState,
|
||||
);
|
||||
const workflowRunId = useWorkflowRunIdOrThrow();
|
||||
@@ -116,7 +116,7 @@ export const WorkflowRunDiagramStepNode = ({
|
||||
: 0;
|
||||
|
||||
const handleClick = () => {
|
||||
if (!isDefined(workflowId)) {
|
||||
if (!isDefined(workflowVisualizerWorkflowId)) {
|
||||
throw new Error('Workflow ID must be defined');
|
||||
}
|
||||
|
||||
@@ -127,7 +127,7 @@ export const WorkflowRunDiagramStepNode = ({
|
||||
setWorkflowSelectedNode(id);
|
||||
|
||||
openWorkflowRunViewStepInCommandMenu({
|
||||
workflowId,
|
||||
workflowId: workflowVisualizerWorkflowId,
|
||||
workflowRunId,
|
||||
title: data.name,
|
||||
icon: getIcon(getWorkflowNodeIconKey(data)),
|
||||
|
||||
+5
-5
@@ -9,15 +9,15 @@ export const useChildStepFiltersAndChildStepFilterGroups = ({
|
||||
}: {
|
||||
stepFilterGroupId: string;
|
||||
}) => {
|
||||
const stepFilterGroups = useAtomComponentStateValue(
|
||||
const currentStepFilterGroups = useAtomComponentStateValue(
|
||||
currentStepFilterGroupsComponentState,
|
||||
);
|
||||
|
||||
const stepFilters = useAtomComponentStateValue(
|
||||
const currentStepFilters = useAtomComponentStateValue(
|
||||
currentStepFiltersComponentState,
|
||||
);
|
||||
|
||||
const currentStepFilterGroup = stepFilterGroups?.find(
|
||||
const currentStepFilterGroup = currentStepFilterGroups?.find(
|
||||
(stepFilterGroup) => stepFilterGroup.id === stepFilterGroupId,
|
||||
);
|
||||
|
||||
@@ -33,11 +33,11 @@ export const useChildStepFiltersAndChildStepFilterGroups = ({
|
||||
};
|
||||
}
|
||||
|
||||
const childStepFilters = stepFilters?.filter(
|
||||
const childStepFilters = currentStepFilters?.filter(
|
||||
(filter) => filter.stepFilterGroupId === currentStepFilterGroup.id,
|
||||
);
|
||||
|
||||
const childStepFilterGroups = stepFilterGroups?.filter(
|
||||
const childStepFilterGroups = currentStepFilterGroups?.filter(
|
||||
(filterGroup) =>
|
||||
filterGroup.parentStepFilterGroupId === currentStepFilterGroup.id,
|
||||
);
|
||||
|
||||
+8
-6
@@ -5,18 +5,20 @@ import { workflowAiAgentPermissionsIsAddingPermissionState } from '@/workflow/wo
|
||||
import { workflowAiAgentPermissionsSelectedObjectIdState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsSelectedObjectIdState';
|
||||
|
||||
export const useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose = () => {
|
||||
const setSelectedObjectId = useSetAtomState(
|
||||
const setWorkflowAiAgentPermissionsSelectedObjectId = useSetAtomState(
|
||||
workflowAiAgentPermissionsSelectedObjectIdState,
|
||||
);
|
||||
const setIsAddingPermission = useSetAtomState(
|
||||
const setWorkflowAiAgentPermissionsIsAddingPermission = useSetAtomState(
|
||||
workflowAiAgentPermissionsIsAddingPermissionState,
|
||||
);
|
||||
const setAgentState = useSetAtomState(workflowAiAgentActionAgentState);
|
||||
const setWorkflowAiAgentActionAgent = useSetAtomState(
|
||||
workflowAiAgentActionAgentState,
|
||||
);
|
||||
|
||||
const resetPermissionState = () => {
|
||||
setSelectedObjectId(undefined);
|
||||
setIsAddingPermission(false);
|
||||
setAgentState(undefined);
|
||||
setWorkflowAiAgentPermissionsSelectedObjectId(undefined);
|
||||
setWorkflowAiAgentPermissionsIsAddingPermission(false);
|
||||
setWorkflowAiAgentActionAgent(undefined);
|
||||
};
|
||||
|
||||
useListenToSidePanelClosing(resetPermissionState);
|
||||
|
||||
Reference in New Issue
Block a user