Add TSLint

Akshayy99 · May 25, 2019 · 2f9beb9 · 2f9beb9
1 parent 49fb1f6
commit 2f9beb9
Show file tree

Hide file tree

Showing 24 changed files with 803 additions and 1,093 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -51,7 +51,7 @@ jobs:
           name: Deploy
           command: ./.circleci/deploy.sh
 
-  eslint:
+  lint:
     executor: musish-executor
     steps:
       - attach_workspace:
@@ -61,7 +61,7 @@ jobs:
           command: mkdir -p ~/reports
       - run:
           name: Run ESLint
-          command: yarn eslint --format junit --output-file ~/reports/eslint.xml
+          command: yarn tslint
       - store_test_results:
           path: ~/reports
       - store_artifacts:
@@ -78,7 +78,7 @@ workflows:
               ignore:
                 - gh-pages
                 - assets
-      - eslint:
+      - lint:
           requires:
             - setup
           filters:
@@ -88,7 +88,7 @@ workflows:
                 - assets
       - deploy:
           requires:
-            - eslint
+            - lint
           filters:
             branches:
               only:

diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc b/.eslintrc
diff --git a/.gitignore b/.gitignore
@@ -74,3 +74,4 @@ node_modules/
 .env
 .serverless
 secrets.json
+*.scss.d.ts
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml
diff --git a/package.json b/package.json
@@ -5,28 +5,22 @@
   "license": "MIT",
   "husky": {
     "hooks": {
-      "pre-commit": "yarn eslint"
+      "pre-commit": "yarn tslint"
     }
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@sentry/browser": "^4.6.6",
-    "@symfony/webpack-encore": "^0.22.1",
+    "@symfony/webpack-encore": "^0.27.0",
+    "@types/prop-types": "^15.7.1",
+    "@types/react": "^16.8.18",
+    "@types/react-dom": "^16.8.4",
     "axios": "^0.18.0",
-    "babel-eslint": "^10.0.1",
     "classnames": "^2.2.6",
+    "concurrently": "^4.1.0",
     "dotenv-webpack": "^1.5.7",
-    "eslint": "^5.10.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-config-react-app": "^3.0.5",
-    "eslint-plugin-flowtype": "2.50.3",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-react": "^7.11.1",
     "favicons-webpack-plugin": "^0.0.9",
     "hoist-non-react-statics": "^3.2.1",
     "html-loader": "^0.5.5",
@@ -38,7 +32,6 @@
     "mousetrap": "^1.6.2",
     "node-sass": "^4.10.0",
     "normalize.css": "^8.0.1",
-    "prettier": "^1.15.3",
     "prop-types": "^15.6.2",
     "qs": "^6.7.0",
     "react": "^16.8.3",
@@ -54,12 +47,18 @@
     "react-sortable-hoc": "^1.6.1",
     "react-virtualized": "^9.21.0",
     "sass-loader": "^7.1.0",
+    "ts-loader": "^6.0.1",
+    "tslint": "^5.16.0",
+    "typed-scss-modules": "^0.0.10",
+    "typescript": "^3.4.5",
     "vanilla-tilt": "^1.5.0",
     "whatwg-fetch": "^3.0.0"
   },
   "scripts": {
-    "start": "encore dev-server --hot",
-    "build": "encore production",
-    "eslint": "eslint \"src/**/*.{js,jsx}\" -c .eslintrc"
+    "server": "encore dev-server --hot",
+    "tsmp": "tsm \"src/app/**/*.scss\" --aliasPrefixes.~ node_modules/",
+    "start": "concurrently --kill-others \"yarn server\" \"yarn tsmp -w\"",
+    "build": "yarn tsmp && yarn encore production",
+    "tslint": "tslint -c tslint.json --project ."
   }
 }
diff --git a/src/app/components/Common/NavigationBar/Search/SearchBar.jsx b/src/app/components/Common/NavigationBar/Search/SearchBar.jsx
@@ -194,7 +194,7 @@ class SearchBar extends React.Component {
             }}
           >
             <input
-              type="text"
+              type='text'
               placeholder={`${translate.searchMusic}`}
               value={query}
               onChange={this.handleSearch}

