دکمه های خود را شارژ کنید: ساده کردن حالت بارگیری با دیگ بخار کمتر

به عنوان توسعه دهندگان وب، همه ما اهمیت دکمه ها را در برنامه های خود می دانیم. دکمه‌ها چه ارسال فرم، راه‌اندازی یک اقدام یا برقراری تماس API باشد، دکمه‌ها نقش مهمی در ایجاد تعاملات کاربر دارند. با این حال، وقتی نوبت به افزودن کد ناهمزمان به کلیک روی دکمه‌ها می‌رسد، مانند انجام یک تماس API و انتظار برای نتیجه، تمایل داریم که تنبل شویم یا فراموش کنیم آن را اضافه کنیم.

مشکل برای کاربران

آیا تا به حال با موقعیتی مواجه شده اید که در هنگام انتظار برای تکمیل عملیات ناهمزمان، دکمه گیر کرده یا پاسخ نمی دهد؟ برای بهترین ما اتفاق می افتد. در گرماگرم کدنویسی، به راحتی فراموش می کنیم که حالت بارگذاری لازم را به دکمه های خود اضافه کنیم و کاربران را سردرگم و ناامید می کند.

در این مقاله، ما یک رویکرد ساده و در عین حال قدرتمند را برای بهبود عملکرد دکمه‌ها، به‌ویژه تمرکز بر ساده‌سازی حالت بارگذاری، بررسی می‌کنیم. اگرچه ما از React به عنوان نمونه چارچوب خود استفاده خواهیم کرد، این تکنیک ها را می توان در هر چارچوب توسعه وب اعمال کرد.

اضافه کردن حالت بارگذاری به دکمه ها

بیایید با درک گردش کار معمولی مربوط به افزودن کد ناهمزمان و به طور مداوم در حال اجرا به یک کلیک شروع کنیم:

1. کاربر روی دکمه کلیک می کند و عمل را آغاز می کند.
2. حالت بارگذاری را روی true قرار می دهیم که نشان می دهد دکمه در حال انجام است.
3. ما شروع به اجرای کد ناهمزمان می کنیم، مانند برقراری تماس API.
4. پس از اتمام عملیات، وضعیت بارگذاری را به false به روز می کنیم.

با این حال، هر بار که نیاز به گنجاندن این قابلیت داشته باشیم، متوجه می‌شویم که کد تکراری دیگ بخار می‌نویسیم. علاوه بر این، نادیده گرفتن وضعیت بارگیری می تواند منجر به تجربه کاربری ضعیف شود.

بارگیری دکمه ساده

برای رسیدگی به این چالش‌ها و آسان‌تر کردن تجربه بارگیری دکمه‌ها، به یک API بصری و کد دیگ بخار کمتری نیاز داریم.

بیایید نگاهی به یک قطعه کد دکمه معمولی در React بیندازیم:

import { Button } from 'Button';

const APIButton = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleClick = () => {
    setLoading(true);
    setError('');
    submitFormToBackend()
      .then(() => {
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
      });
  }

  return (
    <>
      <Button
        onClick={handleClick}
        className={`${loading && 'btn-loading'} ${error && 'btn-error'}`}
        disabled={loading}
      >
        Label
      </Button>
      {error && <div>{error}</div>}
    </>
  );
}

این کد یک الگوی رایج را نشان می دهد که در آن ما به صورت دستی حالت های بارگیری و خطا را هنگام مدیریت کلیک دکمه مدیریت می کنیم. با این حال، به نظر می رسد بیش از حد دیگ بخار است (من برای نوشتن چند کلید اضافی تنبل هستم).

بارگیری دکمه ساده با یک مؤلفه پیشرفته

برای سهولت در مدیریت وضعیت بارگذاری دکمه، می‌توانیم خود مؤلفه دکمه را تغییر دهیم. هدف این نیست که کد دکمه خود را به هم ریخته، بلکه آن را به گونه ای تکمیل کنیم که همچنان کد ما قابل خواندن و نگهداری باشد.

