Musish · raphaelvigee · Aug 22, 2019 · Aug 4, 2019 · Aug 4, 2019 · Aug 5, 2019
diff --git a/package.json b/package.json
@@ -15,10 +15,18 @@
     "@sentry/browser": "^4.6.6",
     "@symfony/webpack-encore": "^0.27.0",
     "@types/classnames": "^2.2.7",
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/js-md5": "^0.4.2",
+    "@types/lodash": "^4.14.136",
+    "@types/mousetrap": "^1.6.3",
     "@types/prop-types": "^15.7.1",
+    "@types/qs": "^6.5.3",
     "@types/react": "^16.8.18",
     "@types/react-dom": "^16.8.4",
+    "@types/react-router-dom": "^4.3.4",
+    "@types/react-s-alert": "^1.3.2",
     "@types/react-virtualized": "^9.21.1",
+    "@types/webpack-env": "^1.14.0",
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
     "concurrently": "^4.1.0",

diff --git a/src/app/components/App.jsx → src/app/components/App.tsx b/src/app/components/App.jsx → src/app/components/App.tsx
@@ -1,33 +1,34 @@
 import React, { useEffect } from 'react';
-import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
-import HTML5Backend from 'react-dnd-html5-backend';
 import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import { RouteComponentProps } from 'react-router';
+import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
 import Alert from 'react-s-alert';
-import MusicKitProvider from './Providers/MusicKitProvider';
-import AuthorizeProvider from './Providers/AuthorizeProvider';
-import AlbumsPage from './Routes/Library/Albums/AlbumsPage';
-import Layout from './Layout';
-import ArtistPage from './Routes/Catalog/Artist/ArtistPage';
-import ArtistsPage from './Routes/Library/Artists/ArtistsPage';
-import PlaylistPage from './Routes/Playlist/PlaylistPage';
-import SongsPage from './Routes/Library/Songs/SongsPage';
-import PlaylistsPage from './Routes/Library/Playlists/PlaylistsPage';
-import RecentlyAddedPage from './Routes/Library/RecentlyAdded/RecentlyAddedPage';
-import ForYouPage from './Routes/Catalog/ForYou/ForYouPage';
-import BrowsePage from './Routes/Catalog/Browse/BrowsePage';
-import GenrePage from './Routes/Catalog/Browse/Genres/Genre/GenrePage';
-import RadioPage from './Routes/Catalog/Radio/RadioPage';
 import ConnectedMenu from './Common/ContextMenu/ContextMenu';
 import LyricsModal from './Common/Player/Lyrics/LyricsModal';
-import SearchPage from './Routes/Search/SearchPage';
+import Layout from './Layout';
+import AuthorizeProvider from './Providers/AuthorizeProvider';
 import GoogleAnalyticsProvider from './Providers/GoogleAnalyticsProvider';
-import SentryBoundary from './Providers/SentryBoundary';
 import LastfmProvider from './Providers/LastfmProvider';
-import ModalProvider, { ModalRenderer } from './Providers/ModalProvider';
 import LyricsModalProvider from './Providers/LyricsModalProvider';
-import QueueModalProvider from './Providers/QueueProvider';
+import ModalProvider, { ModalRenderer } from './Providers/ModalProvider';
+import MusicKitProvider from './Providers/MusicKitProvider';
 import PlaylistsProvider from './Providers/PlaylistsProvider';
+import QueueModalProvider from './Providers/QueueProvider';
+import SentryBoundary from './Providers/SentryBoundary';
 import AlbumPage from './Routes/Album/AlbumPage';
