جستجوگر گیت هاب: نمایش پیام هشدار

جستجوگر گیت هاب: نمایش پیام هشدار

در قسمت قبل توانستیم دریافت اطلاعات کاربران را به خوبی پیاده سازی کنیم و حالا باید کدهای خودمان را گسترش بدهیم. من دوست دارم اول از همه کدهای پاک کردن نتایج را بنویسم چرا که اگر در حال حاضر مقدار تایپ شده در input را کاملا پاک کنید، آخرین نتیجه در صفحه باقی می ماند. مثلا اگر من حرف b را درون input قرار بدهم، کاربری که یوزرنیم او b باشد برای من نمایش داده می شود اما اگر b را حذف کنم دیگر آن کاربر از صفحه ی ما بیرون نمی رود.

انجام این کار بسیار آسان است، ابتدا به app.js بروید و سپس در قسمتی که clear profile را کامنت کرده ام کد زیر را بنویسید:

  } else {
    // Clear profile
    ui.clearProfile();
  }

در واقع یک متد به نام clearProfile را صدا زده ایم اما چنین متدی را هنوز کدنویسی نکرده ایم بنابراین به فایل ui.js رفته و این متد را اضافه می کنیم:

  // Clear profile
  clearProfile() {
    this.profile.innerHTML = '';
  }

اگر یادتان باشد profile همان div مخصوص نمایش اطلاعات کاربر بود و ما با روش بالا مقدار innerHTML آن را یک رشته ی خالی قرار داده ایم تا چیزی برای نمایش وجود نداشته باشد. اضافه کردن همین یک خط کد ساده، تجربه ی کاربری یا UX را به شدت بهبود می بخشد و کاربر حس می کند که کنترل برنامه را در دست دارد.

