SCKAN-206 chore: Fix linting warnings

frontend/src/Pages/SentenceDetails.tsx

@@ -67,7 +67,6 @@ const SentencesDetails = () => {
   const [connectivityStatements, setConnectivityStatements] =
     useState<SentenceConnectivityStatement[]>();
 
-  const [open, setOpen] = React.useState(false);
   const [selectedIndex, setSelectedIndex] = React.useState(0);
   const [refetch, setRefetch] = useState(false);
 
@@ -167,7 +166,6 @@ const SentencesDetails = () => {
     index: number,
   ) => {
     setSelectedIndex(index);
-    setOpen(false);
   };
 
   const refreshSentence = () => {

frontend/src/components/AnatomicalEntitiesField.tsx

@@ -1,29 +1,31 @@
-import React from "react";
+import React, {useCallback} from "react";
 import AutoComplete from "./AutoComplete";
-import { AnatomicalEntity } from "../apiclient/backend";
-import { composerApi as api } from "../services/apis";
-import { autocompleteRows } from "../helpers/settings";
+import {AnatomicalEntity} from "../apiclient/backend";
+import {composerApi as api} from "../services/apis";
+import {autocompleteRows} from "../helpers/settings";
 import theme from "../theme/Theme";
 import Typography from "@mui/material/Typography";
 
 function AnatomicalEntitiesField(props: any) {
-  const { label, errors } = props.options;
+  const {label, errors} = props.options;
   const placeholder = "Select " + props.label?.slice(0, -3);
 
   const [entity, setEntity] = React.useState<AnatomicalEntity>();
   const [loading, setLoading] = React.useState(true);
 
-  const fetchEntity = () => api.composerAnatomicalEntityRetrieve(props.value);
+  const fetchEntity = useCallback(() => {
+    return api.composerAnatomicalEntityRetrieve(props.value);
+  }, [props.value]);
 
   const autoCompleteNoOptionsText = "No entities found";
 
   React.useEffect(() => {
     props.value
       ? fetchEntity()
-          .then((res) => setEntity(res.data))
-          .finally(() => setLoading(false))
+        .then((res) => setEntity(res.data))
+        .finally(() => setLoading(false))
       : setLoading(false);
-  }, []);
+  }, [fetchEntity, props.value]);
 
   const autoCompleteFetch = (inputValue: string) =>
     api.composerAnatomicalEntityList([], autocompleteRows, inputValue, 0);

frontend/src/components/AutoComplete.tsx

@@ -48,7 +48,7 @@ export default function AutoComplete({
           setOptions(entities);
         });
       }, SEARCH_DEBOUNCE),