تصور کنید که دکمه را به عنوان یک فیلد ورودی با حالت های غیرفعال، مشغول و خطا در نظر بگیرید.

بیایید مولفه دکمه را برای مدیریت بارگیری داخلی و ساده کردن کد خود تقویت کنیم:

interface ButtonProps {
  loading?: boolean;
  disabled?: boolean;
  onClick?: (e: MouseEvent<HTMLButtonElement>) => (void | Promise<void>);
}

export const Button: FunctionComponent<ButtonProps> = (props) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
    const clickResult = props.onClick?.(e);

    // If our onClick returns a Promise, handle the loading states
    if (clickResult instanceof Promise) {
      setLoading(true);
      setError('');

      clickResult
        .catch((err) => {
          if (err.status === 403) {
            setError('Unauthorized');
          }
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }

  const buttonClasses = classnames('btn', {
    'btn-loading': loading,
    'btn-error': !!error
  });

  let buttonEl = (
    <button
      disabled={props.disabled || loading}
      className={buttonClasses}
      role={loading ? "progressbar" : ""}
    >
      {props.children}
    </button>
  );

  if (error) {
    buttonEl = (
      <Tooltip content={error} color="danger">
        {buttonEl}
      </Tooltip>
    );
  }

  return buttonEl;
}

با استفاده از این مولفه دکمه پیشرفته، ما یک روش قدرتمندتر و شهودی برای مدیریت وضعیت های بارگیری و خطا داریم. کامپوننت به صورت داخلی از وضعیت بارگذاری مراقبت می کند و به ما امکان می دهد روی نوشتن کد تمیزتر و مختصرتر تمرکز کنیم.

اجرای دکمه سوپرشارژ

اکنون، بیایید ببینیم که چگونه دکمه جدید و بهبود یافته ما می تواند کد ما را ساده کند:

import { Button } from 'Button';

const APIButton = () => {
  const handleClick = () => {
    return submitFormToBackend()
      .catch((err) => {
        if (err.status === 403) {
          throw new Error('Unauthorized');
        }
      });
  };

  return (
    <Button onClick={handleClick}>
      Label
    </Button>
  );
}

به سادگی با برگرداندن قول از ما handleClick تابع، ما می توانیم بدون زحمت حالت های بارگذاری و خطا را ترکیب کنیم. این یک کلمه اضافی است که به طور قابل توجهی کد ما را ساده می کند و تجربه کاربر را بهبود می بخشد.

کنترل وضعیت های بارگذاری و خطا

مؤلفه دکمه وعده داده شده که ساخته ایم به ما قدرت می دهد تا سناریوهای مختلف را به طور مؤثر مدیریت کنیم:

1. اگر نمی‌خواهیم وضعیت بارگذاری را بدون وعده نشان دهیم، می‌توانیم به سادگی بازگشت وعده را از تابع handleClick حذف کنیم.
2. اگر بخواهیم وضعیت بارگذاری را نمایش دهیم اما بدون راهنمایی ابزار خطا، می‌توانیم وعده را برگردانیم اما خطا را بگیریم و از گیرکردن مؤلفه Button جلوگیری کنیم.

نتیجه

در این مقاله، نحوه شارژ دکمه‌های خود را با ساده‌سازی حالت بارگذاری بررسی کرده‌ایم. با تقویت مؤلفه دکمه ما، می‌توانیم فرآیند را ساده‌سازی کنیم، کد دیگ بخار را کاهش دهیم و تجربه کاربری روان‌تری را ارائه کنیم.

اجازه دهید بحث را ادامه دهیم:

• آیا مشکلاتی وجود دارد که بتوانید با این رویکرد پیدا کنید؟
• در مورد مینی هک های مورد علاقه خود که روند توسعه شما را آسان کرده است به من اطلاع دهید.