feat(reply): Change props to generic type

box · May 14, 2020 · 11bf610 · 11bf610
1 parent df80773
commit 11bf610
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 27 deletions.
diff --git a/src/components/Popups/ReplyField/ItemList.tsx b/src/components/Popups/ReplyField/ItemList.tsx
@@ -1,31 +1,30 @@
 import React, { SyntheticEvent } from 'react';
 import noop from 'lodash/noop';
-import uniqueId from 'lodash/uniqueId';
 import ItemRow from './ItemRow';
 import './ItemList.scss';
 
-export type Props = {
+export type Props<T extends { id: string }> = {
     activeItemIndex?: number;
     itemRowAs?: JSX.Element;
-    items: Record<string, unknown>[];
+    items: T[];
     onSelect: (index: number, event: React.SyntheticEvent) => void;
     setActiveItemIndex?: (index: number) => void;
 };
 
-const ItemList = ({
+export default function ItemList<T extends { id: string }>({
     activeItemIndex = 0,
     itemRowAs = <ItemRow />,
     items,
     onSelect,
     setActiveItemIndex = noop,
     ...rest
-}: Props): JSX.Element => {
+}: Props<T>): JSX.Element {
     return (
         <ul data-testid="ba-ItemList" role="listbox" {...rest}>
             {items.map((item, index) =>
                 React.cloneElement(itemRowAs, {
                     ...item,
-                    key: item.id ? String(item.id) : uniqueId(),
+                    key: item.id,
                     className: 'ba-ItemList-row',
                     isActive: index === activeItemIndex,
                     onClick: (event: SyntheticEvent) => {
@@ -42,6 +41,4 @@ const ItemList = ({
             )}
         </ul>
     );
-};
-
-export default ItemList;
+}
diff --git a/src/components/Popups/ReplyField/PopupList.tsx b/src/components/Popups/ReplyField/PopupList.tsx
@@ -7,10 +7,10 @@ import PopupBase from '../PopupBase';
 import { Options, PopupReference } from '../Popper';
 import './PopupList.scss';
 
-export type Props = {
+export type Props<T extends { id: string }> = {
     activeItemIndex?: number;
     itemRowAs?: JSX.Element;
-    items: Record<string, unknown>[];
+    items: T[];
     onSelect: (index: number, event: React.SyntheticEvent) => void;
     options?: Partial<Options>;
     reference: PopupReference;
@@ -35,16 +35,21 @@ const defaultOptions: Partial<Options> = {
     placement: 'bottom-start',
 };
 
-const PopupList = ({ items, reference, options, ...rest }: Props): JSX.Element => (
-    <PopupBase className="ba-PopupList" options={{ ...defaultOptions, ...options }} reference={reference}>
-        {isEmpty(items) ? (
-            <div className="ba-PopupList-prompt">
-                <FormattedMessage {...messages.popupListPrompt} />
-            </div>
-        ) : (
-            <ItemList items={items} {...rest} />
-        )}
-    </PopupBase>
-);
-
-export default PopupList;
+export default function PopupList<T extends { id: string }>({
+    items,
+    reference,
+    options,
+    ...rest
+}: Props<T>): JSX.Element {
+    return (
+        <PopupBase className="ba-PopupList" options={{ ...defaultOptions, ...options }} reference={reference}>
+            {isEmpty(items) ? (
+                <div className="ba-PopupList-prompt">
+                    <FormattedMessage {...messages.popupListPrompt} />
+                </div>
+            ) : (
+                <ItemList items={items} {...rest} />
+            )}
+        </PopupBase>
+    );
+}
diff --git a/src/components/Popups/ReplyField/ReplyField.tsx b/src/components/Popups/ReplyField/ReplyField.tsx
@@ -235,7 +235,7 @@ export default class ReplyField extends React.Component<Props, State> {
                 />
 
                 {popupReference && (
-                    <PopupList
+                    <PopupList<Collaborator>
                         activeItemIndex={activeItemIndex}
                         itemRowAs={itemRowAs}
                         items={this.getCollaborators(getActiveMentionForEditorState(editorState))}

diff --git a/src/components/Popups/ReplyField/__tests__/ItemList-test.tsx b/src/components/Popups/ReplyField/__tests__/ItemList-test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import ItemList, { Props } from '../ItemList';
+import { Collaborator } from '../../../../@types';
 
 describe('components/Popups/ReplyField/ItemList', () => {
-    const defaults: Props = {
+    const defaults: Props<Collaborator> = {
         items: [
             { id: 'testid1', name: 'test1' },
             { id: 'testid2', name: 'test2' },

diff --git a/src/components/Popups/ReplyField/__tests__/PopupList-test.tsx b/src/components/Popups/ReplyField/__tests__/PopupList-test.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import PopupBase from '../../PopupBase';
 import PopupList, { Props } from '../PopupList';
+import { Collaborator } from '../../../../@types';
 
 describe('components/Popups/ReplyField/PopupList', () => {
-    const defaults: Props = {
+    const defaults: Props<Collaborator> = {
         items: [],
         onSelect: jest.fn(),
         reference: document.createElement('div'),