برنامه Microposts: ویرایش پست‌ها و بروزرسانی State – بخش اول

امیدوارم تا این قسمت از کار خسته نشده باشید. در قسمت قبل کدها را به شکلی نوشتیم که با کلیک روی آیکون مداد، مقدار آن پست در فیلدهای فرم قرار گرفته و می توانیم آن ها را ویرایش کنیم اما این کار کافی نیست. اولین قدم ما در این جلسه تغییر دادن state برنامه است بنابراین ابتدا به فایل ui.js بروید و درون متد fillForm (در انتهای فایل) یک متد جدید را صدا بزنید. قرار است این متد مسئول تغییر state باشد:

  // Fill form to edit
  fillForm(data) {
    this.titleInput.value = data.title;
    this.bodyInput.value = data.body;
    this.idInput.value = data.id;

    this.changeFormState('edit');
  }

ما هنوز متد changeFormState را تعریف نکرده ایم بنابراین قدم بعدی تعریف آن است. من این تابع را دقیقا زیر همین کد تعریف می کنم:

// Change the form state
changeFormState(type) {
    if (type === 'edit') {

    } else {

    }
}

در واقع برنامه ما دو type یا حالت مختلف دارد: حالت عادی و پیش فرض که نوشتن پست ها است و حالت ویرایش یا edit state که برای ویرایش پست ها می باشد. به همین دلیل من چک کرده ام که اگر type از نوع edit بود (برنامه در حالت ویرایش قرار گرفته است) باید یک مجموعه کارهای خاص انجام شود و در غیر این صورت یک مجموعه کار دیگر را انجام خواهیم داد. اگر در حالت ویرایش یا edit بودیم باید دکمه Post it به یک دکمه دیگر تغییر پیدا کند (متن آن به update post و رنگ آن به نارنجی تغییر پیدا کند). بنابراین می توانیم بگوییم:

// Change the form state
changeFormState(type) {
    if (type === 'edit') {
        this.postSubmit.textContent = 'Update Post';
        this.postSubmit.className = 'post-submit btn btn-warning btn-block';
    } else {

    }
}

بر اساس چیزی که گفتم با استفاده از postSubmit.textContent می توانیم متن دکمه و با استفاده از postSubmit.className رنگ دکمه را تغییر می دهیم چرا که از بوت استرپ استفاده می کنیم و تغییر کلاس ها به سادگی باعث تغییر رنگ می شود. نکته ای که قابل توجه است این است که className تمام رشته کلاس را تغییر می دهد نه اینکه یک کلاس را اضافه کند. به همین دلیل برای تغییر کلاس btn-primary به btn-warning باید کلاس های دیگر و قبلی را نیز ذکر کنیم تا حذف نشوند. با این کار دکمه ما در حالت state تغییر می کند اما ممکن است کاربر قصد ویرایش نداشته باشد (مثلا اشتباها روی دکمه ویرایش کلیک کرده باشد) بنابراین نیاز به اضافه کردن یک دکمه کنسل نیز داریم:

// Change the form state
changeFormState(type) {
    if (type === 'edit') {
        this.postSubmit.textContent = 'Update Post';
        this.postSubmit.className = 'post-submit btn btn-warning btn-block';

        // Create cancel button
        const button = document.createElement('button');
        button.className = 'post-cancel btn btn-light btn-block';
        button.appendChild(document.createTextNode('Cancel Edit'));

    } else {

    }
}

ابتدا با دستور createElement یک عنصر جدید از نوع button می سازیم. در مرحله بعد با استفاده از className می توانیم کلاس های مورد نظر را به این دکمه تازه ساخته شده اضافه کنیم. سپس متن این دکمه را با استفاده از createTextNode تعیین می کنیم (متن آن را Cancel Edit گذاشته ام) و البته متن به دکمه appendChild خواهد شد. با این کار دکمه خودمان را ساخته ایم اما هنوز آن را وارد DOM نکرده ایم بنابراین:

// Change the form state
changeFormState(type) {
    if (type === 'edit') {
        this.postSubmit.textContent = 'Update Post';
        this.postSubmit.className = 'post-submit btn btn-warning btn-block';

        // Create cancel button
        const button = document.createElement('button');
        button.className = 'post-cancel btn btn-light btn-block';
        button.appendChild(document.createTextNode('Cancel Edit'));

        // Get parent
        const cardForm = document.querySelector('.card-form');
        // Get element to insert before
        const formEnd = document.querySelector('.form-end');
        // Insert cancel button
        cardForm.insertBefore(button, formEnd);
    } else {

    }
}

برای وارد کردن یک عنصر در DOM راه های مختلفی وجود دارد. روشی که من از آن استفاده کرده ام به این شرح است: ابتدا عنصر پدر را دریافت می کنیم (همان عنصری که کلاس card-form دارد) سپس عنصری را می خواهیم که دکمه را قبل از آن وارد DOM کنیم (همان form-end) و در نهایت با استفاده از متد insertBefore، دکمه و عنصر انتهایی را پاس می دهیم. حالا می توانید کدها را در مرورگر تست کنید. با کلیک روی دکمه ویرایش باید هم دکمه post it به update post تغییر کند و هم دکمه cancel edit برایتان ظاهر شود (البته هنوز کاری نمی کند).

حالا قسمت Else از این شرط باقی می ماند. از آنجایی که برنامه ما دو حالت بیشتر ندارد بنابراین هر چیزی که edit نباشد در حالت Add (نوشتن و اضافه کردن پست) خواهد بود بنابراین:

  // Change the form state
  changeFormState(type) {
    if(type === 'edit') {
      this.postSubmit.textContent = 'Update Post';
      this.postSubmit.className = 'post-submit btn btn-warning btn-block';

      // Create cancel button
      const button = document.createElement('button');
      button.className = 'post-cancel btn btn-light btn-block';
      button.appendChild(document.createTextNode('Cancel Edit'));

      // Get parent
      const cardForm = document.querySelector('.card-form');
      // Get element to insert before
      const formEnd = document.querySelector('.form-end');
      // Insert cancel button
      cardForm.insertBefore(button, formEnd);
    } else {
      this.postSubmit.textContent = 'Post It';
      this.postSubmit.className = 'post-submit btn btn-primary btn-block';
      // Remove cancel btn if it is there
      if(document.querySelector('.post-cancel')) {
        document.querySelector('.post-cancel').remove();
      }
      // Clear ID from hidden field
      this.clearIdInput();
      // Clear text
      this.clearFields();
    }
  }

در اولین قدم رنگ و متن دکمه را به حالت اولیه آن برگردانده ام. سپس باید دکمه cancel edit را حذف کنیم که این کار به راحتی با یک شرط if و دستور remove انجام می شود. در نهایت برای تمیز شدن کار clearIdInput و clearFields را صدا می زنیم. من متد clearIdInput را تعریف نکرده ام بنابراین آن را در قالب یک متد جداگانه تعریف می کنم:

  // Clear ID hidden value
  clearIdInput() {
    this.idInput.value = '';
  }

همانطور که می دانید ما از value یک فیلد مخفی با آیدی id برای شناسایی پست مورد نظر و ویرایش آن استفاده می کردیم:

<input type="hidden" id="id" value="">

در حالت پیش فرض این value خالی است اما با کلیک روی یکی از آیکون های ویرایش، id پست مورد نظر درون آن قرار می گیرد بنابراین کار متد clearIdInput پاک کردن این مقدار است. در قسمت بعد که قسمت پایانی این پروژه است، کدها را تکمیل می کنیم تا یک برنامه کاملا فعال و عالی داشته باشیم.