Convert QueuePopupContainer to typescript

packages/app/app/components/PlayQueue/QueuePopup/index.tsx

@@ -12,7 +12,7 @@ import * as QueueActions from '../../../actions/queue';
 import styles from './styles.scss';
 import { PluginsState } from '../../../reducers/plugins';
 
-type QueuePopupProps = {
+export type QueuePopupProps = {
   trigger: React.ReactNode;
   isQueueItemCompact: boolean;
 

packages/app/app/containers/PlayQueueContainer/PlayQueueContainer.test.tsx

@@ -17,9 +17,8 @@ describe('Play Queue container', () => {
     setupI18Next();
   });
 
-  beforeEach(() => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { store } = require('@nuclear/core');
+  beforeEach(async () => {
+    const { store } = await import('@nuclear/core');
     store.clear();
   });
 

packages/app/app/containers/QueuePopupContainer/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { clipboard } from 'electron';
+import * as QueueActions from '../../actions/queue';
+import QueuePopup, { QueuePopupProps } from '../../components/PlayQueue/QueuePopup';
+import { RootState } from '../../reducers';
+import { bindActionCreators } from 'redux';
+
+type QueuePopupContainerProps = Omit<QueuePopupProps, 'plugins' | 'actions' | 'copyToClipboard'>;
+
+const QueuePopupContainer: React.FC<QueuePopupContainerProps> = (props) => {
+  const dispatch = useDispatch();
+  const plugins = useSelector((state: RootState) => state.plugin);
+
+  const copyToClipboard = (text: string) => {
+    if (text?.length) {
+      clipboard.writeText(text);
+    }
+  };
+
+  const actions = React.useMemo(() => bindActionCreators(QueueActions, dispatch), [dispatch]);
+
+  return <QueuePopup plugins={plugins} actions={actions} copyToClipboard={copyToClipboard} {...props} />;
+};
+
+export default QueuePopupContainer;