chore: Deps update + cleanup

.babelrc

@@ -1,7 +1,3 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": [
-    ["@babel/plugin-proposal-decorators", { "legacy": true }],
-    "@babel/plugin-proposal-class-properties"
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2022: true,
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    'react/prop-types': 'off',
+  },
+  globals: {
+    module: 'readonly',
+    CF_VERSION: 'readonly',
+    chrome: 'readonly',
+  },
+  overrides: [
+    {
+      files: ['*.spec.js'],
+      globals: {
+        test: 'readonly',
+        snapshot: 'readonly',
+        snapshotComponent: 'readonly',
+        shallow: 'readonly',
+        tMock: 'readonly',
+        it: 'readonly',
+        expect: 'readonly',
+        describe: 'readonly',
+        before: 'readonly',
+        beforeEach: 'readonly',
+      },
+    },
+  ],
+}

.github/workflows/ci.yml

@@ -7,29 +7,16 @@ jobs:
     name: Unit tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-        with:
-          submodules: true
-      - uses: actions/setup-node@v1
-      - name: Restore node_modules
-        uses: actions/cache@v1
-        id: node-modules
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-node-modules-${{ hashFiles('package-lock.json') }}
-      - name: Restore .npm cache
-        if: steps.node-modules.outputs.cache-hit != 'true'
-        uses: actions/cache@v1
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-npm-cache-${{ hashFiles('package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-npm-cache-${{ hashFiles('package-lock.json') }}
-            ${{ runner.os }}-npm-cache-
+      - uses: actions/checkout@v3
+        with:
+          submodules: 'true'
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
       - name: Build Overlay Injector
         run: cd captain-fact-overlay-injector && npm ci --prefer-offline --no-audit && npm run build && cd ..
       - name: Install dependencies
-        if: steps.node-modules.outputs.cache-hit != 'true'
         run: npm ci --prefer-offline --no-audit
       - name: Run tests
         run: npm run coverage
@@ -38,3 +25,48 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           path-to-lcov: ./coverage/lcov.info
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: 'true'
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci --prefer-offline --no-audit
+      - name: Run linter
+        run: npm run lint
+  prettier:
+    name: Prettier
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: 'true'
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci --prefer-offline --no-audit
+      - name: Run prettier
+        run: npm run prettier
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: 'true'
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci --prefer-offline --no-audit
+      - name: Build
+        run: npm run build

app/components/ExternalLink.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
-
-export default props => (
-  <a {...props} target="_blank" rel="noopener noreferrer"/>
+const ExternalLink = (props) => (
+  <a {...props} target="_blank" rel="noopener noreferrer" />
 )
+
+export default ExternalLink

app/components/Message.js

@@ -2,12 +2,9 @@ import React from 'react'
 
 import styles from './Message.css'
 
-
-const Message = ({type, children}) => (
+const Message = ({ type, children }) => (
   <div className={styles.message} data-type={type}>
-    <div className={styles.body}>
-      {children}
-    </div>
+    <div className={styles.body}>{children}</div>
   </div>
 )
 

app/components/Popup.js

@@ -12,20 +12,22 @@ import { linkToAddVideo } from '../lib/cf_urls'
 import VideosList from './VideosList'
 import ExternalLink from './ExternalLink'
 
-
 export default class Popup extends React.Component {
-  state = {url: null}
+  state = { url: null }
 
   componentDidMount() {
-    chrome.tabs.query({active: true, currentWindow: true}, arrayOfTabs => {
-      this.setState({url: arrayOfTabs[0].url})
+    chrome.tabs.query({ active: true, currentWindow: true }, (arrayOfTabs) => {
+      this.setState({ url: arrayOfTabs[0].url })
     })
   }
 
   render() {
     return (
       <div className={styles.popup}>
-        <ExternalLink href="https://captainfact.io/videos" className={styles.bannerLink}>
+        <ExternalLink
+          href="https://captainfact.io/videos"
+          className={styles.bannerLink}
+        >
           <img
             src={chrome.runtime.getURL('img/banner.jpg')}
             className={styles.banner}
@@ -41,23 +43,23 @@ export default class Popup extends React.Component {
           <TabList className={tabsStyles.tabsList}>
             <Tab>
               <a>
-                <FontAwesomeIcon icon={faTv}/>
+                <FontAwesomeIcon icon={faTv} />
                 <span>{translate('videos')}</span>
               </a>
             </Tab>
             <Tab>
               <a>
-                <FontAwesomeIcon icon={faCog}/>
+                <FontAwesomeIcon icon={faCog} />
                 <span>{translate('settings')}</span>
               </a>
             </Tab>
           </TabList>
           <TabPanel>
-            <VideosList/>
+            <VideosList />
           </TabPanel>
           <TabPanel>
             <div className={styles.content}>
-              <Settings/>
+              <Settings />
             </div>
           </TabPanel>
         </Tabs>
@@ -67,7 +69,10 @@ export default class Popup extends React.Component {
 
   renderActions() {
     const { url } = this.state
-    if (!url || !url.match(/^(http:\/\/|https:\/\/)?(www\.)?youtube\.com\/watch\?*/))
+    if (
+      !url ||
+      !url.match(/^(http:\/\/|https:\/\/)?(www\.)?youtube\.com\/watch\?*/)
+    )
       return null
 
     return (
@@ -76,7 +81,7 @@ export default class Popup extends React.Component {
           className={styles.actionsBlock}
           href={linkToAddVideo(url)}
         >
-          <img src={chrome.runtime.getURL('img/new_tab.png')} alt=""/>
+          <img src={chrome.runtime.getURL('img/new_tab.png')} alt="" />
           {translate('openOnCF')}
         </ExternalLink>
       </div>

app/components/Select.js

@@ -3,23 +3,24 @@ import classnames from 'classnames'
 import { button, active } from './Button.css'
 import { select } from './Select.css'
 
-
 export default class Select extends React.Component {
   render() {
     const { selected, options, onChange } = this.props
     return (
       <div className={select}>
-        {Object.keys(options).map(key =>
-          <a 
+        {Object.keys(options).map((key) => (
+          <a
             key={key}
-            className={classnames(button, {[active]: selected === options[key]})}
+            className={classnames(button, {
+              [active]: selected === options[key],
+            })}
             data-value={key}
             onClick={() => selected !== options[key] && onChange(options[key])}
           >
             {key}
           </a>
-        )}
+        ))}
       </div>
-    );
+    )
   }
 }