diff --git a/src/app/components/Common/NavigationBar/Settings/Settings.jsx b/src/app/components/Common/NavigationBar/Settings/Settings.jsx
@@ -14,7 +14,7 @@ export default function Settings() {
 
   return (
     <span className={classes.settingsWrapper}>
-      <i className="fas fa-cog" />
+      <i className='fas fa-cog' />
       <div className={classes.settingsControlWrapper}>
         <div className={classes.section}>
           <h5>Last.fm</h5>
@@ -31,11 +31,11 @@ export default function Settings() {
         <div className={classes.section}>
           <h5>Playback quality</h5>
           <span className={classes.radioWrapper}>
-            <label htmlFor="high-bitrate">
+            <label htmlFor='high-bitrate'>
               <input
-                id="high-bitrate"
-                type="radio"
-                name="bitrate"
+                id='high-bitrate'
+                type='radio'
+                name='bitrate'
                 value={MusicKit.PlaybackBitrate.HIGH}
                 checked={bitrate === MusicKit.PlaybackBitrate.HIGH}
                 onChange={() => {
@@ -47,11 +47,11 @@ export default function Settings() {
             </label>
           </span>
           <span className={classes.radioWrapper}>
-            <label htmlFor="standard-bitrate">
+            <label htmlFor='standard-bitrate'>
               <input
-                id="standard-bitrate"
-                type="radio"
-                name="bitrate"
+                id='standard-bitrate'
+                type='radio'
+                name='bitrate'
                 value={MusicKit.PlaybackBitrate.STANDARD}
                 checked={bitrate === MusicKit.PlaybackBitrate.STANDARD}
                 onChange={() => {

diff --git a/src/app/components/Common/PageTitle/PageTitle.jsx b/src/app/components/Common/PageTitle/PageTitle.jsx
diff --git a/src/app/components/Common/PageTitle/PageTitle.tsx b/src/app/components/Common/PageTitle/PageTitle.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as styles from './PageTitle.scss';
+
+export default function PageTitle({
+  context,
+  title,
+}: {
+  context: React.ReactNode;
+  title: React.ReactNode;
+}) {
+  return (
+    <div className={styles.pageTitle}>
+      {context && <span className={styles.contextHeading}>{context}</span>}
+      {title && <h1>{title}</h1>}
+    </div>
+  );
+}
diff --git a/src/app/components/Common/Player/Lyrics/Lyrics.jsx b/src/app/components/Common/Player/Lyrics/Lyrics.jsx
@@ -78,7 +78,7 @@ class Lyrics extends React.Component {
         <iframe
           title={translate.lyrics}
           srcDoc={geniusSong.embed_content + iframeCss}
-          frameBorder="0"
+          frameBorder='0'
           style={{ height: '100%', width: '100%' }}
           seamless
         />

diff --git a/src/app/components/Common/Player/Lyrics/LyricsModal.jsx b/src/app/components/Common/Player/Lyrics/LyricsModal.jsx
@@ -24,13 +24,13 @@ function LyricsModal({ opened, close }) {
         <div className={cx(queueClasses.header, 'handle')}>
           <div className={queueClasses.title}>
             <span>
-              <i className="fas fa-grip-vertical" />
+              <i className='fas fa-grip-vertical' />
               {` ${translate.lyrics}`}
             </span>
           </div>
           <div className={queueClasses.icons} onClick={close}>
             <span>
-              <i className="fas fa-times" />
+              <i className='fas fa-times' />
             </span>
           </div>
         </div>

diff --git a/src/app/components/Common/Player/Queue/Queue.jsx b/src/app/components/Common/Player/Queue/Queue.jsx
@@ -67,13 +67,13 @@ class Queue extends Component {
               <div className={cx(classes.header, 'handle')}>
                 <div className={classes.title}>
                   <span>
-                    <i className="fas fa-grip-vertical" />
+                    <i className='fas fa-grip-vertical' />
                     {` ${translate.upNext}`}
                   </span>
                 </div>
                 <div className={classes.icons} onClick={doHide}>
                   <span>
-                    <i className="fas fa-times" />
+                    <i className='fas fa-times' />
                   </span>
                 </div>
               </div>

diff --git a/src/app/components/Common/Player/Queue/QueueItem.jsx b/src/app/components/Common/Player/Queue/QueueItem.jsx
@@ -18,7 +18,7 @@ const QueueItem = SortableElement(({ value, style, item, removeItemFunc }) => {
       <div>
         <span className={classes.albumArtwork}>
           <span className={classes.artworkWrapper}>
-            <img src={artworkForMediaItem(item, 30)} alt="" />
+            <img src={artworkForMediaItem(item, 30)} alt='' />
           </span>
         </span>
       </div>

diff --git a/src/app/components/Common/Tracks/TracksList/TrackDecoration.jsx b/src/app/components/Common/Tracks/TracksList/TrackDecoration.jsx
@@ -27,7 +27,7 @@ function TrackDecoration({ track, showAlbum, size = 40 }) {
         <span className={classes.albumArtwork}>
           {currentItem && playingAnimation}
           <span className={classes.artworkWrapper} style={{ width: size, height: size }}>
-            <img src={artworkForMediaItem(track, size)} alt="" />
+            <img src={artworkForMediaItem(track, size)} alt='' />
           </span>
         </span>
       ) : (

diff --git a/src/app/components/Common/Tracks/TracksList/TracksListItem.jsx b/src/app/components/Common/Tracks/TracksList/TracksListItem.jsx
@@ -105,7 +105,7 @@ class TracksListItem extends React.Component {
                 holdToDisplay={1}
                 render={() => <TrackContextMenu track={track} tracks={tracks} index={index} />}
               >
-                <i className="fas fa-ellipsis-h" />
+                <i className='fas fa-ellipsis-h' />
               </ContextMenuTrigger>
             </span>
           </span>

diff --git a/src/app/components/Layout.jsx b/src/app/components/Layout.jsx
@@ -21,10 +21,10 @@ class Layout extends Component {
       <Fragment>
         <NavigationBar />
 
-        <div id="main-wrapper">
+        <div id='main-wrapper'>
           <Queue />
           <Sidebar />
-          <main id="main-content" className={this.props.className}>
+          <main id='main-content' className={this.props.className}>
             {this.props.children}
           </main>
         </div>

diff --git a/src/app/components/Routes/SplashScreen/SplashScreen.jsx b/src/app/components/Routes/SplashScreen/SplashScreen.jsx
@@ -22,10 +22,10 @@ class SplashScreen extends React.Component {
     return (
       <div className={classes.splashContainer}>
         <a
-          className="github-fork-ribbon"
-          href="https://github.com/Musish/Musish"
-          data-ribbon="Fork me on GitHub"
-          title="Fork me on GitHub"
+          className='github-fork-ribbon'
+          href='https://github.com/Musish/Musish'
+          data-ribbon='Fork me on GitHub'
+          title='Fork me on GitHub'
           target={'_blank'}
         >
           Fork me on GitHub
@@ -40,7 +40,7 @@ class SplashScreen extends React.Component {
         </div>
         <h5 className={classes.subheading}>
           {'Just like '}
-          <i className="fab fa-apple" />
+          <i className='fab fa-apple' />
           {' Music... ish.'}
         </h5>
         <hr />
@@ -61,7 +61,7 @@ class SplashScreen extends React.Component {
         <div className={classes.disclaimer}>
           <div className={classes.disclaimerIcon}>
             <span>
-              <i className="fas fa-info icon" />
+              <i className='fas fa-info icon' />
             </span>
           </div>
           <div className={classes.disclaimerText}>{translate.legalNotice}</div>

diff --git a/src/app/services/MusicApi.js b/src/app/services/MusicApi.js
@@ -25,9 +25,9 @@ export async function addSongsToPlaylist(playlistId, songs) {
       data: payload,
       headers: getHeaders(),
     });
-    Alert.success("Added to your playlist, it'll show up in a few seconds. Hold tight!");
+    Alert.success('Added to your playlist, it\'ll show up in a few seconds. Hold tight!');
   } catch (error) {
-    Alert.error("You're unable to add songs to this playlist.");
+    Alert.error('You\'re unable to add songs to this playlist.');
   }
 }
 
@@ -68,9 +68,9 @@ export async function addToLibrary(mediaType, media) {
       url: `${API_URL}/v1/me/library?ids[${mediaType}]=${media.map(m => m).join(',')}`,
       headers: getHeaders(),
     });
-    Alert.success("Added tracks to your library, they'll show up in a few seconds. Hold tight!");
+    Alert.success('Added tracks to your library, they\'ll show up in a few seconds. Hold tight!');
   } catch (error) {
-    Alert.error("We're unable to add these tracks to your library.");
+    Alert.error('We\'re unable to add these tracks to your library.');
   }
 }
 
@@ -95,12 +95,12 @@ export function infiniteLoadRelationships(
   return async ({ offset }, { page }) => {
     if (page === 0) {
       const playlist = await functionGenerator(id, { offset });
-      const data = playlist.relationships[key];
+      const nextData = playlist.relationships[key];
 
       // eslint-disable-next-line no-param-reassign
-      store.nextUrl = data.next;
+      store.nextUrl = nextData.next;
 
-      return dataModifier(data.data);
+      return dataModifier(nextData.data);
     }
 
     if (!store.nextUrl) {