chore: remove unused code and add linting and pre-commit hooks (#503)

* chore: remove unused code * run prettier * remove unused plugins * build: adjusting eslint rules for local development and adding precommit hooks * build: adjusting eslint rules for local development and adding precommit hooks * test eslint config * test eslint config * making eslint config warn for local development but error for pre-commit hooks * chore: cleaning up code and fixing lint warnings * chore: cleaning up code and fixing lint warnings * run prettier and adjusting configs * update lint-staged config * updating configs * fix eslint config * update prettier to run for any js,jsx,ts,tsx file * style: refactor and adding comment * fix: eslint errors * remove accidental committed code
dgidb · Jun 4, 2024 · 1c0c3e2 · 1c0c3e2
1 parent 98b06a2
commit 1c0c3e2
Show file tree

Hide file tree

Showing 39 changed files with 439 additions and 185 deletions.
diff --git a/README.md b/README.md
@@ -221,3 +221,15 @@ Start the client:
 ```shell
 yarn start
 ```
+
+Frontend style is enforced by [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/). Conformance is ensured by [pre-commit](https://pre-commit.com/#usage). Before your first commit, run
+
+```shell
+pre-commit install
+```
+
+In practice, Prettier will do most of the formatting work for you to be in accordance with ESLint. Run the following to autoformat a file:
+
+```shell
+yarn run prettier --write path/to/file
+```
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
@@ -0,0 +1,39 @@
+// The env is development during local development, so it overrides all the rules to "warn"
+// The env will be undefined for GH actions or when yarn lint-staged gets fired during pre-commit hooks,
+// so we can still catch any violations there
+const env = process.env.NODE_ENV;
+
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: ['react-app', 'react-app/jest', 'eslint:recommended'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'import/no-unused-modules': 'off',
+    '@typescript-eslint/no-unused-vars':
+      env === 'development' ? 'warn' : 'error',
+    'no-unused-vars': env === 'development' ? 'warn' : 'error',
+  },
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      rules: {
+        '@typescript-eslint/no-unused-vars': [
+          env === 'development' ? 'warn' : 'error',
+          { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
+        ],
+      },
+    },
+    {
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        'no-unused-vars': [
+          env === 'development' ? 'warn' : 'error',
+          { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
+        ],
+      },
+    },
+  ],
+};
diff --git a/client/.husky/pre-commit b/client/.husky/pre-commit
@@ -0,0 +1 @@
+npm run pre-commit
diff --git a/client/.pre-commit-config.yaml b/client/.pre-commit-config.yaml
@@ -0,0 +1,21 @@
+# See https://pre-commit.com for more information
+# See https://pre-commit.com/hooks.html for more hooks
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.5.0
+    hooks:
+      - id: check-added-large-files
+      - id: detect-private-key
+      - id: trailing-whitespace
+      - id: end-of-file-fixer
+  - repo: local
+    hooks:
+      - id: lint-staged
+        name: lint-staged
+        entry: >
+          bash -c '
+            cd client/src || exit 1
+            yarn lint-staged
+          '
+        language: system
+        files: \.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
diff --git a/client/package.json b/client/package.json
@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
     "@apollo/client": "^3.4.10",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
@@ -31,6 +30,7 @@
     "graphql-request": "^3.7.0",
     "graphql-tag": "^2.12.6",
     "js-yaml": "^4.1.0",
+    "lint-staged": "^15.2.4",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.1.0",
     "react-copy-to-clipboard": "^5.1.0",
