Merge pull request #1725 from kleros/refactor/empty-string-check-utility

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

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 (!isEditing || isEmpty(contactInput)) {
       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 } 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), [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;
@@ -21,17 +22,17 @@ const NextButton: React.FC<INextButton> = ({ nextRoute }) => {
     disputeData.answers.every((answer) => answer.title !== "" && answer.description !== "");
 
   //check if any filled address or ens is invalid
-  const areFilledAddressesValid = disputeData?.aliasesArray?.every((alias) =>
-    alias.address === "" && alias.name === "" ? true : alias.isValid
-  );
-
+  const areAliasesValidOrEmpty = disputeData?.aliasesArray?.every((alias) => {
+    const isAliasEmpty = isEmpty(alias.address) && isEmpty(alias.name);
+    return isAliasEmpty || alias.isValid;
+  });
   const isButtonDisabled =
     (location.pathname.includes("/resolver/title") && !disputeData.title) ||
     (location.pathname.includes("/resolver/description") && !disputeData.description) ||
     (location.pathname.includes("/resolver/court") && !disputeData.courtId) ||
     (location.pathname.includes("/resolver/jurors") && !disputeData.arbitrationCost) ||
     (location.pathname.includes("/resolver/voting-options") && !areVotingOptionsFilled) ||
-    (location.pathname.includes("/resolver/notable-persons") && !areFilledAddressesValid) ||
+    (location.pathname.includes("/resolver/notable-persons") && !areAliasesValidOrEmpty) ||
     (location.pathname.includes("/resolver/policy") && (isPolicyUploading || !disputeData.policyURI));
 
   return <Button disabled={isButtonDisabled} onClick={() => navigate(nextRoute)} text="Next" />;

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() === "";