Clean and re-organize post table refactoring (#1000)

* Clean and re-organize post table refactoring * Fix tests
2023-07-30 18:26:32 -07:00
parent 86a2d67efd
commit ade5e52e55
336 changed files with 638 additions and 2757 deletions
--- a/front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx
+++ b/front/src/modules/ui/input/relation-picker/components/SingleEntitySelectBase.tsx
@ -0,0 +1,102 @@
+import { useRef } from 'react';
+import { Key } from 'ts-key-enum';
+
+import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
+import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
+import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
+import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { Avatar } from '@/users/components/Avatar';
+import { isDefined } from '~/utils/isDefined';
+import { isNonEmptyString } from '~/utils/isNonEmptyString';
+
+import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
+import { EntityForSelect } from '../types/EntityForSelect';
+import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
+
+import { DropdownMenuSkeletonItem } from './skeletons/DropdownMenuSkeletonItem';
+
+export type EntitiesForSingleEntitySelect<
+  CustomEntityForSelect extends EntityForSelect,
+> = {
+  selectedEntity: CustomEntityForSelect;
+  entitiesToSelect: CustomEntityForSelect[];
+  loading: boolean;
+};
+
+export function SingleEntitySelectBase<
+  CustomEntityForSelect extends EntityForSelect,
+>({
+  entities,
+  onEntitySelected,
+  onCancel,
+}: {
+  entities: EntitiesForSingleEntitySelect<CustomEntityForSelect>;
+  onEntitySelected: (entity: CustomEntityForSelect | null | undefined) => void;
+  onCancel?: () => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  let entitiesInDropdown = isDefined(entities.selectedEntity)
+    ? [entities.selectedEntity, ...(entities.entitiesToSelect ?? [])]
+    : entities.entitiesToSelect ?? [];
+
+  entitiesInDropdown = entitiesInDropdown.filter((entity) =>
+    isNonEmptyString(entity.name),
+  );
+
+  const { hoveredIndex, resetScroll } = useEntitySelectScroll({
+    entities: entitiesInDropdown,
+    containerRef,
+  });
+
+  useScopedHotkeys(
+    Key.Enter,
+    () => {
+      onEntitySelected(entitiesInDropdown[hoveredIndex]);
+      resetScroll();
+    },
+    RelationPickerHotkeyScope.RelationPicker,
+    [entitiesInDropdown, hoveredIndex, onEntitySelected],
+  );
+
+  useScopedHotkeys(
+    Key.Escape,
+    () => {
+      onCancel?.();
+    },
+    RelationPickerHotkeyScope.RelationPicker,
+    [onCancel],
+  );
+
+  entitiesInDropdown = entitiesInDropdown.filter((entity) =>
+    isNonEmptyString(entity.name.trim()),
+  );
+
+  return (
+    <DropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
+      {entities.loading ? (
+        <DropdownMenuSkeletonItem />
+      ) : entitiesInDropdown.length === 0 ? (
+        <DropdownMenuItem>No result</DropdownMenuItem>
+      ) : (
+        entitiesInDropdown?.map((entity, index) => (
+          <DropdownMenuSelectableItem
+            key={entity.id}
+            selected={entities.selectedEntity?.id === entity.id}
+            hovered={hoveredIndex === index}
+            onClick={() => onEntitySelected(entity)}
+          >
+            <Avatar
+              avatarUrl={entity.avatarUrl}
+              colorId={entity.id}
+              placeholder={entity.name}
+              size="md"
+              type={entity.avatarType ?? 'rounded'}
+            />
+            <OverflowingTextWithTooltip text={entity.name} />
+          </DropdownMenuSelectableItem>
+        ))
+      )}
+    </DropdownMenuItemsContainer>
+  );
+}