Fix Opportunity picker and relation picker

twentyhq · Dec 9, 2023 · 75d8c8d · 75d8c8d
1 parent f2a4a95
commit 75d8c8d
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 54 deletions.
diff --git a/front/src/modules/companies/components/NewOpportunityButton.tsx b/front/src/modules/companies/components/NewOpportunityButton.tsx
@@ -7,12 +7,10 @@ import { BoardColumnContext } from '@/object-record/record-board/contexts/BoardC
 import { useCreateOpportunity } from '@/object-record/record-board/hooks/internal/useCreateOpportunity';
 import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
 import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
-import { relationPickerSearchFilterScopedState } from '@/object-record/relation-picker/states/relationPickerSearchFilterScopedState';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 export const NewOpportunityButton = () => {
   const [isCreatingCard, setIsCreatingCard] = useState(false);
@@ -55,9 +53,7 @@ export const NewOpportunityButton = () => {
     setIsCreatingCard(false);
   };
 
-  const [relationPickerSearchFilter] = useRecoilScopedState(
-    relationPickerSearchFilterScopedState,
-  );
+  const { relationPickerSearchFilter } = useRelationPicker();
 
   // TODO: refactor useFilteredSearchEntityQuery
   const { findManyRecordsQuery } = useObjectMetadataItem({

diff --git a/front/src/modules/object-record/hooks/useCreateOneRecord.ts b/front/src/modules/object-record/hooks/useCreateOneRecord.ts
@@ -50,7 +50,7 @@ export const useCreateOneRecord = <T>({
     const createdObject = await apolloClient.mutate({
       mutation: createOneRecordMutation,
       variables: {
-        input: { ...input, id: recordId },
+        input: { id: recordId, ...input },
       },
       optimisticResponse: {
         [`create${capitalize(objectMetadataItem.nameSingular)}`]:

diff --git a/front/src/modules/object-record/relation-picker/components/RelationPicker.tsx b/front/src/modules/object-record/relation-picker/components/RelationPicker.tsx
@@ -7,11 +7,9 @@ import { FieldDefinition } from '@/object-record/field/types/FieldDefinition';
 import { FieldRelationMetadata } from '@/object-record/field/types/FieldMetadata';
 import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
 import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
-import { relationPickerSearchFilterScopedState } from '@/object-record/relation-picker/states/relationPickerSearchFilterScopedState';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { IconForbid } from '@/ui/display/icon';
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 export type RelationPickerProps = {
   recordId?: string;
@@ -32,8 +30,8 @@ export const RelationPicker = ({
   initialSearchFilter,
   fieldDefinition,
 }: RelationPickerProps) => {
-  const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
-    useRecoilScopedState(relationPickerSearchFilterScopedState);
+  const { relationPickerSearchFilter, setRelationPickerSearchFilter } =
+    useRelationPicker();
 
   useEffect(() => {
     setRelationPickerSearchFilter(initialSearchFilter ?? '');

diff --git a/...dules/object-record/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx b/...dules/object-record/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx
@@ -2,14 +2,13 @@ import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
+import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 import { IconUserCircle } from '@/ui/display/icon';
-import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { mockedPeopleData } from '~/testing/mock-data/people';
 import { sleep } from '~/testing/sleep';
 
-import { relationPickerSearchFilterScopedState } from '../../states/relationPickerSearchFilterScopedState';
 import { EntityForSelect } from '../../types/EntityForSelect';
 import { SingleEntitySelect } from '../SingleEntitySelect';
 
@@ -44,9 +43,7 @@ const meta: Meta<typeof SingleEntitySelect> = {
     width,
   }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const relationPickerSearchFilter = useRecoilScopedValue(
-      relationPickerSearchFilterScopedState,
-    );
+    const { relationPickerSearchFilter } = useRelationPicker();
 
     return (
       <SingleEntitySelect

diff --git a/...src/modules/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates.ts b/...src/modules/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates.ts
@@ -12,17 +12,20 @@ export const useRelationPickerScopedStates = (args?: {
     relationPickerScopedId,
   );
 
-  const { identifiersMapperState } = getRelationPickerScopedStates({
-    relationPickerScopeId: scopeId,
-  });
-
-  const { searchQueryState } = getRelationPickerScopedStates({
+  const {
+    identifiersMapperState,
+    relationPickerSearchFilterState,
+    relationPickerPreselectedIdState,
+    searchQueryState,
+  } = getRelationPickerScopedStates({
     relationPickerScopeId: scopeId,
   });
 
   return {
     scopeId,
     identifiersMapperState,
+    relationPickerSearchFilterState,
+    relationPickerPreselectedIdState,
     searchQueryState,
   };
 };
diff --git a/front/src/modules/object-record/relation-picker/hooks/useEntitySelectScroll.ts b/front/src/modules/object-record/relation-picker/hooks/useEntitySelectScroll.ts
@@ -1,12 +1,10 @@
 import scrollIntoView from 'scroll-into-view';
 import { Key } from 'ts-key-enum';
 
+import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { CreateButtonId } from '../constants';
-import { RelationPickerRecoilScopeContext } from '../states/recoil-scope-contexts/RelationPickerRecoilScopeContext';
-import { relationPickerPreselectedIdScopedState } from '../states/relationPickerPreselectedIdScopedState';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
 import { getPreselectedIdIndex } from '../utils/getPreselectedIdIndex';
 
@@ -17,15 +15,12 @@ export const useEntitySelectScroll = ({
   selectableOptionIds: string[];
   containerRef: React.RefObject<HTMLDivElement>;
 }) => {
-  const [relationPickerPreselectedId, setRelationPickerPreselectedId] =
-    useRecoilScopedState(
-      relationPickerPreselectedIdScopedState,
-      RelationPickerRecoilScopeContext,
-    );
+  const { relationPickerPreselectedId, setRelationPickerPreselectedId } =
+    useRelationPicker();
 
   const preselectedIdIndex = getPreselectedIdIndex(
     selectableOptionIds,
-    relationPickerPreselectedId,
+    relationPickerPreselectedId ?? '',
   );
 
   const resetScroll = () => {

diff --git a/front/src/modules/object-record/relation-picker/hooks/useEntitySelectSearch.ts b/front/src/modules/object-record/relation-picker/hooks/useEntitySelectSearch.ts
@@ -1,16 +1,13 @@
 import debounce from 'lodash.debounce';
 
-import { relationPickerPreselectedIdScopedState } from '@/object-record/relation-picker/states/relationPickerPreselectedIdScopedState';
-import { relationPickerSearchFilterScopedState } from '@/object-record/relation-picker/states/relationPickerSearchFilterScopedState';
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 
 export const useEntitySelectSearch = () => {
-  const [, setRelationPickerPreselectedId] = useRecoilScopedState(
-    relationPickerPreselectedIdScopedState,
-  );
-
-  const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
-    useRecoilScopedState(relationPickerSearchFilterScopedState);
+  const {
+    setRelationPickerPreselectedId,
+    relationPickerSearchFilter,
+    setRelationPickerSearchFilter,
+  } = useRelationPicker();
 
   const debouncedSetSearchFilter = debounce(
     setRelationPickerSearchFilter,

diff --git a/front/src/modules/object-record/relation-picker/hooks/useRelationPicker.ts b/front/src/modules/object-record/relation-picker/hooks/useRelationPicker.ts
@@ -14,22 +14,36 @@ export const useRelationPicker = (props?: useRelationPickeProps) => {
     props?.relationPickerScopeId,
   );
 
-  const { identifiersMapperState, searchQueryState } =
-    useRelationPickerScopedStates({
-      relationPickerScopedId: scopeId,
-    });
+  const {
+    identifiersMapperState,
+    searchQueryState,
+    relationPickerSearchFilterState,
+    relationPickerPreselectedIdState,
+  } = useRelationPickerScopedStates({
+    relationPickerScopedId: scopeId,
+  });
 
   const [identifiersMapper, setIdentifiersMapper] = useRecoilState(
     identifiersMapperState,
   );
 
   const [searchQuery, setSearchQuery] = useRecoilState(searchQueryState);
 
+  const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
+    useRecoilState(relationPickerSearchFilterState);
+
+  const [relationPickerPreselectedId, setRelationPickerPreselectedId] =
+    useRecoilState(relationPickerPreselectedIdState);
+
   return {
     scopeId,
     identifiersMapper,
     setIdentifiersMapper,
     searchQuery,
     setSearchQuery,
+    relationPickerSearchFilter,
+    setRelationPickerSearchFilter,
+    relationPickerPreselectedId,
+    setRelationPickerPreselectedId,
   };
 };
diff --git a/...rc/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts b/...rc/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts
@@ -1,9 +1,8 @@
-import { atomFamily } from 'recoil';
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
 
-export const relationPickerPreselectedIdScopedState = atomFamily<
-  string,
-  string
+export const relationPickerPreselectedIdScopedState = createScopedState<
+  string | undefined
 >({
   key: 'relationPickerPreselectedIdScopedState',
-  default: (param) => param,
+  defaultValue: undefined,
 });
diff --git a/...src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts b/...src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts
@@ -1,8 +1,6 @@
-import { atomFamily } from 'recoil';
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
 
-export const relationPickerSearchFilterScopedState = atomFamily<string, string>(
-  {
-    key: 'relationPickerSearchFilterScopedState',
-    default: '',
-  },
-);
+export const relationPickerSearchFilterScopedState = createScopedState<string>({
+  key: 'relationPickerSearchFilterScopedState',
+  defaultValue: '',
+});
diff --git a/front/src/modules/object-record/relation-picker/utils/getRelationPickerScopedStates.ts b/front/src/modules/object-record/relation-picker/utils/getRelationPickerScopedStates.ts
@@ -1,4 +1,6 @@
 import { identifiersMapperScopedState } from '@/object-record/relation-picker/states/identifiersMapperScopedState';
+import { relationPickerPreselectedIdScopedState } from '@/object-record/relation-picker/states/relationPickerPreselectedIdScopedState';
+import { relationPickerSearchFilterScopedState } from '@/object-record/relation-picker/states/relationPickerSearchFilterScopedState';
 import { searchQueryScopedState } from '@/object-record/relation-picker/states/searchQueryScopedState';
 import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
 
@@ -17,8 +19,20 @@ export const getRelationPickerScopedStates = ({
     relationPickerScopeId,
   );
 
+  const relationPickerPreselectedIdState = getScopedState(
+    relationPickerPreselectedIdScopedState,
+    relationPickerScopeId,
+  );
+
+  const relationPickerSearchFilterState = getScopedState(
+    relationPickerSearchFilterScopedState,
+    relationPickerScopeId,
+  );
+
   return {
     identifiersMapperState,
+    relationPickerSearchFilterState,
+    relationPickerPreselectedIdState,
     searchQueryState,
   };
 };