Eslint changes

ui/.eslintrc → ui/.eslintrc.js

@@ -8,20 +8,24 @@ module.exports = {
   },
   extends: ["eslint:recommended", "plugin:react/recommended"],
   globals: {},
-  parser: "babel-eslint",
+  parser: "@babel/eslint-parser",
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 2018,
     sourceType: "module",
+    requireConfigFile: false
   },
   plugins: ["react", "import", "react-hooks"],
   ignorePatterns: ["node_modules/"],
-  rules: {},
+  rules: {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+  },
   settings: {
     react: {
-      version: "latest", // "detect" automatically picks the version you have installed.
+      version: "detect", // "detect" automatically picks the version you have installed.
     },
   },
-};
+};

ui/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/eslint-parser": "^7.19.1",
     "@lhci/cli": "^0.9.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
@@ -42,7 +43,6 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.7",
-    "babel-eslint": "^10.1.0",
     "postcss": "^8.4.14",
     "sinon": "^14.0.0",
     "tailwindcss": "^3.0.24"

ui/src/Components/Dashboard/Dashboard.js

@@ -1,10 +1,7 @@
-import Table from "./Table/Table"
+import Table from "./Table/Table";
 
-export default function Dashboard({ featureFlags, headers }) {
-  return (
-          <Table
-            featureFlags={featureFlags}
-            headers={headers}
-          /> 
-        )}
-
+ const Dashboard = ({ featureFlags, headers }) => {
+   <Table featureFlags={featureFlags} headers={headers} />;
+}
+
+export default Dashboard;

ui/src/Components/Dashboard/Table/Table.js

@@ -1,39 +1,30 @@
-import {useState} from "react"
-import TableHeader from "./TableHeader/TableHeader"
-import TableRow from "./TableRow/TableRow"
-import { compareValues } from "../../../Utils/helpers"
+import { useState } from "react";
+import TableHeader from "./TableHeader/TableHeader";
+import TableRow from "./TableRow/TableRow";
+import { compareValues } from "../../../Utils/helpers";
 
 export default function Table({ featureFlags, headers }) {
+  const [rowData, setRowData] = useState(featureFlags);
 
-const [rowData,setRowData] = useState(featureFlags)
-
-const handleSorting = (type,onColumn) => {
-
-  let rows = rowData;
-  rows.sort(compareValues(onColumn,type))
-  setRowData([...rows])
-
-}
+  const handleSorting = (type, onColumn) => {
+    let rows = rowData;
+    rows.sort(compareValues(onColumn, type));
+    setRowData([...rows]);
+  };
 
   return (
-
-    <table
-      className='shadow text-sm text-left table-fixed w-3/4 max-w-screen-md'
-    >
-      <TableHeader
-        headers={headers}
-        handleSorting={handleSorting}
-      />
+    <table className="shadow text-sm text-left table-fixed w-3/4 max-w-screen-md">
+      <TableHeader headers={headers} handleSorting={handleSorting} />
 
       <tbody>
-        {rowData.map(featureFlag => 
+        {rowData.map((featureFlag) => (
           <TableRow
             featureFlag={featureFlag}
             headers={headers}
             key={featureFlag.id}
-          /> 
-        )}
+          />
+        ))}
       </tbody>
     </table>
-  )
-}
+  );
+}