Equalizer and FavouriteAlbumview component to typescript (nukeop#1105)

* Equalizer preset conversion * Conversion to typescript * type changes * Preset type * expanding the types * Resolved type mismatch * Fixing and adding 2 new type changes
tshego3 · Dec 1, 2021 · 73ed587 · 73ed587
1 parent e2d2d23
commit 73ed587
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 28 deletions.
diff --git a/packages/app/app/components/ArtistView/index.tsx b/packages/app/app/components/ArtistView/index.tsx
@@ -14,14 +14,16 @@ import { Artist } from '@nuclear/core';
 import styles from './styles.scss';
 import artPlaceholder from '../../../resources/media/art_placeholder.png';
 
+type ReleaseTypeProps = 'master' | 'release'
+
 type ArtistViewProps = {
   artist: Artist & {
     loading?: boolean;
   };
   isFavorite: boolean;
   addTrackToQueue: (item: any) => Promise<void>;
   artistInfoSearchByName: (artistName: any) => Promise<void>;
-  albumInfoSearch: (albumId: any, releaseType: any, release: any) => Promise<void>;
+  albumInfoSearch: (albumId: string, releaseType: ReleaseTypeProps, release: string) => Promise<void>;
   removeFavoriteArtist: React.MouseEventHandler;
   addFavoriteArtist: React.MouseEventHandler;
 }

diff --git a/...p/components/EqualizerPresetList/index.js → .../components/EqualizerPresetList/index.tsx b/...p/components/EqualizerPresetList/index.js → .../components/EqualizerPresetList/index.tsx
@@ -1,21 +1,35 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { List, Icon } from 'semantic-ui-react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 import styles from './styles.scss';
 
-const EqualizerPresetList = ({ presets, onClickItem, selected }) => {
+type EqualizerPresetListProps ={
+  presets: Array<Preset>;
+  onClickItem: (x: string) => void;
+  selected: string;
+}
+
+type Preset ={
+  id : string;
+  label : string;
+  preAmp : number;
+  values : Array<number>;
+
+}
+
+const EqualizerPresetList:React.FC<EqualizerPresetListProps> = ({ presets, onClickItem, selected }) => {
   const { t } = useTranslation('equalizer');
+
   return (
     <div className={styles.preset_list_container}>
       <h3>{t('presets')}</h3>
       <List divided verticalAlign='middle' className={styles.equalizer_list}>
         {presets.map((preset, index) => (
           <List.Item
             key={index}
-            onClick={() => preset !== selected && onClickItem(preset.id)}
+            onClick={() => preset.id !== selected && onClickItem(preset.id)}
             className={
               classNames(
                 styles.equalizer_item,
@@ -34,10 +48,5 @@ const EqualizerPresetList = ({ presets, onClickItem, selected }) => {
     </div>
   );
 };
-EqualizerPresetList.propTypes = {
-  presets: PropTypes.array.isRequired,
-  onClickItem: PropTypes.func,
-  selected: PropTypes.string
-};
 
 export default EqualizerPresetList;
diff --git a/...pp/components/FavoriteAlbumsView/index.js → ...p/components/FavoriteAlbumsView/index.tsx b/...pp/components/FavoriteAlbumsView/index.js → ...p/components/FavoriteAlbumsView/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import _ from 'lodash';
-import { withRouter } from 'react-router';
+import { withRouter, RouteComponentProps } from 'react-router';
 import { Icon, Segment } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,6 +9,33 @@ import Header from '../Header';
 
 import styles from './styles.scss';
 
+type Tracklist = { 
+  uuid:string;
+  artist: { name: string };
+  title: string;
+  duration: number;
+  }
+
+type Album = {
+  id: string;
+  title: string;
+  thumb: string;
+  coverImage: string;
+  artists: { name:string } [];
+  images: Array<string>;
+  genres: Array<string>;
+  tracklist: Array<Tracklist>
+}
+
+type ReleaseTypeProps = 'master' | 'release'
+
+type FavoriteAlbumsViewProps = {
+  albums: Array<Album>;
+  removeFavoriteAlbum: React.MouseEventHandler;
+  albumInfoSearch: (albumId: string, releaseType: ReleaseTypeProps, release: string) => Promise<void>;
+  history:RouteComponentProps['history']
+}
+
 const EmptyState = () => {
   const { t } = useTranslation('favorite-albums');
   return (
@@ -24,7 +50,7 @@ const EmptyState = () => {
   );
 };
 
-const FavoriteAlbumsView = ({
+const FavoriteAlbumsView:React.FC<FavoriteAlbumsViewProps & RouteComponentProps > = ({
   albums,
   removeFavoriteAlbum,
   albumInfoSearch,
@@ -57,20 +83,4 @@ const FavoriteAlbumsView = ({
   );
 };
 
-FavoriteAlbumsView.propTypes = {
-  albums: PropTypes.array,
-  removeFavoriteAlbum: PropTypes.func,
-  albumInfoSearch: PropTypes.func,
-  history: PropTypes.shape({
-    push: PropTypes.func
-  })
-};
-
-FavoriteAlbumsView.defaultProps = {
-  albums: [],
-  removeFavoriteAlbum: () => {},
-  albumInfoSearch: () => {},
-  history: {}
-};
-
 export default withRouter(FavoriteAlbumsView);