build: eslint

.vscode/launch.json

@@ -1,18 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Launch",
-      "type": "go",
-      "request": "launch",
-      "mode": "debug",
-      "remotePath": "",
-      "port": 2345,
-      "host": "127.0.0.1",
-      "program": "${workspaceRoot}",
-      "env": {},
-      "args": [],
-      "showLog": true
-    }
-  ]
-}

.vscode/settings.json

@@ -1,6 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": true
-  }
-}

client/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

client/app/app.tsx

@@ -18,7 +18,7 @@ import './scss/index.scss';
 import { rootStoreInstance } from './stores';
 import { Wrapper } from './wrapper';
 
-const App: any = (): any => {
+const App = () => {
   return (
     <BrowserRouter>
       <Provider {...rootStoreInstance}>
@@ -41,4 +41,4 @@ const App: any = (): any => {
   );
 };
 
-ReactDOM.render((<App />) as any, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));

client/app/components/clip-player-control/clip-player-control.tsx

@@ -11,9 +11,7 @@ interface IProps {
   onPlayDiscord: (sound: SoundType) => void;
 }
 
-interface IState {}
-
-export class ClipPlayerControl extends React.Component<IProps, IState> {
+export class ClipPlayerControl extends React.Component<IProps, unknown> {
   checkExtension(extension: string) {
     switch (extension) {
       case 'wav':

client/app/components/header/header.tsx

@@ -5,7 +5,7 @@ interface IProps {
   onButtonClick: () => void;
 }
 
-export class Header extends React.Component<IProps, any> {
+export class Header extends React.Component<IProps, unknown> {
   constructor(props: IProps) {
     super(props);
   }
@@ -19,7 +19,12 @@ export class Header extends React.Component<IProps, any> {
           </button>
           <h2 style={{ margin: 0 }}>Sound Bot</h2>
         </div>
-        <a href="https://github.com/mgerb/go-discord-bot" className="fa fa-lg fa-github" target="_blank" />
+        <a
+          rel="noreferrer"
+          href="https://github.com/mgerb/go-discord-bot"
+          className="fa fa-lg fa-github"
+          target="_blank"
+        />
       </div>
     );
   }

client/app/components/navbar/navbar.tsx

@@ -53,7 +53,7 @@ export class Navbar extends React.Component<Props, State> {
     );
   }
 
-  renderNavLink = (title: string, to: string, params?: any) => {
+  renderNavLink = (title: string, to: string, params?: unknown) => {
     return (
       <NavLink
         {...params}

client/app/components/uploader/uploader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Dropzone from 'react-dropzone';
+import Dropzone, { ImageFile } from 'react-dropzone';
 import { axios } from '../../services';
 import './uploader.scss';
 
@@ -27,21 +27,21 @@ export class Uploader extends React.Component<IProps, IState> {
     headers: {
       'Content-Type': 'multipart/form-data',
     },
-    onUploadProgress: (progressEvent: any) => {
+    onUploadProgress: (progressEvent: { loaded: number; total: number }) => {
       this.setState({
         percentCompleted: Math.round((progressEvent.loaded * 100) / progressEvent.total),
       });
     },
   };
 
-  onDrop = (acceptedFiles: any) => {
+  private onDrop = (acceptedFiles: ImageFile[]) => {
     if (acceptedFiles.length > 0) {
       this.uploadFile(acceptedFiles[0]);
     }
   };
 
-  uploadFile(file: any) {
-    let formData = new FormData();
+  private uploadFile(file: ImageFile) {
+    const formData = new FormData();
     formData.append('name', file.name);
     formData.append('file', file);
 
@@ -56,7 +56,7 @@ export class Uploader extends React.Component<IProps, IState> {
 
         this.props.onComplete();
       })
-      .catch(err => {
+      .catch((err) => {
         this.setState({
           percentCompleted: 0,
           uploaded: false,
@@ -65,7 +65,7 @@ export class Uploader extends React.Component<IProps, IState> {
       });
   }
 
-  render() {
+  public render() {
     return (
       <Dropzone
         className="dropzone"

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 && (

client/app/services/archive.service.ts

@@ -8,7 +8,7 @@ export class ArchiveService {
     return _.orderBy(data, 'created_at', ['desc']);
   }
 
-  public static postVideoArchive(data: any): Promise<any> {
+  public static postVideoArchive(data: { url: string }): Promise<unknown> {
     return axios.post('/api/video-archive', data);
   }
 }

client/app/services/sound.service.ts

@@ -1,7 +1,7 @@
 import { ISound, SoundListType, SoundType } from '../model';
 import { axios } from './axios.service';
 
-const playSound = (sound: SoundType): Promise<any> => {
+const playSound = (sound: SoundType): Promise<unknown> => {
   return axios.post('/api/sound/play', { name: sound.name });
 };
 

client/app/stores/app.store.ts

@@ -7,7 +7,7 @@ import { Util } from '../util';
 
 export class AppStore {
   @observable
-  public navbarOpen: boolean = false;
+  public navbarOpen = false;
   @observable
   public jwt?: string;
   @observable

client/app/wrapper.tsx

@@ -7,6 +7,7 @@ import './wrapper.scss';
 
 export const Wrapper = inject('appStore')(
   withRouter(
+    // eslint-disable-next-line
     observer(({ appStore, children }: any) => {
       const openClass = appStore.navbarOpen ? 'wrapper--open' : '';
       const onNavClick = () => {

client/package.json

@@ -62,5 +62,11 @@
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
+    "eslint": "^8.12.0",
+    "eslint-plugin-react": "^7.29.4"
   }
 }