Mayank0255 · Mayank0255 · Mar 19, 2022 · Mar 19, 2022 · Mar 19, 2022
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,36 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/display-name": "off",
+        "react/prop-types": "off",
+        "indent": ["error", 2],
+        "no-unused-vars": 1,
+        "no-multi-assign": 0,
+        "no-return-await": 0,
+        "no-undef": 0,
+        "linebreak-style": 0,
+        "no-console": 0,
+        "consistent-return": 0,
+        "no-param-reassign": 0,
+        "no-await-in-loop": 0,
+        "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"],
+        "quotes": ["error", "single", { "allowTemplateLiterals": true }]
+    }
+}
diff --git a/.github/workflows/lint-check.yml b/.github/workflows/lint-check.yml
@@ -0,0 +1,16 @@
+name: Eslint Check
+
+on:
+  pull_request:
+    branches: [ master, main ]
+
+jobs:
+  build:
+    name: ESLint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install modules
+        run: npm i
+      - name: Run ESLint
+        run: npm run lint
diff --git a/package.json b/package.json
@@ -36,7 +36,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -52,5 +54,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^8.11.0",
+    "eslint-plugin-react": "^7.29.4"
   }
 }
diff --git a/src/components/Alert/Alert.component.jsx b/src/components/Alert/Alert.component.jsx
@@ -21,7 +21,7 @@ const Alert = ({ alerts }) => {
         )
       }
     }
