fixed eslint issues. (#18)

Author: gsaini

.eslintignore

@@ -0,0 +1 @@
+/src/serviceWorker.ts

.eslintrc.json

@@ -1,3 +1,31 @@
 {
-    "extends": "eslint:recommended"
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+        "requireConfigFile": false,
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "babelOptions": {
+            "babelrc": false,
+            "configFile": false,
+            "presets": [
+                "@babel/preset-env",
+                "@babel/preset-react",
+                "@babel/preset-typescript"
+            ]
+        }
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "env": {
+        "browser": true,
+        "node": true
+    }
 }

package.json

@@ -16,7 +16,6 @@
     "@types/node": "^17.0.9",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
-    "eslint": "8.10.0",
     "node-sass": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -48,6 +47,14 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.22.1",
+    "@babel/eslint-parser": "^7.21.8",
+    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^8.42.0",
+    "eslint-plugin-react": "^7.32.2",
     "gh-pages": "^3.2.3",
     "prettier": "2.5.1"
   }

src/Components/Certificates/Certificates.tsx

@@ -2,10 +2,8 @@ import * as React from 'react';
 import credlyDashboard from './credlyDashboard.png';
 import './_Certificates.scss';
 
-interface IProps {
-}
 
-export const Certificates: React.FC<IProps> = () => {
+export const Certificates: React.FC = () => {
     return (
         <section className="tile tile-certificates">
             <h3 className="tile-certificates-title">My AWS Certificates</h3>

src/Components/Education/Education.tsx

@@ -1,18 +1,14 @@
 import * as React from 'react'
 import './_Education.scss'
 
-interface EducationState {
-    iconCls: string
-    year: string
-    institute: string
-    stream: string
-}
-
-interface IProps {
-    educations: Array<EducationState>
-}
-
-export const Education: React.FC<IProps> = ({ educations }) => {
+export const Education = ({ educations }: {
+    educations: Array<{
+        iconCls: string
+        year: string
+        institute: string
+        stream: string
+    }>
+}) => {
     return (
         <section className="tile tile-education">
             <div className="tile-content">

src/Components/Profile/Profile.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import './_Profile.scss'
 
-interface IProps {
+export const Profile = ({ name, designation, company, aboutMe, emailAddress, mobileNumber, avatarUrl, location }: {
     name: string
     company: string
     designation: string
@@ -10,9 +10,7 @@ interface IProps {
     emailAddress: string
     mobileNumber: string
     location: string
-}
-
-export const Profile: React.FC<IProps> = ({ name, designation, company, aboutMe, emailAddress, mobileNumber, avatarUrl, location }) => {
+}) => {
     return (
         <section className="tile tile-profile">
             <img className="avatar" alt={name} title={name} src={avatarUrl} />

src/Components/Skills/Skills.tsx

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import './_Skills.scss';
 
-interface IProps {
-    skills: Array<string>
-}
-
-export const Skills: React.FC<IProps> = ({ skills }) => {
+export const Skills = ({ skills }: { skills: Array<string> }) => {
     return (
         <section className="tile tile-skills">
-            <h3>Skills & Expertise</h3>
+            <h3>Skills & Expertise</h3> 
             <div className="tags">
                 {
                     skills.map((skill, idx) => {

src/Components/Timeline/Timeline.tsx

@@ -1,13 +1,12 @@
 import * as React from "react";
 import "./_Timeline.scss";
 
-interface IProps {
+
+export const Timeline = (tile: {
   title: string
   bgColor: string
   timelines: Array<{ year?: number; designation: string, projects: Array<{ name: string, techStack: string, description: string }> }>;
-}
-
-export const Timeline: React.FC<IProps> = tile => {
+}) => {
   // var randomColor = Math.floor(Math.random()*16777215).toString(16); // style={{ backgroundColor: `#${randomColor}` }}
 
   return (