build: eslint

client/app/pages/clips/clips.tsx

@@ -3,14 +3,12 @@ import { SoundList } from '../../components';
 import { SoundType } from '../../model';
 import { axios } from '../../services';
 
-interface Props {}
-
 interface State {
   clipList: SoundType[];
 }
 
-export class Clips extends React.Component<Props, State> {
-  constructor(props: Props) {
+export class Clips extends React.Component<unknown, State> {
+  constructor(props: unknown) {
     super(props);
     this.state = {
       clipList: [],
@@ -29,6 +27,7 @@ export class Clips extends React.Component<Props, State> {
           clipList: response.data,
         });
       })
+      /* eslint-disable-next-line */
       .catch((error: any) => {
         console.error(error.response.data);
       });

client/app/pages/downloader/downloader.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { axios } from '../../services';
 import './downloader.scss';
 
-interface Props {}
-
 interface State {
   fileType: string;
   url: string;
@@ -14,8 +12,8 @@ interface State {
   dataLoaded: boolean;
 }
 
-export class Downloader extends React.Component<Props, State> {
-  constructor(props: Props) {
+export class Downloader extends React.Component<unknown, State> {
+  constructor(props: unknown) {
     super(props);
     this.state = {
       fileType: 'mp3',
@@ -51,7 +49,7 @@ export class Downloader extends React.Component<Props, State> {
           url: this.state.url,
         },
       })
-      .then(res => {
+      .then((res) => {
         this.setState({
           dataLoaded: true,
           dataLoading: false,
@@ -77,7 +75,7 @@ export class Downloader extends React.Component<Props, State> {
             placeholder="Enter Youtube URL"
             className="input downloader__input"
             value={this.state.url}
-            onChange={event => this.setState({ url: event.target.value })}
+            onChange={(event) => this.setState({ url: event.target.value })}
           />
 
           <div style={{ marginBottom: '10px' }}>

client/app/pages/oauth/oauth.tsx

@@ -1,23 +1,18 @@
-import queryString from 'query-string';
+import queryString, { ParsedQuery } from 'query-string';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { axios, StorageService } from '../../services';
 
-interface Props extends RouteComponentProps<any> {}
-
-interface State {}
-
-export class Oauth extends React.Component<Props, State> {
-  constructor(props: Props) {
+export class Oauth extends React.Component<RouteComponentProps<unknown>, unknown> {
+  constructor(props: RouteComponentProps<unknown>) {
     super(props);
   }
 
   componentDidMount() {
-    const params: any = queryString.parse(this.props.location.search);
+    const params: ParsedQuery<string> = queryString.parse(this.props.location.search);
 
     if (params['code']) {
-      // do stuff here
-      this.fetchOauth(params['code']);
+      this.fetchOauth(params['code'] as string);
     }
   }
 

client/app/pages/soundboard/soundboard.tsx

@@ -20,7 +20,7 @@ interface State {
 @inject('appStore')
 @observer
 export class Soundboard extends React.Component<Props, State> {
-  private soundListCache: any;
+  private soundListCache: SoundType[];
 
   constructor(props: Props) {
     super(props);
@@ -46,6 +46,7 @@ export class Soundboard extends React.Component<Props, State> {
             soundList: response.data,
           });
         })
+        // eslint-disable-next-line
         .catch((error: any) => {
           console.error(error.response.data);
         });

client/app/pages/stats/stats.tsx

@@ -4,8 +4,7 @@ import { HorizontalBar } from 'react-chartjs-2';
 import { ISound } from '../../model';
 import { axios, SoundService } from '../../services';
 import './stats.scss';
-
-interface IProps {}
+import { AxiosResponse } from 'axios';
 
 interface IState {
   data: {
@@ -19,8 +18,8 @@ interface IState {
  * a page to show discord chat statistics
  * currently keeps track of number messages that contain external links
  */
-export class Stats extends Component<IProps, IState> {
-  constructor(props: any) {
+export class Stats extends Component<unknown, IState> {
+  constructor(props: unknown) {
     super(props);
     this.state = {
       data: [],
@@ -30,18 +29,18 @@ export class Stats extends Component<IProps, IState> {
 
   componentDidMount() {
     this.getdata();
-    SoundService.getSounds().then(sounds => {
+    SoundService.getSounds().then((sounds) => {
       this.setState({ sounds });
     });
   }
 
   async getdata() {
-    const messages = await axios.get('/api/logger/linkedmessages');
-    const data: any = chain(messages.data)
+    const messages: AxiosResponse<{ [key: string]: number }> = await axios.get('/api/logger/linkedmessages');
+    const data = chain(messages.data)
       .map((v, k) => {
         return { username: k, count: v };
       })
-      .orderBy(v => v.count, 'desc')
+      .orderBy((v) => v.count, 'desc')
       .slice(0, 10)
       .value();
 
@@ -49,8 +48,8 @@ export class Stats extends Component<IProps, IState> {
   }
 
   render() {
-    const data: any = {
-      labels: map(this.state.data, v => v.username),
+    const data = {
+      labels: map(this.state.data, (v) => v.username),
       datasets: [
         {
           label: 'Count',
@@ -59,7 +58,7 @@ export class Stats extends Component<IProps, IState> {
           borderWidth: 1,
           hoverBackgroundColor: 'rgba(114,137,218, 0.7)',
           hoverBorderColor: 'rgba(114,137,218, 1)',
-          data: map(this.state.data, v => v.count),
+          data: map(this.state.data, (v) => v.count),
         },
       ],
       options: {

client/app/pages/user-event-log/user-event-log.tsx

@@ -2,14 +2,12 @@ import React from 'react';
 import { IUserEventLog } from '../../model';
 import { UserEventLogService } from '../../services';
 
-interface IProps {}
-
 interface IState {
   userEventLogs: IUserEventLog[];
 }
 
-export class UserEventLog extends React.Component<IProps, IState> {
-  constructor(props: IProps) {
+export class UserEventLog extends React.Component<unknown, IState> {
+  constructor(props: unknown) {
     super(props);
     this.state = {
       userEventLogs: [],

client/app/pages/users/users.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ChangeEvent, FormEvent } from 'react';
 import { IUser } from '../../model';
 import { UserService } from '../../services/user.service';
 
@@ -7,8 +7,8 @@ interface IState {
   showSavedMessage: boolean;
 }
 
-export class Users extends React.Component<any, IState> {
-  constructor(props: any) {
+export class Users extends React.Component<unknown, IState> {
+  constructor(props: unknown) {
     super(props);
     this.state = {
       users: [],
@@ -22,10 +22,10 @@ export class Users extends React.Component<any, IState> {
     });
   }
 
-  onUserChange = (type: 'permissions' | 'voice_join_sound', event: any, index: number) => {
+  onUserChange = (type: 'permissions' | 'voice_join_sound', event: ChangeEvent<HTMLInputElement>, index: number) => {
     this.setState({ showSavedMessage: false });
 
-    let users = [...this.state.users];
+    const users = [...this.state.users];
     const val = type === 'permissions' ? parseInt(event.target.value) : event.target.value;
     users[index] = {
       ...users[index],
@@ -64,7 +64,7 @@ export class Users extends React.Component<any, IState> {
     });
   };
 
-  save = (event: any) => {
+  save = (event: FormEvent<HTMLFormElement>) => {
     this.setState({ showSavedMessage: false });
     event.preventDefault();
     UserService.putUsers(this.state.users).then((users: IUser[]) => {

client/app/pages/video-archive/video-archive.tsx

@@ -41,7 +41,7 @@ export class VideoArchive extends React.Component<IProps, IState> {
     }
   }
 
-  onSubmit = async (e: any) => {
+  onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const { url } = this.state;
     this.setState({ error: undefined });
@@ -65,7 +65,7 @@ export class VideoArchive extends React.Component<IProps, IState> {
           className="input video-archive__text-input"
           placeholder="Enter Youtube URL or ID..."
           value={url}
-          onChange={e => this.setState({ url: e.target.value })}
+          onChange={(e) => this.setState({ url: e.target.value })}
         />
         <input type="submit" className="button button--primary" style={{ marginLeft: '10px' }} />
         {error && (