-  )
+    )
 }
 
 Alert.propTypes = {

diff --git a/src/components/AuthForm/AuthForm.component.jsx b/src/components/AuthForm/AuthForm.component.jsx
@@ -41,7 +41,7 @@ const AuthForm = ({register, login, action}) => {
 
   const logInLink = (
     <Fragment>
-      Don't have an account?{' '}
+      Don&apos;t have an account?{' '}
       <Link to='/register' name='register'>
         Sign up
       </Link>

diff --git a/src/components/Footer/Footer.component.jsx b/src/components/Footer/Footer.component.jsx
@@ -1,7 +1,7 @@
-import React, { Fragment } from "react";
+import React, { Fragment } from 'react';
 
-import {ReactComponent as GitHub} from "../../assets/GitHub.svg";
-import {ReactComponent as Database} from "../../assets/Database.svg";
+import {ReactComponent as GitHub} from '../../assets/GitHub.svg';
+import {ReactComponent as Database} from '../../assets/Database.svg';
 
 import './Footer.styles.scss';
 

diff --git a/src/components/Header/Header.component.jsx b/src/components/Header/Header.component.jsx
@@ -75,15 +75,15 @@ const Header = ({auth: {isAuthenticated, loading, user}, logout}) => {
         className='small-search-form'
         autoComplete='off'
       >
-          <input
-            className='small-search'
-            autoComplete='off'
-            type='text'
-            name='search'
-            maxLength='35'
-            placeholder='Search...'
-          />
-          <Search className="small-search-icon" />
+        <input
+          className='small-search'
+          autoComplete='off'
+          type='text'
+          name='search'
+          maxLength='35'
+          placeholder='Search...'
+        />
+        <Search className="small-search-icon" />
       </form>
     );
   }

diff --git a/src/components/LayoutWrapper/LayoutWrapper.component.jsx b/src/components/LayoutWrapper/LayoutWrapper.component.jsx
@@ -2,7 +2,7 @@ import React, {Fragment} from 'react';
 
 import SideBar from './SideBar/SideBar.component';
 import RightSideBar from './RightSideBar/RightSideBar.component';
-import Footer from "../Footer/Footer.component";
+import Footer from '../Footer/Footer.component';
 
 const LayoutWrapper = ({component: Component}) => {
   return class DefaultLayoutWrapper extends React.Component {

diff --git a/src/components/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidget.component.jsx b/src/components/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidget.component.jsx
@@ -1,7 +1,7 @@
 import React, {Fragment} from 'react';
 import {Link} from 'react-router-dom';
 
-import { SideBarWidgetData } from "./SideBarWidgetData";
+import { SideBarWidgetData } from './SideBarWidgetData';
 
 import './SideBarWidget.styles.scss';
 

diff --git a/src/components/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidgetData.js b/src/components/LayoutWrapper/RightSideBar/SideBarWidget/SideBarWidgetData.js
@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 
-import {ReactComponent as EditLogo} from "../../../../assets/Edit.svg";
+import {ReactComponent as EditLogo} from '../../../../assets/Edit.svg';
 
 export const SideBarWidgetData = [
   {

diff --git a/src/components/LayoutWrapper/RightSideBar/TagsWidget/TagsWidget.component.jsx b/src/components/LayoutWrapper/RightSideBar/TagsWidget/TagsWidget.component.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {Link} from 'react-router-dom';
 
 import {getTags} from '../../../../redux/tags/tags.actions';
-import TagsWidgetItem from "./TagsWidgetItem.component";
+import TagsWidgetItem from './TagsWidgetItem.component';
 
 import './TagsWidget.styles.scss';
 

diff --git a/src/components/LayoutWrapper/RightSideBar/TagsWidget/TagsWidgetItem.component.jsx b/src/components/LayoutWrapper/RightSideBar/TagsWidget/TagsWidgetItem.component.jsx
@@ -1,6 +1,6 @@
-import React, {Fragment} from "react";
+import React, {Fragment} from 'react';
 
-import TagBadge from "../../../TagBadge/TagBadge.component";
+import TagBadge from '../../../TagBadge/TagBadge.component';
 
 import './TagsWidgetItem.styles.scss';
 

diff --git a/src/components/LayoutWrapper/SideBar/SideBar.component.jsx b/src/components/LayoutWrapper/SideBar/SideBar.component.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import SideBarItem from "./SideBarItem.component";
-import { SideBarData } from "./SideBarData";
+import SideBarItem from './SideBarItem.component';
+import { SideBarData } from './SideBarData';
 
 import './SideBar.styles.scss';
 

diff --git a/src/components/LayoutWrapper/SideBar/SideBarData.js b/src/components/LayoutWrapper/SideBar/SideBarData.js
@@ -3,6 +3,7 @@ import { ReactComponent as GlobalIcon } from '../../../assets/Globe.svg';
 export const SideBarData = [
   {
     link: '/questions',
+    // eslint-disable-next-line react/react-in-jsx-scope
     icon: <GlobalIcon className='icon' />,
     text: 'Stack Overflow',
   },

diff --git a/src/components/MobileSideBar/MobileSideBar.component.jsx b/src/components/MobileSideBar/MobileSideBar.component.jsx
@@ -1,111 +1,111 @@
-import React, { useState } from "react";
-import { NavLink } from "react-router-dom";
+import React, { useState } from 'react';
+import { NavLink } from 'react-router-dom';
 
-import { ReactComponent as Hamburger } from "../../assets/LogoGlyphMd.svg";
-import { ReactComponent as Stack } from "../../assets/LogoMd.svg";
-import { ReactComponent as GlobalIcon } from "../../assets/Globe.svg";
+import { ReactComponent as Hamburger } from '../../assets/LogoGlyphMd.svg';
+import { ReactComponent as Stack } from '../../assets/LogoMd.svg';
+import { ReactComponent as GlobalIcon } from '../../assets/Globe.svg';
 
-import "./MobileSideBar.styles.scss";
+import './MobileSideBar.styles.scss';
 
 const SidebarUI = ({ isOpen, ...rest }) => {
-	const classes = ["Sidebar", isOpen ? "is-open" : ""];
+  const classes = ['Sidebar', isOpen ? 'is-open' : ''];
 
-	return (
-		<div aria-hidden={!isOpen} className={classes.join(" ")} {...rest} />
-	);
+  return (
+    <div aria-hidden={!isOpen} className={classes.join(' ')} {...rest} />
+  );
 };
 
 SidebarUI.Overlay = (props) => <div className="SidebarOverlay" {...props} />;
 
-SidebarUI.Content = ({ width = "20rem", isRight = false, ...rest }) => {
-	const classes = ["SidebarContent", isRight ? "is-right" : ""];
-	const style = {
-		width,
-		height: "100%",
-		top: 0,
-		right: isRight ? `-${width}` : "auto",
-		left: !isRight ? `-${width}` : "auto",
-	};
+SidebarUI.Content = ({ width = '20rem', isRight = false, ...rest }) => {
+  const classes = ['SidebarContent', isRight ? 'is-right' : ''];
+  const style = {
+    width,
+    height: '100%',
+    top: 0,
+    right: isRight ? `-${width}` : 'auto',
+    left: !isRight ? `-${width}` : 'auto',
+  };
 
-	return <div className={classes.join(" ")} style={style} {...rest} />;
+  return <div className={classes.join(' ')} style={style} {...rest} />;
 };
 
 const MobileSideBar = (props) => {
-	const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-	function openSidebar(isOp = true) {
-		setIsOpen(isOp);
-	}
+  function openSidebar(isOp = true) {
+    setIsOpen(isOp);
+  }
 
-	const { hasOverlay, isRight } = props;
+  const { hasOverlay, isRight } = props;
 
-	return (
-		<SidebarUI isOpen={isOpen}>
-			<Hamburger onClick={openSidebar} className="ham" />
+  return (
+    <SidebarUI isOpen={isOpen}>
+      <Hamburger onClick={openSidebar} className="ham" />
 
-			<SidebarUI.Content
-				isRight={isRight}
-				onClick={() => openSidebar(false)}
-			>
-				<div className="content-logo">
-					<Stack />
-				</div>
-				<div className="content-inner">
-					<div className="side-bar-tabs">
-						<NavLink
-							exact
-							activeClassName="active"
-							className="home-link"
-							to="/"
-						>
-							<p>Home</p>
-						</NavLink>
+      <SidebarUI.Content
+        isRight={isRight}
+        onClick={() => openSidebar(false)}
+      >
+        <div className="content-logo">
+          <Stack />
+        </div>
+        <div className="content-inner">
+          <div className="side-bar-tabs">
+            <NavLink
+              exact
+              activeClassName="active"
+              className="home-link"
+              to="/"
+            >
+              <p>Home</p>
+            </NavLink>
 
-						<div className="public-tabs">
-							<p className="title fc-light">PUBLIC</p>
-							<NavLink
-								activeClassName="active"
-								className="icon-link"
-								to="/questions"
-							>
-								<p>
-									<GlobalIcon className="icon" />
+            <div className="public-tabs">
+              <p className="title fc-light">PUBLIC</p>
+              <NavLink
+                activeClassName="active"
+                className="icon-link"
+                to="/questions"
+              >
+                <p>
+                  <GlobalIcon className="icon" />
 									Stack Overflow
-								</p>
-							</NavLink>
-							<NavLink
-								activeClassName="active"
-								className="link"
-								to="/tags"
-							>
-								<p>Tags</p>
-							</NavLink>
-							<NavLink
-								activeClassName="active"
-								className="link"
-								to="/users"
-							>
-								<p>Users</p>
-							</NavLink>
-							<NavLink
-								activeClassName="active"
-								className="link"
-								to="/jobs"
-							>
-								<p>Jobs</p>
-							</NavLink>
-						</div>
-						<div className="teams-tabs">
-							<p className="title fc-light">TEAMS</p>
-						</div>
-					</div>
-				</div>
-			</SidebarUI.Content>
-			{hasOverlay ? (
-				<SidebarUI.Overlay onClick={() => openSidebar(false)} />
-			) : false}
-		</SidebarUI>
-	);
+                </p>
+              </NavLink>
+              <NavLink
+                activeClassName="active"
+                className="link"
+                to="/tags"
+              >
+                <p>Tags</p>
+              </NavLink>
+              <NavLink
+                activeClassName="active"
+                className="link"
+                to="/users"
+              >
+                <p>Users</p>
+              </NavLink>
+              <NavLink
+                activeClassName="active"
+                className="link"
+                to="/jobs"
+              >
+                <p>Jobs</p>
+              </NavLink>
+            </div>
+            <div className="teams-tabs">
+              <p className="title fc-light">TEAMS</p>
+            </div>
+          </div>
+        </div>
+      </SidebarUI.Content>
+      {hasOverlay ? (
+        <SidebarUI.Overlay onClick={() => openSidebar(false)} />
+      ) : false}
+    </SidebarUI>
+  );
 };
 
 export default MobileSideBar;
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,7 @@ const Alert = ({ alerts }) => { @@
             )
           }
         }
-      )
+        )
     }
     Alert.propTypes = {
@@ Expand Down @@