در مرحله ی بعد باید کاری کنیم که در صورت پیدا نشدن کاربر در گیت هاب، یک پیام هشدار به کاربر نمایش داده شود. در حال حاضر اگر کاربر مقداری را درون input تایپ کند که در گیت هاب وجود نداشته باشد (مثلا مقدار بی معنی asfhluasdkjl132) هیچ اتفاقی نمی افتد بلکه فقط یک خطا در کنسول مرورگر می گیریم. برای این کار ابتدا به app.js بروید و در قسمتی که کامنت show alert را قرار داده ام به شکل زیر کدنویسی کنید:

  if(userText !== ''){
   // Make http call
   github.getUser(userText)
    .then(data => {
      if(data.profile.message === 'Not Found') {
        // Show alert
        ui.showAlert('User not found', 'alert alert-danger');

در اینجا متدی به نام showAlert را از کلاس ui صدا زده ایم که دو پارامتر می گیرد: پیام نمایش داده شده برای کاربر و کلاس های بوت استرپ برای استایل دهی به پیام. ما هنوز چنین متدی را در ui.js تعریف نکرده ایم بنابراین به این فایل رفته و مثل من شروع کنید:

showAlert(message, className) {

}

کاری که می خواهیم در اینجا انجام دهیم بسیار شبیه به همان alert پروژه ی لیست کتاب است که در چند قسمت قبل انجام داده ایم. ابتدا یک div می سازیم:

showAlert(message, className) {
    // Create div
    const div = document.createElement('div');
}

همگی شما با دستور createElement آشنا هستید بنابراین من توضیح اضافی نمی دهم. سپس باید به این div کلاس های دلخواهمان را بدهیم. از آنجایی که کلاس را به صورت پارامتر دریافت کرده ایم کارمان راحت است:

showAlert(message, className) {
    // Create div
    const div = document.createElement('div');
    // Add classes
    div.className = className;
}

با اضافه شدن کلاس وارد مرحله ی بعد، یعنی اضافه کردن متن به این div می شویم. برای اضافه کردن متن به یک Div می توانیم از دستور appendChild برای چسباندن یک text node به div مورد نظر استفاده کنیم:

showAlert(message, className) {
    // Create div
    const div = document.createElement('div');
    // Add classes
    div.className = className;
    // Add text
    div.appendChild(document.createTextNode(message));
}

Message یا همان متن پیام را نیز به صورت پارامتر گرفته بودیم که در اینجا به createTextNode پاس داده ایم. در مرحله ی بعد باید این div جدید را وارد هر قسمتی کنیم که مورد نظر ما است و برای چنین کاری باید ابتدا آن قسمت مورد نظر را دریافت کنیم بنابراین:

showAlert(message, className) {
    // Create div
    const div = document.createElement('div');
    // Add classes
    div.className = className;
    // Add text
    div.appendChild(document.createTextNode(message));
    // Get parent
    const container = document.querySelector('.searchContainer');
}

کلاس searchContainer مخصوص قسمت input و نمایش اطلاعات کاربر است (به فایل HTML مراجعه کنید). ما می خواهیم هشدار خود را درون این عنصر وارد کنیم، برای همین آن را دریافت کرده ایم. در مرحله ی بعد input را دریافت می کنیم، چرا؟ به دلیل اینکه دستور insertBefore دو پارامتر می گیرد: یکی عنصر پدر (همان searchContainer) که هشدار ما درون آن نمایش داده می شود. پارامتر دوم نیز عنصری است که هشدار ما قبل از آن وارد می شود (از بین فرزندان درون searchContainer):

showAlert(message, className) {
    // Create div
    const div = document.createElement('div');
    // Add classes
    div.className = className;
    // Add text
    div.appendChild(document.createTextNode(message));
    // Get parent
    const container = document.querySelector('.searchContainer');
    // Get search box
    const search = document.querySelector('.search');
    // Insert alert
    container.insertBefore(div, search);
}

کدها را ذخیره کنید و به مرورگر برگردید. حالا شروع به تایپ کردن یک رشته ی بی معنی کنید. با تایپ رشته ی بی معنی باید با پیام های هشدار زیر روبرو شوید:

یعنی هر بار که یک حرف جدید در input بگذارید و کاربری در گیت هاب با آن رشته پیدا نشود یک پیام هشدار جدید نمایش داده می شود که اصلا خوب نیست و صفحه را شلوغ می کند. بنابراین باید کاری کنیم که پس از گذشتن مدتی (مثلا 3 ثانیه) این پیام های هشدار حذف شوند. همچنین باید فقط یک هشدار داشته باشیم نه اینکه برای هر کاربرِ پیدا نشده یک پیام جداگانه داشته باشیم.

راه حل تعریف کردن یک متد جدید برای بررسی این موضوع است. به فایل ui.js رفته و مثل من این متد جدید را تعریف کنید:

  // Clear alert message
  clearAlert() {
    const currentAlert = document.querySelector('.alert');

    if(currentAlert){
      currentAlert.remove();
    }
  }

این متد ابتدا یک ثابت به نام currentAlert می سازد که همان پیام هشدار ما است (کلاس alert را فقط برای پیام های هشدار قرار داده ایم). بنابراین اگر یک یا چند پیام هشدار داشته باشیم، آن پیام ها در currentAlert قرار می گیرند و مقدار currentAlert برابر با true خواهد بود چرا که هر مقداری غیر از پوچ یا null و صفر و... در جاوا اسکریپت برابر true هستند. حالا با یک شرط if صحیح بودن currentAlert را چک کرده ایم تا اگر currentAlert ای وجود داشت آن را حذف کنیم. حالا این متد را به خط اول متد showAlert اضافه می کنیم:

showAlert(message, className) {
    // Clear any remaining alerts
    this.clearAlert();
    // Create div
    const div = document.createElement('div');
    // Add classes
    div.className = className;
    // Add text
    div.appendChild(document.createTextNode(message));
    // Get parent
    const container = document.querySelector('.searchContainer');
    // Get search box
    const search = document.querySelector('.search');
    // Insert alert
    container.insertBefore(div, search);
}

حالا با تایپ کردن در مرورگر می توانید کد جدید را تست کنید. هر چه تایپ کنید نباید بیشتر از یک پیام alert داشته باشیم.

مورد دیگری که قرار بود به این کد اضافه کنیم، حذف شدن خودکار این پیام های هشدار بود چرا که در حال حاضر اگر پیام هشدار نمایش داده شود دیگر از بین نمی رود. برای انجام این کار می توانیم از setTimeout استفاده کنیم:

showAlert(message, className) {
    // Clear any remaining alerts
    this.clearAlert();
    // Create div
    const div = document.createElement('div');
    // Add classes
    div.className = className;
    // Add text
    div.appendChild(document.createTextNode(message));
    // Get parent
    const container = document.querySelector('.searchContainer');
    // Get search box
    const search = document.querySelector('.search');
    // Insert alert
    container.insertBefore(div, search);

    // Timeout after 3 sec
    setTimeout(() => {
        this.clearAlert();
    }, 3000);
}

بدین شکل پیام هشدار بعد از 3 ثانیه (3000 میلی ثانیه) و با استفاده از متد clearAlert خودمان حذف می شود. حالا کدهای ما بدون نقص کار می کنند. در قسمت بعد باید درخواست دیگر خودمان را برای دریافت repo های هر کاربر به گیت هاب ارسال کنیم و روی این مسئله تمرکز خواهیم کرد.