Port List functionality to TypeScript

app/javascript/packs/application.ts

@@ -2,8 +2,10 @@ import start from 'retrospring/common';
 import initAnswerbox from 'retrospring/features/answerbox/index';
 import initInbox from 'retrospring/features/inbox/index';
 import initUser from 'retrospring/features/user';
+import initLists from 'retrospring/features/lists';
 
 start();
 document.addEventListener('turbolinks:load', initAnswerbox);
 document.addEventListener('turbolinks:load', initInbox);
-document.addEventListener('DOMContentLoaded', initUser);
+document.addEventListener('DOMContentLoaded', initUser);
+document.addEventListener('DOMContentLoaded', initLists);

app/javascript/packs/legacy.coffee

@@ -25,7 +25,6 @@ import I18n from '../legacy/i18n'
 import '../legacy/answerbox'
 import '../legacy/questionbox'
 import '../legacy/inbox'
-import '../legacy/lists'
 import '../legacy/memes'
 import '../legacy/notifications'
 import '../legacy/pagination'

app/javascript/retrospring/features/lists/create.ts

@@ -0,0 +1,34 @@
+import Rails from '@rails/ujs';
+import I18n from '../../../legacy/i18n';
+
+export function createListHandler(event: Event): void {
+  const button = event.target as HTMLButtonElement;
+  const input = document.querySelector<HTMLInputElement>('input#new-list-name');
+
+  Rails.ajax({
+    url: '/ajax/create_list',
+    type: 'POST',
+    data: new URLSearchParams({
+      name: input.value,
+      user: button.dataset.user
+    }).toString(),
+    success: (data) => {
+      if (data.success) {
+        document.querySelector('#lists-list ul.list-group').insertAdjacentHTML('beforeend', data.render);
+      }
+
+      window['showNotification'](data.message, data.success);
+    },
+    error: (data, status, xhr) => {
+      console.log(data, status, xhr);
+      window['showNotification'](I18n.translate('frontend.error.message'), false);
+    }
+  });
+}
+
+export function createListInputHandler(event: KeyboardEvent): void {
+  if (event.which === 13) {
+    event.preventDefault();
+    document.querySelector<HTMLButtonElement>('button#create-list').click();
+  }
+}

app/javascript/retrospring/features/lists/destroy.ts

@@ -0,0 +1,43 @@
+import Rails from '@rails/ujs';
+import swal from 'sweetalert';
+import I18n from '../../../legacy/i18n';
+
+export function destroyListHandler(event: Event): void {
+  event.preventDefault();
+  const button = event.target as HTMLButtonElement;
+  const list = button.dataset.list;
+
+  swal({
+    title: I18n.translate('frontend.list.confirm.title'),
+    text: I18n.translate('frontend.list.confirm.text'),
+    type: "warning",
+    showCancelButton: true,
+    confirmButtonColor: "#DD6B55",
+    confirmButtonText: I18n.translate('views.actions.delete'),
+    cancelButtonText: I18n.translate('views.actions.cancel'),
+    closeOnConfirm: true 
+  }, () => {
+    Rails.ajax({
+      url: '/ajax/destroy_list',
+      type: 'POST',
+      data: new URLSearchParams({
+        list: list
+      }).toString(),
+      success: (data) => {
+        if (data.success) {
+          const element = document.querySelector(`li.list-group-item#list-${list}`);
+
+          if (element) {
+            element.remove();
+          }
+        }
+
+        window['showNotification'](data.message, data.success);
+      },
+      error: (data, status, xhr) => {
+        console.log(data, status, xhr);
+        window['showNotification'](I18n.translate('frontend.error.message'), false);
+      }
+    });
+  });
+}

app/javascript/retrospring/features/lists/index.ts

@@ -0,0 +1,11 @@
+import { on } from 'retrospring/utilities/on';
+import { createListHandler, createListInputHandler } from './create';
+import { destroyListHandler } from './destroy';
+import { listMembershipHandler } from './membership';
+
+export default (): void => {
+  on('click', 'input[type=checkbox][name=gm-list-check]', listMembershipHandler);
+  on('click', 'button#create-list', createListHandler);
+  on('click', 'a#delete-list', destroyListHandler);
+  on('keyup', 'input#new-list-name', createListInputHandler);
+}

app/javascript/retrospring/features/lists/membership.ts

@@ -0,0 +1,37 @@
+import Rails from '@rails/ujs';
+import I18n from '../../../legacy/i18n';
+
+export function listMembershipHandler(event: Event): void {
+  const checkbox = event.target as HTMLInputElement;
+  const list = checkbox.dataset.list;
+  let memberCount = Number(document.querySelector(`span#${list}-members`).innerHTML);
+
+  checkbox.setAttribute('disabled', 'disabled');
+
+  memberCount += checkbox.checked ? 1 : -1;
+
+  Rails.ajax({
+    url: '/ajax/list_membership',
+    type: 'POST',
+    data: new URLSearchParams({
+      list: list,
+      user: checkbox.dataset.user,
+      add: String(checkbox.checked)
+    }).toString(),
+    success: (data) => {
+      if (data.success) {
+        checkbox.checked = data.checked;
+        document.querySelector(`span#${list}-members`).innerHTML = memberCount.toString();
+      }
+
+      window['showNotification'](data.message, data.success);
+    },
+    error: (data, status, xhr) => {
+      console.log(data, status, xhr);
+      window['showNotification'](I18n.translate('frontend.error.message'), false);
+    },
+    complete: () => {
+      checkbox.removeAttribute('disabled');
+    }
+  });
+}