+import ArtistPage from './Routes/Catalog/Artist/ArtistPage';
+import BrowsePage from './Routes/Catalog/Browse/BrowsePage';
+import GenrePage from './Routes/Catalog/Browse/Genres/Genre/GenrePage';
+import ForYouPage from './Routes/Catalog/ForYou/ForYouPage';
+import RadioPage from './Routes/Catalog/Radio/RadioPage';
+import AlbumsPage from './Routes/Library/Albums/AlbumsPage';
+import ArtistsPage from './Routes/Library/Artists/ArtistsPage';
+import PlaylistsPage from './Routes/Library/Playlists/PlaylistsPage';
+import RecentlyAddedPage from './Routes/Library/RecentlyAdded/RecentlyAddedPage';
+import SongsPage from './Routes/Library/Songs/SongsPage';
+import PlaylistPage from './Routes/Playlist/PlaylistPage';
+import SearchPage from './Routes/Search/SearchPage';
 
 function App() {
   useEffect(() => {
@@ -60,28 +61,28 @@ function App() {
                             <Route
                               path={'/playlist/:id'}
                               exact
-                              component={props => (
+                              component={(props: RouteComponentProps) => (
                                 <PlaylistPage key={props.location.pathname} {...props} />
                               )}
                             />
                             <Route
                               path={'/me/playlist/:id'}
                               exact
-                              component={props => (
+                              component={(props: RouteComponentProps) => (
                                 <PlaylistPage key={props.location.pathname} {...props} />
                               )}
                             />
                             <Route
                               path={'/album/:id'}
                               exact
-                              component={props => (
+                              component={(props: RouteComponentProps) => (
                                 <AlbumPage key={props.location.pathname} {...props} />
                               )}
                             />
                             <Route
                               path={'/me/album/:id'}
                               exact
-                              component={props => (
+                              component={(props: RouteComponentProps) => (
                                 <AlbumPage key={props.location.pathname} {...props} />
                               )}
                             />
@@ -99,7 +100,9 @@ function App() {
                                 match: {
                                   params: { source, query },
                                 },
-                              }) => <SearchPage key={`${source}${query}`} />}
+                              }: RouteComponentProps<{ source: string; query: string }>) => (
+                                <SearchPage key={`${source}${query}`} />
+                              )}
                             />
                             <Redirect to={'/'} />
                           </Switch>

diff --git a/...components/Common/AlbumItem/AlbumItem.jsx → ...components/Common/AlbumItem/AlbumItem.tsx b/...components/Common/AlbumItem/AlbumItem.jsx → ...components/Common/AlbumItem/AlbumItem.tsx
@@ -1,26 +1,34 @@
+import cx from 'classnames';
 import React from 'react';
-
-import PropTypes from 'prop-types';
+import { ConnectDragSource, DragSource, DragSourceConnector, DragSourceMonitor } from 'react-dnd';
+import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
-import { DragSource } from 'react-dnd';
-import cx from 'classnames';
-import classes from './AlbumItem.scss';
-import AlbumPanel from '../AlbumPanel/AlbumPanel';
 import DragDropType from '../../../utils/Constants/DragDropType';
+import { useModal } from '../../Providers/ModalProvider';
+import AlbumPanel from '../AlbumPanel/AlbumPanel';
 import ContextMenuTrigger from '../ContextMenu/ContextMenuTrigger';
 import AlbumContextMenu from '../ContextMenu/Types/Album/AlbumContextMenu';
-import { useModal } from '../../Providers/ModalProvider';
+import classes from './AlbumItem.scss';
+
+interface AlbumItemProps extends RouteComponentProps {
+  navigate?: boolean;
+  album?: any;
+  id?: any;
+  size: number;
+  connectDragSource: ConnectDragSource;
+  isOver?: boolean;
+}
 
-function AlbumItem(props) {
+const AlbumItem: React.FC<AlbumItemProps> = (props: AlbumItemProps) => {
   const { push: pushModal } = useModal();
 
-  function handleOpen(replace) {
+  function handleOpen() {
     const id = props.id || props.album.id;
 
     if (props.navigate) {
       props.history.push(`/me/album/${id}`);
     } else {
-      replace(<AlbumPanel key={id} id={id} pseudoRoute />);
+      pushModal(<AlbumPanel key={id} id={id} pseudoRoute />);
     }
   }
 
@@ -35,7 +43,7 @@ function AlbumItem(props) {
 
   return connectDragSource(
     <div className={cx(classes.container, { [classes.droppable]: isOver })} style={{ width: size }}>
-      <div onClick={() => handleOpen(pushModal)}>
+      <div onClick={handleOpen}>
         <ContextMenuTrigger holdToDisplay={-1} render={() => <AlbumContextMenu album={album} />}>
           <div className={classes.imageContainer} style={{ width: size, height: size }}>
             <img
@@ -60,16 +68,6 @@ function AlbumItem(props) {
       </div>
     </div>,
   );
-}
-
-AlbumItem.propTypes = {
-  navigate: PropTypes.bool,
-  history: PropTypes.any.isRequired,
-  album: PropTypes.any,
-  id: PropTypes.any,
-  size: PropTypes.number.isRequired,
-  connectDragSource: PropTypes.func.isRequired,
-  isOver: PropTypes.bool,
 };
 
 AlbumItem.defaultProps = {
@@ -80,14 +78,14 @@ AlbumItem.defaultProps = {
 };
 
 const dndSpec = {
-  beginDrag(props) {
+  beginDrag(props: AlbumItemProps) {
     return {
       album: props.id || props.album.id,
     };
   },
 };
 
-function dndCollect(connect, monitor) {
+function dndCollect(connect: DragSourceConnector, monitor: DragSourceMonitor) {
   return {
     connectDragSource: connect.dragSource(),
     isDragging: monitor.isDragging(),