-    [inputValue],
+    [inputValue, fetch],
   );
 
   useEffect(() => {

frontend/src/components/CheckForDuplicates/CheckDuplicatesDialog.tsx

@@ -14,7 +14,6 @@ import { GridRowsProp } from "@mui/x-data-grid";
 import { useState } from "react";
 import { Fab } from "@mui/material";
 import {
-  AnatomicalEntity,
   PaginatedConnectivityStatementList,
 } from "../../apiclient/backend";
 import {
@@ -108,7 +107,7 @@ export default function CheckDuplicates() {
 
   const rows: GridRowsProp =
     statementsList?.results?.map((statement) => {
-      const { id, sentence, knowledge_statement, state } = statement;
+      const { id, knowledge_statement, state } = statement;
       return {
         id,
         knowledge_statement,
@@ -117,7 +116,7 @@ export default function CheckDuplicates() {
     }) || [];
 
   const results = statementsList
-    ? statementsList.count == 0
+    ? statementsList.count === 0
       ? NoResults({ handleClearSearch: () => handleClearSearch() })
       : ResultsGrid({
           rows,

frontend/src/components/CheckForDuplicates/ResultsGrid.tsx

@@ -41,7 +41,7 @@ export default function ResultsGrid({
       renderCell: renderTitle,
     },
   ];
-  const resultStr = totalResults != 1 ? "Results" : "Result";
+  const resultStr = totalResults !== 1 ? "Results" : "Result";
   return (
     <Box
       sx={{

frontend/src/components/CustomPagination.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import Box from "@mui/material/Box";
 import {
-  DataGrid,
   gridPageCountSelector,
   gridPageSelector,
   useGridApiContext,

frontend/src/components/Dashboard.tsx

@@ -7,8 +7,6 @@ import Typography from '@mui/material/Typography';
 import logo from '../assets/logo.svg'
 import Grid from '@mui/material/Grid';
 
-import { Link } from 'react-router-dom'
-
 import { logout } from '../services/UserService'
 import { userProfile } from '../services/UserService'
 

frontend/src/components/Forms/FormBase.tsx

@@ -3,7 +3,6 @@ import validator from "@rjsf/validator-ajv8";
 import { IChangeEvent, withTheme } from "@rjsf/core";
 import { Backdrop, Box, CircularProgress } from "@mui/material";
 import { Theme } from "@rjsf/mui";
-import { useDebouncedCallback } from "use-debounce";
 import { EDIT_DEBOUNCE } from "../../settings";
 import Button from "@mui/material/Button";
 
@@ -36,7 +35,6 @@ export const FormBase = (props: any) => {
   } = props;
   const [localData, setLocalData] = useState<any>(data);
   const [isSaving, setIsSaving] = useState<boolean>(false);
-  const triggerAutoSave = useDebouncedCallback(() => onSave(), EDIT_DEBOUNCE);
   const [isSubmitButtonDisabled, setIsSubmitButtonDisabled] =
     useState<boolean>(false);
   const [customSchema, setCustomSchema] = useState<any>(schema);
@@ -70,7 +68,7 @@ export const FormBase = (props: any) => {
         }
       });
     }
-  }, [data]);
+  }, [data, schema, uiFields, uiSchema]);
 
   const startTimer = () =>
     (timer.current = setTimeout(() => {

frontend/src/components/Forms/SentenceAddForm.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
 import { FormBase } from "./FormBase";
 import { jsonSchemas } from "../../services/JsonSchema";
 import sentenceService from "../../services/SentenceService";
@@ -10,7 +10,6 @@ const SentenceAddForm = (props: any) => {
   const { format } = props;
   const { schema, uiSchema } = jsonSchemas.getSentenceSchema();
 
-  const [disabled, setDisabled] = React.useState(true);
 
   const uiFields =
     format === "small"
@@ -89,7 +88,6 @@ const SentenceAddForm = (props: any) => {
         uiFields={uiFields}
         enableAutoSave={false}
         formIsValid={format === "create" && formIsValid}
-        disableSubmitButton={setDisabled}
         submitButtonProps={submitButtonProps}
         {...props}
       />

frontend/src/components/Forms/SentenceForm.tsx

@@ -10,7 +10,6 @@ import Paper from "@mui/material/Paper";
 import {vars} from "../../theme/variables";
 import Chip from "@mui/material/Chip";
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import {useNavigate} from "react-router";
 import { useSectionStyle } from "../../styles/styles";
 import { useTheme } from "@mui/system";
 
@@ -49,22 +48,13 @@ const linkedChip = (data: any) => {
 const SentenceForm = (props: any) => {
   const { format, data } = props
   const { schema, uiSchema } = jsonSchemas.getSentenceSchema()
-  const navigate = useNavigate();
   const theme = useTheme()
   const sectionStyle = useSectionStyle(theme)
 
   const uiFields = format === 'small'
     ? ["title"]
     : undefined
 
-  const uiOrder = format === "create" ? ["*", "text"] : undefined;
-  // TODO: set up the widgets for the schema
-
-  const handleOpenPmid = (e: any) => {
-    e.preventDefault()
-    window.open(data?.pmid_uri, '_blank')
-  }
-
   const customUiSchema: UiSchema = {
     ...uiSchema,
     title: {

frontend/src/components/Forms/StatementPreviewForm.tsx

@@ -5,7 +5,7 @@ import statementService from "../../services/StatementService";
 import StatementPreviewWidget from "../StatementPreviewWidget";
 
 const StatementPreviewForm = (props: any) => {
-    const { statement, setter } = props;
+    const { statement } = props;
     const { schema, uiSchema } = jsonSchemas.getConnectivityStatementSchema();
     const copiedSchema = JSON.parse(JSON.stringify(schema));
     const copiedUISchema = JSON.parse(JSON.stringify(uiSchema));

frontend/src/components/ProofingTab/GraphDiagram/GraphDiagram.tsx

@@ -208,17 +208,19 @@ const GraphDiagram: React.FC<GraphDiagramProps> = ({origins, vias, destinations}
 
     // This effect prevents the default scroll and touchmove behavior
     useEffect(() => {
-        if (modelUpdated && containerRef.current) {
+        const currentContainer = containerRef.current;
+
+        if (modelUpdated && currentContainer) {
             const disableScroll = (event: any) => {
                 event.stopPropagation();
             };
 
-            containerRef.current.addEventListener('wheel', disableScroll, {passive: false});
-            containerRef.current.addEventListener('touchmove', disableScroll, {passive: false});
+            currentContainer.addEventListener('wheel', disableScroll, {passive: false});
+            currentContainer.addEventListener('touchmove', disableScroll, {passive: false});
 
             return () => {
-                containerRef.current?.removeEventListener('wheel', disableScroll);
-                containerRef.current?.removeEventListener('touchmove', disableScroll);
+                currentContainer?.removeEventListener('wheel', disableScroll);
+                currentContainer?.removeEventListener('touchmove', disableScroll);
             };
         }
     }, [modelUpdated]);

frontend/src/components/ProofingTab/GraphDiagram/InfoMenu.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {Stack, Divider, Typography} from "@mui/material";
+import {Stack, Typography} from "@mui/material";
 import {
     DestinationInfoIcon,
     OriginInfoIcon,

frontend/src/components/ProofingTab/GraphDiagram/Widgets/DestinationNodeWidget.tsx

@@ -6,7 +6,6 @@ import {DestinationIcon, OriginIcon, ViaIcon} from "../../../icons";
 import Divider from "@mui/material/Divider";
 import Chip from "@mui/material/Chip";
 import {vars} from "../../../../theme/variables";
-import {AnatomicalEntity} from "../../../../apiclient/backend";
 import {NodeTypes} from "../GraphDiagram";
 
 interface DestinationNodeProps {

frontend/src/components/ProofingTab/GraphDiagram/Widgets/ViaNodeWidget.tsx

@@ -6,7 +6,6 @@ import {DestinationIcon, OriginIcon, ViaIcon} from "../../../icons";
 import Divider from "@mui/material/Divider";
 import {vars} from "../../../../theme/variables";
 import Chip from "@mui/material/Chip";
-import {AnatomicalEntity} from "../../../../apiclient/backend";
 import {NodeTypes} from "../GraphDiagram";
 
 interface ViaNodeProps {

frontend/src/components/ProofingTab/PathsBuilder.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Paper, Stack, Typography, Divider, Box } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useSectionStyle, useGreyBgContainer } from "../../styles/styles";

frontend/src/components/ProofingTab/SortableItem.tsx

@@ -1,17 +1,15 @@
 import React from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { Box } from "@mui/material";
 import { IconButton, TableRow as MuiTableRow, TableCell } from "@mui/material";
 import DragHandleIcon from "@mui/icons-material/DragHandle";
 import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
-import Typography from "@mui/material/Typography";
 
 export function SortableItem(props: any) {
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({ id: props.id });
 
-  const { id, children, onDropIndexClick, disabled, hideDeleteBtn } = props;
+  const { children, onDropIndexClick, disabled, hideDeleteBtn } = props;
 
   const style = {
     transform: CSS.Transform.toString(transform),

frontend/src/components/Searchbar.tsx

@@ -1,45 +1,50 @@
-import React, {useRef, useEffect, useState} from "react";
+import React, {useRef, useEffect, useState, useCallback} from "react";
 import TextField from "@mui/material/TextField";
 import Box from "@mui/material/Box";
 import SearchIcon from "@mui/icons-material/Search";
 import CloseIcon from "@mui/icons-material/Close";
-import { useDebouncedCallback } from "use-debounce";
-import { SEARCH_DEBOUNCE } from "../settings";
-import { useAppDispatch } from "../redux/hooks";
-import { setTitleQuery } from "../redux/sentenceSlice";
-import { setKnowledgeStatementQuery } from "../redux/statementSlice";
+import {useDebouncedCallback} from "use-debounce";
+import {SEARCH_DEBOUNCE} from "../settings";
+import {useAppDispatch} from "../redux/hooks";
+import {setTitleQuery} from "../redux/sentenceSlice";
+import {setKnowledgeStatementQuery} from "../redux/statementSlice";
 
 const Searchbar = (props: any) => {
-  const { queryOptions, entityType } = props;
+  const {queryOptions, entityType} = props;
   const inputRef = useRef<HTMLInputElement>(null);
   const dispatch = useAppDispatch();
   const [isFocused, setIsFocused] = useState(false);
 
 
-  const placeholder = entityType === 'sentence' ? 'Search for Sentences' : 'Search for Knowledge Statements' 
+  const placeholder = entityType === 'sentence' ? 'Search for Sentences' : 'Search for Knowledge Statements'
 
   const handleInputChange = (e: any) => {
     entityType === "sentence" && dispatch(setTitleQuery(e.target.value));
     entityType === "statement" &&
-      dispatch(setKnowledgeStatementQuery(e.target.value));
+    dispatch(setKnowledgeStatementQuery(e.target.value));
   };
 
   const debouncedChangeHandler = useDebouncedCallback(
     (e) => handleInputChange(e),
     SEARCH_DEBOUNCE
   );
 
-  const onEscapeHandler = (e: any) => {
-    if (e.key === "Escape" && inputRef.current) {
-      handleClear()
+  const handleClear = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.value = "";
     }
-  };
+    if (entityType === "sentence") {
+      dispatch(setTitleQuery(undefined));
+    } else if (entityType === "statement") {
+      dispatch(setKnowledgeStatementQuery(undefined));
+    }
+  }, [inputRef, entityType, dispatch]);
 
-  const handleClear = () => {
-    inputRef.current!.value = "";
-    entityType === "sentence" && dispatch(setTitleQuery(undefined));
-    entityType === "statement" && dispatch(setKnowledgeStatementQuery(undefined));
-  };
+  const onEscapeHandler = useCallback((e: KeyboardEvent) => {
+    if (e.key === "Escape" && inputRef.current) {
+      handleClear();
+    }
+  }, [inputRef, handleClear]);
 
   useEffect(() => {
     return () => {
@@ -53,7 +58,7 @@ const Searchbar = (props: any) => {
     return () => {
       document.removeEventListener("keydown", onEscapeHandler, false);
     };
-  }, [queryOptions]);
+  }, [queryOptions, onEscapeHandler]);
 
   return (
     <Box flexGrow={1} minWidth="200px">
@@ -73,18 +78,18 @@ const Searchbar = (props: any) => {
         fullWidth
         InputProps={{
           startAdornment: (
-            <SearchIcon color="primary" fontSize="small" sx={{ mr: 0.6 }} />
+            <SearchIcon color="primary" fontSize="small" sx={{mr: 0.6}}/>
           ),
           endAdornment: isFocused ? (
-              <CloseIcon
-                  color="action"
-                  fontSize="small"
-                  sx={{ cursor: "pointer", mr: 0.6 }}
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    handleClear();
-                  }}
-              />
+            <CloseIcon
+              color="action"
+              fontSize="small"
+              sx={{cursor: "pointer", mr: 0.6}}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                handleClear();
+              }}
+            />
           ) : null,
         }}
       />

frontend/src/components/TriageStatementSection/TriageStatementSection.tsx

@@ -6,7 +6,6 @@ import { Typography } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import StatementDetailsAccordion from "./StatementDetailsAccordion";
-import { vars } from "../../theme/variables";
 import statementService from "../../services/StatementService";
 import StatementForm from "../Forms/StatementForm";
 import ProvenancesForm from "../Forms/ProvenanceForm";