refactor(web): add-utility-to-check-empty-strings-with-whitespaces

Author: tractorss

web/src/components/CasesDisplay/Search.tsx

@@ -7,7 +7,7 @@ import { useDebounce } from "react-use";
 
 import { Searchbar, DropdownCascader } from "@kleros/ui-components-library";
 
-import { isUndefined } from "utils/index";
+import { isEmpty, isUndefined } from "utils/index";
 import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
 
 import { rootCourtToItems, useCourtTree } from "queries/useCourtTree";
@@ -58,7 +58,7 @@ const Search: React.FC = () => {
   const navigate = useNavigate();
   useDebounce(
     () => {
-      const newFilters = search === "" ? { ...filterObject } : { ...filterObject, id: search };
+      const newFilters = isEmpty(search) ? { ...filterObject } : { ...filterObject, id: search };
       const encodedFilter = encodeURIFilter(newFilters);
       navigate(`${location}/${page}/${order}/${encodedFilter}`);
     },

web/src/context/NewDisputeContext.tsx

@@ -5,7 +5,7 @@ import { Address } from "viem";
 import { DEFAULT_CHAIN } from "consts/chains";
 import { klerosCoreAddress } from "hooks/contracts/generated";
 import { useLocalStorage } from "hooks/useLocalStorage";
-import { isUndefined } from "utils/index";
+import { isEmpty, isUndefined } from "utils/index";
 
 export type Answer = {
   id: string;
@@ -133,7 +133,7 @@ const constructDisputeTemplate = (disputeData: IDisputeData) => {
   for (const answer of baseTemplate.answers) {
     answer.id = "0x" + BigInt(answer.id).toString(16);
   }
-  if (!isUndefined(baseTemplate.policyURI) && baseTemplate.policyURI === "") delete baseTemplate.policyURI;
+  if (!isUndefined(baseTemplate.policyURI) && isEmpty(baseTemplate.policyURI)) delete baseTemplate.policyURI;
 
   baseTemplate.arbitratorAddress = klerosCoreAddress[DEFAULT_CHAIN];
   baseTemplate.arbitratorChainID = DEFAULT_CHAIN.toString();

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx

@@ -2,6 +2,7 @@ import React, { Dispatch, SetStateAction, useMemo, useEffect } from "react";
 import styled from "styled-components";
 
 import { Field } from "@kleros/ui-components-library";
+import { isEmpty } from "src/utils";
 
 const StyledLabel = styled.label`
   display: flex;
@@ -47,7 +48,7 @@ const FormContact: React.FC<IForm> = ({
   };
 
   const fieldVariant = useMemo(() => {
-    if (contactInput === "" || !isEditing) {
+    if (isEmpty(contactInput) || !isEditing) {
       return undefined;
     }
     return contactIsValid ? "success" : "error";

web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx

@@ -14,7 +14,7 @@ import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast";
 
 import EnsureAuth from "components/EnsureAuth";
 import { EnsureChain } from "components/EnsureChain";
-import { isUndefined } from "src/utils";
+import { isEmpty, isUndefined } from "src/utils";
 
 const StyledModal = styled(Modal)`
   position: absolute;
@@ -65,7 +65,7 @@ const SubmitEvidenceModal: React.FC<{
   const [file, setFile] = useState<File>();
   const { uploadFile } = useAtlasProvider();
 
-  const isDisabled = useMemo(() => isSending || message.trim() === "" || isUndefined(message), [isSending, message]);
+  const isDisabled = useMemo(() => isSending || isEmpty(message) || isUndefined(message), [isSending, message]);
 
   const submitEvidence = useCallback(async () => {
     try {

web/src/pages/Resolver/NavigationButtons/NextButton.tsx

@@ -5,6 +5,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { Button } from "@kleros/ui-components-library";
 
 import { useNewDisputeContext } from "context/NewDisputeContext";
+import { isEmpty } from "src/utils";
 
 interface INextButton {
   nextRoute: string;
@@ -22,7 +23,7 @@ const NextButton: React.FC<INextButton> = ({ nextRoute }) => {
 
   //check if any filled address or ens is invalid
   const areFilledAddressesValid = disputeData?.aliasesArray?.every((alias) =>
-    alias.address === "" && alias.name === "" ? true : alias.isValid
+    isEmpty(alias.address) && isEmpty(alias.name) ? true : alias.isValid
   );
 
   const isButtonDisabled =

web/src/pages/Resolver/NavigationButtons/PreviousButton.tsx

@@ -4,9 +4,10 @@ import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
+import { isEmpty } from "src/utils";
 
 const StyledButton = styled(Button)<{ prevRoute: string }>`
-  display: ${({ prevRoute }) => (prevRoute === "" ? "none" : "flex")};
+  display: ${({ prevRoute }) => (isEmpty(prevRoute) ? "none" : "flex")};
 `;
 
 interface IReturnButton {

web/src/utils/index.ts

@@ -1,2 +1,7 @@
 export const isUndefined = (maybeObject: any): maybeObject is undefined | null =>
   typeof maybeObject === "undefined" || maybeObject === null;
+
+/**
+ * Checks if a string is empty or contains only whitespace.
+ */
+export const isEmpty = (str: string): boolean => str.trim() === "";