apply suggestion

src/components/common/Sort.tsx

@@ -0,0 +1,54 @@
+import React, { FC, useCallback, useEffect, useRef } from 'react';
+import IconButtonElement from '../../elements/IconButtonElement';
+import { ViewQuerySettings } from '../../types/interface';
+
+interface SortProps {
+    getSortMenuOptions: () => {
+        name: string;
+        value: string;
+    }[];
+    viewQuerySettings: ViewQuerySettings;
+    setViewQuerySettings: React.Dispatch<React.SetStateAction<ViewQuerySettings>>;
+}
+
+const Sort: FC<SortProps> = ({
+    getSortMenuOptions,
+    viewQuerySettings,
+    setViewQuerySettings
+}) => {
+    const element = useRef<HTMLDivElement>(null);
+
+    const showSortMenu = useCallback(() => {
+        import('../sortmenu/sortmenu').then(({default: SortMenu}) => {
+            const sortMenu = new SortMenu();
+            sortMenu.show({
+                settings: viewQuerySettings,
+                sortOptions: getSortMenuOptions(),
+                setSortValues: setViewQuerySettings
+            });
+        });
+    }, [getSortMenuOptions, viewQuerySettings, setViewQuerySettings]);
+
+    useEffect(() => {
+        const btnSort = element.current?.querySelector('.btnSort');
+
+        btnSort?.addEventListener('click', showSortMenu);
+
+        return () => {
+            btnSort?.removeEventListener('click', showSortMenu);
+        };
+    }, [showSortMenu]);
+
+    return (
+        <div ref={element}>
+            <IconButtonElement
+                is='paper-icon-button-light'
+                className='btnSort autoSize'
+                title='Sort'
+                icon='material-icons sort_by_alpha'
+            />
+        </div>
+    );
+};
+
+export default Sort;