@@ -49,10 +49,11 @@
   },
   "scripts": {
     "start": "env-cmd -f ./.env.local react-scripts start",
-    "build": "react-scripts build",
+    "build": "npm run lint && react-scripts build",
     "test": "jest",
     "eject": "react-scripts eject",
-    "lint": "eslint --fix --ext .js,.ts,.tsx ./src --ignore-path .gitignore",
+    "lint": "eslint --fix --ext .js,.ts,.tsx ./src --ignore-path .gitignore --config .eslintrc.js",
+    "lint:warn": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prettier": "prettier --ignore-path .gitignore --write \"**/*.+(js|json|ts|tsx)\"",
     "prettier-check": "prettier -c --ignore-path .gitignore \"**/*.+(js|json|ts|tsx)\"",
     "format": "yarn run prettier -- --write",
@@ -104,7 +105,66 @@
     ]
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "env": {
+      "browser": true,
+      "es6": true
+    },
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "eslint:recommended"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off",
+      "import/no-unused-modules": "off",
+      "@typescript-eslint/no-unused-vars": "warn",
+      "no-unused-vars": "warn"
+    },
+    "overrides": [
+      {
+        "files": [
+          "**/*.ts",
+          "**/*.tsx"
+        ],
+        "rules": {
+          "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+              "vars": "all",
+              "args": "after-used",
+              "ignoreRestSiblings": true
+            }
+          ]
+        }
+      },
+      {
+        "files": [
+          "**/*.js",
+          "**/*.jsx"
+        ],
+        "rules": {
+          "no-unused-vars": [
+            "warn",
+            {
+              "vars": "all",
+              "args": "after-used",
+              "ignoreRestSiblings": true
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "yarn lint",
+      "yarn prettier --write"
+    ]
   },
   "prettier": {
     "singleQuote": true

diff --git a/client/src/components/About/InteractionClaimTypes/TypesTable.tsx b/client/src/components/About/InteractionClaimTypes/TypesTable.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useGetInteractionClaimTypes } from 'hooks/queries/useGetInteractionClaimTypes';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';

diff --git a/client/src/components/Browse/Categories/BrowseCategories.scss b/client/src/components/Browse/Categories/BrowseCategories.scss
@@ -5,40 +5,4 @@
   .category-list {
     flex: 1;
   }
-
-  .ant-collapse-content {
-    .ant-collapse-content-box {
-      padding: 0px !important;
-    }
-  }
-
-  .ant-table-wrapper {
-    background-color: var(--background-light) !important;
-  }
-
-  .ant-table-pagination .ant-pagination {
-    margin: 8px 0 !important;
-  }
-
-  .ant-table-container table > thead > tr > th {
-    background-color: var(--background-light);
-  }
-}
-
-.ant-checkbox-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.ant-checkbox-group-item,
-.ant-checkbox-wrapper {
-  color: var(--text-content);
-}
-
-.ant-collapse {
-  background-color: var(--background-content);
-
-  .ant-collapse-header {
-    color: var(--text-content) !important;
-  }
 }
diff --git a/client/src/components/Browse/Categories/BrowseCategories.tsx b/client/src/components/Browse/Categories/BrowseCategories.tsx
@@ -138,7 +138,7 @@ export const BrowseCategories: React.FC = () => {
         {renderedCategories?.map((cat: any, index: number) => {
           if (cat.geneCount) {
             return (
-              <Accordion>
+              <Accordion key={index}>
                 <AccordionSummary
                   style={{ padding: '0 10px' }}
                   expandIcon={<ExpandMoreIcon />}

diff --git a/client/src/components/Browse/Sources/BrowseSources.tsx b/client/src/components/Browse/Sources/BrowseSources.tsx
@@ -128,7 +128,7 @@ export const BrowseSources = () => {
           </Box>
           <Box className="source-section">
             <b>License: </b>
-            <a href={src.licenseLink} target="_blank">
+            <a href={src.licenseLink} target="_blank" rel="noreferrer">
               {src.license}
             </a>
           </Box>

diff --git a/client/src/components/Drug/DrugCharts/DirectionalityDrug.tsx b/client/src/components/Drug/DrugCharts/DirectionalityDrug.tsx
@@ -37,8 +37,6 @@ export const DirectionalityDrug: React.FC<Props> = ({ data }) => {
     responsive: true,
   };
 
-  const labels = ['Activating', 'Inhibiting', 'N/A'];
-
   useEffect(() => {
     let countCopy = [0, 0, 0];
     data?.forEach((drug: any) => {

diff --git a/client/src/components/Drug/DrugRecord/DrugRecord.tsx b/client/src/components/Drug/DrugRecord/DrugRecord.tsx
@@ -17,7 +17,7 @@ import TableCell from '@mui/material/TableCell';
 import Table from '@mui/material/Table';
 
 // components
-import { Alert, LinearProgress, Link } from '@mui/material';
+import { LinearProgress, Link } from '@mui/material';
 import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
 import { useGetDrugInteractions } from 'hooks/queries/useGetDrugInteractions';
 import { generateXrefLink } from 'utils/generateXrefLink';

diff --git a/client/src/components/Drug/DrugSearchResults/DrugSearchResults.scss b/client/src/components/Drug/DrugSearchResults/DrugSearchResults.scss
diff --git a/client/src/components/Drug/DrugSearchResults/DrugSearchResults.tsx b/client/src/components/Drug/DrugSearchResults/DrugSearchResults.tsx
@@ -1,8 +1,8 @@
+import React from 'react';
 import TabPanel from 'components/Shared/TabPanel/TabPanel';
 import { DrugSummary } from '../DrugSummary';
 import AmbiguousTermsSummary from 'components/Shared/AmbiguousTermsSummary/AmbiguousTermsSummary';
 import { Box, Tab, Tabs } from '@mui/material';
-import './DrugSearchResults.scss';
 import { GlobalClientContext } from 'stores/Global/GlobalClient';
 import { useContext } from 'react';
 import { useGetMatchedResults } from 'hooks/queries/useGetAmbiguousResults';

diff --git a/client/src/components/Drug/DrugSummary/DrugSummary.scss b/client/src/components/Drug/DrugSummary/DrugSummary.scss
@@ -88,20 +88,6 @@
         align-items: center;
         justify-content: left;
 
-        .ant-tabs {
-          width: 100%;
-        }
-
-        .ant-tabs-tabpane {
-          padding-left: 100px;
-          div {
-            canvas {
-              height: 500px !important;
-              width: 500px !important;
-            }
-          }
-        }
-
         .score-container {
           padding-left: 10px;
         }

diff --git a/client/src/components/Drug/DrugSummary/DrugSummary.tsx b/client/src/components/Drug/DrugSummary/DrugSummary.tsx
@@ -150,7 +150,7 @@ const SummaryInfoDrug: React.FC<InfoProps> = ({
   return (
     <div className="summary-infographic-container">
       <h2>Infographics</h2>
-      {getWindowSize().innerWidth >= 1550 ? (
+      {windowSize.innerWidth >= 1550 ? (
         <div className="chart-section">
           <InteractionTypeDrug data={filteredDrugMatches} />
           <DirectionalityDrug data={filteredDrugMatches} />

diff --git a/client/src/components/Gene/GeneCharts/DirectionalityGene.tsx b/client/src/components/Gene/GeneCharts/DirectionalityGene.tsx
@@ -37,8 +37,6 @@ export const DirectionalityGene: React.FC<Props> = ({ data }) => {
     responsive: true,
   };
 
-  const labels = ['Activating', 'Inhibiting', 'N/A'];
-
   useEffect(() => {
     let countCopy = [0, 0, 0];
     data?.forEach((gene: any) => {

diff --git a/client/src/components/Gene/GeneRecord/GeneRecord.tsx b/client/src/components/Gene/GeneRecord/GeneRecord.tsx
@@ -15,7 +15,7 @@ import Table from '@mui/material/Table';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 
-import { Alert, LinearProgress, Link } from '@mui/material';
+import { LinearProgress, Link } from '@mui/material';
 import { useGetGeneInteractions } from 'hooks/queries/useGetGeneInteractions';
 import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
 import { dropRedundantCites } from 'utils/dropRedundantCites';

diff --git a/client/src/components/Gene/GeneSearchResults/GeneSearchResults.scss b/client/src/components/Gene/GeneSearchResults/GeneSearchResults.scss
diff --git a/client/src/components/Gene/GeneSearchResults/GeneSearchResults.tsx b/client/src/components/Gene/GeneSearchResults/GeneSearchResults.tsx
@@ -1,8 +1,8 @@
+import React from 'react';
 import TabPanel from 'components/Shared/TabPanel/TabPanel';
 import { GeneSummary } from '../GeneSummary';
 import AmbiguousTermsSummary from 'components/Shared/AmbiguousTermsSummary/AmbiguousTermsSummary';
 import { Box, CircularProgress, Icon, Tab, Tabs } from '@mui/material';
-import './GeneSearchResults.scss';
 import { GlobalClientContext } from 'stores/Global/GlobalClient';
 import { useContext } from 'react';
 import { useGetMatchedResults } from 'hooks/queries/useGetAmbiguousResults';

diff --git a/client/src/components/Gene/GeneSummary/GeneSummary.scss b/client/src/components/Gene/GeneSummary/GeneSummary.scss
@@ -1,6 +1,6 @@
 .gene-summary-container {
   color: var(--text-content);
-  margin: 15px;
+  margin: 0 15px;
   background-color: var(--background);
   display: flex;
   flex-direction: column;