Refactor

twentyhq · Jul 15, 2023 · f1d88fc · f1d88fc
1 parent 24fa920
commit f1d88fc
Show file tree

Hide file tree

Showing 13 changed files with 101 additions and 62 deletions.
diff --git a/front/src/AppNavbar.tsx b/front/src/AppNavbar.tsx
@@ -1,8 +1,7 @@
 import { useLocation } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
-import { useSetRecoilState } from 'recoil';
 
-import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpened';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { SettingsNavbar } from '@/settings/components/SettingsNavbar';
 import {
   IconBuildingSkyscraper,
@@ -21,8 +20,7 @@ import NavTitle from './modules/ui/layout/navbar/NavTitle';
 export function AppNavbar() {
   const theme = useTheme();
   const currentPath = useLocation().pathname;
-
-  const setCommandBarOpen = useSetRecoilState(isCommandMenuOpenedState);
+  const { openCommandMenu } = useCommandMenu();
 
   const isSubNavbarDisplayed = useIsSubNavbarDisplayed();
 
@@ -34,7 +32,9 @@ export function AppNavbar() {
             <NavItem
               label="Search"
               icon={<IconSearch size={theme.icon.size.md} />}
-              onClick={() => setCommandBarOpen(true)}
+              onClick={() => {
+                openCommandMenu();
+              }}
             />
             <NavItem
               label="Inbox"

diff --git a/front/src/modules/command-menu/components/CommandMenu.tsx b/front/src/modules/command-menu/components/CommandMenu.tsx
@@ -1,15 +1,15 @@
 import { useState } from 'react';
 import { useTheme } from '@emotion/react';
-import { useRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
 import { useFilteredSearchCompanyQuery } from '@/companies/services';
-import { usePreviousHotkeyScope } from '@/lib/hotkeys/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/lib/hotkeys/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/lib/hotkeys/types/AppHotkeyScope';
 import { useFilteredSearchPeopleQuery } from '@/people/services';
 import { Avatar } from '@/users/components/Avatar';
 
-import { isCommandMenuOpenedState } from '../states/isCommandMenuOpened';
+import { useCommandMenu } from '../hooks/useCommandMenu';
+import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 
 import { CommandMenuItem } from './CommandMenuItem';
 import {
@@ -21,35 +21,29 @@ import {
 } from './CommandMenuStyles';
 
 export function CommandMenu() {
-  const [open, setOpen] = useRecoilState(isCommandMenuOpenedState);
+  const { openCommandMenu, closeCommandMenu } = useCommandMenu();
+  const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
   const [search, setSearch] = useState('');
 
   useScopedHotkeys(
     'ctrl+k,meta+k',
     () => {
-      handleOpenChange(!open);
+      openCommandMenu();
     },
     AppHotkeyScope.CommandMenu,
-    [setOpen, open, handleOpenChange],
+    [openCommandMenu],
   );
 
-  const {
-    setHotkeyScopeAndMemorizePreviousScope,
-    goBackToPreviousHotkeyScope,
-  } = usePreviousHotkeyScope();
-
-  function handleOpenChange(newOpenState: boolean) {
-    if (newOpenState) {
-      setOpen(true);
-      setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenu);
-    } else {
-      setOpen(false);
-      goBackToPreviousHotkeyScope();
-    }
-  }
-
-  const people = useFilteredSearchPeopleQuery(search, [], 3);
-  const companies = useFilteredSearchCompanyQuery(search, [], 3);
+  const people = useFilteredSearchPeopleQuery({
+    searchFilter: search,
+    selectedIds: [],
+    limit: 3,
+  });
+  const companies = useFilteredSearchCompanyQuery({
+    searchFilter: search,
+    selectedIds: [],
+    limit: 3,
+  });
 
   /*
   TODO: Allow performing actions on page through CommandBar 
@@ -92,8 +86,12 @@ export function CommandMenu() {
 
   return (
     <StyledDialog
-      open={open}
-      onOpenChange={handleOpenChange}
+      open={isCommandMenuOpened}
+      onOpenChange={(opened) => {
+        if (!opened) {
+          closeCommandMenu();
+        }
+      }}
       label="Global Command Menu"
       shouldFilter={false}
     >

diff --git a/front/src/modules/command-menu/components/CommandMenuItem.tsx b/front/src/modules/command-menu/components/CommandMenuItem.tsx
@@ -5,7 +5,7 @@ import { useSetRecoilState } from 'recoil';
 
 import { IconArrowUpRight } from '@/ui/icons';
 
-import { isCommandMenuOpenedState } from '../states/isCommandMenuOpened';
+import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 
 import {
   StyledIconAndLabelContainer,
@@ -30,15 +30,15 @@ export function CommandMenuItem({
   icon,
   shortcuts,
 }: OwnProps) {
-  const setOpen = useSetRecoilState(isCommandMenuOpenedState);
+  const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
   const navigate = useNavigate();
 
   if (to && !icon) {
     icon = <IconArrowUpRight />;
   }
 
   const onItemClick = () => {
-    setOpen(false);
+    setIsCommandMenuOpened(false);
 
     if (onClick) {
       onClick();

diff --git a/front/src/modules/command-menu/components/CommandMenuStyles.tsx b/front/src/modules/command-menu/components/CommandMenuStyles.tsx
@@ -12,8 +12,8 @@ export const StyledDialog = styled(Command.Dialog)`
   padding: 0;
   padding: ${({ theme }) => theme.spacing(1)};
   position: fixed;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  top: 30%;
+  transform: translateX(-50%);
   width: 100%;
   z-index: 1000;
 `;

diff --git a/front/src/modules/command-menu/hooks/useCommandMenu.ts b/front/src/modules/command-menu/hooks/useCommandMenu.ts
@@ -0,0 +1,31 @@
+import { useRecoilState } from 'recoil';
+
+import { usePreviousHotkeyScope } from '@/lib/hotkeys/hooks/usePreviousHotkeyScope';
+import { AppHotkeyScope } from '@/lib/hotkeys/types/AppHotkeyScope';
+
+import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
+
+export function useCommandMenu() {
+  const [, setIsCommandMenuOpenedState] = useRecoilState(
+    isCommandMenuOpenedState,
+  );
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  function openCommandMenu() {
+    setIsCommandMenuOpenedState(true);
+    setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenu);
+  }
+
+  function closeCommandMenu() {
+    setIsCommandMenuOpenedState(false);
+    goBackToPreviousHotkeyScope();
+  }
+
+  return {
+    openCommandMenu,
+    closeCommandMenu,
+  };
+}
diff --git a/...ommand-menu/states/isCommandMenuOpened.ts → ...d-menu/states/isCommandMenuOpenedState.ts b/...ommand-menu/states/isCommandMenuOpened.ts → ...d-menu/states/isCommandMenuOpenedState.ts
diff --git a/front/src/modules/comments/components/comment-thread/CommentThreadRelationPicker.tsx b/front/src/modules/comments/components/comment-thread/CommentThreadRelationPicker.tsx
@@ -87,15 +87,15 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
       ?.filter((relation) => relation.commentableType === 'Company')
       .map((relation) => relation.commentableId) ?? [];
 
-  const personsForMultiSelect = useFilteredSearchPeopleQuery(
+  const personsForMultiSelect = useFilteredSearchPeopleQuery({
     searchFilter,
-    peopleIds,
-  );
+    selectedIds: peopleIds,
+  });
 
-  const companiesForMultiSelect = useFilteredSearchCompanyQuery(
+  const companiesForMultiSelect = useFilteredSearchCompanyQuery({
     searchFilter,
-    companyIds,
-  );
+    selectedIds: companyIds,
+  });
 
   const {
     setHotkeyScopeAndMemorizePreviousScope,

diff --git a/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx b/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx
@@ -18,10 +18,12 @@ export function FilterDropdownCompanySearchSelect() {
     TableContext,
   );
 
-  const usersForSelect = useFilteredSearchCompanyQuery(
-    filterDropdownSearchInput,
-    filterDropdownSelectedEntityId ? [filterDropdownSelectedEntityId] : [],
-  );
+  const usersForSelect = useFilteredSearchCompanyQuery({
+    searchFilter: filterDropdownSearchInput,
+    selectedIds: filterDropdownSelectedEntityId
+      ? [filterDropdownSelectedEntityId]
+      : [],
+  });
 
   return (
     <FilterDropdownEntitySearchSelect

diff --git a/front/src/modules/companies/components/NewCompanyBoardCard.tsx b/front/src/modules/companies/components/NewCompanyBoardCard.tsx
@@ -11,7 +11,7 @@ export function NewCompanyBoardCard() {
     relationPickerSearchFilterScopedState,
   );
 
-  const companies = useFilteredSearchCompanyQuery(searchFilter);
+  const companies = useFilteredSearchCompanyQuery({ searchFilter });
 
   const handleEntitySelect = useCallback(async (companyId: string) => {
     return;

diff --git a/front/src/modules/companies/components/NewCompanyProgressButton.tsx b/front/src/modules/companies/components/NewCompanyProgressButton.tsx
@@ -91,7 +91,7 @@ export function NewCompanyProgressButton() {
   const [searchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );
-  const companies = useFilteredSearchCompanyQuery(searchFilter);
+  const companies = useFilteredSearchCompanyQuery({ searchFilter });
 
   return (
     <>

diff --git a/front/src/modules/companies/services/select.ts b/front/src/modules/companies/services/select.ts
@@ -46,16 +46,20 @@ export function useCompaniesQuery(
   return useGetCompaniesQuery({ variables: { orderBy, where } });
 }
 
-export function useFilteredSearchCompanyQuery(
-  searchFilter: string,
-  companyIds: string[] = [],
-  limit?: number,
-) {
+export function useFilteredSearchCompanyQuery({
+  searchFilter,
+  selectedIds = [],
+  limit,
+}: {
+  searchFilter: string;
+  selectedIds?: string[];
+  limit?: number;
+}) {
   return useFilteredSearchEntityQuery({
     queryHook: useSearchCompanyQuery,
     searchOnFields: ['name'],
     orderByField: 'name',
-    selectedIds: companyIds,
+    selectedIds: selectedIds,
     mappingFunction: (company) =>
       ({
         id: company.id,

diff --git a/front/src/modules/people/components/PeopleCompanyPicker.tsx b/front/src/modules/people/components/PeopleCompanyPicker.tsx
@@ -28,10 +28,10 @@ export function PeopleCompanyPicker({ people }: OwnProps) {
 
   const addToScopeStack = useSetHotkeyScope();
 
-  const companies = useFilteredSearchCompanyQuery(
+  const companies = useFilteredSearchCompanyQuery({
     searchFilter,
-    people.company?.id ? [people.company.id] : [],
-  );
+    selectedIds: people.company?.id ? [people.company.id] : [],
+  });
 
   async function handleEntitySelected(entity: any) {
     await updatePeople({

diff --git a/front/src/modules/people/services/select.ts b/front/src/modules/people/services/select.ts
@@ -47,16 +47,20 @@ export function usePeopleQuery(
   });
 }
 
-export function useFilteredSearchPeopleQuery(
-  searchFilter: string,
-  peopleIds: string[] = [],
-  limit?: number,
-) {
+export function useFilteredSearchPeopleQuery({
+  searchFilter,
+  selectedIds = [],
+  limit,
+}: {
+  searchFilter: string;
+  selectedIds?: string[];
+  limit?: number;
+}) {
   return useFilteredSearchEntityQuery({
     queryHook: useSearchPeopleQuery,
     searchOnFields: ['firstName', 'lastName'],
     orderByField: 'lastName',
-    selectedIds: peopleIds,
+    selectedIds: selectedIds,
     mappingFunction: (entity) =>
       ({
         id: entity.id,