Merge pull request #1394 from guardian/pf/react-hooks-linting

Add react hooks lint rules, fix errors and some warnings

Author: bryophyta

.eslintrc.js

@@ -9,9 +9,11 @@ module.exports = {
       jsx: true
     }
   },
-  plugins: ['react', 'prettier'],
+  plugins: ['react', 'react-hooks', 'prettier'],
   rules: {
     'react/prop-types': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
     'jsx-quotes': ['error', 'prefer-double'],
     'prefer-const': 'error',
     semi: ['warn', 'always'],

package.json

@@ -54,6 +54,7 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "7.0.0",
     "hoconjs": "github:yellowblood/hocon-js",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^30.1.2",

public/video-ui/src/pages/Video/tabs/Pluto.jsx

@@ -1,18 +1,14 @@
-import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
 import { Tab, TabPanel } from 'react-tabs';
-import {getPlutoItemById} from "../../../services/PlutoApi";
-import PlutoProjectLink from "../../../components/Pluto/PlutoProjectLink";
+import PlutoProjectLink from '../../../components/Pluto/PlutoProjectLink';
+import { getPlutoItemById } from '../../../services/PlutoApi';
 
 export class PlutoTab extends React.Component {
   static tabsRole = Tab.tabsRole;
 
   render() {
-    return (
-      <Tab {...this.props}>
-        Pluto
-      </Tab>
-    );
+    return <Tab {...this.props}>Pluto</Tab>;
   }
 }
 
@@ -29,35 +25,46 @@ export class PlutoTabPanel extends React.Component {
     return (
       <TabPanel {...rest}>
         <div className="form__group">
-          {
-            video.plutoData &&
-              <PlutoProjectLink projectId={video.plutoData.projectId}/>
-          }
+          {video.plutoData && (
+            <PlutoProjectLink projectId={video.plutoData.projectId} />
+          )}
 
           <header className="video__detailbox__header">Commission</header>
-          <ReadOnlyPlutoItem id={video.plutoData && video.plutoData.commissionId} itemType="commission" />
+          <ReadOnlyPlutoItem
+            id={video.plutoData?.commissionId}
+            itemType="commissions"
+          />
 
           <header className="video__detailbox__header">Project</header>
-          <ReadOnlyPlutoItem id={video.plutoData && video.plutoData.projectId} itemType="project" />
-
+          <ReadOnlyPlutoItem
+            id={video.plutoData?.projectId}
+            itemType="projects"
+          />
         </div>
       </TabPanel>
     );
   }
 }
 
-const ReadOnlyPlutoItem = ({id, itemType}) => {
+/**
+ *
+ * @param {{id: string, itemType: import('../../../services/PlutoApi').PlutoItemType}} param0
+ * @returns
+ */
+const ReadOnlyPlutoItem = ({ id, itemType }) => {
+  const [title, setTitle] = useState(id ? 'Loading...' : '');
 
-  const [ title, setTitle ] = useState(id ? "Loading..." : "");
-
-  if(id) {
-    useEffect(() => {
-      getPlutoItemById(id, itemType).then(data => setTitle(data.title)).catch(e => {
-        const errorMessage = `Failed to lookup ${itemType} with ID '${id}'`;
-        console.error(errorMessage, e);
-        setTitle(errorMessage);
-      });}, []);
-  }
+  useEffect(() => {
+    if (id) {
+      getPlutoItemById(id, itemType)
+        .then(data => setTitle(data.title))
+        .catch(e => {
+          const errorMessage = `Failed to lookup ${itemType} with ID '${id}'`;
+          console.error(errorMessage, e);
+          setTitle(errorMessage);
+        });
+    }
+  }, [id, itemType]);
 
   return <p className="details-list__field">{title}</p>;
 };

public/video-ui/src/services/PlutoApi.ts

@@ -1,20 +1,20 @@
 import { apiRequest } from './apiRequest';
 
-type PlutoItemType = 'commissions' | 'projects'
+type PlutoItemType = 'commissions' | 'projects';
 
 export type PlutoCommission = {
-  id: string,
-  title: string
-}
+  id: string;
+  title: string;
+};
 
 export type PlutoProject = {
-  id: string,
-  title: string,
-  status: string,
-  commissionId: string,
-  commissionTitle: string, //TODO remove this once migrated
-  productionOffice: string
-}
+  id: string;
+  title: string;
+  status: string;
+  commissionId: string;
+  commissionTitle: string; //TODO remove this once migrated
+  productionOffice: string;
+};
 
 export function getPlutoCommissions() {
   return apiRequest<PlutoCommission[]>({
@@ -30,7 +30,7 @@ export function getPlutoProjects({ commissionId }: { commissionId: string }) {
 
 export function getPlutoItemById(id: string, itemType: PlutoItemType) {
   return apiRequest<PlutoProject | PlutoCommission>({
-    url: `/api/pluto/${itemType}s/${id}`
+    url: `/api/pluto/${itemType}/${id}`
   });
 }