refactor: apply changes according to eslint

Author: coder2000

packages/client/.eslintignore

@@ -0,0 +1 @@
+**/*.js

packages/client/.eslintrc.js

@@ -1,33 +1,34 @@
 module.exports = {
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
   parserOptions: {
-    project: 'tsconfig.json',
-    sourceType: 'module',
+    project: "./packages/client/tsconfig.json",
+    sourceType: "module",
   },
   plugins: [
-    '@typescript-eslint/eslint-plugin',
-    'import',
-    'react',
-    'react-hooks',
-    'jsx',
-    'jsx-a11y',
+    "@typescript-eslint/eslint-plugin",
+    "import",
+    "react",
+    "react-hooks",
+    "jsx",
+    "jsx-a11y",
+    "prettier",
   ],
   extends: [
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'prettier/react',
-    'prettier/@typescript-eslint',
-    'airbnb-typescript',
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "airbnb-typescript",
+    "plugin:prettier/recommended",
+    "prettier/react",
+    "prettier/@typescript-eslint",
   ],
   root: true,
   env: {
     node: true,
     jest: true,
   },
   rules: {
-    '@typescript-eslint/interface-name-prefix': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
+    "@typescript-eslint/interface-name-prefix": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
   },
 };

packages/client/.prettierrc

@@ -16,16 +16,16 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.9.0",
     "@types/html-webpack-plugin": "^3.2.2",
-    "@types/node": "^13.13.5",
-    "@types/react": "^16.9.34",
-    "@types/react-dom": "^16.9.7",
+    "@types/node": "^14.0.1",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
     "@types/react-html-parser": "^2.0.1",
     "@types/react-router": "^5.1.7",
     "@types/react-router-dom": "^5.1.5",
-    "@types/webpack": "^4.41.12",
+    "@types/webpack": "^4.41.13",
     "@types/webpack-dev-server": "^3.10.1",
-    "@typescript-eslint/eslint-plugin": "^2.31.0",
-    "@typescript-eslint/parser": "^2.31.0",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-import": "^1.13.0",
     "cross-env": "^7.0.2",
@@ -36,16 +36,16 @@
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx": "^0.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.2",
     "html-webpack-plugin": "^4.3.0",
     "path": "^0.12.7",
     "prettier": "^2.0.5",
     "style-loader": "^1.2.1",
-    "ts-loader": "^7.0.3",
     "ts-node": "^8.10.1",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^3.8.3",
+    "typescript": "^3.9.2",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"

packages/client/package.json

@@ -1,13 +1,13 @@
-import React from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import ApolloClient from 'apollo-boost';
-import { ApolloProvider } from '@apollo/react-hooks';
-import { CssBaseline } from '@material-ui/core';
-import { Home } from './Home';
+import React from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import ApolloClient from "apollo-boost";
+import { ApolloProvider } from "@apollo/react-hooks";
+import { CssBaseline } from "@material-ui/core";
+import Home from "./Home";
 
-export function App() {
+export default function App() {
   const client = new ApolloClient({
-    uri: 'http://localhost:3000/graphql',
+    uri: "http://localhost:3000/graphql",
   });
 
   return (

packages/client/src/components/App.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import { AppBar, Container, Toolbar, Typography } from '@material-ui/core';
-import { AddPodcastFab, PodcastList } from './podcast';
+import React from "react";
+import { makeStyles, Theme } from "@material-ui/core/styles";
+import { AppBar, Container, Toolbar, Typography } from "@material-ui/core";
+import { AddPodcastFab, PodcastList } from "./podcast";
 
 const useStyles = makeStyles((theme: Theme) => ({
   appbar: {
@@ -12,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-export function Home() {
+export default function Home() {
   const classes = useStyles();
 
   return (

packages/client/src/components/Home.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import { Episode } from '../../interfaces';
-import { Grid, Typography } from '@material-ui/core';
-import parse from 'html-react-parser';
+import React from "react";
+import { Grid, Typography } from "@material-ui/core";
+import parse from "html-react-parser";
+import { Episode } from "../../interfaces";
 
 interface EpisodeItemProps {
   episode: Episode;
 }
 
-export function EpisodeItem(props: EpisodeItemProps) {
+export default function EpisodeItem(props: EpisodeItemProps) {
   const { episode } = props;
 
   return (

packages/client/src/components/episodes/EpisodeItem.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { EpisodeConnection } from '../../interfaces';
-import { Grid, GridProps } from '@material-ui/core';
-import { EpisodeItem } from './EpisodeItem';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import React from "react";
+import { Grid, GridProps } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { EpisodeConnection } from "../../interfaces";
+import EpisodeItem from "./EpisodeItem";
 
 interface EpisodeListProps {
   episodes: EpisodeConnection;
@@ -12,21 +12,21 @@ interface StyleProps {
   backgroundImage: string;
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
   episode: {
     flexGrow: 1,
-    '&:before': {
-      content: ' ',
-      display: 'block',
-      position: 'absolute',
+    "&:before": {
+      content: " ",
+      display: "block",
+      position: "absolute",
       top: 0,
       left: 0,
-      height: '100%',
-      width: '100%',
+      height: "100%",
+      width: "100%",
       backgroundImage: (props: StyleProps) => `url(${props.backgroundImage})`,
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: 'cover',
-      backgroundPosition: '50% 0',
+      backgroundRepeat: "no-repeat",
+      backgroundSize: "cover",
+      backgroundPosition: "50% 0",
       opacity: 0.6,
       zIndex: 1,
     },
@@ -35,16 +35,17 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 function GridBackground(props: StyleProps & Omit<GridProps, keyof StyleProps>) {
   const { backgroundImage, children, ...other } = props;
-  const classes = useStyles({ backgroundImage: backgroundImage });
+  const classes = useStyles({ backgroundImage });
 
   return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
     <Grid className={classes.episode} {...other}>
       {children}
     </Grid>
   );
 }
 
-export function EpisodeList(props: EpisodeListProps) {
+export default function EpisodeList(props: EpisodeListProps) {
   const { episodes } = props;
 
   return (

packages/client/src/components/episodes/EpisodeList.tsx

@@ -1 +1,3 @@
-export { EpisodeList } from './EpisodeList';
+import EpisodeList from "./EpisodeList";
+
+export default EpisodeList;

packages/client/src/components/episodes/index.ts

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
   Fab,
   Dialog,
@@ -7,26 +7,26 @@ import {
   DialogContent,
   DialogActions,
   Button,
-} from '@material-ui/core';
-import { Add as AddIcon } from '@material-ui/icons';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import { useForm } from 'react-hook-form';
-import { gql } from 'apollo-boost';
-import { useMutation } from '@apollo/react-hooks';
+} from "@material-ui/core";
+import { Add as AddIcon } from "@material-ui/icons";
+import { makeStyles } from "@material-ui/core/styles";
+import { useForm } from "react-hook-form";
+import { gql } from "apollo-boost";
+import { useMutation } from "@apollo/react-hooks";
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
   fab: {
     margin: 0,
-    top: 'auto',
-    left: 'auto',
+    top: "auto",
+    left: "auto",
     bottom: 20,
     right: 20,
-    position: 'fixed',
+    position: "fixed",
   },
 }));
 
 type FormData = {
-  podcastUrl: String;
+  podcastUrl: string;
 };
 
 const ADD_PODCAST = gql`
@@ -38,18 +38,18 @@ const ADD_PODCAST = gql`
 `;
 
 interface Queue {
-  url: String;
+  url: string;
 }
 
 interface CreateOneQueueInput {
   queue: Queue;
 }
 
-export function AddPodcastFab() {
+export default function AddPodcastFab() {
   const classes = useStyles();
   const [open, setOpen] = useState(false);
   const { register, handleSubmit } = useForm<FormData>();
-  const [addPodcast, {}] = useMutation<
+  const [addPodcast] = useMutation<
     { createOneQueue: Queue },
     { input: CreateOneQueueInput }
   >(ADD_PODCAST);