Merge pull request #823 from kleros/fix(web)/any-types

fix(web): add MouseEvent & IPolicy types

Author: alcercu

web/src/hooks/useFocusOutside.ts

@@ -1,12 +1,9 @@
 import React, { useEffect } from "react";
 
-export function useFocusOutside(
-  ref: React.RefObject<HTMLDivElement>,
-  callback: () => void
-) {
+export function useFocusOutside(ref: React.RefObject<HTMLDivElement>, callback: () => void) {
   useEffect(() => {
-    function handleEvent(event: any) {
-      if (ref.current && !ref.current.contains(event.target)) {
+    function handleEvent(event: FocusEvent | MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
         callback();
       }
     }

web/src/pages/Courts/CourtDetails/Description.tsx

@@ -1,35 +1,34 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import ReactMarkdown from "react-markdown";
-import {
-  Routes,
-  Route,
-  Navigate,
-  useParams,
-  useNavigate,
-  useLocation,
-} from "react-router-dom";
+import { Routes, Route, Navigate, useParams, useNavigate, useLocation } from "react-router-dom";
 import { Tabs } from "@kleros/ui-components-library";
 import { useCourtPolicy } from "queries/useCourtPolicy";
 
+interface IPolicy {
+  description?: string;
+  requiredSkills?: string;
+  summary?: string;
+}
+
 const TABS = [
   {
     text: "Purpose",
     value: 0,
     path: "purpose",
-    isVisible: (policy: any) => !!policy?.description,
+    isVisible: (policy: IPolicy) => !!policy?.description,
   },
   {
     text: "Skills",
     value: 1,
     path: "skills",
-    isVisible: (policy: any) => !!policy?.requiredSkills,
+    isVisible: (policy: IPolicy) => !!policy?.requiredSkills,
   },
   {
     text: "Policy",
     value: 2,
     path: "policy",
-    isVisible: (policy: any) => !!policy?.summary,
+    isVisible: (policy: IPolicy) => !!policy?.summary,
   },
 ];
 
@@ -38,13 +37,8 @@ const Description: React.FC = () => {
   const { data: policy } = useCourtPolicy(id);
   const navigate = useNavigate();
   const currentPathName = useLocation().pathname.split("/").at(-1);
-  const [currentTab, setCurrentTab] = useState(
-    TABS.findIndex(({ path }) => path === currentPathName)
-  );
-  useEffect(
-    () => setCurrentTab(TABS.findIndex(({ path }) => path === currentPathName)),
-    [currentPathName]
-  );
+  const [currentTab, setCurrentTab] = useState(TABS.findIndex(({ path }) => path === currentPathName));
+  useEffect(() => setCurrentTab(TABS.findIndex(({ path }) => path === currentPathName)), [currentPathName]);
 
   const filteredTabs = TABS.filter(({ isVisible }) => isVisible(policy));
 
@@ -72,11 +66,7 @@ const Description: React.FC = () => {
 
 const formatMarkdown = (markdown?: string) =>
   markdown ? (
-    <ReactMarkdown>
-      {typeof markdown === "string"
-        ? markdown.replace(/\n/g, "  \n")
-        : markdown}
-    </ReactMarkdown>
+    <ReactMarkdown>{typeof markdown === "string" ? markdown.replace(/\n/g, "  \n") : markdown}</ReactMarkdown>
   ) : (
     <p>Loading...</p>
   );