refactor: avoid isTruthy call in places where it's not needed (#668)

ArdentHQ · Mar 6, 2024 · 209b2ea · 209b2ea
1 parent cdffee9
commit 209b2ea
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 75 deletions.
diff --git a/resources/js/Components/Articles/ArticleCard/ArticleErrorImage.tsx b/resources/js/Components/Articles/ArticleCard/ArticleErrorImage.tsx
@@ -1,15 +1,14 @@
 import cn from "classnames";
 import { ImageLoadError, ImageLoadErrorDark, ImageLoadErrorPrimary } from "@/images";
-import { isTruthy } from "@/Utils/is-truthy";
 
 export const ArticleErrorImage = ({
     className,
-    isLargeVariant,
+    isLargeVariant = false,
 }: {
     className?: string;
     isLargeVariant?: boolean;
 }): JSX.Element => {
-    if (isTruthy(isLargeVariant)) {
+    if (isLargeVariant) {
         return (
             <div
                 data-testid="ArticleErrorImageLargeVariant"

diff --git a/resources/js/Components/Collections/CollectionDescription/CollectionDescription.tsx b/resources/js/Components/Collections/CollectionDescription/CollectionDescription.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { Dialog } from "@/Components/Dialog";
 import { Link, LinkButton } from "@/Components/Link";
 import { Tooltip } from "@/Components/Tooltip";
-import { isTruthy } from "@/Utils/is-truthy";
 
 export const CollectionDescription = ({
     name,
@@ -19,70 +18,68 @@ export const CollectionDescription = ({
     const { t } = useTranslation();
     const [showDescriptionModal, setShowDescriptionModal] = useState(false);
 
-    return (
-        <>
-            {!isTruthy(description) && (
-                <Tooltip content={t("common.na")}>
-                    <div>
-                        <LinkButton
-                            data-testid="CollectionHeaderTop__about"
-                            className={cn(
-                                "border-b border-dashed border-theme-secondary-500 text-theme-secondary-500",
-                                linkClassName,
-                            )}
-                            disabled
-                        >
-                            {name}
-                        </LinkButton>
-                    </div>
-                </Tooltip>
-            )}
-
-            {isTruthy(description) && (
-                <>
+    if (description === null || description.length === 0) {
+        return (
+            <Tooltip content={t("common.na")}>
+                <div>
                     <LinkButton
                         data-testid="CollectionHeaderTop__about"
                         className={cn(
-                            "transition-default border-b border-dashed border-theme-secondary-900 hover:border-transparent hover:text-theme-primary-700 dark:border-theme-dark-50 dark:text-theme-dark-50 dark:hover:border-theme-dark-200 dark:hover:text-theme-dark-200",
+                            "border-b border-dashed border-theme-secondary-500 text-theme-secondary-500",
                             linkClassName,
                         )}
-                        onClick={() => {
-                            setShowDescriptionModal(true);
-                        }}
+                        disabled
                     >
                         {name}
                     </LinkButton>
+                </div>
+            </Tooltip>
+        );
+    }
+
+    return (
+        <>
+            <LinkButton
+                data-testid="CollectionHeaderTop__about"
+                className={cn(
+                    "transition-default border-b border-dashed border-theme-secondary-900 hover:border-transparent hover:text-theme-primary-700 dark:border-theme-dark-50 dark:text-theme-dark-50 dark:hover:border-theme-dark-200 dark:hover:text-theme-dark-200",
+                    linkClassName,
+                )}
+                onClick={() => {
+                    setShowDescriptionModal(true);
+                }}
+            >
+                {name}
+            </LinkButton>
 
-                    <Dialog
-                        title={name}
-                        isOpen={showDescriptionModal}
-                        onClose={() => {
-                            setShowDescriptionModal(false);
+            <Dialog
+                title={name}
+                isOpen={showDescriptionModal}
+                onClose={() => {
+                    setShowDescriptionModal(false);
+                }}
+            >
+                <div
+                    data-testid="CollectionHeaderTop__description_modal"
+                    className={cn(
+                        "text-theme-secondary-700 [&_div]:space-y-6",
+                        "dark:text-theme-dark-200 [&_a]:text-theme-primary-600 hover:[&_a]:underline",
+                    )}
+                >
+                    <Markdown
+                        data-testid="CollectionHeaderTop__html"
+                        options={{
+                            disableParsingRawHTML: true,
+                            overrides: {
+                                img: MarkdownImage,
+                                a: MarkdownLink,
+                            },
                         }}
                     >
-                        <div
-                            data-testid="CollectionHeaderTop__description_modal"
-                            className={cn(
-                                "text-theme-secondary-700 [&_div]:space-y-6",
-                                "dark:text-theme-dark-200 [&_a]:text-theme-primary-600 hover:[&_a]:underline",
-                            )}
-                        >
-                            <Markdown
-                                data-testid="CollectionHeaderTop__html"
-                                options={{
-                                    disableParsingRawHTML: true,
-                                    overrides: {
-                                        img: MarkdownImage,
-                                        a: MarkdownLink,
-                                    },
-                                }}
-                            >
-                                {description}
-                            </Markdown>
-                        </div>
-                    </Dialog>
-                </>
-            )}
+                        {description}
+                    </Markdown>
+                </div>
+            </Dialog>
         </>
     );
 };

diff --git a/resources/js/Components/ErrorBlock/ErrorBlock.blocks.tsx b/resources/js/Components/ErrorBlock/ErrorBlock.blocks.tsx
@@ -1,12 +1,11 @@
 import { useTranslation } from "react-i18next";
 import { ButtonLink } from "@/Components/Buttons/ButtonLink";
 import { Heading } from "@/Components/Heading";
-import { isTruthy } from "@/Utils/is-truthy";
 
 export const ErrorContent = ({
     title,
     description,
-    contactEmail,
+    contactEmail = "",
     showActionButtons = true,
 }: {
     title?: string;
@@ -26,7 +25,7 @@ export const ErrorContent = ({
 
             {showActionButtons && (
                 <div className="mt-6 flex flex-col space-y-3 sm:flex-row sm:justify-center sm:space-x-3 sm:space-y-0">
-                    {isTruthy(contactEmail) && (
+                    {contactEmail.length > 0 && (
                         <ButtonLink
                             className="w-full justify-center sm:w-auto"
                             variant="primary"

diff --git a/resources/js/Components/Form/TextInput/TextInput.tsx b/resources/js/Components/Form/TextInput/TextInput.tsx
@@ -5,7 +5,6 @@ import { TextInputAvatar, TextInputButton } from "./TextInput.blocks";
 import { type TextInputProperties } from "./TextInput.contracts";
 import { textInputDynamicClassnames } from "./TextInput.styles";
 import { useTextInput } from "./useTextInput";
-import { isTruthy } from "@/Utils/is-truthy";
 
 const TextInputRoot = forwardRef<HTMLInputElement, TextInputProperties>(
     (
@@ -19,6 +18,7 @@ const TextInputRoot = forwardRef<HTMLInputElement, TextInputProperties>(
             before,
             onFocus,
             onBlur,
+            disabled = false,
             ...properties
         },
         reference,
@@ -35,8 +35,6 @@ const TextInputRoot = forwardRef<HTMLInputElement, TextInputProperties>(
             }
         }, [focusInput]);
 
-        const isDisabled = isTruthy(properties.disabled);
-
         const [focused, setFocused] = useState(false);
         const { isMouseOver, handleMouseOut, handleMouseOver } = useTextInput({
             input: input as RefObject<HTMLInputElement>,
@@ -67,8 +65,8 @@ const TextInputRoot = forwardRef<HTMLInputElement, TextInputProperties>(
                 onMouseOut={handleMouseOut}
                 className={cn(
                     "relative flex h-12 items-center space-x-3 rounded-xl border px-4 transition",
-                    { "cursor-not-allowed": isDisabled },
-                    textInputDynamicClassnames({ hasError, isFocused: focused, isMouseOver, isDisabled }),
+                    { "cursor-not-allowed": disabled },
+                    textInputDynamicClassnames({ hasError, isFocused: focused, isMouseOver, isDisabled: disabled }),
                     wrapperClassName,
                     "dark:bg-theme-dark-900",
                 )}
@@ -86,6 +84,7 @@ const TextInputRoot = forwardRef<HTMLInputElement, TextInputProperties>(
                         className,
                     )}
                     ref={input}
+                    disabled={disabled}
                     {...properties}
                 />
 

diff --git a/resources/js/Components/Navbar/MobileMenu.tsx b/resources/js/Components/Navbar/MobileMenu.tsx
@@ -14,7 +14,6 @@ import { useEnvironmentContext } from "@/Contexts/EnvironmentContext";
 import { useTransactionSliderContext } from "@/Contexts/TransactionSliderContext";
 import { FormatFiat } from "@/Utils/Currency";
 import { formatAddress } from "@/Utils/format-address";
-import { isTruthy } from "@/Utils/is-truthy";
 import { TruncateMiddle } from "@/Utils/TruncateMiddle";
 
 interface Properties {
@@ -34,7 +33,7 @@ export const MobileMenu = ({
 }: Properties): JSX.Element => {
     const { t } = useTranslation();
 
-    const isAuthenticated = isTruthy(wallet);
+    const isAuthenticated = wallet !== null;
 
     const [isMenuOpen, setMenuOpen] = useState(false);
 

diff --git a/resources/js/Components/Skeleton/Skeleton.tsx b/resources/js/Components/Skeleton/Skeleton.tsx
@@ -1,22 +1,27 @@
 import SkeletonReact from "react-loading-skeleton";
 import { twMerge } from "tailwind-merge";
-import { isTruthy } from "@/Utils/is-truthy";
 
 interface SkeletonProperties {
     width?: string | number;
     height?: string | number;
     isCircle?: boolean;
-    className?: string;
     animated?: boolean;
+    className?: string;
 }
 
-export const Skeleton = ({ isCircle, width, height, className, animated = true }: SkeletonProperties): JSX.Element => (
+export const Skeleton = ({
+    width,
+    height,
+    animated = true,
+    isCircle = false,
+    className,
+}: SkeletonProperties): JSX.Element => (
     <SkeletonReact
         enableAnimation={animated}
         containerTestId="Skeleton"
         circle={isCircle}
         style={{ width, height }}
-        className={twMerge("z-0 dark:bg-theme-dark-800", !isTruthy(isCircle) ? "rounded-lg" : "", className)}
+        className={twMerge("z-0 dark:bg-theme-dark-800", !isCircle && "rounded-lg", className)}
         duration={1.3}
         containerClassName="flex w-auto max-w-full items-center leading-none h-full"
     />

diff --git a/resources/js/Pages/Articles/Show.tsx b/resources/js/Pages/Articles/Show.tsx
@@ -7,7 +7,6 @@ import { Img } from "@/Components/Image";
 import { DefaultLayout } from "@/Layouts/DefaultLayout";
 import { WaveSurferPlayer } from "@/Pages/Articles/Components/WaveSurferPlayer";
 import { ArticlesScroll } from "@/Pages/Collections/Components/Articles/ArticlesScroll";
-import { isTruthy } from "@/Utils/is-truthy";
 import { tp } from "@/Utils/TranslatePlural";
 
 interface Properties {
@@ -45,7 +44,7 @@ const ArticlesShow = ({ article, popularArticles }: Properties): JSX.Element =>
                                 />
                             </div>
                             <div className="w-full">
-                                {isTruthy(article.audioSrc) && (
+                                {article.audioSrc !== null && (
                                     <div className="mb-4 border-theme-secondary-300 dark:border-theme-dark-700 sm:border-b sm:pb-4">
                                         <WaveSurferPlayer url={article.audioSrc} />
                                     </div>

diff --git a/resources/js/Utils/assertions.ts b/resources/js/Utils/assertions.ts
@@ -1,5 +1,4 @@
 import { AssertionError } from "assert";
-import { isTruthy } from "@/Utils/is-truthy";
 
 // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
 export function assertUser(user?: App.Data.UserData | null): asserts user is App.Data.UserData {
@@ -12,7 +11,7 @@ export function assertUser(user?: App.Data.UserData | null): asserts user is App
 
 // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
 export function assertWallet(wallet?: App.Data.Wallet.WalletData | null): asserts wallet is App.Data.Wallet.WalletData {
-    if (!isTruthy<App.Data.Wallet.WalletData>(wallet)) {
+    if (wallet === undefined || wallet === null) {
         throw new AssertionError({
             message: `Expected 'wallet' to be App.Data.Wallet.WalletData, but received ${String(wallet)}`,
         });